Share on Google+Share on Google+

Canvas Layout Container in Flex4

Advertisement
The Canvas layout Container is used for define a rectangular region in which the user can place child component or controls.

Canvas Layout Container in Flex4:

The Canvas layout Container is used for define a rectangular region in which the user can place child component or controls. The Canvas layout Container is a MX component. There is no spark component. You can use absolute layout of position of child components. The tag of Canvas Layout Container is <mx:Canvas>.

In this example the colored area shows the Canvas container.

Example:

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

minWidth="955" minHeight="600">

<s:Panel title="Canvas Layout Container Example" width="253" height="301">

<mx:Canvas backgroundColor="#DBAAAA"

width="223"

height="245"

x="14" y="12">

<mx:LinkButton label="JAVA"

x="39" y="23"

click="navigateToURL(new URLRequest('http://www.roseindia.net/java'))"/>

<mx:Image

height="50" width="50"

x="100" y="10"

source="@Embed('C:/work/bikrant/flex4component/horizontallist/java.jpg')"

click="navigateToURL(new URLRequest('http://www.roseindia.net/java'))"/>

<mx:LinkButton label="iPHONE"

x="34" y="91&"

click="navigateToURL(new URLRequest('http://www.roseindia.net/iphone'))"/>

<mx:Image

height="/font>50" width="50"

x="100" y="75"

source="@Embed('/C:/work/bikrant/flex4component/horizontallist/iphone.gif')"

click="navigateToURL(new URLRequest('http://www.roseindia.net/iphone'))"/>

<mx:LinkButton label="FLEX"

x="46" y="153"

click="navigateToURL(

new URLRequest('http://www.roseindia.net/flex'))"/>

<mx:Image

height="50" width="50"

x="100" y="140"

source="@Embed('/C:/work/bikrant/flex4component/horizontallist/flex.jpg')"

click="navigateToURL(

new URLRequest('http://www.roseindia.net/flex'))"/>

</mx:Canvas>

</s:Panel>

&</s:Application>

Output:/h3>

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Download this code

Advertisements

Advertisement

Posted on: May 31, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

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.