OTUI documentation

[Zbizu]

Problem: There is no documentation regarding UI in modules. New developers are very lost and it's very hard to get into writing modules without having some kind of mentor. Those who learn things by themselves have no motivation to give back.

Issue goal: I want to build some kind of documentation for new users to get into coding modules faster and accelerate coding speed for intermediate users. With good documentation and examples, modules would be made faster and people would be more prone to share their work because their investment would be lower than current. More activity around the client and better documentation would bring us more contributors that would eventually fix other problems.

Information needed to begin: Where I can find otui attributes and their supported values?

also, can I start wiki in this repo?

[diath]

You should be able to tell the supported value types based on these, also I don't think the Wiki access is currently restricted.

otclient/src/framework/ui/uiwidgetbasestyle.cpp

Lines 72 to 333 in 63f5351

	for(const OTMLNodePtr& node : styleNode->children()) {
	if(node->tag() == "color")
	setColor(node->value<Color>());
	else if(node->tag() == "x")
	setX(node->value<int>());
	else if(node->tag() == "y")
	setY(node->value<int>());
	else if(node->tag() == "pos")
	setPosition(node->value<Point>());
	else if(node->tag() == "width")
	setWidth(node->value<int>());
	else if(node->tag() == "height")
	setHeight(node->value<int>());
	else if(node->tag() == "rect")
	setRect(node->value<Rect>());
	else if(node->tag() == "background")
	setBackgroundColor(node->value<Color>());
	else if(node->tag() == "background-color")
	setBackgroundColor(node->value<Color>());
	else if(node->tag() == "background-offset-x")
	setBackgroundOffsetX(node->value<int>());
	else if(node->tag() == "background-offset-y")
	setBackgroundOffsetY(node->value<int>());
	else if(node->tag() == "background-offset")
	setBackgroundOffset(node->value<Point>());
	else if(node->tag() == "background-width")
	setBackgroundWidth(node->value<int>());
	else if(node->tag() == "background-height")
	setBackgroundHeight(node->value<int>());
	else if(node->tag() == "background-size")
	setBackgroundSize(node->value<Size>());
	else if(node->tag() == "background-rect")
	setBackgroundRect(node->value<Rect>());
	else if(node->tag() == "icon")
	setIcon(stdext::resolve_path(node->value(), node->source()));
	else if(node->tag() == "icon-source")
	setIcon(stdext::resolve_path(node->value(), node->source()));
	else if(node->tag() == "icon-color")
	setIconColor(node->value<Color>());
	else if(node->tag() == "icon-offset-x")
	setIconOffsetX(node->value<int>());
	else if(node->tag() == "icon-offset-y")
	setIconOffsetY(node->value<int>());
	else if(node->tag() == "icon-offset")
	setIconOffset(node->value<Point>());
	else if(node->tag() == "icon-width")
	setIconWidth(node->value<int>());
	else if(node->tag() == "icon-height")
	setIconHeight(node->value<int>());
	else if(node->tag() == "icon-size")
	setIconSize(node->value<Size>());
	else if(node->tag() == "icon-rect")
	setIconRect(node->value<Rect>());
	else if(node->tag() == "icon-clip")
	setIconClip(node->value<Rect>());
	else if(node->tag() == "icon-align")
	setIconAlign(Fw::translateAlignment(node->value()));
	else if(node->tag() == "opacity")
	setOpacity(node->value<float>());
	else if(node->tag() == "rotation")
	setRotation(node->value<float>());
	else if(node->tag() == "enabled")
	setEnabled(node->value<bool>());
	else if(node->tag() == "visible")
	setVisible(node->value<bool>());
	else if(node->tag() == "checked")
	setChecked(node->value<bool>());
	else if(node->tag() == "draggable")
	setDraggable(node->value<bool>());
	else if(node->tag() == "on")
	setOn(node->value<bool>());
	else if(node->tag() == "focusable")
	setFocusable(node->value<bool>());
	else if(node->tag() == "auto-focus")
	setAutoFocusPolicy(Fw::translateAutoFocusPolicy(node->value()));
	else if(node->tag() == "phantom")
	setPhantom(node->value<bool>());
	else if(node->tag() == "size")
	setSize(node->value<Size>());
	else if(node->tag() == "fixed-size")
	setFixedSize(node->value<bool>());
	else if(node->tag() == "clipping")
	setClipping(node->value<bool>());
	else if(node->tag() == "border") {
	auto split = stdext::split(node->value(), " ");
	if(split.size() == 2) {
	setBorderWidth(stdext::safe_cast<int>(split[0]));
	setBorderColor(stdext::safe_cast<Color>(split[1]));
	} else
	throw OTMLException(node, "border param must have its width followed by its color");
	}
	else if(node->tag() == "border-width")
	setBorderWidth(node->value<int>());
	else if(node->tag() == "border-width-top")
	setBorderWidthTop(node->value<int>());
	else if(node->tag() == "border-width-right")
	setBorderWidthRight(node->value<int>());
	else if(node->tag() == "border-width-bottom")
	setBorderWidthBottom(node->value<int>());
	else if(node->tag() == "border-width-left")
	setBorderWidthLeft(node->value<int>());
	else if(node->tag() == "border-color")
	setBorderColor(node->value<Color>());
	else if(node->tag() == "border-color-top")
	setBorderColorTop(node->value<Color>());
	else if(node->tag() == "border-color-right")
	setBorderColorRight(node->value<Color>());
	else if(node->tag() == "border-color-bottom")
	setBorderColorBottom(node->value<Color>());
	else if(node->tag() == "border-color-left")
	setBorderColorLeft(node->value<Color>());
	else if(node->tag() == "margin-top")
	setMarginTop(node->value<int>());
	else if(node->tag() == "margin-right")
	setMarginRight(node->value<int>());
	else if(node->tag() == "margin-bottom")
	setMarginBottom(node->value<int>());
	else if(node->tag() == "margin-left")
	setMarginLeft(node->value<int>());
	else if(node->tag() == "margin") {
	std::string marginDesc = node->value();
	std::vector<std::string> split = stdext::split(marginDesc, " ");
	if(split.size() == 4) {
	setMarginTop(stdext::safe_cast<int>(split[0]));
	setMarginRight(stdext::safe_cast<int>(split[1]));
	setMarginBottom(stdext::safe_cast<int>(split[2]));
	setMarginLeft(stdext::safe_cast<int>(split[3]));
	} else if(split.size() == 3) {
	int marginTop = stdext::safe_cast<int>(split[0]);
	int marginHorizontal = stdext::safe_cast<int>(split[1]);
	int marginBottom = stdext::safe_cast<int>(split[2]);
	setMarginTop(marginTop);
	setMarginRight(marginHorizontal);
	setMarginBottom(marginBottom);
	setMarginLeft(marginHorizontal);
	} else if(split.size() == 2) {
	int marginVertical = stdext::safe_cast<int>(split[0]);
	int marginHorizontal = stdext::safe_cast<int>(split[1]);
	setMarginTop(marginVertical);
	setMarginRight(marginHorizontal);
	setMarginBottom(marginVertical);
	setMarginLeft(marginHorizontal);
	} else if(split.size() == 1) {
	int margin = stdext::safe_cast<int>(split[0]);
	setMarginTop(margin);
	setMarginRight(margin);
	setMarginBottom(margin);
	setMarginLeft(margin);
	}
	}
	else if(node->tag() == "padding-top")
	setPaddingTop(node->value<int>());
	else if(node->tag() == "padding-right")
	setPaddingRight(node->value<int>());
	else if(node->tag() == "padding-bottom")
	setPaddingBottom(node->value<int>());
	else if(node->tag() == "padding-left")
	setPaddingLeft(node->value<int>());
	else if(node->tag() == "padding") {
	std::string paddingDesc = node->value();
	std::vector<std::string> split = stdext::split(paddingDesc, " ");
	if(split.size() == 4) {
	setPaddingTop(stdext::safe_cast<int>(split[0]));
	setPaddingRight(stdext::safe_cast<int>(split[1]));
	setPaddingBottom(stdext::safe_cast<int>(split[2]));
	setPaddingLeft(stdext::safe_cast<int>(split[3]));
	} else if(split.size() == 3) {
	int paddingTop = stdext::safe_cast<int>(split[0]);
	int paddingHorizontal = stdext::safe_cast<int>(split[1]);
	int paddingBottom = stdext::safe_cast<int>(split[2]);
	setPaddingTop(paddingTop);
	setPaddingRight(paddingHorizontal);
	setPaddingBottom(paddingBottom);
	setPaddingLeft(paddingHorizontal);
	} else if(split.size() == 2) {
	int paddingVertical = stdext::safe_cast<int>(split[0]);
	int paddingHorizontal = stdext::safe_cast<int>(split[1]);
	setPaddingTop(paddingVertical);
	setPaddingRight(paddingHorizontal);
	setPaddingBottom(paddingVertical);
	setPaddingLeft(paddingHorizontal);
	} else if(split.size() == 1) {
	int padding = stdext::safe_cast<int>(split[0]);
	setPaddingTop(padding);
	setPaddingRight(padding);
	setPaddingBottom(padding);
	setPaddingLeft(padding);
	}
	}
	// layouts
	else if(node->tag() == "layout") {
	std::string layoutType;
	if(node->hasValue())
	layoutType = node->value();
	else
	layoutType = node->valueAt<std::string>("type", "");
	if(!layoutType.empty()) {
	UILayoutPtr layout;
	if(layoutType == "horizontalBox")
	layout = UIHorizontalLayoutPtr(new UIHorizontalLayout(static_self_cast<UIWidget>()));
	else if(layoutType == "verticalBox")
	layout = UIVerticalLayoutPtr(new UIVerticalLayout(static_self_cast<UIWidget>()));
	else if(layoutType == "grid")
	layout = UIGridLayoutPtr(new UIGridLayout(static_self_cast<UIWidget>()));
	else if(layoutType == "anchor")
	layout = UIAnchorLayoutPtr(new UIAnchorLayout(static_self_cast<UIWidget>()));
	else
	throw OTMLException(node, "cannot determine layout type");
	setLayout(layout);
	}
	if(node->hasChildren())
	m_layout->applyStyle(node);
	}
	// anchors
	else if(stdext::starts_with(node->tag(), "anchors.")) {
	UIWidgetPtr parent = getParent();
	if(!parent) {
	if(m_firstOnStyle)
	throw OTMLException(node, "cannot create anchor, there is no parent widget!");
	else
	continue;
	}
	UILayoutPtr layout = parent->getLayout();
	UIAnchorLayoutPtr anchorLayout;
	if(layout->isUIAnchorLayout())
	anchorLayout = layout->static_self_cast<UIAnchorLayout>();
	if(!anchorLayout)
	throw OTMLException(node, "cannot create anchor, the parent widget doesn't use anchor layout!");
	std::string what = node->tag().substr(8);
	if(what == "fill") {
	fill(node->value());
	} else if(what == "centerIn") {
	centerIn(node->value());
	} else {
	Fw::AnchorEdge anchoredEdge = Fw::translateAnchorEdge(what);
	if(node->value() == "none") {
	removeAnchor(anchoredEdge);
	} else {
	std::vector<std::string> split = stdext::split(node->value(), ".");
	if(split.size() != 2)
	throw OTMLException(node, "invalid anchor description");
	std::string hookedWidgetId = split[0];
	Fw::AnchorEdge hookedEdge = Fw::translateAnchorEdge(split[1]);
	if(anchoredEdge == Fw::AnchorNone)
	throw OTMLException(node, "invalid anchor edge");
	if(hookedEdge == Fw::AnchorNone)
	throw OTMLException(node, "invalid anchor target edge");
	addAnchor(anchoredEdge, hookedWidgetId, hookedEdge);
	}
	}
	}
	}

otclient/src/framework/ui/uiwidgetimage.cpp

Lines 36 to 75 in 63f5351

	for(const OTMLNodePtr& node : styleNode->children()) {
	if(node->tag() == "image-source")
	setImageSource(stdext::resolve_path(node->value(), node->source()));
	else if(node->tag() == "image-offset-x")
	setImageOffsetX(node->value<int>());
	else if(node->tag() == "image-offset-y")
	setImageOffsetY(node->value<int>());
	else if(node->tag() == "image-offset")
	setImageOffset(node->value<Point>());
	else if(node->tag() == "image-width")
	setImageWidth(node->value<int>());
	else if(node->tag() == "image-height")
	setImageHeight(node->value<int>());
	else if(node->tag() == "image-size")
	setImageSize(node->value<Size>());
	else if(node->tag() == "image-rect")
	setImageRect(node->value<Rect>());
	else if(node->tag() == "image-clip")
	setImageClip(node->value<Rect>());
	else if(node->tag() == "image-fixed-ratio")
	setImageFixedRatio(node->value<bool>());
	else if(node->tag() == "image-repeated")
	setImageRepeated(node->value<bool>());
	else if(node->tag() == "image-smooth")
	setImageSmooth(node->value<bool>());
	else if(node->tag() == "image-color")
	setImageColor(node->value<Color>());
	else if(node->tag() == "image-border-top")
	setImageBorderTop(node->value<int>());
	else if(node->tag() == "image-border-right")
	setImageBorderRight(node->value<int>());
	else if(node->tag() == "image-border-bottom")
	setImageBorderBottom(node->value<int>());
	else if(node->tag() == "image-border-left")
	setImageBorderLeft(node->value<int>());
	else if(node->tag() == "image-border")
	setImageBorder(node->value<int>());
	else if(node->tag() == "image-auto-resize")
	setImageAutoResize(node->value<bool>());
	}

otclient/src/framework/ui/uiwidgettext.cpp

Lines 61 to 80 in 63f5351

	for(const OTMLNodePtr& node : styleNode->children()) {
	if(node->tag() == "text")
	setText(node->value());
	else if(node->tag() == "text-align")
	setTextAlign(Fw::translateAlignment(node->value()));
	else if(node->tag() == "text-offset")
	setTextOffset(node->value<Point>());
	else if(node->tag() == "text-wrap")
	setTextWrap(node->value<bool>());
	else if(node->tag() == "text-auto-resize")
	setTextAutoResize(node->value<bool>());
	else if(node->tag() == "text-horizontal-auto-resize")
	setTextHorizontalAutoResize(node->value<bool>());
	else if(node->tag() == "text-vertical-auto-resize")
	setTextVerticalAutoResize(node->value<bool>());
	else if(node->tag() == "text-only-upper-case")
	setTextOnlyUpperCase(node->value<bool>());
	else if(node->tag() == "font")
	setFont(node->value());
	}