Flex Framework- Common Properties

Aim:

            Some properties are common to all UI Flex Components.

Properties:

1). color=”specify any color “ -Color of text in the component, one way is like GREEN, YELLOW, RED and another way is #2211FF, #AABBCC

2). fontSize=”Specify pixel” -Height of the text, in pixels. You give any number.

3). fontStyle=Determines whether the text is italic font. Recognized values are "normal" and "italic".

4). fontWeight=Determines whether the text is boldface. Recognized values are normal and bold. The default value for Button controls is bold. The default value for all other controls is normal.

5). toolTip=Text to display in the ToolTip.

Flex Framework- Label and TextInput checkbox properties

Flex Framework- Label and TextInput

Aim:

            To understand the properties of the Label and TextInput UI Components.

Label Properties:

           

Label Properties

Id=”String” ID of the component. This value becomes the instance name of the object and should not contain any white space or special characters. Each component throughout an application should have a unique id.

Text=”string” Specifies the plain text displayed by this control. Its appearance is determined by the CSS styles of this Label control.

Color=”color” Color of text in the component

FontFamily=”String” Name of the font to use. Unlike in a full CSS implementation, comma-separated lists are not supported. You can use any font family name. If you specify a generic font name, it is converted to an appropriate device font. The default font for the Halo theme is "Verdana". The default font for the Spark theme is "Arial".

FontSize=”Number” Height of the text, in pixels. In the Halo theme, the default value is 10 for all controls except the ColorPicker control. For the Halo themed ColorPicker control, the default value is 11. In the Spark theme, the default value is 12 for all controls except the ColorPicker control. For the Spark themed ColorPicker control, the default value is 11.

FontStyle=”String” Determines whether the text is italic font. Recognized values are "normal" and "italic".

FontWeight=”String” Determines whether the text is boldface. Recognized values are normal and bold. The default value for Button controls is bold. The default value for all other controls is normal.

TextAlign=”String” Alignment of text within a container. Possible values are "left", "right", or "center". The default value for most components is "left". For the FormItem component, the default value is "right". For the Button, LinkButton, and AccordionHeader components, the default value is "center", and this property is only recognized when the labelPlacement property is set to "left" or "right". If labelPlacement is set to "top" or "bottom", the text and any icon are centered.

TextDecoration=”String” Determines whether the text is underlined. Possible values are "none" and "underline".

Tooltip=”string”  Text to display in the ToolTip.

TextInput properties

Id=”String”ID of the component. This value becomes the instance name of the object and should not contain any white space or special characters. Each component throughout an application should have a unique id.

BorderColot=”color” Color of the border

BorderVisible=”Boolean” Visibility of the border.

Color=”color” Color of text in the component

DisplayAsPassword=”Boolean” Indicates whether this control is used for entering passwords. If true, the field does not display entered text, instead, each text character entered into the control appears as the character "*".

Visible=”Boolean” Whether or not the display object is visible. Display objects that are not visible are disabled. For example, if visible=false for an InteractiveObject instance, it cannot be clicked.

When setting to true, the object dispatches a show event. When setting to false, the object dispatches a hide event. In either case the children of the object does not emit a show or hide event unless the object has specifically written an implementation to do so.

Checkbox Properties

Id=”String” ID of the component.

CornerRadius=”Number” Radius of component corners. The following components support this style: Alert, Button, ComboBox, LinkButton, MenuBar,

Lable=”String” Text to appear on the Button control.

Selected=”Boolean” Indicates whether a toggle button is toggled on (true) or off (false). This property can be set only if the toggle property is set to true.

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