The complete guide to MXML in the Feathers SDK
The Feathers SDK supports using MXML to declaratively layout user interfaces at compile time. MXML provides a number of features to reduce boilerplate ActionScript code and make user interface code more readable.
Add children to containers
With only a quick glance at MXML code, we can easily recognize the relationship between a component and its parent container. Adding a child to a container is as simple as nesting an XML element inside another.
<f:LayoutGroup>
<f:Slider/>
</f:LayoutGroup>
Set properties on components
A component's properties may be set in one of two ways. First, we can set properties using XML attributes:
<f:Slider minimum="0" maximum="100" value="10"/>
Simple types like Number
, int
, uint
, String
, and Boolean
can be set this way.
Alternatively, we can pass more complex values to a property by referencing it using a child XML element:
<f:LayoutGroup>
<f:layout>
<f:HorizontalLayout padding="10"/>
</f:layout>
<f:Slider minimum="0" maximum="100" value="10"/>
</f:LayoutGroup>
Here, we create a new instance of HorizontalLayout
, set one of its properties, and then we pass it to the layout
property.
Add event listeners
Similar to setting properties, we can listen for events by referencing the event type as an XML attribute:
<f:Slider minimum="0" maximum="100" value="10"
change="slider_changeHandler(event)"/>
We've added an event listener for Event.CHANGE
to the Slider
. In the next section, we'll learn how to write the ActionScript code for this event listener.
Include ActionScript code inside an MXML component
In the previous example, we listened for an event. Let's create the event listener function using ActionScript. We can add an <fx:Script>
block to our MXML component to include ActionScript code:
<fx:Script><![CDATA[
private function button_triggeredHandler(event:Event):void
{
trace( "slider value changed!" );
}
]]></fx:Script>
Reference MXML components in ActionScript
If we want to access the value
property of the Slider
in our event listener, we can give the Slider
an id.
<f:Slider id="slider"
minimum="0" maximum="100" value="10"
change="slider_changeHandler(event)"/>
Now, we can reference the Slider
that we created in MXML like a member variable on an ActionScript class:
private function button_triggeredHandler(event:Event):void
{
trace( "slider value changed! " + this.slider.value );
}
Bind data to properties
Data binding can save us time by skipping the boilerplate code for setting up event listeners and setting properties.
<f:LayoutGroup>
<f:layout>
<f:HorizontalLayout/>
</f:layout>
<f:Slider id="slider" minimum="0" maximum="100" value="10"/>
<f:Label text="{slider.value}"/>
</f:LayoutGroup>
Now, when the slider's value
property changes, we display the value in a label.
Create inline sub-components with <fx:Component>
When sub-components require a factory, we can define it in the MXML using <fx:Component>
instead of writing the factory as a function in ActionScript code:
<f:List>
<f:itemRendererFactory>
<fx:Component>
<f:DefaultListItemRenderer labelField="text"/>
</fx:Component>
</f:itemRendererFactory>
<f:dataProvider>
<f:ListCollection>
<fx:Object text="Milk"/>
<fx:Object text="Eggs"/>
<fx:Object text="Flour"/>
<fx:Object text="Sugar"/>
</f:ListCollection>
</f:dataProvider>
</f:List>
In the MXML above, we create a DefaultListItemRenderer
and set its labelField
as an inline component.