3 Replies Latest reply on Oct 15, 2011 2:58 PM by Shongrunden

    Re-order components when state changes?

    JoshBeall Level 1

      Hi All,

       

      Consider the following simple component:

       

      <s:HGroup>

        <s:Label id="inputLabel" text="Your name" />

        <s:TextInput id="input" />

      </s:HGroup>

       

      Now, I'm wondering if there is a way to use Flex 4 states to reverse the order of the components, so that it would instead be this:

       

      <s:HGroup>

      <s:TextInput id="input" />

      <s:Label id="inputLabel" text="Your name" />

      </s:HGroup>

       

      Is there a way to control the order of the components using states?  I've been searching on this and haven't been able to come up with anything that would do this just using states.

       

      Thanks!

       

        -Josh

        • 1. Re: Re-order components when state changes?
          JoshBeall Level 1

          I think I've found my answer: you can't do this.  From the docs:

           

          The view states infrastructure relies on the structure of the container as defined by the MXML file. Changing the child order of the container at runtime can cause your application to fail.

           

          However, you can re-parent a component.  In some cases, this may allow you to accomplish the same thing, although not as easily.  For my circumstance, I think I'm just going to do this:

           

          <s:HGroup>

            <s:Label id="inputLabel1" text="Your name" includeIn="labelLeft" />

            <s:TextInput id="input" />

            <s:Label id="inputLabel2" text="Your name" includeIn="labelRight" />

          </s:HGroup>

           

           

          I've now got two label components, rather than one, but it will work for my purposes.

           

          I'm still interested in input on re-ordering components with states.  Is there a way, or am I reading the docs correctly and it's not possible?

           

            -Josh

          1 person found this helpful
          • 2. Re: Re-order components when state changes?
            drkstr_1 Level 4

            What you can do is create a custom layout that allows you to reverse the layout order. Try copying the HorizontalLayout source and add a property like 'reverseLayout' to your custom layout. Change this property on the state change.

             

            <s:Group>
              <s:layout>
                <com:ReversableHorizontalLayout reverseLayout.labelLeft="false" reverseLayout.labelRight="true" />
              </s:layout>
              <s:Label id="inputLabel1" text="Your name" />
              <s:TextInput id="input" />
            </s:Group>
            

             

            When the property is set on your layout, you will want to invalidate the target display list and layout in reverse order.

            1 person found this helpful
            • 3. Re: Re-order components when state changes?
              Shongrunden Adobe Employee

              You might find the depth property useful, for example:

               

              <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                      xmlns:s="library://ns.adobe.com/flex/spark"

                      click="currentState=='state1'?currentState='state2':currentState='state1'">

                 

                  <s:states>

                      <s:State name="state1" />

                      <s:State name="state2" />

                  </s:states>

                 

                  <s:Group>

                      <s:Button label="0" depth.state1="0" depth.state2="2" />

                      <s:Button label="1" x="15" y="15" />

                      <s:Button label="2" x="30" y="30" />

                  </s:Group>

                 

              </s:Application>