Three semi-basic questions

Question

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>

Answer 1

1. I haven't used states much so I don't know the answer to
this one. Personally I'd probably have used a resize effect and a
click listener that changes the size. If you did that I know you
could re-use the resize effect and click listener for each panel.
2. "click="currentState=currentState=='grow' ? '':'grow';"
The syntax is a shorthand notation for an if...else...
statement; it's kind of like a conditional assignment. So "x = a ?
b : c" means, evaluate 'a' ('a' is a condition). If 'a' is true
then "x = b", otherwise "x = c". So in your example it looks to see
if the currentState is 'grow', if it is it changes to the default
state, otherwise it changes to the 'grow' state.
3. I'm not sure about this one, but I believe depths on
canvases are dictated by the ordering of its children. By that I
mean, the first child is the deepest and the last child is
shallowest (or perhaps other way round). But I could be totally
wrong...