Flex 4 new States format

1
votes

Can someone explain how the new states work in flex 4 im migrating from flex 3 to flex 4 and i got an error in the states code:

<s:states>

        <s:State name="login"/>
        <mx:RemoveChild target="{viewStack}" />
        <mx:RemoveChild target="{header}" />
        <mx:RemoveChild target="{footer}" />
        <mx:SetStyle target="{login}" name="verticalAlign" value="middle" />

        <s:State name="menu"/>
        <mx:RemoveChild target="{login}" />
        <mx:AddChild relativeTo="{null}" >
            <search:Drawer title="{resourceManager.getString('locale','mySearch')}" 
                           dockSide="left" 
                           backgroundAlpha="0.9" 
                           backgroundColor="#ccccff">
                <search:SearchContent />
            </search:Drawer>
        </mx:AddChild>

    </s:states>

If u need the "target" code just tell here.

2
apache-flexflex4flex3flash-builder

2 Answers

0
votes

The code you show is a little too short to give you the exact code, but it should look something like this:

<s:states>
    <s:State name="login"/>
    <s:State name="menu"/>
</s:states>

<mx:ViewStack id="viewStack" excludFrom="login" 
              paddingTop="15" width="100%" height="100%"/>

<s:HGroup id="header" excludeFrom="login" width="100%"/>
<s:HGroup id="footer" excludeFrom="login" width="100%" verticalAlign="bottom"/>

<mx:Box id="login" includeIn="login" width="100%" height="100%"
        horizontalAlign="center" verticalAlign="middle"/>

<search:Drawer includeIn="menu" ... />

Basically, you use the includeIn and excludeFrom special attributes instead of the old RemoveChild and AddChild tags. Note that since there are only 2 states, includeIn="menu" and excludeFrom="login" have the exact same effect.
There's also the possibility of setting properties according to the current state, e.g.:

<v:MyComp left.login="0" left.menu="25"/>
0
votes

The view states tag should only contain the states like so:

    <s:states> 
        <s:State name="State1"/> 
        <s:State name="State2"/> 
        <s:State name="State3"/> 
    </s:states>

Then, define state-specific property values for a component by using the dot (.) operator:

propertyName.stateName

For example:

<s:Button label="Play" label.State2="Stop" label.State3="Paused"/>

You can read more about states on Adobe Help pages for Flex 4.6 Create and apply view states