Three basic Flex MXML questions

[MTempsNH]

So I have started creating my first Flex application after years of working in Flash on a daily basis and I have a few simple questions. Below is my code for my initial layout which consists of a 4x2 grid of squares(8 squares), when you click on any of them they grow to the full size of the window, thats it. My three question are->

1. Do I have to create a State for each square to transition from it's small size to its larger size. Currently I have a State named "grow", which only transforms square1. Can you point to these states dynamically? I understand how the targets work, but if I put "target="{square1, square2}" it will target both panels. I can't imagine I'll have to create "grow1", "grow2", etc states.

<mx:State name="grow">
<mx:SetProperty target="{square1}" name="x" value="0"/>
<mx:SetProperty target="{square1}" name="y" value="10"/>
<mx:SetProperty target="{square1}" name="width" value="960"/>
<mx:SetProperty target="{square1}" name="height" value="500"/>
</mx:State>


2. I found this bit of code in the developer pdf "click="currentState=currentState=='grow' ? '':'grow';" and it works great at returning the square to its original position after you have clicked it, I would just like to know what it's doing.

3. Lastly, how do you swap depths or arrange items in Flex. In flash if I wanted an item to be ontop of another I would simply use swapDepths or set the depth to getNextHighestDepth. I'm having a hard time finding those methods in Flex.

Thanks you in advance. Below is part of the code with the transitions and panels.

<mx:states>
<mx:State name="grow">
<mx:SetProperty target="{square1}" name="x" value="0"/>
<mx:SetProperty target="{square1}" name="y" value="10"/>
<mx:SetProperty target="{square1}" name="width" value="960"/>
<mx:SetProperty target="{square1}" name="height" value="500"/>
</mx:State>
</mx:states>
<mx:transitions>
<mx:Transition fromState="*" toState="*">
<mx:Parallel id="t1" targets="{[square1]}">
<mx:Move duration="1000"/>
<mx:Resize duration="1000"/>
</mx:Parallel>
</mx:Transition>
</mx:transitions>
<mx:Panel x="10" y="10" width="980" height="600" layout="absolute" backgroundColor="#B5D7BD" borderStyle="solid" cornerRadius="0">
<mx:Panel id="square1" x="0" y="10" width="230" height="200" layout="absolute" click="currentState=currentState=='grow' ? '':'grow';" title="square1" color="#99cc33" backgroundColor="#555555" borderColor="#555555" alpha="1.0" backgroundAlpha="1.0" borderStyle="solid">
</mx:Panel>
<mx:Panel id="square2" x="242" y="10" width="230" height="200" layout="absolute" click="currentState=currentState=='grow' ? '':'grow';" borderStyle="solid" backgroundColor="#555555" title="square2" color="#99cc33">
</mx:Panel>
<mx:Panel id="square3" x="484" y="10" width="230" height="200" layout="absolute" click="expandSquare(3);" title="square3" color="#99cc33" backgroundColor="#555555" borderStyle="solid">
</mx:Panel>
<mx:Panel id="square4" x="726" y="10" width="230" height="200" layout="absolute" click="expandSquare(4);" backgroundColor="#555555" borderStyle="solid" title="square4" color="#99cc33">
</mx:Panel>
<mx:Panel id="square5" x="0" y="260" width="230" height="200" layout="absolute" click="expandSquare(5);" borderStyle="solid" title="square5" color="#99cc33" backgroundColor="#555555">
</mx:Panel>
<mx:Panel id="square6" x="242" y="260" width="230" height="200" layout="absolute" click="expandSquare(6);" title="square6" color="#99cc33" borderStyle="solid" backgroundColor="#555555">
</mx:Panel>
<mx:Panel id="square7" x="484" y="260" width="230" height="200" layout="absolute" click="expandSquare(7);" borderStyle="solid" backgroundColor="#555555" title="square7" color="#99cc33">
</mx:Panel>
<mx:Panel id="square8" x="726" y="260" width="230" height="200" layout="absolute" click="expandSquare(8);" borderStyle="solid" color="#99cc33" backgroundColor="#555555" title="square8">
</mx:Panel>
</mx:Panel>

[flexy]

1) My inclination would be to give all of your squares index-based names, and to create an actionscript function that loops through them setting their new properties, and updating the state. Looking at the properties of SetProperty, it doesn't look like it would handle multiple objects being passed through one call.

2)

currentState=currentState=='grow' ? '':'grow';

This is a piece of in-line actionscript code that simply executes a shorthand conditional statement, using ? operator, that will set the value of currentState to the value it isn't currently assigned (i.e. if currentState isn't grow, make it grow, otherwise make it the base state).

<expression> ? <value if true> : <value if not true>

Another example:

var myBool:Boolean = false;
myBool = myBool == true ? false : true;

Essentially, the code above sets myBool as false, and then the following line sets it to true.

3) There is a post on FlexDeveloper called Swapping the depth of child objects (http://www.flexdeveloper.eu/forums/YaBB.pl?num=1158845710/) that tackles this.

Hope I've been able to help.