Working with Constraint-based Layouts

Flex supports constraint-based layouts, which enable you to arrange elements of the user interface with the freedom and pixel-point accuracy of absolute positioning while being able to set constraints to stretch or move the components when the user resizes the window.

This is a different way to control the size and position of components from the nested layout containers (like the VBox and HBox containers in the last exercise). The idea of constraint-based layouts is that everything is positioned and sized in relation to the edges of a Canvas container (or a container that can act like a Canvas container, such as Application or Panel container).

The Canvas container requires that elements be positioned to absolute coordinates; however, layout constraints allow it the flexibility to dynamically adjust the layout based on the window size of the browser. For example, if you want a label to always appear in the bottom-right corner of an application, regardless of the browser size, you can anchor the control to the right edges of the Canvas container so its position is always relative to the right edge of the component.

The layout anchors are used to specify how a control should appear relative to the edge of the Canvas container. To ensure that a control is a certain distance from the bottom and right edges, select the check box below and the check box to the right of the control in the Constraints area in the Layout section of the Flex Properties view, and use the text box to specify the number of pixels from the edge to which the control will be constrained.

Flex allows constraints from the Top, Vertical Center, Bottom, Left, Horizontal Center, or Right of a Canvas container.

Tip

All constraints are set relative to the edges of the Canvas container (or those that can act as a Canvas container). They cannot be set relative to other controls or containers.

1.	Open the EComm.mxml file that you used in the previous exercise. Alternately, you can open EComm_layout.mxml from Lesson03/intermediate and save it in the FlexGrocer directory as EComm.mxml.
2.	Find and select the Checkout button. In the Constraints area of the Layout section, add a constraint so the right edge of the button is 10 pixels from the right edge of the container. If you don't set it, the y property will use a default value of 0. To set a constraint from the right edge, click the rightmost check box above the button icon. In the text box that appears, enter the number of pixels from the edge.
3.	Find and select the View Cart button. Add a constraint so the right edge of the button is 90 pixels from the right edge of the container. If you don't otherwise set it, the y property will use a default value of 0. You now have it set so that regardless of the width of the browser, the two navigation buttons are always anchored relative to the top-right edge of the container.
4.	Find and select the label with the copyright notice. Constrain this label so that it is 10 pixels above the bottom and 10 pixels off of the right edge of its container. Because the copyright label is below other containers, it is probably easiest to select it using Outline view. To set the edge constraint, click the check box in the top-right corner of the constraints, and enter 10 in the text box below. Also, click the bottom check box and enter 10 in the text box. These settings ensure that regardless of the width of the Label control its bottom-right edge will always be 10 pixels above and 10 pixels to the left of the bottom-right corner of the Application If you switch to Source mode, the whole file should look similar to the following example: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:ApplicationControlBar dock="true" width="100%" height="90"> <mx:Canvas width="100%" height="100%"> <mx:Label x="0" y="0" text="Flex"/> <mx:Label x="0" y="41" text="GROCER"/> <mx:Button label="View Cart" right="90" y="0"/> <mx:Button label="Checkout" right="10" y="0"/> </mx:Canvas> </mx:ApplicationControlBar> <mx:Label text="(c) 2006, FlexGrocer" right="10" bottom="10"/> <mx:HBox x="0" y="0" width="100%" height="100%" > <mx:VBox width="100%" height="100%" > <mx:Label text="Milk" /> <mx:Label text="$1.99" /> <mx:Button label="Add To Cart" /> </mx:VBox> </mx:HBox> </mx:Application> Your code may differ slightly, depending on the order you added the items, and the positions to which you dragged the various components. Don't worry, the order is not particularly important in this case. Every container and control that you added in Design mode is represented by a tag in Source mode. When you added elements inside a container, they appear as child tags to the containers tag. Also note that the layout constraints are set as attributes of the related component.
5.	Switch back to Design mode and add a second VBox container into the bodyBox HBox container. In the Insert VBox dialog box, leave the width empty and set the height to 100%. Set the ID of the new VBox to cartBox. If you have difficulty setting the new VBox container inside the HBox container, it might help to turn on Show Surrounding Containers. The Show Surrounding Containers button is located between the Refresh button and the State combo box above the Design area. Then you can click the HBox container and be sure to insert the VBox into the correct container. If you accidentally place it in the wrong container, the easiest fix is to switch to Source mode and move the tags yourself. The code in Source mode should look like this example: <mx:HBox x="0" y="0" width="100%" height="100%" > <mx:VBox width="100%" height="100%" > <mx:Label text="Milk" /> <mx:Label text="$1.99" /> <mx:Button label="Add To Cart" /> </mx:VBox> <mx:VBox height="100%" > </mx:VBox> </mx:HBox>
6.	Back in Design mode, add a Label control into the new cartBox with the text property set to Your Cart Total: $. To the right of the products, there will always be a summary of the shopping cart, indicating whether there are items in the cart and what the current subtotal is.
7.	From the Controls folder of the Components view, drag a LinkButton control below the new Label control and set the label of the link to View Cart. This link will be used to show the user the full contents of their shopping cart.
8.	Save the file and click Run. Now, as the application runs you can resize the browser and see that the buttons and bottom text are always properly constrained.