Flex Framework Combo Box and Radio Button Demo

Flex Framework Combo Box and Radio button

Aim:

            A combo box is a commonly used graphical user interface. A combo box is a component with a drop-down arrow that users click to display an associated list of choices

A radio button or option button is a type of graphical user interface element that allows the user to choose only one of a predefined set of choices.

Procedure:

          Step 1:

                    Create Project Already we have created project named such as FlexProject.

          Step 2:

                    Create file ComboBoxDemo.mxml. Already we have seen how to create file. So you follow some steps to create file.

Include following coding into ComboBoxDemo.mxml

Flex Framework Combo Box and Radio Button Demo

Flex Framework Combo Box and Radio button

Aim:

            A combo box is a commonly used graphical user interface. A combo box is a component with a drop-down arrow that users click to display an associated list of choices

A radio button or option button is a type of graphical user interface element that allows the user to choose only one of a predefined set of choices.

Procedure:

          Step 1:

                    Create Project Already we have created project named such as FlexProject.

          Step 2:

                    Create file ComboBoxDemo.mxml. Already we have seen how to create file. So you follow some steps to create file.

Include following coding into ComboBoxDemo.mxml

< ?xml version = '1.0' encoding = 'ISO-8859-1'? >
< mx:Application xmlns:mx = 'http://www.adobe.com/2006/mxml' >
< mx:Panel title="ComboBox Example" height="500" width="500" >
< mx:Canvas >
< mx:ComboBox x="50" y="100" >
< mx:Array >
< mx:String > Select Country < /mx:String >
< mx:String > India < /mx:String >
< mx:String > Elam < /mx:String >
< /mx:Array >
< /mx:ComboBox >

< mx:RadioButtonGroup id="radioGroup" / >


< mx:RadioButton color="Red" x="10" y="10" id="radioButton1" label="Red" group="{radioGroup}" / >
< mx:RadioButton x="90" y="10" id="radioButton2" label="Orange" group="{radioGroup}" / >


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


Step 3:

Made some changes in build.xml


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



Step 4:


Run the Application

Step 5:

          Output

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