Flex Framework Using FlexBuilder IDE

Create Login Page in Flex using FlexBuilder

Aim:

            We use Flex Builder to create Login Page.

Get username and password from user and check the username as suresh and password as suresh. If username and password are correct, the welcome message

Will be displayed. Otherwise the error message will be displayed.

Procedure:

            Step 1:

                        Download Flex Builder

            Step 2:

                        Install Flex Builder

            Step 3:

                        Create Flex Project

                        Follow below steps to create Flex Project

jsp requirements for running

REQUIREMENTS FOR RUNNING THE JSP

TOMCAT APPLICATION SERVER

There are many version of the tomcat server.

You can download tomcat server from the following apache official site.

               www.tomcat.apache.org

If you have tomcat 4 or older version, you must set path in environmental variables.

How to set the Environmental variable if you use tomcat 4.

Step 1:

            Goto desktop

Step 2:

               Right click on the My Computer

JSP Introduction

Introduction Of the JSP (Java Server Pages)

            A web application consists of the presentation and business logic.

            Presentation layer- Web Designer

Business Logic- Web Developer

JSP is used to perform Presentation.

What is the presentation layer?

In web site, what are the pages are interacted with the user or client which pages are called UserInterface. Presentation layer is also known as UserInterface.

                       

                        UserInterface- UI components.

Web designer don’t need to know the business logic. They know HTML pages to design the web pages in terms of the page layout, color, and text.

Presentation logic represents the static content.

Business Logic represents the dynamic content.

A web designer can design the web page by using HTML at the same time the web developer can use java code and other jsp tags to code the business logic. So both web designer and web developer can work independently.

Although we use servlet to perform presentation logic, there are some reasons we use jsp to create presentation logic.

Compiling the jsp page.

A jsp page after compilation generates a servlet and therefore incorporates all servlet functionalities.

Servlet and jsp share common features such as OS(Operating System) independent, create DB web application and server side programming.

Difference Between Jsp And Servlet

Servlet files: combine HTML and servlet( HTML file for the static content and servlet file for dynamic content).

In servlet, a change made to any files, we require to re-compile the servlet.

In jsp, jsp allows java to be embedded directly into an HTML page by using tags. The HTML content and java content can also be placed in separate files. So any changes made to HTML content is automatically compiled and loaded onto the server.

Jsp Life cycle:

When the client browser request for the page, the server sends the request to the JSP engine. JSP engine is part of a web container that compiles a jsp page to servlet.

Once a jsp page is translated to a servet, the container invokes life cycle method.

jspInit(): this method is invoked when the servlet is initialized.

jspService(): this method is invoked when the request for the jsp page is received.

jspDestroy(): this method is invoked before the servlet is removed from the service.

              

JSP Introduction

Introduction Of the JSP (Java Server Pages)

            A web application consists of the presentation and business logic.

            Presentation layer- Web Designer

Business Logic- Web Developer

JSP is used to perform Presentation.

What is the presentation layer?

In web site, what are the pages are interacted with the user or client which pages are called UserInterface. Presentation layer is also known as UserInterface.

                       

                        UserInterface- UI components.

Web designer don’t need to know the business logic. They know HTML pages to design the web pages in terms of the page layout, color, and text.

Presentation logic represents the static content.

Business Logic represents the dynamic content.

A web designer can design the web page by using HTML at the same time the web developer can use java code and other jsp tags to code the business logic. So both web designer and web developer can work independently.

Although we use servlet to perform presentation logic, there are some reasons we use jsp to create presentation logic.

Compiling the jsp page.

A jsp page after compilation generates a servlet and therefore incorporates all servlet functionalities.

Servlet and jsp share common features such as OS(Operating System) independent, create DB web application and server side programming.

Difference Between Jsp And Servlet

Servlet files: combine HTML and servlet( HTML file for the static content and servlet file for dynamic content).

In servlet, a change made to any files, we require to re-compile the servlet.

In jsp, jsp allows java to be embedded directly into an HTML page by using tags. The HTML content and java content can also be placed in separate files. So any changes made to HTML content is automatically compiled and loaded onto the server.

Jsp Life cycle:

When the client browser request for the page, the server sends the request to the JSP engine. JSP engine is part of a web container that compiles a jsp page to servlet.

Once a jsp page is translated to a servet, the container invokes life cycle method.

jspInit(): this method is invoked when the servlet is initialized.

jspService(): this method is invoked when the request for the jsp page is received.

jspDestroy(): this method is invoked before the servlet is removed from the service.

              

Flex Framework Radio Button with ActionScript

Flex Framework Radio Button with ActionScript

Aim:

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.

Problem:

Already from previous post, we can understand how to create radio button. Now how to get selected radio button values .

Procedure:

Step 1:

Create project if you don’t have project. Revise the previous post how to create project.

Step 2:

            Create file such as RadioButton.mxml

            Including following coding into the RadioButton.mxml

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

private function display(event:Event):void
{

if(r1.selected)
{
count.text="Male";
}
if(r2.selected)
{
count.text="Female";
}
}


< /mx:Script >

< mx:Panel title="ComboBox and Radio Button" height="500" width="500" layout="vertical" >
< mx:Label id="count"/ >

< mx:RadioButtonGroup id="rad"/ >

< mx:RadioButton id="r1" label="Male" group="{rad}"/ >

< mx:RadioButton id="r2" label="Female" group="{rad}"/ >

< mx:Button label="OK" click="display(event);"/ >

< /mx:Panel >

< /mx:Application >


Step 3:

Include following coding into the build.xml

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

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

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

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

< /target >


< /project >


Step 4:

Run the Application.


Step 5:

Ouput display

If you select Male, the Male ouput is displayed in the Label Button.

Flex Framework ComboBoxScript

Flex Framework ComboBox with actionScript

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

Problem:

Create combo box and display on the label components which choice we will choose.

Requirements:

          1). Combo Box 2). Label 3). Button

Procedure:

Step 1:

Create project. Already I have explained how to create project. If you forget, please remind the previous post.

I give the name for the project FlexExample.

Step 2:

Create file. Already I have explained how to create file. You follow that steps to create file.

I give the name for the file ComboScript.mxml

Flex Framework ComboBox with actionScript

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

Problem:

Create combo box and display on the label components which choice we will choose.

Requirements:

          1). Combo Box 2). Label 3). Button

Procedure:

Step 1:

Create project. Already I have explained how to create project. If you forget, please remind the previous post.

I give the name for the project FlexExample.

Step 2:

Create file. Already I have explained how to create file. You follow that steps to create file.

I give the name for the file ComboScript.mxml

Include the following coding into the ComboScript.mxml


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

private function display(event:Event):void
{
if(country.selectedItem=="India")
{
count.text="India";
}
if(country.selectedItem=="Pakistan")
{
count.text="Pakistan";
}
if(country.selectedItem=="Srilanka")
{
count.text="Srilanka";
}
if(country.selectedItem=="Bangladesh")
{
count.text="Bangladesh";
}
}
< /mx:Script >

< mx:Panel title="ComboBox and Radio Button" height="500" width="500"
layout="vertical" >
< mx:Label id="count"/ >
< mx:ComboBox id="country" >
< mx:String > India < /mx:String >
< mx:String > Pakistan < /mx:String >
< mx:String > Srilanka < /mx:String >
< mx:String > Bangladesh < /mx:String >
< /mx:ComboBox >

< mx:Button label="OK" click="display(event);"/ >

< mx:Panel >

< /mx:Application >


Step 3:

Create build.xml. Already you have build.xml, you just made some changes in build.xml.

Include following coding into build.xml
…..
< exec executable='${compiler}' failonerror='true' >
< arg line='-output F:\FLEXWORKSPACE\FlexExample\ComboScript.swf' / >
< arg line='F:\FLEXWORKSPACE\FlexExample\ComboScript.mxml' / >
< /exec >
…..
…..

if you create new build.xml, you include following coding into build.xml


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

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

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

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


< /project >

Step 4:
Run the Application.

Click build.xml. inside the build.xml window,right click and
select Run As – 1. Ant Build

Step 5:

Go to the folder. Where you have saved the ComboScript.swf and ComboScript.mxml. and open the ComboScript.swf.

Flex Framework Checkbox with ActionScript

Flex Framework CheckBox with ActionScript


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.

Form this post; we can understand which checkbox will be selected using actionscript.

Procedure:

Step 1:

Open Eclipse IDE

Step 2:

Crete Project already we have created project named as FlexPro

Step 3:

Create file CheckboxScript.mxml

Include following coding into the CheckboxScript.mxml


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

< mx:Application xmlns:mx = 'http://www.adobe.com/2006/mxml' >
< mx:Script >
< ![CDATA[
private function display(event:Event):void
{
if(Reading.selected)
{
dis.text="You select Reading Books";
}
if(!Reading.selected)
{
dis.text="You Are Not Select Reading ";
}
if(Playing.selected)
{
dis1.text="You Select Playing Cricket ";
}
if(Watching.selected)
{
dis2.text="You select watchng tv";
}
}

]] >
< /mx:Script >
< mx:Panel title="CheckBox With ActionScript" height="500" width="500" >
< mx:Label id="dis" text="" / >
< mx:Label id="dis1" text="" / >

< mx:Label id="dis2" text="" / >

< mx:CheckBox id="Reading" label="Reading books"/ >

< mx:Button label="OK" click="display(event);"/ >
< /mx:Panel >
< /mx:Application >

Explain:

We create three checkbox and button.

We select checkbox and click OK button.

The control goes to actionscript and call display function. Because in button, we use click=”display(event)”.

We use if control statement, to decide which checkbox is selected.

Step 4:

Already we have build.xml. so no need to create build.xml. you just include the following coding into the build.xml

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

……
……

Step 5:

Run the application

Step 6:

You get output like below

You select Playing Cricket and click OK button.


The message will be displayed in Label 2

Flex Framework TextInput with ActionScript

Flex Framework TextInput with ActionScript

Aim:

            We use Label,TextInput and Button components to create Flex Application.

We enter any value into the TextInput, and click the OK button, the entered the value will be display on the Label. This is our problem.

Let’s go to the Flex application.

Procedure:

            Step 1:

                        Open eclipse.

            Step 2:

                        Create TextInput.mxml

                        Include following coding into TextInput.mxml

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

< mx:Application xmlns:mx = 'http://www.adobe.com/2006/mxml' >
< mx:Script >
< ![CDATA[
private function display(event:Event):void
{
dis.text=disname.text;
}
]] >
< /mx:Script >
< mx:Panel title="TextInput Demo Plus ActionScript"
height="500" width="500"
backgroundColor="Blue" layout="horizontal" >
< mx:Canvas >
< mx:Label text="" id="dis" color="Red" fontSize="25" x="20" y="50"/ >
< mx:TextInput id="disname" x="20" y="100"/ >
< mx:Button label="OK" click="display(event);" x="20" y="150"/ >
< /mx:Canvas >
< /mx:Panel >
< /mx:Application >

Step 3:

Include following coding into build.xml

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

< /exec >

….

Step 4:

Run the Application

Already I have explained how to run the flex application using build.xml.


Step 5:

Get output

Go to where you specify to store swf file.

Open TextInput.swf

Ouput 

you enter any and click OK

I enter S.Sureshkumar,M.Sc,M.Phil,

you get

Flex Framework Label with ActionScript

Flex Framework Label with Actionscript

Aim:

We use label and button UI components. We click on OK button the message “Hello Flex Framework” will be displayed.      

Procedure:

            Step 1:

                        Create Project FlexPro. Using eclipse.

                        From previous post, we can understand how to create project.

            Step 2:

                        Create File LabelScript.mxml

                        Include following coding into the LabelScript.mxml

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

< mx:Application xmlns:mx = 'http://www.adobe.com/2006/mxml' >
< mx:Script >
< ![CDATA[
private function display1(event:Event):void
{
display.text="Hello Flex Framework";
}
]] >
< /mx:Script >
< mx:Panel title="Label Demo Plus ActionScript"
height="500" width="500"
backgroundColor="Blue" >
< mx:Label text="" id="display" color="Red" fontSize="25"/ >
< mx:Button label="OK" click="display1(event);"/ >
< /mx:Panel >
< /mx:Application >

Note:

We use click property in button component, so we click on OK button the display1 function will be called. In display1 function, we assign the Hello Flex Framework.

We include actionscript coding between

< mx:Script >

< /mx:Script >

< mx:Script >
< ![CDATA[
private function display1(event:Event):void
{
display.text="Hello Flex Framework";
}
]] >
< /mx:Script >

Step 3:

Include following coding into the build.xml
….
< exec executable='${compiler}' failonerror='true' >
< line='-output F:\FLEXWORKSPACE\FlexPro\LabelScript.swf' / >
< line='F:\FLEXWORKSPACE\FlexPro\LabelScript.mxml' / >
< /exec >
….

Step 4:

          Run the Application

Click build.xml

Inside build.xml

Right click inside build.xml and select Run As – 1 Ant build

Step 5:

          Goto the where you stored LabelScript.swf file.

          Open LabelScript.swf in any Browser.

          You get output like below

You click OK button “ Hello Flex Framework “ message will be displayed like   below

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