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
myimge

Adobe Flash Builder 4.7 Beta Available !

Recently Adobe released Adobe Flash Builder 4.7 beta which will support Adobe Flash 11.4 and Adobe AIR 3.4. It will also support Apache Flex 4.8 release. This version has improved workflow for iOS application development with s...
by Nouman Naveed
0

 
 
AIR
customize-datatips-for-flex-column-chart

Custom DataTip Renderers for ColumnChart

Flex provides many types of charts which allow raw data to show in meaningful format. ColumnChart component is one of the commonly used chart component in many flex applications. Customization of column chart datatip box is not...
by Nouman Naveed
0

 
 
AIR
flex-inspectable-metatag1

Using [inspectable] metatag

Every experienced Flex developer knows about [Bindable] & [Event] metatags. However, I was surprised to know that some developers don’t know the purpose of [inspectable] metatag. Here I am going to discuss purpose of ...
by Nouman Naveed
0

 

 
AIR
flexatom.com adobe certified

Get Adobe Certified

During my recent assignment client was asking many questions on certification process. Sotoday I have decided to add some light on how certification is acquired to make you proud.There are many quality resources already on the ...
by Nouman Naveed
1

 
 
AIR
adobe flex custom event

Using Custom Events in Adobe Flex

Using Flex is very easy and there are many features which will allow you to make communication between custom components easy. And Custom Events capability is one of the great facility of exchanging data between custom componen...
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 *