Flex Framework Registeration Form using UI

Flex Framework Registration form

Aim:

Use Label and TextInput and checkbox and combobox and radio button and button to develop the Registration form.

Procedure:

            Step 1:

                        Create project FlexPrject

            Step 2:

                        Create file RegisterDemo.mxml

                        Include following coding into the RegisterDemo.mxml

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

< mx:Label text="Applicant Name" id="aname" x="10" y="30"/ >
< mx:TextInput id="apname" x="140" y="30"/ >

< mx:Label text="Select Country" id="countryr" x="10" y="80"/ >

< mx:ComboBox id="country" x="140" y="80" >
< mx:Array >
< mx:String > India < /mx:String >
< mx:String > Pakistan < /mx:String >
< mx:String > Columbo < /mx:String >
< /mx:Array >
< /mx:ComboBox >

< mx:Label id="sex" x="10" y="130" text="Sex"/ >

< mx:RadioButtonGroup id="ssex"/ >

< mx:RadioButton id="male" label="Male" x="140" y="130" group="{ssex}"/ >

< mx:RadioButton id="female" label="FeMale" x="200" y="130" group="{ssex}"/ >

< mx:Label id="hobby" text="Hobby" x="10" y="180"/ >

< mx:CheckBox id="reading" label="Reading Books" x="140" y="180"/ >
< mx:CheckBox id="playing" label="Playing Cricket" x="260" y="180"/ >
< mx:CheckBox id="watching" label="Watching TV" x="380" y="180"/ >

< mx:Label id="address" text="Address" x="10" y="230"/ >

< mx:TextArea id="Address" width="240" height="100" x="137" y="230"/ >

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

< /mx:Application >

Flex Framework Registeration Form using UI

Flex Framework Registration form

Aim:

Use Label and TextInput and checkbox and combobox and radio button and button to develop the Registration form.

Procedure:

            Step 1:

                        Create project FlexPrject

            Step 2:

                        Create file RegisterDemo.mxml

                        Include following coding into the RegisterDemo.mxml

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

< mx:Label text="Applicant Name" id="aname" x="10" y="30"/ >
< mx:TextInput id="apname" x="140" y="30"/ >

< mx:Label text="Select Country" id="countryr" x="10" y="80"/ >

< mx:ComboBox id="country" x="140" y="80" >
< mx:Array >
< mx:String > India < /mx:String >
< mx:String > Pakistan < /mx:String >
< mx:String > Columbo < /mx:String >
< /mx:Array >
< /mx:ComboBox >

< mx:Label id="sex" x="10" y="130" text="Sex"/ >

< mx:RadioButtonGroup id="ssex"/ >

< mx:RadioButton id="male" label="Male" x="140" y="130" group="{ssex}"/ >

< mx:RadioButton id="female" label="FeMale" x="200" y="130" group="{ssex}"/ >

< mx:Label id="hobby" text="Hobby" x="10" y="180"/ >

< mx:CheckBox id="reading" label="Reading Books" x="140" y="180"/ >
< mx:CheckBox id="playing" label="Playing Cricket" x="260" y="180"/ >
< mx:CheckBox id="watching" label="Watching TV" x="380" y="180"/ >

< mx:Label id="address" text="Address" x="10" y="230"/ >

< mx:TextArea id="Address" width="240" height="100" x="137" y="230"/ >

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

< /mx:Application >

Step 3:

Include following coding into the build.xml

…..

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

Step 4:

Run the Application


Step 5:

Open RegisterDemo.swf

Note:
you specify the directory to store swf file in build.xml

Get output

Flex Framework checkbox Demo

Flex Framework Checkbox Demo

Aim:

A check box is a box on a web page that can be checked by a user. Unlike a radio button, more than one box can be checked at once.

 

Procedure:

          Step 1:

                    Create project

          Step 2:

                    Create file CheckBoxDemo.mxml

                    Include following coding into the CheckBoxDemo.xml

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

< mx:CheckBox id="reading" x="10" y="80" label="Reading Books"/ >
< mx:CheckBox id="playing" x="10" y="130" label="Playing Cricket"/ >
< mx:CheckBox id="watching" x="10" y="180" label="Watching TV" / >

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

Step 3:

Configure in build.xml


Include following coding into the build.xml

….
….

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

….
….

Step 4:

Run the Application

Step 5:

Output

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