| | {section} |
| | {column:width=80%} |
| | |
| | h2. Canvas container - absolute positioning |
| | |
| | * Canvas is the only container that lets you explicitly specify the location of its children within the container. |
| | * Canvas has only one layout value - absolute. |
| | * Use the x and y properties of child components for pixel-perfect layouts. |
| | * If the display window is resized, the child components stay fixed in place and may appear cut off. |
| | * Using absolute positioning you can make child controls overlap if desired. |
| | {column} |
| | {column} |
| | {adbe-prev:http://learn.adobe.com/wiki/display/Flex/Box+Model} |
| | {adbe-next:http://learn.adobe.com/wiki/display/Flex/Canvas+-+relative} |
| | {rate:title=User rating|theme=dynamic|key=focal|display=default} |
| | {column} |
| | {section} |
| | {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:Canvas x="23" y="34"> |
| | |
| | <mx:Button label="< prev" |
| | x="4" y="97" /> |
| | |
| | <mx:Image source="assets/animals03.jpg" |
| | x="85" y="4" /> |
| | |
| | <mx:Label text="Photographed by Elsie Weil" |
| | x="85" y="230" /> |
| | |
| | <mx:Button label="next >" |
| | x="381" y="97" /> |
| | |
| | </mx:Canvas> |
| | |
| | </mx:Application> |
| | {code} |
| | |
| | h2. Rendered Sample |
| | |
| | | {test-flash:500|300|Use_B_Canvas_Absolute.swf}Use_B_Canvas_Absolute{test-flash} |
| | | {test-flash:300|400|Use_B_Canvas_Absolute.swf}Use_B_Canvas_Absolute{test-flash} |
| | |
| | {adbe-prev:http://learn.adobe.com/wiki/display/Flex/Box+Model} |
| | {adbe-next:http://learn.adobe.com/wiki/display/Flex/Canvas+-+relative} |
