Follow Flex After Dark on Twitter

Flex Canvas (mx.containers.Canvas)

The Canvas is a container used for absolute positioning of its children. The Canvas class is found in the mx.containers package.

A Canvas layout container defines a rectangular region in which you place child containers and controls. It is the only container that lets you explicitly specify the location of its children within the container by using the x and y properties of each child.

The below example uses a Canvas as a container to absolute position some child controls:

   <mx:Canvas>
      <mx:Label x="0" y="0" text="A0" />
      <mx:Label x="100" y="0" text="A1" />
      <mx:Label x="0" y="100" text="B0" />
      <mx:Label x="100" y="100" text="B1" />
   </mx:Canvas>

Flex sets the children of a Canvas layout container to their preferred width and preferred height. You may override the value for a child's preferred width by setting its width property to either a fixed pixel value or a percentage of the container size. You can set the preferred height in a similar manner.

Unique characteristics of the Canvas container:

  • Child components are absolutely positioned using x and y coordinates
  • Child components can overlap

Canvas is the only container that lets you explicitly specify the location of its children within the container by using the x and y properties of each child.

When you use a Canvas container components may overlap.

A canvas can also be used for constraint-based layouts. Constraint-based layouts use the following attributes: top, left, bottom, right, horizontalCenter, verticalCenter.

Related Links:

Related Docs
Recent Docs
  • Flex Canvas The Flex Canvas container can be used for absolute layout and position of children.
  • Flex Styles Styles is Flex are similar to CSS.
  • AIR Runtime AIR Runtime
  • Flex Menus Using Menus in Flex.
  • Flex Fonts Working with Fonts in Flex, including embedding and runtime loading.
Random Docs