Flex Framework Canvas Demo

Flex Framework-Canvas Demo

Aim:

Canvas is a container for components. In canvas the components will be displayed by using the canvas’s attributes x and y.

           

Procedure:

            Step 1:

                        Already we have created project FlexProject.

                        So right click on FlexProject and create file CanvasDemo.mxml

                        Include following coding into the  CanvasDemo.mxml

< ?xml version = '1.0' encoding = 'ISO-8859-1'? >
< mx:Application xmlns:mx = 'http://www.adobe.com/2006/mxml' >
< mx:Panel title="Without Canvas" height="500" width="500" layout="vertical" >
< mx:Label text="UserName" id="username"/ >
< mx:TextInput id="uname"/ >
< /mx:Panel >
< /mx:Application >

Note: we don’t use canvas.

So you can analysis how the components will be displayed in Panel.

Step 2:

          Create build.xml

          Already we have build.xml

          So no need to create build.xml file again.

          So we made some changes in build.xml

…
…
< exec executable='${compiler}' failonerror='true' >
< arg line='-output F:\FLEXWORKSPACE\FlexProject\CanvasDemo.swf' / >
< arg line='F:\FLEXWORKSPACE\FlexProject\CanvasDemo.mxml' / >
< /exec >
…
…

Step 3:

          Run the Application

If successfully run the CanvasDemo.swf file will be created.

Step 4:

          Open the CanvasDemo.swf

Step 5:

Now we use layout attribute as
layout=”horizontal”

We made some changes in CanvasDemo.mxml

We just modify the layout attribute.

< ?xml version = '1.0' encoding = 'ISO-8859-1'? >
< mx:Application xmlns:mx = 'http://www.adobe.com/2006/mxml' >
< mx:Panel title="Without Canvas" height="500" width="500" layout="horizontal" >

< mx:Label text="UserName" id="username"/ >
< mx:TextInput id="uname"/ >

< /mx:Panel >
< /mx:Application >


Step 6:

Run the Application

 

Step 7:

If successfully run,

We will open

Step 8:

              Suppose we need to place the UI components as we want.

             

When we < mx:Canvas > …. < / mx:Canvas >

Without < mx:Canvas > the components will be displayed like below

< ?xml version = '1.0' encoding = 'ISO-8859-1'? >
< mx:Application xmlns:mx = 'http://www.adobe.com/2006/mxml' >
< mx:Panel title="Without Canvas" height="500" width="500" layout="horizontal" >

< mx:Label text="UserName" id="username" x="20" y="30"/ >
< mx:TextInput id="uname" x="100" y="30"/ >

< mx:Label text="Password" id="password"/ >
< mx:TextInput id="pwd"/ >


< /mx:Panel >
< /mx:Application >

We want to place the components like below

We use < mx:Canvas > UI components < / mx:Canvas > to place the UI components like above.

We include UI components between the < mx:Canvas > and < / mx:Canvas >

We have already CanvasDemo.mxml

We made some changes in CanvasDemo.mxml

< ?xml version = '1.0' encoding = 'ISO-8859-1'? >
< mx:Application xmlns:mx = 'http://www.adobe.com/2006/mxml' >
< mx:Panel title="With Canvas" height="500" width="500" layout="horizontal" >
< mx:Canvas >

< mx:Label text="UserName" id="username" x="20" y="50" fontSize="20"/ >

< mx:TextInput id="uname" x="150" y="50"/ >

< mx:Label text="Password" id="password" x="20" y="120" fontSize="20"/ >

< mx:TextInput id="pwd" x="150" y="120"/ >

< mx:Canvas >
< /mx:Panel >
< /mx:Application >

Run the Application

We get output like below

Thank you, for you patient