Creating the user interface

Flex includes a set of tags designed to help you layout the user interface in projects created in MXML. Similar to HTML (which uses tags to set the sizing and positioning of elements on the page), MXML contains tags that define the way the SWF file will display. In HTML, the <div> tag is typically used to group block-elements and format them with styles.

Note: The W3C defines the <div> tag as a division or section in a document.

When you develop in MXML, you use the Canvas tag <mx:Canvas> to specify a container. A container defines a rectangular region that can be filled with child containers and controls. The Canvas tag is the only container in MXML (besides the Application itself) that allows you to explicitly specify the location of its children using pixel values.

You can set the x, y, top, left, right, bottom, baseline, horizontalCenter or verticalCenter properties for each of the children inside a container. The top, left, right, bottom, baseline, horizontalCenter and verticalCenter are special properties (and are also considered styles) that constrain a component to a specific number of pixels from the top, bottom, left, right or center of its container. When you apply the baseline property to multiple components, the horizontal text baselines are all aligned with the first component you selected. When working with Flex components that do not have text baseline (such as the HBox component), the bottom edge is considered the baseline.

If you are following along with the sample files available for download on the first page of this article, you can review the example provided in the Flex Builder 3 project by selecting the file name ConstraintBasedLayout.mxml and selecting the option to "Run Application".

The following MXML code provides an example of using the <mx:Canvas> tag to define a container and specify the pixels values to set the placement of the application elements on the canvas:

ConstraintBasedLayout.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  layout="absolute" backgroundColor="#ffffff">
   
   <mx:Style source="styles/styles.css"/>
 
   <mx:HRule x="10" y="37" width="90%"/>
   <mx:Text x="10" y="10" text="Constraint based Layout" styleName="headerStyle" id="label1"/>
   <mx:Label x="10" y="78" text="Components constrained to the top, left, right, bottom, verticalCenter and horizontalCenter properties"/>
   
   <mx:Canvas left="10" right="10" top="104" bottom="10" backgroundColor="#000000" backgroundAlpha="0.1" borderStyle="solid" borderColor="#000000" alpha="0.2">
      <mx:Text text="Top Left&#xd;" left="10" top="10"/>
      <mx:Text text="Bottom Left" left="10" bottom="10"/>
      <mx:Text text="Bottom Center" bottom="10" horizontalCenter="0"/>
      <mx:Text text="Center" horizontalCenter="0" verticalCenter="0"/>
      <mx:Text text="Bottom Right" right="10" bottom="10"/>
      <mx:Text text="Center Right" verticalCenter="0" right="10"/>
      <mx:Text text="Center Left " left="10" verticalCenter="0"/>
      <mx:Text text="Top Center" horizontalCenter="0" top="10"/>
      <mx:Text text="Top Right" right="10" top="10"/>
   </mx:Canvas>
</mx:Application>

By default, the Canvas container (created with the Canvas tag <mx:Canvas>) will expand to fit its content unless the width and height of the container have been set. If you specify the width and height of a container, any contents that extend past the defined size is clipped and scrollbars are displayed. You can prevent a container from clipping its contents by setting the clipContent property to false. And you can prevent containers from applying layout settings to a specific component by setting the specific component's includeInLayout property to false.

In addition to the Canvas container, you can also use the Horizontal Box and Vertical Box (HBox and VBox) containers to layout user interface elements. Both will layout their content vertically or horizontally in a single column or a single row, respectively. Setting the x, y, top, left, right, bottom, baseline, verticalCenter or horizontalCenter of a child element does not affect its position (although you could place the HBox or VBox containers into a Canvas container, if needed). Each child of these containers are stacked from top to bottom and left to right with an even amount of space between. Set the horizontalGap or verticalGap properties if you wish to add space in between each item. You can also use the included Spacer component to make adjustments to the space; set the height or width to a positive or negative value to add or subtract the gap.

There are many other included layout controls including Grid containers, Form containers and List controls. The Grid is similar to an HTML table and the Form container is similar to a double column VBox. The Repeater component compliments the Grid, VBox or HBox containers in that it will automatically create rows or columns depending on the data you provide. It behaves the same way as a List or DataGrid when you pass data into it.

Access the sample files and select the file name BoxBasedLayout.mxml to run the application. The following example illustrates how to create layouts using containers:

BoxBasedLayout.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="#ffffff" >
   <mx:Script>
     <![CDATA[
        import mx.controls.Alert;
        import mx.core.UIComponent;
     ]]>
   </mx:Script>
   
   <mx:Style source="styles/styles.css"/>
   <mx:HRule x="10" y="37" width="90%"/>
   <mx:Text x="10" y="10" text="Box Based Layout" 
        styleName="headerStyle" id="label1"/>
   
   <mx:ArrayCollection id="arrayCollection1">
     <mx:Array>
        <mx:Object name="Item 1" />
        <mx:Object name="Item 2" />
        <mx:Object name="Item 3 with some really long text to show multiline rows of data" />
        <mx:Object name="Item 4" />
        <mx:Object name="Item 5" />
        <mx:Object name="Item 6" />
        <mx:Object name="Item 7" />
        <mx:Object name="Item 8" />
     </mx:Array>
   </mx:ArrayCollection>
   
   <mx:ArrayCollection id="arrayCollection2">
     <mx:Array>
        <mx:Object name="Item 1" />
        <mx:Object name="Item 2" />
        <mx:Object name="Item 3" />
        <mx:Object name="Item 4" />
        <mx:Object name="Item 5" />
        <mx:Object name="Item 6" />
        <mx:Object name="Item 7" />
        <mx:Object name="Item 8" />
        <mx:Object name="Item 9" />
        <mx:Object name="Item 10" />
        <mx:Object name="Item 11" />
        <mx:Object name="Item 12" />
     </mx:Array>
   </mx:ArrayCollection>
   <mx:Label x="10" y="78" text="Components are positioned vertically or horizontally within the container"/>
   
   <mx:Label x="232" y="114" text="Horizontal Box" fontWeight="bold"/>
   <mx:HBox backgroundColor="#ECECEC" borderColor="#E0E0E0" borderStyle="solid" x="232" y="140" width="200">
     <mx:Text text="Item 1" />
     <mx:Text text="Item 2" />
     <mx:Text text="Item 3" />
     <mx:Text text="Item 4" />
   </mx:HBox>
   
   <mx:Label x="232" y="184" text="Grid" fontWeight="bold"/>
   <mx:Grid backgroundColor="#ECECEC" borderColor="#E0E0E0" borderStyle="solid" x="232" y="210" >
     <mx:GridRow backgroundColor="#DCDCDC">
        <mx:GridItem>
           <mx:Text text="" />
        </mx:GridItem>
        <mx:GridItem>
           <mx:Text text="Column 1"  fontWeight="bold"/>
        </mx:GridItem>
        <mx:GridItem>
           <mx:Text text="Column 2"  fontWeight="bold"/>
        </mx:GridItem>
        <mx:GridItem>
           <mx:Text text="Column 3"  fontWeight="bold"/>
        </mx:GridItem>
     </mx:GridRow>
     <mx:GridRow>
        <mx:GridItem>
           <mx:Text text="Row 1"  fontWeight="bold"/>
        </mx:GridItem>
        <mx:GridItem>
           <mx:Text><mx:htmlText>
             <![CDATA[SOME TEXT<br/>SOME TEXT<br/>SOME TEXT]]>
           </mx:htmlText></mx:Text>
        </mx:GridItem>
        <mx:GridItem>
           <mx:Text text="Text" />
        </mx:GridItem>
        <mx:GridItem>
           <mx:Text text="Text" />
        </mx:GridItem>
     </mx:GridRow>
     <mx:GridRow>
        <mx:GridItem>
           <mx:Text text="Row 2"  fontWeight="bold"/>
        </mx:GridItem>
        <mx:GridItem>
           <mx:Text text="Text" />
        </mx:GridItem>
        <mx:GridItem>
           <mx:Text text="Text" />
        </mx:GridItem>
        <mx:GridItem>
           <mx:Text text="Text" />
        </mx:GridItem>
     </mx:GridRow>
     <mx:GridRow>
        <mx:GridItem>
           <mx:Text text="Row 3"  fontWeight="bold"/>
        </mx:GridItem>
        <mx:GridItem>
           <mx:Text text="Text" />
        </mx:GridItem>
        <mx:GridItem>
           <mx:Text text="Text" />
        </mx:GridItem>
        <mx:GridItem>
           <mx:Text><mx:htmlText>
             <![CDATA[SOME TEXT<br/>SOME TEXT<br/>SOME TEXT]]>
           </mx:htmlText></mx:Text>
        </mx:GridItem>
     </mx:GridRow>
   </mx:Grid>
   <mx:Label x="10" y="114" text="Vertical Box" fontWeight="bold"/>
   <mx:VBox backgroundColor="#ECECEC" borderColor="#E0E0E0" borderStyle="solid" x="10" y="140" width="200">
     <mx:Text text="Item 1" />
     <mx:Text text="Item 2" />
     <mx:Text width="190"><mx:htmlText>
        <![CDATA[SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT]]>
     </mx:htmlText></mx:Text>
     <mx:Text text="Item 4" />
     <mx:Text text="Item 5" />
     <mx:Text text="Item 6"/>
     <mx:Text text="Item 7" />
     <mx:Text text="Item 8" />
   </mx:VBox>
   
   <mx:Label x="508" y="114" text="Repeater in VBox" fontWeight="bold"/>
   <mx:VBox backgroundColor="#ECECEC" borderColor="#E0E0E0" borderStyle="solid" x="508" y="140" width="200">
     <mx:Repeater id="repeater1" 
        dataProvider="{arrayCollection1}">
        <mx:Canvas width="100%">
           <mx:Text text="{repeater1.currentItem.name}" x="24" width="140"/>
           <mx:Image x="0" y="0" source="images/image1.gif"/>
        </mx:Canvas>
     </mx:Repeater>
   </mx:VBox>
   
   <mx:Label x="716" y="114" text="Repeater in VBox (height = 200)" fontWeight="bold"/>
   <mx:VBox backgroundColor="#ECECEC" borderColor="#E0E0E0" borderStyle="solid" x="716" y="140" width="200" height="200">
     <mx:Repeater id="repeater2" dataProvider="{arrayCollection2}">
        <mx:Canvas width="100%" >
           <mx:Text text="{repeater2.currentItem.name}" x="24" width="140" color="#212121" fontWeight="normal" y="-3" click= "{Alert.show(UIComponent(event.currentTarget). getRepeaterItem().name,'You Clicked')}" buttonMode="true" useHandCursor="true" mouseChildren="false"/>
           <mx:Text text="Posted January 1st, 2009" x="24" width="140" color="#4D4D4D" fontWeight="normal" y="10" fontSize="9"/>
           <mx:Image x="0" y="0" source="images/image1.gif" clickname,'You Clicked')}" buttonMode="true" useHandCursor="true" mouseChildren="false"/>
        </mx:Canvas>
     </mx:Repeater>
   </mx:VBox>
</mx:Application>

Although Flex includes a built-in theme, you may wish to use MXML to adjust the look of your containers. You can make changes by using styles, and you can link to an external CSS style sheet to affect the way the components are displayed. Flex Builder includes a Properties panel that includes common styles that can be set. Access the advanced CSS Design View to select a specific component to add additional styles or skins.

Set styles when you need to format text or change the color of a component. Use skins to specify an image (or set of images) that define a component's appearance. When you set images to use as skins for a component, you can apply a Scale 9 grid to the image. This feature allows you to stretch and resize your container vertically or horizontally and maintain the original ratio of rounded corners and preserve the edges of the image. If you've previously sliced and exported an image into an HTML table, you will appreciate this timesaving feature.

Access the sample files and select the file name StylingAndSkinning.mxml to run the application. The following example illustrates how to use a CSS style sheet to adjust the look and feel of containers:

StylingAndSkinning.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="#ffffff">
   
   <mx:Style source="styles/styles.css" />
   <mx:HRule x="10" y="37" width="90%"/>
   <mx:Text x="10" y="10" text="Styling and Skinning" styleName="headerStyle" id="label1"/>
   
   <mx:Canvas x="10" y="96" width="255" height="280" styleName="ScaleNineSkin">
     <mx:Label x="10" y="52" text="Result"/>
     <mx:TextArea x="10" y="69" width="234" height="188" id="textarea1"/>
     <mx:TextInput id="search" x="10" y="19"/>
     <mx:Button x="178" y="19" label="Submit" />
   </mx:Canvas>
   <mx:Label x="10" y="70" text="Canvas with an image skin"/>
</mx:Application>

Read more about working with containers, styles and skins in the online documentation:

• Adobe Flex 3 Language Reference: Canvas layout container
• Adobe Developer Connection: Designing Flex 3 skins and styles using Flex Builder 3

Page 2 of 12

Previous Page

Next Page