| | {section} |
| | {column:width=80%} |
| | |
| | h2. Canvas container - relative positioning (constraint-based layout) |
| | |
| | * Anchor the sides or center of a component to positions relative to the component's container. |
| | * Size and position of components resize when the user resizes the application window. |
| | * The container's layout property must be set to absolute. |
| | * All constraints are set relative to the edges of the container, not to other controls in the container. |
| | * Left, right, top, bottom, horizontalCenter, and verticalCenter properties are anchors in constraint-based layouts |
| | {column} |
| | {column} |
| | {adbe-prev:http://learn.adobe.com/wiki/display/Flex/Canvas+-+absolute} |
| | {adbe-next:http://learn.adobe.com/wiki/display/Flex/Combined+Layout} |
| | {rate:title=User rating|theme=dynamic|key=focal|display=default} |
| | {column} |
| | {section} |
| | |
| | h3. Photo.mxml |
| | |
| | The following example demonstrated positioning children in an absolute-based layout using the top, bottom, left, right, horizontalCenter, and verticalCenter styles. |
| | {code} |
| | <?xml version="1.0" encoding="utf-8"?> |
| | <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" |
| | layout="absolute" |
| | backgroundColor="#FFFFFF" |
| | backgroundAlpha="0"> |
| | |
| | |
| | <mx:HDividedBox width="100%" height="300"> |
| | <mx:Canvas backgroundColor="#FFFFCC" |
| | width="150" height="100%"> |
| | <mx:Label text="Adjust this section" left="15" /> |
| | </mx:Canvas> |
| | |
| | <mx:Canvas> |
| | <mx:Button label="< prev" |
| | left="10" top="120"/> |
| | |
| | <mx:Image source="animals03.jpg" |
| | horizontalCenter="0" top="30"/> |
| | |
| | <mx:Label text="Photographed by Elsie Weil" |
| | horizontalCenter="0" top="250"/> |
| | |
| | <mx:Button label="next >" |
| | right="10" top="120"/> |
| | </mx:Canvas> |
| | </mx:HDividedBox> |
| | </mx:Application> |
| | {code} |
| | |
| | h2. Rendered Sample |
| | |
| | | {test-flash:625|300|Use_C_Constraint1.swf}Use_C_Constraint1{test-flash} |
| | | {test-flash:300|625|Use_C_Constraint1.swf}Use_C_Constraint1{test-flash} |
| | |
| | {adbe-prev:http://learn.adobe.com/wiki/display/Flex/Canvas+-+absolute} |
| | {adbe-next:http://learn.adobe.com/wiki/display/Flex/Combined+Layout} |
