12 Replies Latest reply on Jan 24, 2010 8:20 PM by archemedia

    Flex 3 - Dynamic Layouts

    Andre Linux

      Hello people

       

      I am having this question which bothers me:

       

      I want to give user opportunity to switch layouts in my Flex application, like. canvas1 was on top, canvas2 was on bottom => user clicks button => canvas2 is on top, canvas2 is on bottom.

       

      What approach should I use?

       

      mxViewStack won't let me have two states with components with same ID's inside, so I can't make state one where canvas1 on top and canvas2 on bottom, and state two where canvas2 on top, canvas1 on bottom.

       

      Anything you'd suggest me?

       

      Thank you

        • 1. Re: Flex 3 - Dynamic Layouts
          msakrejda Level 4

          The easiest way to do this is to put all the children in a new container (possibly in a different order), remove the old container, and add the new container. We do this; it works reasonably well.

          • 2. Re: Flex 3 - Dynamic Layouts
            Andre Linux Level 1

            Could you show a tiny bit of code?

             

            How is this done?

             

            Should I specify the "x" and "y" of each new component location in my code and just recreate them?

             

            I think it will be a big mess.

             

            Or I am getting this wrong?

             

            Thank you

            • 3. Re: Flex 3 - Dynamic Layouts
              Marc de kwant

              Is switching the order of creation in mx:states an option?

              • 4. Re: Flex 3 - Dynamic Layouts
                msakrejda Level 4

                We do it with containers like VBox, HBox, and Tile, which lay out their children automagically. If you have an absolute layout in a Canvas or something, then yeah, I think you'd need to manually tweak all the coordinates.

                • 5. Re: Flex 3 - Dynamic Layouts
                  Andre Linux Level 1

                  Order of creation is not really a solution because I am using canvas (the layout is absolute).

                  So there is nothing I can do except making up everything in code?

                  That seems to sound too glitchy

                  • 6. Re: Flex 3 - Dynamic Layouts
                    msakrejda Level 4

                    If the components are interchangeable (in terms of layout), and you just want to swap them out, you can walk the children in the canvas and save their relevant properties (e.g., x, y, width, height) in a list, rearrange their order but keep the property list in the same order, and reapply the property list to the children in their new order.

                     

                    E.g.,


                    var props:Array = [];

                    for each (var child:UIComponent in canvas.getChildren()) {

                        props.push({ x: child.x, y: child.y, width: child.width, height: child.height });

                    }

                    var reordered:Array = rearrange(canvas.getChildren());

                    while (canvas.numChildren > 0) canvas.removeChildAt(0);

                    for  (var i:int = 0; i < reordered.length; i++) {

                        var currChild:UIComponent = reordered[i];

                        var currProps:Object = props[i];

                        for (var key:String in currProps) {

                            currChild[key] = currProps[key];

                        }

                        canvas.addChild(currChild);

                    }

                    • 7. Re: Flex 3 - Dynamic Layouts
                      Marc de kwant Level 1

                      Aren't states meant for this purpose.

                      • 8. Re: Flex 3 - Dynamic Layouts
                        Marc de kwant Level 1

                        What I meant was that the order of creation determines if à component 

                        is visible or not when components are in the Same space on the Canvas. 

                        Somewhat like the z-order of divs in html

                        • 9. Re: Flex 3 - Dynamic Layouts
                          Andre Linux Level 1

                          Yeah, I want to swap old uiComponent with new one but with different properties. In fact, I want to swap lots of components to different places, so it's quite complicated.

                          Why states does not allow components with same id's? I could just design each state and switch them! but unfortunately you can't put components with same id's in different states.    

                          • 10. Re: Flex 3 - Dynamic Layouts
                            archemedia Level 4

                            You can use the swapChildren() method of UIComponent. This enables you to swap 2 child components so the one gets on top of all the others.

                             

                            If you can't figure it out, I'll post an example.

                             

                            Dany

                            • 11. Re: Flex 3 - Dynamic Layouts
                              Andre Linux Level 1

                              Sure, archemedia, please give me a little example, because I can't get it clearly.

                               

                              Let me modify my question to avoid confusion:

                               

                              Let's stay we have this state:

                              all components have ids picoWindow, wideWindow, table1 and bigText, they have width/height/layout contraints setting/x/y

                              picture1.PNG

                              user presses hotkey, and the layout should look like that: ids are same, but width/height/layout contraints setting/x/y are different now

                              picture2.PNG

                              How to make that?

                              Thanks

                              • 12. Re: Flex 3 - Dynamic Layouts
                                archemedia Level 4

                                Is this what you want?

                                 

                                <?xml version="1.0" encoding="utf-8"?>
                                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
                                    <mx:Script>
                                        <![CDATA[
                                            private function switchState():void
                                            {
                                                if (currentState == null || currentState == "")
                                                {
                                                    currentState = "State2";
                                                } else
                                                {
                                                    currentState = "";
                                                }
                                            }
                                        ]]>
                                    </mx:Script>
                                    <mx:states>
                                        <mx:State name="State2">
                                            <mx:SetProperty target="{panel1}" name="x" value="328"/>
                                            <mx:SetProperty target="{panel1}" name="y" value="317"/>
                                            <mx:SetProperty target="{panel2}" name="x" value="15.5"/>
                                            <mx:SetProperty target="{panel2}" name="y" value="21"/>
                                            <mx:SetProperty target="{label1}" name="x" value="21"/>
                                            <mx:SetProperty target="{label1}" name="y" value="375"/>
                                            <mx:SetProperty target="{datagrid1}" name="x" value="21"/>
                                            <mx:SetProperty target="{datagrid1}" name="y" value="225"/>
                                        </mx:State>
                                    </mx:states>
                                    <mx:Panel x="10" y="10" width="250" height="200" layout="absolute" id="panel1">
                                    </mx:Panel>
                                    <mx:Panel x="10" y="232" width="557" height="188" layout="absolute" id="panel2">
                                    </mx:Panel>
                                    <mx:DataGrid x="268" y="10" id="datagrid1">
                                        <mx:columns>
                                            <mx:DataGridColumn headerText="Column 1" dataField="col1"/>
                                            <mx:DataGridColumn headerText="Column 2" dataField="col2"/>
                                            <mx:DataGridColumn headerText="Column 3" dataField="col3"/>
                                        </mx:columns>
                                    </mx:DataGrid>
                                    <mx:Label x="276" y="160" text="Label" width="262" height="50" fontSize="33" fontWeight="bold" id="label1"/>
                                    <mx:Button x="10" y="542" label="Change" click="switchState()"/>
                                   
                                </mx:Application>

                                 

                                I switched viewState on button click but you can assign the function to a hotkey off course

                                 

                                Dany