databinding - AppDaddy-Software-Solutions-Inc/framework-markup-language GitHub Wiki

Databinding is perhaps the cornerstone of Framework Markup Langauge and one that sets it apart from many of its compiled counterparts. It is used in many instances, from getting and setting data, to changing the appearance and funtion of display widgets.

Bound data is always defined inside of curley braces {} along with the id of the widget and the attribute that is being bound to. This is often referred to as dot notation.

→ {@scope.id.attribute.node1.node2 ... :offset}

where

• @ (Optional) indicates 2-way binding. When the widget target attribute being bound to changes, the source attribute is automatically changed and when the source attribute changes, the bound target attribute is automatically changed.

• scope (Optional) is the id of the target scope. If not supplied, FML walks up the scope tree to find the widget with the specified id.

• id (Required) is the id of target widget. In cases where the widget is referencing its own attributes, for clarity, you can use the this qualifier in place of id. To refer to the id of the widget's parent, you can use the *parent qualifier in place of the parent's id.

• attribute (Optional) is the id of the target attribute. If attribute is omitted, it defualts to the value attribute, so specifying *{id} is equivalent to *{id.value}.

• node1.node2 ... (Optional) is used to reference a widget's json data attribute to specify specific nodes within the json tree structure.

• offset (Optional) is used only when the attribute being bound is a list. In these instances, offset represents the position in the list. If not supplied it defaults to 0, the first element.

<VAR id="v1" value="hello world"/>
<TEXT value="The value of v1 is {v1}, same as using {v1.value}"/>

See it in Action

<FML color="{radio1}">  
  <RADIO id="radio1" layout="row" value="red">
      <OPTION label="red"/>
      <OPTION label="green"/>
      <OPTION label="blue"/>
   </RADIO>  
</FML>

See it in Action

<TEXT value="Screen size is ({SYSTEM.screenwidth},{SYSTEM.screenheight}}"/>

See it in Action

• Scope
• Widget
• Evaluations
• Events