Flex Framework-combo box radio button properties

Flex Framework-combo box radio button properties


Aim:


To understand the properties of the combo box radio button propertie.


combobox Properties:

Flex Framework Canvas

< mx:Canvas > … < /mx:Canvas >

< mx:Canvas > .. < /mx:Canvas > is container for Flex UI components.

Properties of the < mx:Canvas >

backgroundColor=”Background color of a component”

Type:

            String

borderColor=”Color of the border”

type:

            specify any color

borderStyle=”Bounding box style. The possible values are "none", "solid", "inset", and "outset"

type:

      specify any one of the four values.

borderVisible=”Visibility of the border”

Type:

Boolean

Color: Color of text in the component

Type:

            Specify any color

ContentBackgroundcolor=”Color of text in the component”

Type:

            Specify any color

cornerRadius=”Radius of component corners”

type:

            number

label=”The text displayed by some navigator containers to represent this Container.”

Type:String

Visible=”Whether or not the display object is visible.”

Type:

            Boolean

fontFamily="String"
fontSize="Number"

example:

step 1:

            create file PanelPro.mxml

step 2:

            include following coding into PanlePro.mxml

< ?xml version="1.0" encoding="utf-8"? >
< s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" >

< mx:Panel
title="Panel"
height="400" width="400"
backgroundColor="RED"
borderColor="GREEN"
borderStyle="outset"
borderVisible="true"
color="YELLOW"
contentBackgroundColor="#2211FF"
cornerRadius="25"
disabledColor="#232323"
layout="absolute"

x="100"
y="10"
fontFamily="Arial"
fontSize="15" >

< mx:Canvas
backgroundColor="RED"
borderColor="GREEN"
cornerRadius="15" >


< /mx:Canvas >

< /mx:Panel >

< /s:Application >

Properties of Panel

Panel- < mx:Panel > .. < /mx:Panel >


Properties of the panel are given below

title="String"-title of the panel
height="Number" width="Number"
backgroundColor="Color"
borderColor="Color"
borderStyle="Font Style"
borderVisible="Boolean"
color="Color"
contentBackgroundColor="Color"
cornerRadius="Number"
disabledColor="Color"
layout="String"
1). Absolute 2). Horizontal 3). Vertical
x="Number"
y="Number"
fontFamily="String"
fontSize="Number"

Example

Step1 :

          Create mxml file such as PanelPro.mxml

Step 2:

          Include following coding into PanelPro.mxml

< ?xml version="1.0" encoding="utf-8"? >
< s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" >

< mx:Panel
title="Panel"
height="400" width="400"
backgroundColor="RED"
borderColor="GREEN"
borderStyle="outset"
borderVisible="true"
color="YELLOW"
contentBackgroundColor="#2211FF"
cornerRadius="25"
disabledColor="#232323"
layout="absolute"

x="100"
y="10"
fontFamily="Arial"
fontSize="15" >

< /mx:Panel >

< /s:Application >

output:

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

File à New à Flex Project

New Flex Project window will open.

Where you give Flex Project Name

And click Next and Next and Finish.

Flex Project will be successfully created.

Step 4:

            Create MXML application

            Right click on src and select

New MXML Application window will open. Like below

Where you give file name such as Login

Login.mxml file will be created successfully.

Screen shots like below

You can insert code within the < s:Application > < /s:Application >

< mx:Panel > < /mx:Panel > is container for Flex Components.

We create two Label one for username and another for password

< mx:Label id=”uname” text=”UserName”/ > for UserName

< mx:Label id=”pwd” text=”PassWord”/ > for PassWord


We create one TextInput for username.

< mx:TextInput id=”username”/ >

We create one TextInput with displaywithpassword as true.

< mx:TextInput id=”password” displaywithpassword =’true’/ >

or copy below coding and paste into your Login.mxml

< ?xml version="1.0" encoding="utf-8"? >
< s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" >

< fx:Script >
< ![CDATA[
import mx.controls.Alert;
protected function button1_clickHandler(event:MouseEvent):void
{
if((username.text=='suresh')&& (password.text=='kumar'))
{
Alert.show("welcome "+username.text,"Welcome");
}
else
{
Alert.show("Check username and Password","Error");
}
}
]] >
< /fx:Script >

< fx:Declarations >
< !-- Place non-visual elements (e.g., services, value objects) here -- >
< /fx:Declarations >

< mx:Panel title="Login" height="400" width="400" >
< mx:Canvas >


< mx:Label id="uname" text="Username" x="50" y="50"/ >
< mx:TextInput id="username" x="130" y="50"/ >

< mx:Label id="pwd" text="Password" x="50" y="100"/ >
< mx:TextInput id="password" x="130" y="100" displayAsPassword="true"/ >

< mx:Button label="OK" x="50" y="150" click="button1_clickHandler(event)"/ >

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

step 5:

          Run the application

          Go to Run and select Run Login

you give username as suresh and password as kumar

ouput like below

if username or password are wrong

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.