Flex VerticalLayout HorizontalLayout element order based on state - apache-flex

Question

in my mxml part I have
<s:layout.landscape>
<s:HorizontalLayout />
</s:layout.landscape>
<s:layout.portrait>
<s:VerticalLayout />
</s:layout.portrait>
after these tags i have couple of components, for example
<s:Button label="button 1"/>
<s:Button label="button 2"/>
what I would like to do is change the order of these components once a portrait or landscape state is entered. For example in portrait I have vertical layout button 1 followed by button 2
and in landscape I have horizontal layout where button2 is followed by button 1.

Answer 1

You can use this.swapElements(button1,button2);
Example: -
<?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"
minWidth="955" minHeight="600" currentState="landscape">
<s:states>
<s:State name="landscape"/>
<s:State name="portrait"/>
</s:states>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import spark.events.IndexChangeEvent;
protected function dropdownlist1_changeHandler(event:IndexChangeEvent):void
{
// TODO Auto-generated method stub
if(event.target.selectedIndex == 0)
{
this.currentState = event.target.dataProvider[0];
this.swapElements(button1,button2);
}
else
{
this.currentState = event.target.dataProvider[1];
this.swapElements(button2,button1);
}
}
]]>
</fx:Script>
<s:layout.landscape>
<s:HorizontalLayout />
</s:layout.landscape>
<s:layout.portrait>
<s:VerticalLayout />
</s:layout.portrait>
<s:DropDownList selectedIndex="0" change="dropdownlist1_changeHandler(event)">
<s:ArrayCollection>
<fx:String>landscape</fx:String>
<fx:String>portrait</fx:String>
</s:ArrayCollection>
</s:DropDownList>
<s:Button id="button1" label="button 1"/>
<s:Button id="button2" label="button 2"/>
</s:Application>
Hope this may help...