Accessibility
Andrew Trice

Andrew Trice

www.cynergysystems.com

www.insideria.com

Keun Lee

Keun Lee

www.cynergysystems.com

Created:
22 January 2007
User Level:
Advanced
Products:
Flex

Building RIAs from front to back – Part 2: Layout beyond the standard container in Flex 2

Note: This article was created based on Flex 2. Minor changes in the description and code may be necessary before it can be applied to Flex 3.

Important note: Effective with the release of Adobe LiveCycle ES, the Adobe Flex Data Services 2 server product has been rebranded as a Solution Component of LiveCycle ES. This article was written based on Flex Data Services but will likely work as is with LiveCycle Data Services ES. Any articles referring to or using ColdFusion and Flex Data Services are not compatible with LiveCycle Data Services ES. To learn about the new capabilities of LiveCycle Data Services ES, see the tutorials in the LiveCycle Developer Center and read about Adobe LiveCycle Data Services ES.

This article is the second part in a series called Building RIAs from front to back, about basing your apps on the user experience and developing better rich Internet applications from the start. We suggest reading Building RIAs from front to back – Part 1: Understanding the approach before reading part 2. In this article, you'll learn about creating layouts in Flex 2 applications beyond the standard containers, and how to use the CSS features in Flex 2 and the CSS Style Engine.

Requirements

Important note: Effective with the release of Adobe LiveCycle ES, the Adobe Flex Data Services 2 server product has been rebranded as a Solution Component of LiveCycle ES. This article was written based on Flex Data Services but will likely work as is with LiveCycle Data Services ES. Any articles referring to or using ColdFusion and Flex Data Services are not compatible with LiveCycle Data Services ES. To learn about the new capabilities of LiveCycle Data Services ES, see the tutorials in the LiveCycle Developer Center and read about Adobe LiveCycle Data Services ES.

Flex Builder 2 (SDK Included)

Free Flex 2 SDK (Included with Flex Builder 2)

Traditionally, in Adobe Flex applications, layouts are based upon a hierarchy of containers, comprised of Panels, Canvases, ViewStacks, HBoxes and VBoxes, among many others. See the screen in Figure 1:

Flex 1.5 style layout

Figure 1. Flex 1.5 style layout

In the traditional Flex 1.5 container-based layout, this type of screen required a <mx:Panel>, a <mx:VBox>, and a series of <mx:HBox> elements (each <mx:HBox> contains a <mx:Label> and <mx:TextInput> element). Here is the code from Flex 1.5 that created the application shown in Figure 1.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:Panel title="Flex Demo - 1.5 Style Layout" 
paddingBottom="10" paddingLeft="10" paddingTop="10" paddingRight="10">
        
        <mx:VBox width="100%" height="100%">
                
            <mx:HBox width="100%" >
                <mx:Label text="Field 1" width="50" />
                <mx:TextInput width="100%" />
            </mx:HBox>
                
            
            <mx:HBox width="100%" >
                <mx:Label text="Field 2" width="50" />
                <mx:TextInput width="100%" />
            </mx:HBox>
                
            <mx:HBox width="100%" >
                <mx:Label text="Field 3" width="50" />
                <mx:TextInput width="100%" />
            </mx:HBox>
                
            <mx:HBox width="100%" >
                <mx:Label text="Field 4" width="50" />
                <mx:TextInput width="100%" />
            </mx:HBox>
                    
            <mx:HBox width="100%" >
                <mx:Label text="Field 5" width="50" />
                <mx:TextInput width="100%" />
            </mx:HBox>
                
            <mx:HBox width="100%" horizontalAlign="center">
                <mx:Button width="30" label="OK" />
                <mx:Button width="60" label="Cancel" />
            </mx:HBox>
                
        </mx:VBox>
        
    </mx:Panel>
    
</mx:Application>

What's wrong with this layout?

Absolutely nothing, but there is a better way to do it.

Flex 2 provides you with the ability to use CSS positioning to place elements relative to their parent containers. Basically, this means that in Flex 2 you can build a similar component to example 1, but without the nested containers. If you compare Figure 1 and Figure 2 (below), you will see that these screens are nearly identical. On the code level, however, things are very different.

The user interface component objects now support the "left", "right", "top" and "bottom" CSS styles. These properties allow you to place your component relative to the parent container. So, if you have an <mx:Label> element that has an attribute of top="10", that Label will be bound so that it is always 10 pixels away from the top of the parent container.

Flex 2 style layout

Figure 2. Flex 2 style layout

Although the application looks the same as Figure 1, the code reflects the CSS positioning:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:Panel title="Flex Demo - 2 Style Layout" 
paddingBottom="10" paddingLeft="10" paddingTop="10" paddingRight="10" layout="absolute" height="233" width="260">
            
        <mx:Label text="Field 1" width="50" top="10" left="10"/>
        <mx:TextInput right="10" left="65" top="8"/>
        
        <mx:Label text="Field 2" width="50" top="40" left="10"/>
        <mx:TextInput right="10" left="65" top="38"/>
        
        <mx:Label text="Field 3" width="50" top="70" left="10"/>
        <mx:TextInput right="10" left="65" top="68"/>
        
        <mx:Label text="Field 4" width="50" top="100" left="10"/>
        <mx:TextInput right="10" left="65" top="98"/>
        
        <mx:Label text="Field 5" width="50" top="130" left="10"/>
        <mx:TextInput right="10" left="65" top="128"/>
        
        <mx:Button width="30" label="OK" bottom="10" right="80"/>
        <mx:Button width="60" label="Cancel" right="10" bottom="10"/>
        
    </mx:Panel>
    
</mx:Application>

This code is much simpler and cleaner. This is only one of the advantages of CSS-based layouts in Flex 2. Another advantage is that this framework does not require containers within containers, as the Flex 1.5-style layout does. This is a huge advantage. Each container resolves to be an additional object when the Flex is compiled into a SWF file and rendered within your browser. Since there are less components, there are less movie clip objects in the runtime, and thus, there are less resources being used to render a nearly identical screen!

CSS positioning improves the overall speed, initialization, file size, and rendering time of your entire application. In my example, you won't notice much of a difference in appearance, but imagine if you had a huge application with hundreds of different views and/or components. There would be an enormous difference in performance.

Another advantage of the Flex 2 CSS-based layout is that all of the position binding can be done using the Flex CSS styling engine. Figure 3 (below) might look exactly like Figure 2:

Flex 2 CSS style layout

Figure 3. Flex 2 CSS style layout

Although Figure 3 looks a lot like Figure 2, the code underneath is very different:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:Style>
    
        .label1{ width:10; top:10; left:10; }
        .textInput1{ right:10; left:65; top:8; }
        
        .label2{ width:10; top:40; left:10; }
        .textInput2{ right:10; left:65; top:38; }
        
        .label3{ width:10; top:70; left:10; }
        .textInput3{ right:10; left:65; top:68; }
        
        .label4{ width:10; top:100; left:10; }
        .textInput4{ right:10; left:65; top:98; }
        
        .label5{ width:10; top:130; left:10; }
        .textInput5{ right:10; left:65; top:128; }
        
        .button1{ width:30; bottom:10; right: 80; }
        .button2{ width:60; bottom:10; right: 10; }
        
    </mx:Style>
    
    <mx:Panel title="Flex Demo - 2 CSS Style Layout" 
paddingBottom="10" paddingLeft="10" paddingTop="10" paddingRight="10"
layout="absolute" height="233" width="260">
            
        <mx:Label text="Field 1" styleName="label1" />
        <mx:TextInput styleName="textInput1" />
        
        <mx:Label text="Field 2" styleName="label2" />
        <mx:TextInput styleName="textInput2" />
        
        <mx:Label text="Field 3" styleName="label3" />
        <mx:TextInput styleName="textInput3" />
        
        <mx:Label text="Field 4" styleName="label4" />
        <mx:TextInput styleName="textInput4" />
        
        <mx:Label text="Field 5" styleName="label5" />
        <mx:TextInput styleName="textInput5" />
        
        <mx:Button label="OK" styleName="button1" />
        <mx:Button label="Cancel" styleName="button2" />
        
        
    </mx:Panel>
    
</mx:Application>

Yes, this is more code than the application shown in Figure 2 Why would you want more code?

CSS positioning allows you to separate the display/positioning logic from your actual application logic. It enables user interface designers to work independently from engineers. Engineers can put an actual application together, while user interface designers develop the styles separately. The workflow participants don't have to wait for each other. When the user interface design is ready, the styles can be simply "dropped" into the engineer's code, and now application is fully styled, with little additional work for the engineer.

This is not only beneficial for the separation of designer and engineering roles. An application can be re-skinned and components can be repositioned very easily. Take a look at Figure 4. See that the application looks different. The best part is that none of the application logic has changed from Figure 3. The only thing that has changed is the CSS style definitions.

Flex 2 CSS style with an alternate layout

Figure 4. Flex 2 CSS style with an alternate layout

See the change to the CSS within the code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:Style>
    
        .label1{ width:10; top:10; right:10; }
        .textInput1{ left:10; right:65; top:8; }
        
        .label2{ width:10; top:40; right:10; }
        .textInput2{ left:10; right:65; top:38; }
        
        .label3{ width:10; top:70; right:10; }
        .textInput3{ left:10; right:65; top:68; }
        
        .label4{ width:10; top:100; right:10; }
        .textInput4{ left:10; right:65; top:98; }
        
        .label5{ width:10; top:130; right:10; }
        .textInput5{ left:10; right:65; top:128; }
        
        .button1{ width:30; bottom:10; left: 80; }
        .button2{ width:60; bottom:10; left: 10; }
        
    </mx:Style>
    
    <mx:Panel title="Flex Demo - 2 CSS Style Layout (alternate)" 
paddingBottom="10" paddingLeft="10" paddingTop="10" paddingRight="10"
layout="absolute" height="233">
            
        <mx:Label text="Field 1" styleName="label1" />
        <mx:TextInput styleName="textInput1" />
        
        <mx:Label text="Field 2" styleName="label2" />
        <mx:TextInput styleName="textInput2" />
        
        <mx:Label text="Field 3" styleName="label3" />
        <mx:TextInput styleName="textInput3" />
        
        <mx:Label text="Field 4" styleName="label4" />
        <mx:TextInput styleName="textInput4" />
        
        <mx:Label text="Field 5" styleName="label5" />
        <mx:TextInput styleName="textInput5" />
        
        <mx:Button label="OK" styleName="button1" />
        <mx:Button label="Cancel" styleName="button2" />
        
        
    </mx:Panel>
    
</mx:Application>

Because position bindings (as are other container bindings) are relative to the parent container, if the parent container resizes, then so do your application's child containers (see Figure 5). The only thing that has changed between Figure 4 and Figure 5 is that the width of the <mx:Panel> container has been increased.

Resizing elements with bound positions

Figure 5. Resizing elements with bound positions

Don't take this the wrong way. HBoxes, VBoxes, and x,y positioned canvases are not obsolete. They are very valuable components in the Flex library and are still very handy. The difference is that you no longer need to solely rely upon them. HBoxes and VBoxes are still very useful for placing components next to each other. Now, you can easily use CSS positioning to bind an HBox in a specific part of the screen.

Complex layout using a mixed approach

Figure 6. Complex layout using a mixed approach

The application shown in Figure 6 is much closer to a real-world application layout. Figure 6 uses a combination of container-based layout and CSS positioning to quickly and reliably position the controls next to each other. On the left side, there is a TabNavigator control, which uses CSS positioning to bind its border with respect to the Panel container's border. The DateChooser and DataGrid containers use CSS positioning to bind to the constraints of the parent TabNavigator. There is a VBox control that uses CSS positioning to bind it to the right side. The VBox control contains a series of CheckBox controls. Although this example is static code, it is possible that the series of CheckBox controls could be added dynamically at runtime, based on the number of records in a data source. Using the VBox control allows you to rely on the VBox logic to manage the dynamic CheckBoxes. See the application code for the application shown in Figure 6:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    
    <mx:Style>
        .panel {
            top: 10;
            bottom:10;
            left:10;
            right:10;
        }
    
        .tabnav {
            top: 10;
            bottom:10;
            left:10;
            right:130;
        }
        
        .dg {
            top: 10;
            bottom:10;
            left:10;
            right:192;
        }
        
        .dc {
            top: 10;
            right: 10;
        }
        
        .vbox {
            top: 30;
            bottom:10;
            right:10;
        }
    </mx:Style>
    
    <mx:Panel 
title="Complex Layout Using Mixed Approach" 
layout="absolute" styleName="panel">
        
        <mx:TabNavigator styleName="tabnav">
            
            <mx:Canvas label="Canvas" width="100%" height="100%">
                
                <mx:DataGrid styleName="dg">
                    <mx:columns>
                        <mx:DataGridColumn headerText="Column 1" />
                        <mx:DataGridColumn headerText="Column 2" />
                        <mx:DataGridColumn headerText="Column 3" /> 
                    </mx:columns>
                </mx:DataGrid>
                
                <mx:DateChooser styleName="dc"/>
                
            </mx:Canvas>
            
            <mx:HBox label="HBox" width="100%" height="100%" />
            
            <mx:VBox label="VBox" width="100%" height="100%" />
            
        </mx:TabNavigator>
        
        <mx:VBox width="110" verticalGap="3" styleName="vbox">
        
            <mx:CheckBox label="Checkbox 1"/>
            <mx:CheckBox label="Checkbox 2"/>
            <mx:CheckBox label="Checkbox 3"/>
            <mx:CheckBox label="Checkbox 4"/>
            <mx:CheckBox label="Checkbox 5"/>
            <mx:CheckBox label="Checkbox 6"/>
            <mx:CheckBox label="Checkbox 7"/>
            <mx:CheckBox label="Checkbox 8"/>
            <mx:CheckBox label="Checkbox 9"/>
            <mx:CheckBox label="Checkbox 10"/>
            
        </mx:VBox>
        
    </mx:Panel>
    
</mx:Application>

In short, there are numerous ways to create amazing and rich applications using Adobe Flex. Using the CSS style engine in Flex 2 allows for more flexible/less complicated/less intensive layouts, and enables a greater abstraction of programming and design phases. Keep in mind, this isn't all the Flex can 2 do, it is really just the tip of the iceberg. Keep an eye out for our other upcoming articles, where we will dive deeper into view states and transitions, remote procedure calls and data services, and skinning and visualizations.

About the authors

Andrew Trice is the Principal Architect for Flex and Adobe AIR for Cynergy Systems, based in Washington, DC. He specializes in data visualization, client-server architectures, Object-Oriented principles, and rich application development. He has been developing for the web since 1998, has been developing for the Flash platform since 2000. Andrew has developed with Flex since version 1.5, and he thrives off the creativity and flexibility that the Flex/Flash platform enables. Andrew has been working with ColdFusion since 2001, is a Microsoft Certified Application Developer, and has a wide range of knowledge regarding relational databases, Ajax/Javascript, .NET, and Java web applications.You can view some of his latest work at: http://www.cynergysystems.com/blogs/page/andrewtrice and on his blog at insideria.com.

 

 

Keun Lee is an Enterprise Applications Consultant for Cynergy Systems and is based in Washington DC. He specializes in Business Intelligence, Business Process Management ( BPM ), and RIA-based application development. Prior to Cynergy Systems, he consulted for notable companies such as Accenture and Avanade. He has been working with Adobe Flex since it's release in 1.5 and has been loving every minute of it since. In his spare time he likes to embark on fun and challenging personal projects, play his Xbox 360, and his beloved Les Paul guitar.