8 Replies Latest reply on Jul 7, 2009 3:26 PM by jimmyoneshot

    TileList Add/Remove function problems for a flex beginner

    jimmyoneshot Level 1

      I am starting up a new project for my university course which will allow users to drag and drop icons into their own area.

       

      I wanted to use a TileList to provide the buttons for the users to select their area i.e. when a user clicks on a button in the TileList their area will be shown then they can drag items into it from another area that will always be shown (these items will later act as links to websites effectively making this application an interactive favourites menu but I'm nowhere near that point yet).

       

      The thing is I also wanted the user's to have the ability to add a new user or remove a selected user by clicking buttons to either add a new user or click a button that will delete a selected user however after searching the internet for code and using it in my application it's a little but messed up.

       

      The problem is I have created an array of 5 profiles (slots for each user) but I only want each slot to be added once whereas at the moment I can remove buttons easily using the remove item button when a user button is selected but if i add a few profiles then delete one and add another sometimes there will be 2 instances of the same button added. I only want ONE of each profile button from the array to be viewable in the application at any one time. It's hard for me to explain this so heres my full code for the applicattion. I'm sure it just needs slightly tweaking but if someone could edit it for me it would be greatly appreciated as I'm totally stuck:-

       

      <?xml version="1.0" encoding="utf-8"?>

       

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:components="components.*" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#545351, #E3DFDF]">
        
         <mx:Script>
            <![CDATA[
               import mx.managers.*;
                 private var _dragManager:DragManager;
                 private var _historyManager:HistoryManager;
                 private var _popupManager:PopUpManager;
                 import flash.net.navigateToURL;
                 import flash.net.URLRequest;
                 import flash.net.URLVariables; 
                 import mx.events.ListEvent; 
                 import mx.controls.Button;
                  import mx.collections.*;
                  import mx.controls.Alert;
            ]]>
         </mx:Script>
         
          <mx:Script>
              <![CDATA[
                  import mx.effects.easing.Elastic;
                  import mx.collections.ArrayCollection;
                 
                  [Bindable]
                  private var myDP:ArrayCollection = new ArrayCollection(
                      );
                  
                  private var dpArr:Array = [{label: "New Profile 1", data:1},{label: "New Profile 2", data:2}, {label: "New Profile 3", data:3},{label: "New Profile 4", data:4}, {label: "New Profile 5", data:5}];
                 
                  private function deleteItem():void {
                      // Remove item from Array Collection
                      if(myDP.length > 0){
                          var toRemove:Array = [];
                      for (var i:int = 0; i < tlist0.selectedItems.length; i++)
                          toRemove.push(tlist0.selectedItems);
                      for (i = 0; i < toRemove.length; i++)
                          myDP.removeItemAt(myDP.getItemIndex(toRemove));
                       }
                  }

                  private var zcount:int = 0;
                  private function addItem():void {
                      // Add item from source Array to Array Collection
                      if(myDP.length < dpArr.length){
                          myDP.addItemAt(dpArr[myDP.length],myDP.length);
                      }
                  } 
                 
                   private function tileList_itemClick(event:ListEvent):void {
               
                  }
                   
                  private function showAlert(event:ListEvent):void{
                    Alert.show("You clicked button #"+event.currentTarget.selectedItem.data);
                   }

                           
              ]]>
          </mx:Script>
         
          <mx:Sequence id="itemsChangeEffect1">
         
              <mx:Blur blurYTo="12" blurXTo="12" duration="300" perElementOffset="150" filter="removeItem"/>
             
              <mx:Parallel>
             
                  <mx:Move duration="750" easingFunction="{Elastic.easeOut}" perElementOffset="20"/>
                 
                  <mx:RemoveItemAction startDelay="400" filter="removeItem"/>
                 
                  <mx:AddItemAction startDelay="400" filter="addItem"/>
                 
                  <mx:Blur startDelay="410" blurXFrom="18" blurYFrom="18" blurXTo="0" blurYTo="0" duration="300" filter="addItem"/>
                 
              </mx:Parallel>
             
          </mx:Sequence>
           
         <mx:Canvas width="1168" height="716" backgroundColor="#0219FB" horizontalCenter="0" verticalCenter="0" borderColor="#000000" borderStyle="solid" borderThickness="1" cornerRadius="20"  backgroundAlpha="0.8">
           
            <mx:Canvas id="UserArea" left="10" x="0" y="49" width="670" height="594" backgroundColor="#000000" cornerRadius="20" borderStyle="solid">
              
                 <mx:TileList id="tlist0" itemClick="{showAlert(event)}" itemRenderer="mx.controls.Button" top="10" left="10" right="10"  color="#FFFFFF" height="50" width="100%" fontSize="12" fontStyle="bold" columnCount="5" rowCount="2" direction="horizontal" dataProvider="{myDP}" itemsChangeEffect="{itemsChangeEffect1}" backgroundColor="#000000" fontWeight="bold" borderStyle="none"/>
                 <mx:Canvas x="63" y="129" width="200" height="200" fontSize="36" borderColor="#FFFFFF" id="Canvas1" visible="false">
                    <mx:Label x="27" y="25" text="Profile 1"/>
                 </mx:Canvas>
                                   
            </mx:Canvas>
           
            <mx:Button label="Remove item" click="deleteItem();" color="0x323232" x="96" y="10"/>
            <mx:Button label="Add item" click="addItem();" color="0x323232" x="10" y="10"/>
                    
         </mx:Canvas>
        
      </mx:Application>

        • 1. Re: TileList Add/Remove function problems for a flex beginner
          Gregory Lafrance Level 6

          You can check to see if the dataProvider already has the item to be added:

           

          if(myDP.length < dpArr.length && !myDP.contains(dpArr[myDP.length])){
              myDP.addItemAt(dpArr[myDP.length]

          }

           

          If this post answers your question or helps, please mark it as such.

          1 person found this helpful
          • 2. Re: TileList Add/Remove function problems for a flex beginner
            jimmyoneshot Level 1

            I've changed the code for the additem function to this but it only works to an extent now:-

             

            private function addItem():void

            {

             

            // Add item from source Array to Array Collection

             

            if (myDP.length < dpArr.length && !myDP.contains(dpArr[myDP.length])){

                 myDP.addItemAt(dpArr[myDP.length],myDP.length);

                 }

             

            It does only allow 1 of only the 5 profiles from the array to be added to the tilelist as I wanted but it appears that it is now impossible to add buttons anymore in certain situations.

             

            For example if i run the application add all the profile buttons so all profile buttons are shown in the tile list and then remove profile buttons 2 3 and 4 and then click the add item button 3 times buttons 2 3 and 4 should be added however only 3 and 4 appear after profile 5 and 2 doesn't appear no matter how many times I click 'add item'.

             

            What I want is for all 5 buttons from the array to be addable at any time but only one of each number should be shown. This may be to do with other code but I'm not sure.

            • 3. Re: TileList Add/Remove function problems for a flex beginner
              Gregory Lafrance Level 6

              This simplified code seems to work. If this post answers your question or helps, please mark it as such.

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">  
                <mx:Script>
                  <![CDATA[
                    import mx.collections.ArrayCollection;
                         
                    [Bindable] private var myDP:ArrayCollection = new ArrayCollection();
                          
                    private var dpArr:Array = [{label: "New Profile 1", data:1},{label: 
                      "New Profile 2", data:2}, {label: "New Profile 3", data:3},{label: 
                        "New Profile 4", data:4}, {label: "New Profile 5", data:5}];
                         
                    private function deleteItem():void {
                      if(myDP.length > 0){
                        for each(var i:int in tlist0.selectedIndices)
                          myDP.removeItemAt(i);
                       }
                     }
              
                     private function addItem():void {
                       if(myDP.length < dpArr.length){
                         myDP.addItemAt(dpArr[myDP.length],myDP.length);
                       }
                     }                      
                  ]]>
                </mx:Script>
                <mx:TileList id="tlist0" itemRenderer="mx.controls.Button"
                  height="50" width="100%" columnCount="5" rowCount="2" 
                  direction="horizontal" dataProvider="{myDP}"/>
                <mx:Button label="Remove item" click="deleteItem();"/>
                <mx:Button label="Add item" click="addItem();"/>
              </mx:Application>
              
              1 person found this helpful
              • 4. Re: TileList Add/Remove function problems for a flex beginner
                jimmyoneshot Level 1

                That works but again only to an extent. The problem is now that adding items now creates duplicate buttons again. To show you what I mean I created the following screenshots whilst testing it:-

                 

                First I added all 5 profile button's and selected the new profile 4 button like this:-

                 

                http://i223.photobucket.com/albums/dd147/jimmyoneshot/buttons1.jpg

                 

                Then I clicked the remove item button to remove the profile 4 button so it was deleted like this:-

                 

                http://i223.photobucket.com/albums/dd147/jimmyoneshot/buttons2.jpg

                 

                Then I clicked the add item button and unfortunately ANOTHER New Profile 5 button was added on the end like this so there were 2 New Profile 5 buttons:-

                 

                http://i223.photobucket.com/albums/dd147/jimmyoneshot/buttons3.jpg

                 

                What I would rather have is just one of each number of button addable i.e when I clicked the add item button it should have added the New Profile 4 button on the end instead of a duplicate of New Profile 5 Button.

                 

                Thanks for all your help so far. You've been great.

                 

                I basically want the possibility of 5 users to be able to create their own unique area when they use the application. So 5 DIFFERENT user profiles which will eventually be selectable via these buttons will need to be added later on which is why I want each button to be unique.

                 

                Am I going about this all the wrong way or is there a better way you can suggest? Perhaps a similar application with source code available?

                • 5. Re: TileList Add/Remove function problems for a flex beginner
                  Gregory Lafrance Level 6
                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">  
                    <mx:Script>
                      <![CDATA[
                        import mx.collections.ArrayCollection;
                             
                        [Bindable] private var myDP:ArrayCollection = new ArrayCollection();
                              
                        private var dpArr:Array = [{label: "New Profile 1", data:1},{label: 
                          "New Profile 2", data:2}, {label: "New Profile 3", data:3},{label: 
                            "New Profile 4", data:4}, {label: "New Profile 5", data:5}];
                             
                        private function deleteItem():void {
                          if(myDP.length > 0){
                            for each(var i:int in tlist0.selectedIndices)
                              myDP.removeItemAt(i);
                           }
                         }
                  
                         private function addItem():void {
                           if(myDP.length < dpArr.length && !myDP.contains(dpArr[myDP.length])){
                             myDP.addItemAt(dpArr[myDP.length],myDP.length);
                           }
                         }                      
                      ]]>
                    </mx:Script>
                    <mx:TileList id="tlist0" itemRenderer="mx.controls.Button"
                      height="50" width="100%" columnCount="5" rowCount="2" 
                      direction="horizontal" dataProvider="{myDP}"/>
                    <mx:Button label="Remove item" click="deleteItem();"/>
                    <mx:Button label="Add item" click="addItem();"/>
                  </mx:Application>
                  
                  • 6. Re: TileList Add/Remove function problems for a flex beginner
                    jimmyoneshot Level 1

                    That gets rid of the duplicating buttons but again it gives the problem of not being able to add further buttons. For example if I first add all 5 buttons and then select New Profile 4 button and remove it by clicking the remove item button so it looks like this:-

                     

                    http://i223.photobucket.com/albums/dd147/jimmyoneshot/buttons2.jpg

                     

                    I am then unable to add any further buttons by clicking the add item button unless I delete further items first whereas clicking the add item button should then simply re-add the new profile 4 button.

                     

                    I basically want all 5 buttons in the array to be addable at any time whilst making sure that each of them are uniquely numbered when they are added.

                     

                    It's a major pain that I just can't figure out.

                    • 7. Re: TileList Add/Remove function problems for a flex beginner
                      Gregory Lafrance Level 6

                      There's surely a better way to do this:

                       

                      <?xml version="1.0" encoding="utf-8"?>
                      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">  
                        <mx:Script>
                          <![CDATA[
                            import mx.collections.ArrayCollection;
                                 
                            [Bindable] private var myDP:ArrayCollection = new ArrayCollection();
                                  
                            private var dpArr:Array = [{label: "New Profile 1", data:1},{label: 
                              "New Profile 2", data:2}, {label: "New Profile 3", data:3},{label: 
                                "New Profile 4", data:4}, {label: "New Profile 5", data:5}];
                      
                            private var addedIndices:ArrayCollection = new ArrayCollection();
                                 
                            private function deleteItem():void {
                              if(myDP.length > 0){
                                for each(var i:int in tlist0.selectedIndices)
                                  myDP.removeItemAt(i);
                               }
                             }
                      
                             private function addItem():void {
                               if(myDP.length < dpArr.length && addedIndices.length < dpArr.length){
                                 for(var a:uint = 0; a < dpArr.length; a++){
                                   if(!addedIndices.contains(a) && !myDP.contains(dpArr[a])){
                                     myDP.addItemAt(dpArr[a],myDP.length);
                                     break;
                                   }
                                 }
                               } 
                             }                      
                          ]]>
                        </mx:Script>
                        <mx:TileList id="tlist0" itemRenderer="mx.controls.Button"
                          height="50" width="100%" columnCount="5" rowCount="2" 
                          direction="horizontal" dataProvider="{myDP}"/>
                        <mx:Button label="Remove item" click="deleteItem();"/>
                        <mx:Button label="Add item" click="addItem();"/>
                      </mx:Application>
                      
                      • 8. Re: TileList Add/Remove function problems for a flex beginner
                        jimmyoneshot Level 1

                        Fantastic! That works just as I wanted it to now. My next stage is to link the buttons to different canvas's so a different canvas will be displayed when each button is clicked and the others will be hidden so that each user has their own area.

                         

                        You've been a great help.