1 Reply Latest reply on May 18, 2007 2:11 AM by Oddsy

    Three semi-basic 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>
        • 1. Re: Three semi-basic questions
          Oddsy
          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...