Hi there,
I have a flex app, which show login panel at beginning, with animation effect. after login, it shows the main app menubar, treeview, working panels, etc.
I put all of these view component within 1 mxml, using some logic to set the visibility for login panels and the nagivation/working panel.
now I wan to refactor all of these to puremvc framework. any advice on how i can start my work?
I understand that I need to separate some of the viewcomponent into separate mxml and define their own mvc folders with some codes. but what about the animation and state? where to put them together?
any advice will be appreciated. Thanks!
Henry
<mx:Application xmlns:comp="my.customcomponents.*"
xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="init()" width="100%" height="100%"
verticalAlign="middle" horizontalAlign="center">
<mx:states>
<mx:State name="showLogin">
<mx:SetProperty target="{pnlLogin}" name="visible" value="true"/>
<mx:SetProperty target="{mainApp}" name="visible" value="false"/>
<mx:SetProperty target="{DBPanel}" name="visible" value="false"/>
<mx:SetProperty target="{menu}" name="enabled" value="false"/>
</mx:State>
<mx:State name="showMainApp">...some states</mx:State>
</mx:states>
<mx:transitions>
<mx:Transition fromState="*" toState="showLogin" >
<mx:Sequence>
/...some transition
</mx:transitions>
<mx:Panel id="pnlLogin" width="430" height="224" layout="absolute"
title="FBI Console - Login Panel" horizontalAlign="center" verticalAlign="middle">
<mx:Button x="267.5" y="136" label="Login" click="processLogin()"/>
<mx:TextInput x="163.5" y="45" id="txtUserID" editable="true" enabled="true"
text="demo"/>
<mx:TextInput x="163.5" y="90" id="txtPassword" displayAsPassword="true"
editable="true" enabled="true" text="1234"/>
<mx:Text x="95.5" y="47" text="User ID : "/>
<mx:Text x="86.5" y="92" text="Password : "/>
<mx:Label id="lblLoginStatus" x="86.5" y="138" width="173" fontFamily="Verdana" fontWeight="bold" color="#0B333C"/>
</mx:Panel>
<mx:ApplicationControlBar id="menu" paddingLeft="15" paddingRight="15" dock="true"
x="0" y="0" width="100%" height="35">
<mx:MenuBar width="100%" labelField="@label"
itemClick="itemClickHandler(event);" >
<mx:XMLList>
<menuitem label="File">
<menuitem label="Browser"/>
</menuitem>
<menuitem label="CoMa"/>
<menuitem label="Help" >
<menuitem label="About" type="radio" groupName="one"/>
<menuitem label="Help" type="radio" groupName="one"/>
</menuitem>
</mx:XMLList>
</mx:MenuBar>
</mx:ApplicationControlBar>
<mx:HDividedBox id="mainApp" x="0" y="0" width="100%" height="100%">
<mx:Panel width="30%" height="100%" layout="absolute">
<mx:Tree id="tree" width="100%" height="100%" showRoot="false"
dataProvider="{xmlMap}" itemClick="treeItemClick(event);"
labelField="@label" iconField="@icon">
</mx:Tree>
</mx:Panel>
//some others object lies here..
</mx:HDividedBox>
</mx:Application>