[flexcoders] Re: Question on States

Tue, 20 Jun 2006 22:03:37 -0700

Hi Malik,

I'll try to address your questions.  These are important questions to have answered.

States can be like "layers".  They can also be independent of each other.  How they are used is up to the developer.   States that are basedOn another state become children of the base state.  The states are layered.  This approach would be effective if you had many common view items that need to persist.  Another approach is to keep the base state of the application as clean as possible and avoid layering.  This gives you a blank canvas to work with.  You then have the freedom to add and remove views in a flexible manner with less overlap to contend with.  Take a look at the code below to see an example that might assist you.

Thanks for the question,
Tim Hoff

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    paddingTop="-2" paddingBottom="6" paddingLeft="2" paddingRight="6"
    horizontalScrollPolicy="off" verticalScrollPolicy="off"
    xmlns:topMenu="yourComponents.topMenu.*"
    xmlns:sidePanel="yourComponents.view.sidePanel.*"
    xmlns:mainPanel="yourComponents.view.mainPanel.*"
    xmlns:login="yourComponents.login.*"
    currentState="login"> 
   
    <mx:Canvas id="applicationCanvas" width="100%" height="100%"
        verticalScrollPolicy="off" horizontalScrollPolicy="off"/>              

    <mx:states>
        <mx:State name="main">
             <mx:AddChild relativeTo="{applicationCanvas}" position="lastChild">
                   <topMenu:TopMenuView x="0" y="0" width="100%"/>
             </mx:AddChild>
             <mx:AddChild relativeTo="{applicationCanvas}" position="lastChild">
                  <sidePanel:SidePanelView id="sidePanelView" x="2" y="32" width="233" height="100%"
                          title="sidePanelView" currentState=""/>
            </mx:AddChild>
            <mx:AddChild relativeTo="{applicationCanvas}" position="lastChild">
                  <mainPanel:MainPanelView id="mainPanelView" x="241" y="32" width="100%" height="100%"
                          title="mainPanelView" currentState=""/>
            </mx:AddChild>
        </mx:State>

        <mx:State name="login">
            <mx:AddChild relativeTo="{applicationCanvas}">
                <login:LoginView/>
            </mx:AddChild>
        </mx:State>
    </mx:states>
 
</mx:Application>

To change the application's state after a successful login, you could dispatch and listen for events.  Or, in your login component's script, reference the application directly.

import mx.core.Application;
private function showApplicationMainState():void 
{
      Application.application.currentState = "main";
}

    or,

private function showParentMainState():void 
{
      parentDocument.currentState = "main";
}

I hope that this helps you Malik.  Truly, I'm not trying to hog the airwaves.  I'm just trying to help others as I have been helped.   BTW, Cairngorm handles changing state beautifully:

Example:
http://www.cflex.net/showfiledetails.cfm?ChannelID=1&Object=File&objectID=422 

//----------------------------------------------------------------------------------------------

--- In [email protected], "malik_robinson" <[EMAIL PROTECTED]> wrote:
>
> Hi,
>
> I am trying to utilize states to ultimately have a login page when my
> app loads, upon successful login, I want my main.mxml file to load
> which is basically the "home page" of my application.
>
> As of now in the "states" panel, I have a base state, but my base
> state is my home page and I do not want this. I want my login page
> to be the base state.
>
>
> In the states panel, I tried adding a state called home, but I think
> everything is on the same state, meaning my login is not the base and
> my home page is not on the home state. If I click the base state,
> should I only see whats on that state? Are states like "layers" in a
> sense, layers in terms of Photoshop or Fireworks?
>
> In "design view" I can switch between states, but nothing really
> happens.
>
> Any help appreciated. As of now I just have two files. 1 main mxml
> file and 1 custom component.
>
> This is my login.mxml page, which I wanted to be a custom component
> (code borrowed from a tutorial):
>
> <?xml version="1.0" encoding="utf-8"?>
> <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"
> layout="absolute" title="Member Login" width="275" height="150">
> <mx:Script>
> <![CDATA[
> private function handleLoginEvent():void {
> lblTest.text = "logging in...";
> //login logic
> }
> ]]>
> </mx:Script>
> <mx:Label x="8" y="20" text="Username"/>
> <mx:Label x="14" y="50" text="Password"/>
> <mx:TextInput x="78" y="18" id="txtUID"/>
> <mx:TextInput x="78" y="48" id="txtPwd" displayAsPassword="true"/>
> <mx:Button x="188" y="78" label="Login" click="handleLoginEvent
> ()"/>
> <mx:Label x="78" y="78" id="lblTest"/>
> </mx:Panel>
>
> thx
>
> -Malik
>

__._,_.___

--
Flexcoders Mailing List
FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com




SPONSORED LINKS
Web site design development Computer software development Software design and development
Macromedia flex Software development best practice

YAHOO! GROUPS LINKS



__,_._,___

Reply via email to