Widgets - AppDaddy-Software-Solutions-Inc/framework-markup-language GitHub Wiki
Widgets are the building block of Framework Markup Language.
Every page, or template, is composed of a hierarchy of widgets that collectively define the UI and make up the Widget Tree. Everything in Framework Markup Language is a widget, be it for display, connectivity, data retrieval or manipulation.
Templates typically use the <FML/> widget as the primary parent widget and are written using xml syntax.
Each widget element has an opening "<" tag, a name and closing ">" tag. The widget name is always uppercase.
For example, the <BOX/> widget, in its simplest case, would be defined in markup as
<BOX/>If the widget has one or more children, the tag's name is defined before and after its children.
For example, lets assume we want to place <TEXT/> in the <BOX/> from the example above. That might look something like:
<BOX>
<TEXT value="hello world"/>
</BOX>Notice that in this example, <TEXT/> has a single attribute called value. That takes us to our next topic, widget attributes.
Widget attributes are used to customize the widgets appearance, state, and interaction with other widgets.
Attributes are always defined using lowercase. This avoids conflicts with elements with similar names and makes the code more readable.
Attribute values are somewhat restrictive in that only one attribute by the same name can be defined for the element to which it applies. Attribute values are also restrictive in that special characters cannot be used unless they are escaped or encoded.
One workaround is this rule is to define the attribute as an element and wrap its value using the cdata contruct. This is especially useful for attributes that contain one or more special characters.
For example, if we wanted to display hello & world, we could encode its as:
<BOX>
<TEXT value="hello & world"/>
</BOX>or define its value as an element and wrap the contexts in cdata as follows:
<BOX>
<TEXT>
<value><![CDATA[hello & world]]></value>
</TEXT>
</BOX>Every widget in Framework Markup Language has an id, either defined as an attribute in markup, or automatically assigned by the system.
The id is case sensitive, must start with a letter, and contain only letters, numbers or the underscore (_) character. This is important in order to avoid contention with binding syntax.
For example, lets assume we wanted to refer to the box as box1. That would be accomlished in markup as follows:
<BOX id="box1" color="red">
<TEXT value="hello world"/>
</BOX>Widget id's must be unique within their respective scope. If duplicate id's are detected, an error will be written to the console and to the log warning the developer.
Widget id's are used in data binding for controlling the appearance and function of the widget.