9 Replies Latest reply on May 27, 2009 6:41 PM by FlexHelpNeeded

    Is Emptying of a Horizontal List on click Possible?

    FlexHelpNeeded

      Hey Guys

       

      So I have a following structure

       

      <mx:HorizontalList id="list">
           <mx:itemRenderer>
                <mx:Component>
                  <mx:VBox >
                     <mx:Image />
                     <mx:Label />
                     </mx:VBox>
                </mx:Component>
           </mx:itemRenderer>
      </mx:HorizontalList>
      

      Now This is basically loading some pictures on the click of a button..

       

      Now another click of another button takes me to a different State/Page

       

      When I click on another button to get me to the picture's state the pictures are still loaded in the Hlist / Vbox.

       

      What I basically want it if I click on a button Say "Show Pictures" it gets to the state (above) and clears the hlist / vbox of anything. Because there is another button I would like the user to press to load photos..

       

      How to do this? I was looking into properties of list.???? but could not find anything useful  to clear it. Hope I made myself clear.

       

      Regards

        • 1. Re: Is Emptying of a Horizontal List on click Possible?
          FlexHelpNeeded Level 1

          Just a bump

           

          If anyone can help me with the above.. it would be great.. that is probably the last thing I have left to test..

           

          Regards

          • 2. Re: Is Emptying of a Horizontal List on click Possible?
            *Prashant Shelke* Level 4

            Hi,


            according my understanding your screen has, one HorizontalList [ Itemrenderer of VBox [Image, Label] ] like this structure & below that three buttons

            Button1    [Show Pictures]        *1

            Button 2   [New State]             *2

            Button 3   [Load Pictures]        *3


            You can do one thing, before changing state to *1 call HorizontalList.dataProvider.removeAll(); which will clear your List or you can simply iterate your list & call removeChildAt(cntChildren)


            Hope this will work for you.

            Thanks.


            • 3. Re: Is Emptying of a Horizontal List on click Possible?
              FlexHelpNeeded Level 1

              Prashant Shelke. wrote:

               



              You can do one thing, before changing state to *1 call HorizontalList.dataProvider.removeAll();


              I tried this on a button which when clicked opens the state and does the removeall.. but nothing happened.. the HorizontalList did not Empty itself.. Also HorizontalList.dataProvider. (removeall() ) function does not show up in autofill

               

              <mx:Button label="Show Images" id="browse" click="currentState='ImgGallery';imagelist.dataProvider.removeAll();" width="135" top="10" horizontalCenter="-280"/>
              

              On top imagelist is the name of the Horizontallist present in the state containing all the vbox and images.. But this button did not work.

               

              what am I doing wrong?

               

              EDIT: It seems to work sometimes.. and sometimes not.. mainly on 2 clicks it works sometimes..

              • 4. Re: Is Emptying of a Horizontal List on click Possible?
                Gregory Lafrance Level 6

                I don't fully understand what you are trying to do. You mentioned various button clicks, but I'm not clear on what should happen. Please try to describe your workflow more clearly.

                • 5. Re: Is Emptying of a Horizontal List on click Possible?
                  FlexHelpNeeded Level 1

                  Greg Lafrance wrote:

                   

                  I don't fully understand what you are trying to do. You mentioned various button clicks, but I'm not clear on what should happen. Please try to describe your workflow more clearly.

                  Sorry about that

                   

                  I have a horizontal list with vbox loading images and test from a dataprovider as mentioned above

                   

                  I have a button "Call State" to call the state which has this horizontallist

                   

                  I have another button "Display" in this state when clicked, loads the images into the list

                   

                  Now what I want is that when I click on the "Call State" again the list is still there.. I want it to clear off so that the user has to click on "Display" button to get the images in the list

                   

                  So I am trying to clear the images from that list once the "Call state" button is clicked

                   

                  Hope this is clear..

                  • 6. Re: Is Emptying of a Horizontal List on click Possible?
                    Muzak Level 3

                    Show us the code used to change states.

                    Basically you'll have to either set the HorizontalList dataProvider to null or clear the dataProvider itself, using collection.removeAll()

                    Where "collection" points to the data used for the HorizontalList.

                    • 7. Re: Is Emptying of a Horizontal List on click Possible?
                      FlexHelpNeeded Level 1

                      Muzak wrote:

                       

                      Show us the code used to change states.

                      Basically you'll have to either set the HorizontalList dataProvider to null or clear the dataProvider itself, using collection.removeAll()

                      Where "collection" points to the data used for the HorizontalList.

                      I have given the button code above.. but here you go.. I will try to give all codes here..

                       

                      There is a button I use to call a state

                       

                      <mx:Button label="Browse Images" id="browse" click="currentState='Browse Gallery'" width="135" top="10" horizontalCenter="-280"/>
                      
                      

                       

                      This Button calls a State "Browse Gallery" which has another Panel which has a button , Hozlist, vbox,, images, text

                       

                      <mx:State name="Browse Gallery" basedOn="Welcome">
                                     <mx:AddChild relativeTo="{mainpanel}" position="lastChild">
                                          <mx:Panel width="100%" height="100%" layout="vertical" horizontalAlign="center" y="64" x="10">
                                          <mx:Button label="Load Pics" id="getphotos" click="browsephotos.send();"/> //you can ignore this .send() it is a request to get the XML in {feed} dataprovider
                                          <mx:HorizontalList id="imagelist" rowHeight="160" columnWidth="180" columnCount="4" dataProvider="{feed}" width="100%" height="180">
                                               <mx:itemRenderer>
                                                    <mx:Component>
                                                         <mx:VBox horizontalAlign="center" verticalAlign="middle">
                                                              <mx:Image source="{data.filename}" width="100" height="100"/>
                                                              <mx:Label text="{data.folder}" /> 
                                                         </mx:VBox>
                                                    </mx:Component>
                                               </mx:itemRenderer>
                                               </mx:HorizontalList>
                                          <mx:Image source="{imagelist.selectedItem.filename}"/>
                                          <mx:Label text="{imagelist.selectedItem.caption}" fontFamily="Arial" fontSize="12" fontWeight="bold"/>
                                          </mx:Panel>
                                     </mx:AddChild>
                                </mx:State>
                      

                       

                      Now When a person clicks on "Load Pics" the pictures load into the Hozlist.

                       

                      What I want to happen is that when a person clicks on the button "Browse Images" again (the code on top).. the Hozlist somehow becomes empty and then the person has to click on "Load Pics" again to load pictures

                       

                      I am a newbie to Flex world so I am not familir with mouse events etc..

                       

                      I tried feed.removeAll() and imagelist.dataProvider.removeAll() in the following manner

                       

                      <mx:Button label="Browse Images" id="browse" click="currentState='Browse Gallery';feed.removeAll();" width="135" top="10" horizontalCenter="-280"/>
                      

                       

                      But it does not seem to work fine all the time.. sometimes two clicks on the button works or not..

                       

                      I am confused what is happening.. and if someone can help me in this regards, that would be great

                       

                      Thanks

                      • 8. Re: Is Emptying of a Horizontal List on click Possible?
                        Muzak Level 3

                        I'm not a big fan of having code in an mxml event (<mx:Button click="actionscript here" />).

                        Especially if you have to get mutltiple things done, it becomes a mess.

                         

                        Try calling a method (event handler) instead:

                         

                        <mx:Script>
                        <![CDATA[
                          
                          private function setState(event:MouseEvent):void {
                           feed.removeAll();
                           currentState = "Browse Gallery";
                          }
                          
                        ]]>
                        </mx:Script>
                        
                        <mx:Button id="browse" label="Browse Images" click="setState(event);" />
                        

                         

                        Another option could be to not define a dataProvider for the HorizontalList in MXML, but set the data when it arrives (so dump the dataProvider binding).

                         

                        <mx:HorizontalList id="imagelist" width="100%" height="180" rowHeight="160" columnWidth="180" columnCount="4">
                            <mx:itemRenderer>
                                <mx:Component>
                                     <mx:VBox horizontalAlign="center" verticalAlign="middle">
                                         <mx:Image source="{data.filename}" width="100" height="100"/>
                                         <mx:Label text="{data.folder}" /> 
                                     </mx:VBox>
                                </mx:Component>
                            </mx:itemRenderer>
                        </mx:HorizontalList>
                        

                         

                        So if you then have an HTTPService/WebService/RemoteObject that fetches data, in the result handler set the dataProvider of the HorizontalList to the loaded data.

                        1 person found this helpful
                        • 9. Re: Is Emptying of a Horizontal List on click Possible?
                          FlexHelpNeeded Level 1

                          Sorry I think I have got it working.. I believe there is some mistake on my part..still testing..

                           

                          thanks a lot guys for a help