Laying out an Application Using

Constraint-Based Layout

In this section of the course, you use the constraint-based layout

system in conjunction with absolute positioning.

Objectives
After completing this unit, you should be able to:
• Absolutely position controls and containers in Application, Panel and
Canvas containers
• Create constraint-based layouts using Flex Builder’s Design mode
• Create constraint-based layouts by typing MXML
• Nest constraint-based layouts

Topics
In this unit, you will learn about the following topics:
• Understanding absolute positioning
• Positioning components within a Canvas container
• Creating a constraint-based layout using Flex Builder
• Creating a constraint-based layout via MXML
• Using Enhanced Constraints
• Using constraint-based layouts within nested containers

Copyright © 2008 Adobe Systems Incorporated 105

Understanding absolute positioning
• The Flex Framework provides two mechanisms for positioning and
laying out controls
■ Automatic layout – Flex automatically positions a container's
children according to each container’s default layout rules
■ Absolute positioning – You specify each child's x and y property
values and any additional constraint-based layout properties

Container support for absolute positioning

• Three containers support absolute positioning
■ Application – requires setting the layout property to
absolute, by default layout is vertical
■ Panel – requires setting the layout property to absolute, by
default layout is vertical
■ Canvas – always uses absolute positioning (it has no layout
property)

Absolute positioning characteristics

• The child control’s position is specified relative to its parent container
using its x and y properties otherwise Flex places the child at position 0,
0 of the parent container
• When you use absolute positioning, you have full control over the
locations of the container's children (this allows you to overlap
components)
■ You can control which child is on top of another by ordering the
associated MXML code
– The code listed last in the editor will appear on top
• You should be careful when combining percentage sizing with absolute
positioning
■ Remember that if a container resizes, the percentage-based
components also resize, and the result may include unwanted
overlapping of controls

106 Copyright © 2008 Adobe Systems Incorporated

Positioning components within a Canvas
container
• The Canvas container
■ is a layout container
■ positions children based on their specified x and y property
values, where the top left corner of the Canvas container is the
origin, or 0,0 point
■ is represented in MXML with the Canvas component
■ has default padding (area between the outside bounds of the
control and its content) values of 0 pixels

Canvas container origin (0,0 point)

width = 50 increasing y value

height = 50
x = 20 width = 50
y = 20 height = 50
x = 40
y = 40
Canvas border
increasing
x value
Figure 1: The Canvas container’s origin point is the upper left corner

• Components within child containers of the Canvas container will use

the sizing and layout rules of their immediate parent, not the Canvas
container

Note: The values for the x and y coordinates can be a positive or negative
Number datatype. You can use negative values to place a child outside the
visible area of the container, and then use ActionScript to move the child to
the visible area, possibly in response to an event.

Pros and cons of Canvas containers

• Pro: Better performance because you do not use client processing power
to determine object placement when the container resizes
• Con: You have to specify all positions and layout

Copyright © 2008 Adobe Systems Incorporated 107

Walkthrough 1: Positioning components
inside a Canvas
In this walkthrough, you will perform the following tasks:
• Position text over a seating chart in a Canvas container using absolute
positioning

Steps
Import the Constraints Project
1. Select File > Import > Flex Project.
2. Import project from Archive file.
• Browse to: <installDirectory>/adobeTraining/f3rca/
[Link]
• Click Open
• Click Finish
3. Close all unrelated projects.
4. Open the ConstraintLayout_wt1.mxml file from the src folder at the
root of the project.

Create the Canvas container and display the seating chart

5. Switch to Design mode.
6. Drag a Canvas container from the Layout folder of the Components
view to the design surface.
7. In the Layout properties of the Flex Properties view, set the width and
height of the Canvas container to 400 pixels and 450 pixels,
respectively.
8. Drag an Image control from Controls folder of the Components view
into the Canvas container on the design surface.
9. Position it at an x and y position of 20 pixels.
10. In the Common properties of the Flex Properties view, use the Source
property to insert the seating_chart.gif file from the assets folder
located in the src folder at the root of the project.
11. Run the application. You should see the seating chart.

108 Copyright © 2008 Adobe Systems Incorporated

 Position text over the seating chart
12. Drag a Text control from the Controls folder of the Components view
to the seating chart and position as shown in the figure.

Figure 2: A Text control positioned over the seating chart

13. Update the text to read Tables can be arranged to

accommodate a dance floor.
14. Set the Text control’s width to 100 pixels and height to 65.
15. Change the text color to a brick color (#DD7142) using the Style
properties of the Flex Properties view.

Figure 3: Changing the Text control color

16. Run the application. You should see the seating chart with the text overlay.

Figure 4: The modified Text control

17. Switch to Source mode and review the code with your instructor.

Copyright © 2008 Adobe Systems Incorporated 109

Creating a constraint-based layout using Flex
Builder
• Constraint-based layout basics
■ Use any of the containers that allow absolute layouts to create
constraint-based layouts
– Application container
– Canvas container
– Panel container
■ Ensures that the components adjust intelligently when a user
resizes the application window
– The adjustments are based on the anchor settings of the child
element relative to the edges of the container
฀ ฀ ฀ ฀ ฀ ฀ ฀ ฀

฀ ฀

฀ ฀ ฀ ฀ ฀ ฀ ฀ ฀
฀ ฀ ฀ ฀ ฀ ฀ ฀
฀ ฀ ฀ ฀ ฀ ฀
฀ ฀ ฀ ฀
฀ ฀ ฀ ฀
฀ ฀ ฀ ฀
฀ ฀ ฀ ฀ ฀
฀ ฀ ฀ ฀ ฀ ฀ ฀ ฀ ฀ ฀
฀ ฀ ฀ ฀ ฀ ฀ ฀ ฀ ฀ ฀ ฀ ฀ ฀
฀ ฀ ฀ ฀ ฀ ฀ ฀ ฀ ฀ ฀
฀ ฀

Figure 5: If a component is set to a percentage width, it will resize to ensure that the anchor rules stay true

Constraint-based vs. traditional container

layout
• Pros for constraint-based layout
■ They are good for layouts that need pixel-perfect positioning
■ They make it easy to get basic resizing behavior without having to
manage a lot of nested containers
• Pros for traditional (non constraint-based) layout containers
■ Use them when you have dynamically sized items that push each
other out of the way
■ Use them with layouts that only need percentage-width columns

110 Copyright © 2008 Adobe Systems Incorporated

 • Sometimes either technique will accomplish the goal
■ You can mix the two layout techniques

Visually assigning anchors

• Constraint-based layouts can be built through writing MXML, however,
since the effects are visual, it is often preferable to use Flex Builder's
Design mode
• Steps for setting constraints using Flex Builder's Design mode
■ Select the component to constrain
■ In the Layout properties of the Flex Properties view, select the
anchor
■ Enter the number of pixels from the container edge to the child
component to be placed

Select an anchor

Define, in pixels, how

far the component
should stay from the
edge of the container

Figure 6: The easiest way to create a constraint-based layout is to set the constraint
anchors using Flex Builder’s Design mode

Note: You may find that in some instances, you get overlapping components
with constraint-based layouts. If this is not the behavior you want, add
additional anchors to the overlapping elements or set a minimum width and
height for the container.

• Use care with component width and height properties when using
constraint-based layout
■ If you do not specifically define the width and height of some
components, like the Text control, you will find that they may be
truncated
– Setting the width or height to 100% may solve some of
the issues

Copyright © 2008 Adobe Systems Incorporated 111

 ■ If you constrain the left and right sides of a component, Flex
Builder will remove the width property
■ If you constrain the top and bottom edges of a component, Flex
Builder will remove the height property

112 Copyright © 2008 Adobe Systems Incorporated

Walkthrough 2: Using Design mode to
implement a constraint-based layout
In this walkthrough, you will perform the following tasks:
• Create a constraint-based layout for the Cafe Store product display

Steps
1. Open the ConstraintLayout_wt2.mxml file from the src folder at the
root of the project.
2. Run the application. You should see details regarding Chef Ipsum’s newly
released DVD. This item is the second item in the Cafe Store so both next
and previous button controls are displayed. Resize the browser and note
that the positions of the components on screen do not change.

Anchor the Label control horizontally

3. In Flex Builder’s Design mode, select the Label control that starts with
The Cafe Store Presents:. Check the top middle checkbox of
the Anchors option in the Layout section of the Flex Properties view.
The Label control will be anchored to both sides of the container which
centers the component within the container.

Figure 7: Constraint anchors

Note: The pixel number that is associated with the constraint may be different
on your computer. It is dependent on the size of your Design mode display.

4. Run the application. You should see, as you resize the browser, that the
Label control always stays centered horizontally in the browser. However,
it does sometimes overlap the prev and next buttons.

Copyright © 2008 Adobe Systems Incorporated 113

 Anchor the buttons
5. Select the prev button. Anchor the top left and check that the left offset is
25 pixels. This will constrain the button to the left of its container.

Figure 8: Anchor the prev button

6. Select the next button. Anchor the top right and set the right offset to 25
pixels. This will constrain the button to the right of its container.

Figure 9: Anchor the next button

7. Run the application. You should see, as you resize the browser, that the
prev and next buttons stay in the top left and right corners of the browser,
respectively. However, if the browser is resized small enough, you will still
get overlapping controls.

Figure 10: Overlapping Label and Button controls

114 Copyright © 2008 Adobe Systems Incorporated

 Set a minimum width for the Application
8. In Source mode, add the minWidth property to the Application
container and set its value to 550 pixels.
9. Run the application. You should see that the application cannot be resized
smaller than 550 pixels. This means that you will not get the overlapping
problem. If the browser is resized below 550 pixels wide, the application
will stop resizing.

Anchor the Image and Text controls

10. In Design mode, select the video image and set the top middle anchor to
ensure it stays centered in the browser.
11. Select the Text control (with the description of the DVD) and anchor
both the left and right top. Set the left and right offsets to 162 and 175
pixels respectively. You should see that the Text control is truncated with
only one line of text showing. The width property has been removed by
Flex Builder because the width will now be determined by the
container’s size.

Figure 11: Set the Text control’s horizontal anchors

12. Make sure the Text control is still selected and set the top anchor.

Figure 12: Set the Text control top anchor

Copyright © 2008 Adobe Systems Incorporated 115

 13. Run the application. You should see that the Text control still only shows
one line of text.
14. Make sure the Text control is still selected. Set the bottom anchor. All
four anchors should be set now.

Note: Design mode does not refresh the display to show the entire paragraph
of text.

Figure 13: Set the Text control bottom anchor

15. Run the application.

16. You should see that the Text control shows the entire paragraph of text.
You will note that this paragraph resizes appropriately according to the
dimensions of the application. However, since it is constrained to the
bottom of the browser window by a certain pixel value, if you resize the
browser from the bottom, you may see that the text disappears even
though the browser still has plenty of room.
17. In Design mode, remove the top and bottom anchors.
18. Set the height value to 100%.
19. Run the application. You should see that the Text control is no longer
constrained to the bottom and therefore text does not disappear when
there is plenty of browser space a the bottom. However, if you do size the
browser window from the bottom to truncate the Text control, you do
not get a scrollbar.
20. In Design mode, set the height value to 100 pixels.
21. Run the application. You should see that the resizing the browser window
to truncate the Text control from the bottom does result in a scrollbar
appearing. However, if you do resize from the sides, it can still result in
truncated text.

116 Copyright © 2008 Adobe Systems Incorporated

Creating a constraint-based layout via MXML
• Implement a constraint-based layout in MXML by
■ Defining a custom component inside an absolute layout container
■ Adding one or more anchor styles to the component tag that you
would like to anchor
■ Use the top, bottom, left and right styles to specify
the distances between the side of the container and component

< mx :F o rm i d =” m yF or m ” le f t= ”2 0 ” r ig ht = ”2 0” / >

Using horizontalCenter and verticalCenter

• Use the horizontalCenter and verticalCenter styles to
specify the distance between the component’s center point and the
container’s center in the specified direction
■ A horizontalCenter having a positive number moves the
component right from the center
■ A horizontalCenter having a negative number moves the
component left from the center
■ A verticalCenter having a positive number moves the component
down from the center
■ A verticalCenter having a negative number moves the component
up from the center

< mx :P a ne l
w id th = "2 50 " h e ig ht = "2 00 "
l ay ou t =" ab s ol u te "
h or iz o nt al C en t er =" 0 "
v er ti c al Ce n te r =" 21 " >
[ .. .]
< /m x: P an el >

Copyright © 2008 Adobe Systems Incorporated 117

Walkthrough 3: Implementing a constraint-
based layout in MXML
In this walkthrough, you will perform the following tasks:
• Recreate the constraint-based layout from the last walkthrough
• Type MXML code instead of using Flex Builder’s Design mode to create
the layout

Steps
1. Open the ConstraintLayout_wt3.mxml file from the src folder at the
root of the project.
2. Run the application. You should see details regarding Chef Ipsum’s newly
released DVD. This application is similar to the previous walkthrough
and will have similar results.

Anchor the Label and Button controls

3. In Flex Builder’s Source mode, locate the < prev Button control. Add
the left anchor style and set its value to 23.
4. Locate the The Cafe Store Presents... Label control. Add
the horizontalCenter anchor style and set its value to -2 (negative
two).
5. Locate the next > Button control. Add the right anchor style and
set its value to 25.
6. Run the application. You should see that as you resize the browser, that the
prev and next buttons stay in the top left and right corners of the
browser, respectively. They also will not overlap the Label control since
the minWidth property has been specified on the Application
container MXML tag.
7. Locate the Image control. Add the horizontalCenter anchor style
and set its value to -6 (negative six).
8. Locate the Text control. Add the left and right anchor styles and set
their values to 162 and 187, respectively.
9. Run the application. You should see the Button controls in the left and
right corners and the rest of the content centered in the application. The
Text control will grow or shrink based on the browser size. However, it
will never shrink lower than 650 pixels in width.
10. Remove the width property from the Text control.
11. On the Text control, set the minWidth to 250 and the minHeight to
200.

118 Copyright © 2008 Adobe Systems Incorporated

 12. Run the application. You should see that the Text control resizes and
shows the scrollbar as appropriate unless you set the browser width
smaller than the minWidth.

Copyright © 2008 Adobe Systems Incorporated 119

Using Enhanced Constraints
• Enhanced constraints allow sibling objects to be constrained to each
other rather than to the parent container
• Enhanced constraints also must use containers (Application, Module,
Canvas, or Panel)
• Enchanced constraints divide a container’s space into rows and columns
that is then used to position other components which are constrained by
the row and column boundaries
• Define vertical constraint regions using constraintColumns
■ Contain arrays of ConstraintColumn objects
■ Objects are laid out left to right in order they are defined
• Define horizontal constraint regions using constraintRow
■ Contain arrays of ConstraintRow objects
■ Objects are laid out top to bottom in the order they are defined
• Column and row regions have three sizing options: fixed, percent and
content.
■ Fixed size - Space allocated is a fixed pixel size
■ Content size - Space allocated is dictated by the size of the child
objects in the regions
■ Percent size - Space allocated is calculated as a percentage of space
remaining after fixed and content sized child objects have been
deducted
• Constraint rows and columns do not have to occupy all of the area in a
container

Note: A best practice is to ensure the sum of all percent constraints is less than
or equal to 100%.

<m x: C an va s >
<m x :c on s tr a in tC o lu mn s >
<m x: C on s tr ai n tC ol u mn id =" c ol 1"
w id t h= " 21 2" / >
< mx : Co n st ra i nt Co l um n i d= " co l2 "
w id t h= " 10 0% " />
</ m x: co n st r ai nt C ol um n s>
<m x :c on s tr a in tR o ws >
< mx : Co ns t ra i nt Ro w i d =" r ow 1" he i gh t =" 80 % "/ >
< mx : Co ns t ra i nt Ro w i d =" r ow 2" he i gh t =" 20 % "/ >
</ m x: co n st r ai nt R ow s>
. ..
</ mx : Ca nv a s>

120 Copyright © 2008 Adobe Systems Incorporated

 Using ConstraintRow and ConstraintColumn
• A child component is anchored to a row or column by appending the
region’s id to any of the child’s constraint parameters (left, right,
top, and bottom)

< mx :P a ne l l ef t =" co l 1: 0" ri gh t =" c ol 1: 1 0" />

< mx :P a ne l l ef t =" co l 2: 10 " />
< mx :P a ne l t op = "r ow 1 :5 0" / >

• The component is constrained relative to the parent container if

constraint parameters are not qualified by the constraint region
identifier (ConstraintRow ID or ConstraintColumn ID)
• Components can occupy a single region or span multiple regions

Note: You may use any combination of qualified and unqualified constraint
properties but this may cause some constraint properties to be overridden.

Copyright © 2008 Adobe Systems Incorporated 121

Demonstration 1: Using Enhanced
Constraints
In this demonstration, your instructor will perform the following tasks:
• Constrain controls to columns and rows
• Interact with controls

Steps
1. Open the ConstraintLayout_demo.mxml from the src folder at the root
of the project.
2. Examine the code with your instructor.
There are two constraint columns using percentage space allocation. There
are three constraint rows using fixed space allocation. There are three
controls that will be constrained by the columns and rows within a Canvas
container.

Constrain Button control

3. Locate the Button control. Add the top property set to row3:20.
4. Add the right property set to col1:0.
5. Run the application and notice the placement of the Button control.

Constrain Image control over two rows

6. Locate the Image control. Add the top property set to row1:10. Add
the bottom property set to row2:0.
7. Run the application and notice the location of the image.
8. Add the left property set to col2:10 and the right property set the
col2:10 to the Image control.
9. Run the application and notice the placement of the Image control.

Constrain Label control

10. Locate the title Label control. Add a top property set to row1:20.
Add a right property set to col1:10.
11. Run the application.

Interact with controls

12. Click the submit button. You should see the button get larger but remain
in its allotted space and right position in the first constraint column.
13. Resize the browser window very small.
You should see the Label control remain 10 pixels away from the Image
control and you should also see the image shrink to remain in its constraint
column and rows.

122 Copyright © 2008 Adobe Systems Incorporated

 Constrain Button control to two columns
14. Return the browser to its normal size.
15. Locate the Button control. Change the value of the right property to
col2:10. Add the left property set to col1:10.
16. Run the application. You should see the Button control is constrained
to its allotted space over two columns.
17. Resize the browser window. You should see the Button control remain
10 pixels from its right and left constraint.

Copyright © 2008 Adobe Systems Incorporated 123

Using constraint-based layouts within nested
containers
• Constraints in nested containers will be based on their immediate
parent container
• Constraints in custom components will be based on the component
container

฀ ฀ ฀ ฀ ฀
฀

฀ ฀ ฀ ฀ ฀ ฀ ฀ ฀ ฀
฀ ฀ ฀
฀
฀ ฀

Figure 14: Constraints are based on their immediate parent containers

124 Copyright © 2008 Adobe Systems Incorporated

Walkthrough 4: Using custom components in
a constraint-based layout
In this walkthrough, you will perform the following tasks:
• Integrate a custom component which uses constraint-based layout into
the Cafe Townsend application.

Steps
1. Open the ConstraintLayout_wt4.mxml file in the src folder at the root
of the project.
2. Run the application. You should see the Cafe Townsend application with
the three panels on the right. The main content area is a blank white space,
but as you increase or decrease the browser size, that area responds to the
change.

Add the custom component

3. In Source mode, add an XML namespace declaration named comp to the
Application container tag and point it to the current directory. The
code should appear as follows.

< mx :A p pl ic a ti o n
xm ln s :m x= " ht t p: // w ww .a d ob e .c om / 20 06 / mx m l"
xm ln s :c om p =" * "
la yo u t= "v e rt i ca l"
ba ck g ro un d Co l or =" # 00 00 0 0"
ba ck g ro un d Al p ha =" 0 "
th em e Co lo r =" h al oO r an ge " >

4. Locate the comment on line 42 that prompts you to add the custom
component.
5. On line 43, call the CafeStore custom component, which is the Cafe
Store product display from the previous two walkthroughs. The code
should appear as follows.

<m x: V Bo x
p ad d in g Ri gh t =" 8"
p ad d in g To p= " 8"
p ad d in g Bo tt o m= "8 "
w id t h= " 10 0% " >
< !- - A d d cu s to m c om p on en t h er e - - >
< co m p: C af eS t or e / >
</ mx : VB ox >

Copyright © 2008 Adobe Systems Incorporated 125