View States in Flex

In flex we have got a wonderful and amazing concept of states through which different views can be obtained dynamically for a single form. We need to share lots of information in a little space provided, because that would only help the viewer to be busy and interested in reading. To achieve those thing states really helps.

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

Simply saying states are used in adding, removing or customizing a component at the run time dynamically. The properties, style, position, event handling even the whole component can be changed or customized at run time through view states.

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: | | | | | | | | |