6 Replies Latest reply on Aug 27, 2009 7:39 AM by Barna Biro

    Populate Panels Problem Need Help Urgent

    mcabalaji

      Hi all,

       

          I am new to flex . I have a xmllist which contains a list of items . I have to populate panels dynamically in flex with these items which i have done it ,

      my problem is I need to show only 8 panels on screen in which 4 on top and 4 on bottom and should have a next button which shows the next 8 . how do it with single Hbox  .  For now I have used two Hbox and populate the 8panels and on next i clear the Hbox and populate the next , this reduces the performance of the application . Is there any way I can cache all the panels and populate it .

       

       

       

      Thanks in Advance

      Balaji

        • 1. Re: Populate Panels Problem Need Help Urgent
          Virat Patel

          Hello

           

          Use ViewStack with two Hbox, each containing 4 of the panel.

           

          You can create all panel at once after that you just need to change the index of ViewStack,

           

          So you can easily switch one to another view.

           

          It may help you.

           

          With Regards

          Virat Patel

          1 person found this helpful
          • 2. Re: Populate Panels Problem Need Help Urgent
            christopher.mina Level 1

            This problem can be thought as similar to an ItemRenderer, where a single display objet is created and reused over and over to display similar but different data.  If you need to use the HBox for ease of sizing / resizing, then so be it.  If not, you can hardcode in the x,y positions of each panel on the screen, where the top 4 might have a y value of 0, and the bottom 4 might have a y value of 100.  If this needs to be dynamic, you might as well used two hboxs, or use a Flexlib FlowBox (search google for FlexLib). 

             

            Once you have your 8 panels, either override the "data" property on each panel, or add in a custom variable onto which you set your data that is retrieved from the xml.  The panel should have enough intelligence to update its view appropriately, either through mxml binding, as3 binding, or just setting the view components manually (the desired approach). 

             

            For instance:

            On the parent component:

             

             

            public function set xmllist(value : XMLList):void{

                 if (value){

                      panel1.xmlData = xmllist[0];

                      panel2.xmlData = xmllist[1];    

                 }

            }

             

             

            If panel 1 had a label and a text area as children:

             

            private var _xmlData:XML;

            public function set xmlData(value : XML):void{

                 _xml = value;

                 if (_xml){

                      this.label.text = _xml.@label;

                      this.textArea.text = _xml.@mainText;

                 }else{

                      this.label.text = '';

                      this.textArea.text = '';

                 }

            }

            public function get xmlData():XML{

                 return _xml;

            }

            1 person found this helpful
            • 3. Re: Populate Panels Problem Need Help Urgent
              mcabalaji Level 1

              Hi Guys,

               

                  Thanks for your replies it was helpful for me , I have to have two buttons in the panel Completed and Cancelled Buttons. I have written the click handlers for them but the problem is once one of the these buttons is pressed this panel should hide/deleted and the next one should come to this position , I can use removechildAt(index:int) to remove it , the problem is we have to recreate it again , in this case how to handle this issue

               

               

              Thanks in Advance

              Balaji

              • 4. Re: Populate Panels Problem Need Help Urgent
                Barna Biro Level 3

                I didn't get your problem exactly. So, to sum things up:

                 

                1. You want a component that displays 8 panels at once, 4 on top, 4 on bottom ( 2 rows ).
                2. You want to have a Next ( and maybe a Back ) button that would bring up 8 more panels once pressed ( and bring back the first 8 if you press Back ).
                3. You also want to have a feature that will enable you to hide/remove only certain components. Once a component is hidden, then the it's place should be taken by the next component from the components list.
                4. You want all this functionality without having to constantly instantiate/create panels but have them all created at once and just assing the ones needed when needed.

                 

                Questions:

                 

                1. What if you hide the 3rd component? Would the 9th appear in it's place, or would each already displayed component slide one position back and the 9th component would appear at the end of the second row?
                2. Once you removed/hidden a panel, how do you want to bring it back? Make it again visible? Or once it's hidden, it remains hidden?
                3. Is each panel of the same dimension? Or can the dimensions vary?

                 

                Either way, HBoxes aren't the solution for this. Instead, you should play around with the Grid component or with the Tile component. If those still don't fit your needs, then you should consider developing your own component that implements the exact behavior that you are looking for ( or try extending the existing ones ).

                 

                EDIT: Regarding the 4th point: if your are looking for efficiency then you shouldn't create all the panels at once. Only create a panel once it should be displayed. You can store a reference to it can readd it anything again if needed.

                • 5. Re: Populate Panels Problem Need Help Urgent
                  mcabalaji Level 1

                  Hi Barna,

                   

                     Thanks for your reply . Below are my replies to your questions.

                   

                  Questions:

                   

                  1. What if you hide the 3rd component? Would the 9th appear in it's place, or would each already displayed component slide one position back and the 9th component would appear at the end of the second row?

                   

                                       [Balaji] When the 3rd component is clicked it should hide and its position should be taken by 4th panel and the 9th one will

                  come at the bottom last

                   

                      2. Once you removed/hidden a panel, how do you want to bring it back? Make it again visible? Or once it's hidden, it remains hidden?

                   

                                       [Balaji] A panel once hiddn remains hidden

                   

                      3. Is each panel of the same dimension? Or can the dimensions vary?

                   

                                      [Balaji] All Panel have same dimension . The dimension will not vary

                   

                   

                  Thanks

                  Balaji

                  • 6. Re: Populate Panels Problem Need Help Urgent
                    Barna Biro Level 3

                    Ok, so once a panel is hidden, it in essence is removed ( since you won't be needing it anymore from what I understood ). If that's the case, then what's with the performance issue? Are you only worried about how to change between "pages of panels" ( first 8 panels, second 8 panels... and so on )?

                     

                    Could you maybe post your XML structure ( or at least a similar structure ) so that we can get a clearer image about the whole thing. From what I'm guessing, you are not only populating the panels dynamically but you are also generating panels dynamically for each "major node" from the list? Or do you have a limited set of panels that can be used ( I mean: do you have a set of panels from which you choose which one to add depending on the list item type? or is there a single and generic panel component that is used for all items? )?