Home Flex Container Canvas Layout Container
Questions:Ask|Latest

 
 

Share on Google+Share on Google+

Canvas Layout Container

Advertisement
Canvas container is one of the commonly used container in flex.

Canvas Layout Container

     

Canvas container is one of the commonly used container in flex. It defines a rectangular placeholder where its child components can be placed. Canvas container is lightweight and good in performance because it does not have the ability to lay its child components automatically. You have to lay the child components yourself. You can use the following layouts for this purpose:

1. Absolute layout

2. Constraint based layout

Children using absolute layout for positioning:

Child components needs to specify the location to position itself within the canvas container using x and y properties of each components. These x and y properties specify the x and y coordinates relative to the upper left corner of the parent canvas container.

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Canvas height="150" width="200" backgroundColor="white">

<mx:LinkButton label="Button 1" x="10" y="30"/>

<mx:LinkButton label="Button 2" x="100" y="30"/>

<mx:LinkButton label="Button 3" x="10" y="100"/>

<mx:LinkButton label="Button 4" x="100" y="100"/>

</mx:Canvas>

</mx:Application>


Output:

Children using constraint based layout for positioning:

Constraints based layout is based on positioning its children by specifying distances from canvas edges and canvas center. This can be done using properties like top, left, bottom, right, horizontalCenter, verticalCenter of children components.

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Canvas width="400" height="200" backgroundColor="#DCF1F2">

<mx:Form backgroundColor="#CA8F8F" top="30" bottom="30" left="50" right="50">

<mx:FormItem label="User Name:" width="100%">

<mx:TextInput/>

</mx:FormItem>

<mx:FormItem label="Password:" width="100%">

<mx:TextInput/>

</mx:FormItem>

<mx:FormItem>

<mx:LinkButton label="OK"/>

</mx:FormItem>

</mx:Form>

</mx:Canvas>

</mx:Application>

 

Output:

Download the source code:

canvas-layout-container.zip 

Advertisements

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: November 14, 2009

Related Tutorials

Ask Questions?    Discuss: Canvas Layout Container  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
DMCA.com