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

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

Flex Framework Button Demo

Flex Framework Button Demo with ActionScript

Aim:

            To Learn the Button and ActionScript.

Properties:

            Button have many properties:

            A). label- name of the button

            B). cornerRadius=”4”

            C). click- to call actionscript

Procedure:

Step 1:

            Create  Project FlexProject.

From previous post, we understand how to create project for flex framework.

Step 2:

            Create File

            I have used file name as ButtonDemo.mxml

            Include following coding into the ButtonDemo.mxml

           

< ?xml version = '1.0' encoding = 'ISO-8859-1'? >
< mx:Application xmlns:mx = 'http://www.adobe.com/2006/mxml' >
< mx:Script >
< ![CDATA[
private function display(event:Event):void
{
button.text="Hello";
}
]] >
< /mx:Script >
< mx:Panel title="Button Demo" height="500" width="500" layout="vertical" >
< mx:Label id="button" text="" color="#11EE22"/ >
< mx:Button label="Click"
color="Green"
cornerRadius="14"
click="display(event);"/ >
< /mx:Panel >
< /mx:Application >

Step 3:

          Made some changes in build.xml

          Already I have created build.xml

          So we made some changes in build.xml

……..

……..

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

………
………

Step 4:

Run the Application

Step 5:

          Open the ButtonDemo.swf in Browser.

          You get output

Click button the output

Hello

Flex Framework TextBox Demo

Flex Framework TextInput

Aim:

            To learn the TextInput

Properties:

                        A). id-to get taxt box value

         B). displayAsPassword="false|true"

                      C).maxChars="0"

         D). length="0"

                      E). textHeight="0"

                            textWidth="0"

Procedure:

            Step 1:

                         Create Project

                         I have used the project name as FlexProject.

                        How to create project

                        Follow the following steps

                        1). Open Eclipse

                        2). Go File—New—Project

                        Window will open like below

Flex Framework TextBox Demo

Flex Framework TextInput

Aim:

            To learn the TextInput

Properties:

                        A). id-to get taxt box value

         B). displayAsPassword="false|true"

                      C).maxChars="0"

         D). length="0"

                      E). textHeight="0"

                            textWidth="0"

Procedure:

            Step 1:

                         Create Project

                         I have used the project name as FlexProject.

                        How to create project

                        Follow the following steps

                        1). Open Eclipse

                        2). Go File—New—Project

                        Window will open like below

The new window named New Project will open

Click next the another New Project window will open.

Click Next and Finish .

The project FlexProject will successfully created.

Step 2:

            Create mxml file

            I have used file name as TextInput

            Right click on FlexProject  -- New – File

New File Window will open. like below

                Where you give file name with extension TextInput.mxml.

                Note:

                                Don’t forget to put extension mxml with file name.

Click Finish . the file will successfully created.

Now you can see the TextInput.mxml on the left side window that is project explorer

]

You include following coding into TextInput.mxml

< ?xml version = '1.0' encoding = 'ISO-8859-1'? >
< mx:Application xmlns:mx = 'http://www.adobe.com/2006/mxml' >
< mx:Panel title="Text Demo" height="500" width="500" >
< mx:TextInput id="UserName"/ >
< /mx:Panel >
< /mx:Application >

Note:

< mx:Panle > … < / mx:Panle > is container to have all components.

Step 3:

            Already I have explained how to create build.xml

            You need only one build.xml for the project.

            There is no need to create more than one build.xml

The New File window will open.

Where you give file name as build.xml

And add following coding into the build.xml

< project name='Flex' default='mxml' >

< target name='mxml' >

< property name='compiler' location='E:\InstalledSoftware\FlexSoftware\bin\mxmlc.exe' / >

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

< echo > mxml file compiled successfully < /echo >
< echo > swf file generated successfully < /echo >
< /target >
< /project >





Note:

< property name='compiler' location='E:\InstalledSoftware\FlexSoftware\bin\mxmlc.exe' / >


You specify where the flex compiler is saved.

mxmlc.exe is flex compiler.


< arg line='-output F:\FLEXWORKSPACE\FlexProject\TextInput.swf' / >

you specify where you will save the TextInput.swf

< arg line='F:\FLEXWORKSPACE\FlexProject\ TextInput.mxml' / >
You specify where you have stored mxml file here TextInput.mxml file .


Remember if you want to create another mxml file. No need to create another build.xml

You made some changes in build.xml

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

Step 4:

          Run

          Open build.xml

Right click inside the  build.xml file and Run As – 1 Ant Build

And go to F:\FLEXWORKSPACE\FlexProject\TextInput.swf

And select TextInput.swf

You get ouput

Flex Framework Label Demo

Flex – Label Demo

Aim:

Properties:

            a). id - to get values of the label.

            b). text- display the text on the Label

            c). fontSize- to set the font size

            d). fontWeight- to decide bold or not

            e). fontStyle-to set the style of the font

            f). color- to set the color of the text

Procedure:

           

            Step 1:

                        Open eclipse and create project Flexproject

            Step 2:

                        Create file I have used file name as LabelPro1.mxml

                        A).

New file window will open like below

where you can give LabelPro.mxml

Click Finish.

Empty LabelPro1.mxml file will open.

You should write the programming coding here.

We are going to create Label components.

Include following coding into the LabelPro1.mxml

< ?xml version = '1.0' encoding = 'ISO-8859-1'? >
< mx:Application xmlns:mx = 'http://www.adobe.com/2006/mxml' >
< mx:Panel title="Label Demo" height="500" width="500" >
< mx:Label id="title" text="Welcome" color="Red" >
fontFamily="Verdana"
fontSize="15"
fontStyle="italic"
fontThickness="0"
fontWeight="bold"/ >
< /mx:Panel >
< /mx:Application >

Screen display

Step 3:

Made some changes in build.xml

……

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

…….


Screen shot

Step 4:

          To run the flex application

          Select build.xml

Inside the build.xml window and right click on and Run As – 1. Ant  Build

If there is no error, the console will display like below

Step 5:

          Go to where you specify to store swf file. And select swf.

          The output will display like below

Flex Framework using eclipse to run flex

Using Eclipse IDE

Aim:

            Using Eclipse IDE, to develop the Flex technology.

Procedure:

            Step 1:

                        Download Eclipse www.eclipse.org/downloads/

Download Flex SDK  flex_sdk_4.1 from http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3

Unzip the Flex sdk_4.1

I have unzipped Flex sdk_4.1 into the

E:\InstalledSoftware\FlexSoftware

            Step 2:

            2.1. Open the Eclipse

Click ok. The eclipse will open.

2.2. Create Project

            Go File—New—Project

New Project window will open.

You select General and Project and click Next>

Another New Project window will open. where you give project name such as

FlexProject

Next> and Finish.

New Project named FlexProject was successfully created.

Step 3:

            Create file named FlexExample

            Right click on FlexProject—New—File—new window will open

            Where you give filename such as FlexExample.mxml.

            Extension is mxml. Don’t forget to give extension mxml.

click Finish

File FlexExample.mxml have been created successfully.

Include following coding into FlexExample.mxml

< ?xml version = '1.0' encoding = 'ISO-8859-1'? >
< mx:Application xmlns:mx = 'http://www.adobe.com/2006/mxml' >
< mx:Script >

< /mx:Script >
< mx:Panel title = 'Navaladiyan Technology' color = 'green' height="500" width="500" >
< mx:Canvas >

< mx:Label text="UserName" id="username" x="100" y="100" color="Red"/ >
< mx:TextInput id="tusername" x="180" y="100" color="Blue"/ >

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

Step 4:

Create build.xml

Right click on FlexProject—New—File—new window will open

Where you give filename build.xml (note don’t change the name)

Note:

            Don’t change the name  build.xml.

open the build.xml

include following coding into build.xml

< project name='Flex' default='mxml' >

< target name='mxml' >
< property name='compiler' location='E:\InstalledSoftware\FlexSoftware\bin\mxmlc.exe' / >
< exec executable='${compiler}' failonerror='true' >
< arg line='-output F:\FLEXWORKSPACE\FlexProject\FlexExample.swf' / >
< arg line='F:\FLEXWORKSPACE\FlexProject\FlexExample.mxml' / >
< /exec >
< echo > mxml file compiled successfully < /echo >
< echo > swf file generated successfully < /echo >
< /target >


< /project >

Note:

< property name='compiler' location='E:\InstalledSoftware\FlexSoftware\bin\mxmlc.exe' / >

You specify the location where you installed the flex mxmlc.

mxmlc is flex compiler which is located in bin directory of the flex.


< arg line='-output F:\FLEXWORKSPACE\FlexProject\FlexExample.swf' / >

where you specify the directory where you have to store swf file.


< arg line='F:\FLEXWORKSPACE\FlexProject\FlexExample.mxml' / >

here you specify the directory where you have stored mxml file.


Step 5:

Run the application

Select build.xml

Right click the inside the build.xml

Select Run As and 1 Ant Build

Console will open like below

Step 6:

                        Open the flex file in Browser

            Go to the where you have stored the mxml file and swf.

            And select appropriate file I have opened the FlexExample.swf.

Step 7:

Get output