When you define a view state, you specify the changes, or overrides, from the base state to the new view state, or from any other view state to the new view state. As part of the view state, you can define the following overrides:
- Set the value of object properties
- Set the value of component styles
- Add or remove components
- Change the event handler assigned to an event
Here their is a simple example for working out with states
<?xml version="1.0" ?>
<!-- Simple example to demonstrate the States class. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:ns1="*" width="400" height="334" borderColor="#44A50A" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#BF1F1F, #BF1F1F]">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function checkLogin():void{
if(usernameTextInput.text==""||passwordTextInput.text=="")
Alert.show('user name and password are mandatory');
else if(usernameTextInput.text=="gowri"&&passwordTextInput.text=="sankar")
Alert.show('Hi '+usernameTextInput.text+'!, loggedin Successfully');
else
Alert.show(usernameTextInput.text+', You are not authenticated');
usernameTextInput.text=="";
passwordTextInput.text=="";
}
private function checkRegister():void{
if(usernameTextInput.text==""||passwordTextInput.text==""||conformTextInput.text=="")
Alert.show('user name, password and Conform password are mandatory');
else if(passwordTextInput.text!=conformTextInput.text)
Alert.show('password doesnot match');
else
Alert.show('Hi '+usernameTextInput.text+'!, You are registered');
usernameTextInput.text="";
passwordTextInput.text="";
conformTextInput.text="";
}
]]>
</mx:Script>
<mx:states>
<mx:State name="Register">
<mx:AddChild relativeTo="{loginForm}" position="lastChild">
<mx:target>
<mx:FormItem id="conform" label="Conform:">
<mx:TextInput id="conformTextInput" displayAsPassword="true"/>
</mx:FormItem>
</mx:target>
</mx:AddChild>
<mx:SetProperty target="{loginPanel}" name="title" value="Register" />
<mx:SetProperty target="{loginButton}" name="label" value="Register" />
<mx:SetEventHandler target="{loginButton}" name="click" handler="checkRegister()"/>
<mx:SetStyle target="{loginButton}" name="color" value="Blue"/>
<mx:RemoveChild target="{registerLink}"/>
<mx:AddChild relativeTo="{spacer1}" position="before">
<mx:target>
<mx:LinkButton id="loginLink" label="Return to Login" click="currentState=''"/>
</mx:target>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:Panel layout="absolute" title="Login" id="loginPanel" verticalScrollPolicy="off" horizontalScrollPolicy="off" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10" >
<mx:Form x="10" y="57" width="310" height="120" id="loginForm">
<mx:FormItem label="User Name" id="usernameTI">
<mx:TextInput id="usernameTextInput"/>
</mx:FormItem>
<mx:FormItem label="Password">
<mx:TextInput id="passwordTextInput" displayAsPassword="true" enabled="true"/>
</mx:FormItem>
</mx:Form>
<mx:Text x="10" y="-3" width="100%" text=" GSMail" enabled="true" color="#DFA20F" fontSize="19"/>
<mx:ControlBar>
<mx:LinkButton label="Need to Register?" id="registerLink" click="currentState='Register'" alpha="0.0"/>
<mx:Spacer width="114" id="spacer1"/>
<mx:Button label="Login" id="loginButton" click="checkLogin()"/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>
The output of the program looks some thing like this
Here the login gets succuss if the user name is 'Gowri' and the password is 'sankar' that can be changed in the code at line number 11.For new users to get register a link is provided at the left bottom through which the state of the application is changed. And a new text input appears in the form for password confirmation. if the password in both the fields matches a alert for registration is shown else error!
Here viewstates are used to jump between these two states.
Download source GSMailLogin.mxml here
Add Post To: |
|
|
|
|
|
|
|
|
Posts
