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
