AIR

May 24th, 2012

Introduction to StateGroups in Flex 4.5

More articles by »
Written by: Nouman Naveed
Tags: , ,
stategroup example in flex 4.5

Recently I have been exploring stateGroups which are new to me till I have heard from my previous client developers. State Group is still unknown to many developers and could not find any help in Google too. So I decided to put something which can be useful to many of you. State Groups are new in Flex 4.5 and includes capability to group settings of multiple states which can be applied to any visual object. I’m having a hard time getting my head around stateGroups. Which means I need to play around with it and see what comes out.

You can use the radio buttons to change the state. There are 3 states each for width and height and then 4 states that correspond to combinations of width/height states via stateGroups. When the state is set to one of the width related states the height is left to each button’s default – which is determined by the font size. And the height states have no impact on the default width of the button which is determined by the text width.

However, when using the group combination states both the width and height are set explicitly. If you really want to explore this then I would recommend that you open the source code so that you can see it and the explorer at the same time.

<?xml version=”1.0″ encoding=”utf-8″?>
<s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx”
width=”550″ height=”600″
skinClass=”skins.AppSkin”
creationComplete=”init();” viewSourceURL=”srcview/index.html”>
<!–Author: Nouman Naveed–>
<fx:Declarations>
<!– Place non-visual elements (e.g., services, value objects) here –>
<s:RadioButtonGroup id=”statesRBG” change=”onStateChange();” />
</fx:Declarations>

<fx:Script>
<![CDATA[

private function init():void {

}

private function onStateChange():void {
this.currentState = statesRBG.selectedValue as String;
}

]]>
</fx:Script>

<s:states>

<s:State name=”narrow”             stateGroups=”tiny_W” />
<s:State name=”medium”             stateGroups=”avg_W”/>
<s:State name=”wide”             stateGroups=”big_W”/>

<s:State name=”short”             stateGroups=”tiny_H”/>
<s:State name=”average”            stateGroups=”avg_H”/>
<s:State name=”tall”             stateGroups=”big_H”/>

<s:State name=”wide_short”        stateGroups=”big_W,tiny_H”/>
<s:State name=”medium_average”    stateGroups=”avg_W,avg_H”/>
<s:State name=”wide_tall”        stateGroups=”big_W,big_H”/>
<s:State name=”narrow_tall”        stateGroups=”tiny_W,big_H”/>

</s:states>

<s:transitions>

<s:Transition toState=”*” autoReverse=”true”>
<s:Resize targets=”{ [ btn_1, btn_2, btn_3 ] }” />
</s:Transition>
</s:transitions>

<s:VGroup right=”10″ top=”25″ horizontalAlign=”right”>

<s:Button
id=”btn_1″ label=”button one” fontSize=”10″
width.tiny_W=”100″         width.avg_W=”200″        width.big_W=”300″
height.tiny_H=”50″         height.avg_H=”75″        height.big_H=”125″/>

<s:Button
id=”btn_2″ label=”button two” fontSize=”20″
width.tiny_W=”100″         width.avg_W=”200″        width.big_W=”300″
height.tiny_H=”50″         height.avg_H=”75″        height.big_H=”125″/>

<s:Button
id=”btn_3″ label=”button three” fontSize=”30″
width.tiny_W=”100″         width.avg_W=”200″        width.big_W=”300″
height.tiny_H=”50″         height.avg_H=”75″        height.big_H=”125″/>

</s:VGroup>

<s:VGroup top=”25″ left=”10″>
<s:Label text=”width” fontWeight=”bold” />
<s:RadioButton label=”narrow”            groupName=”statesRBG” selected=”true” />
<s:RadioButton label=”medium”             groupName=”statesRBG” />
<s:RadioButton label=”wide”                groupName=”statesRBG” />

<s:Label text=”height” fontWeight=”bold” />
<s:RadioButton label=”short”             groupName=”statesRBG” />
<s:RadioButton label=”average”             groupName=”statesRBG” />
<s:RadioButton label=”tall”             groupName=”statesRBG” />

<s:Label text=”group combinations” fontWeight=”bold” />
<s:RadioButton label=”wide_short”        groupName=”statesRBG” />
<s:RadioButton label=”medium_average”    groupName=”statesRBG” />
<s:RadioButton label=”wide_tall”        groupName=”statesRBG” />
<s:RadioButton label=”narrow_tall”        groupName=”statesRBG” />
</s:VGroup>

</s:Application>


About the Author

Nouman Naveed
My name is Mohammed Nouman Naveed. I work and play with Flash Platform technologies and has experience of 11 years. Consulting and Training is part of my job. I am Adobe Certified Instructor, Adobe User Group Manager, Adobe Certified Expert and Adobe Community Champion.




 
 

 
air-target

Adobe AIR 2.7 for Mobile

Adobe has released the latest update to their AIR runtime and SDK. The latest version 2.7, comes with many improvements for mobile and desktops, of course the major feature of them being an improvement in the performance of iOS...
by Nouman Naveed
0

 



0 Comments


Be the first to comment!


Leave a Reply

Your email address will not be published. Required fields are marked *