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> 0 </mx:Form> </mx:Canvas> </mx:Application> 1 |
Output:
Download the source code: 2