Learning Flex – Lesson 3, Laying out the Interface

I’m working my way through the recommended text Adobe Flex3 Training From the Source and these posts are going to be my way of writing some notes about the material covered in the lessons. Hopefully, that’ll make it stick a little  more and I’ll also have a handy reference when I’m done.

So – Lesson 3 is about Containers and States.

There are 3 main types of container – Absolute, Relative and what I’ll call Configurable.

Absolute = specify position (either x,y or via constraints)

Relative = based on the container type (Horez or Vert)

Configurable = uses a parameter to define whether it behaves like an Absolute or Relative container

Container Types

  • Application – specify layout attribute (absolute – default,horizontal,vertical)
  • Canvas – absolute position, children drawn at specified position (0,0) is top left and default position
  • ControlBar – used to draw a toolbar at the bottom of  a Panel or TitleWindow.  It has a direction attribute (horizontal – default, vertical).
  • ApplicationControlBar – used to hold components that provide access to elements throughout the application. If dock is set to true, it remains at the top of the window and does not scroll with the app.
  • Panel – subclass of Box with a layout property. Absolute is default
  • VBox – Vertical layout box
  • HBox – Horizontal layout box
  • Tile – lays out children in horizontal rows or vertical columns determined by the direction property
  • TitleWindow – optimized for use as a popup window. It has a title bar, border and content area, can be specified to have a close button and defined as modal (in which case it takes all keyboard and mouse input while it’s open.

Layout Constraints

pure x,y positioning is rarely a good idea when using absolute layouts as it fails to allow the container to take account of re-sizing and the addition/removal of children. There are two types of layout constraints that can help – edge positioning and enhanced constraints.

Edge Positioning

Flex allows constraints from top, verticalCenter, bottom, left, horizontalCenter or right. For example, if you wanted an object to be 10 pixels in from the right and 5 from the bottom, you would use the parameters right=”10″ bottom=”5″.

Enhanced Constraints

These divide a container into rows and columns that can then be used with offsets to position components.  A constantColumns tag surrounds constantColumn definitions, each specifying an id and width with a similar approach for rows. Components can then be specified using constraints such as left=”col1:5″

Container Size

There are three options for specifying sizes – percent, fixed (in pixels) or content (the default – space is allocated depending on the size of the child objects in that space.

You can also specify maximum and minimum sizes using minHeight, minWidth and the max equivalents.

Container sizes can add up to more than 100% – the container allocates the space proportionately after any fixed size components are taken care of.

A Spacer component can be used in relative components to ensure desired separation. For example if you needed one button on the left of a horizontal container, the other on the far right, you could put a spacer with width=”100%” between them to achieve this.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: