Flex (especially Mobile) States - Multiple Simultaneous States?

0
votes

We know that we can define states in our .mxml. The thing is, our application or component may only be in one of those states at any time.

When programming for Flex Mobile, Landscape and Portrait (orientation) often need to be states in order to easily define whether a control/component/element is [in]visible, (dis/en)abled, or shaded with certain colors. But our app or component also has other states, INDEPENDENT of screen orientation, for example SufficientCredit and InsufficientCredit.

Say that we want to show a submit button only if the state is SufficientCredit. But you also need to show/hide/color other controls when you change your phone's orientation. In real life, your credit state really is SufficientCredit, but your app is now in either the Portrait or Landscape state. Now our submit button will disappear, though it's not in the InsufficientCredit state.

I don't want to create states that "combinate" like LandscapeSufficientCredit, LandscapeInsufficientCredit, PortraitSufficientCredit, and PortraitInsufficientCredit. I also don't want to ditch states altogether and write a HUGE if-else statement where each branch would have to contain code to modify component properties (colors, sizes, visibility, etc.), and then remember to call it from many places that would change state.

I've heard of state groups, but the documentation for them is really confusing, and I'm not sure if they'll help in this case.

2
apache-flexmobilestates
Stategroups is probably want you want; but I agree the docs are confusing. I don't have time to try to explain it. [As an aside; on Mobile your best performance results are probably going to be to write your own layout/display code in an updateDisplayList() and not use MXML. - JeffryHouser
I was afraid you'd say that - layout/display in ActionScript, with tons of conditionals to "sniff" orientation and other states, and explicit component property assignments. I guess it's not so bad, but it's just a lot more work/maintenance. Until then, I'll continue on looking for better explanations of state groups. - Mickael Caruso
In the apps I've written; I just use the unscaledWidth/unscaledHeight of updateDisplayList() to determine how to display stuff without any consideration for landscape/portrait. Granted, I can respect that will be important for many apps. Sometimes writing your own layout code can be tedious; but it isn't hard. - JeffryHouser
And if you go the state groups route, with the large amount of conditional "states" your users could be in, you will probably need to make states like LanscapeSufficientCredit and make that state belong to Landscape group and SufficientCredit group. It does make it a little more straight forward with includeIn="LandscapeStates, SuffientCreditStates" but as www.Flextras.com pointed out, tediousness is in your near future (either approach). - Jason Reeves

2 Answers

0
votes

I guess that if you want two states simultaneously, then those states shall influence independent params(I guess screen orientation and colors are independent).

In that case you may need to make some child components that will watch for specific parent's states and handle them inside.

In that case you may also implement it with inherited styles - you call setStyle("Credit","Insufficient") in parent component, and all children that know about those styles will change their representation accordingly.

0
votes

StateGroups are your answer. You can do things like:

<s:State name="portrait" group="portraitStates"/>
<s:State name="landscape" group="landscapeStates"/>
<s:State name="portraitState1" group="portraitStates, state1States"/>
<s:State name="landscapeState1" group="landscapeStates, state1States"/>
<s:State name="portraitState2" group="portraitStates, state2States"/>
<s:State name="landscapeState2" group="landscapeStates, state2States"/>

Then in your view override the getCurrentState() method to determine your state. Such as

override public function getCurrentViewState():String
{
    var aspect:String = FlexGlobals.topLevelApplication.aspectRatio; //gets landscape/portrait
    //some logic to determine current state
    return aspect+currentState;
}

I've done this to have landscape/portrait for phone/tablet + multiple states all in one view.