20 Replies Latest reply on Jun 9, 2010 6:36 AM by RonnieCR7

    Creating a list of Buttons

    RonnieCR7 Level 1

      Hi,

      I am trying to build a list of buttons, each embedded with an image as an icon. Each of these  buttons are dragEnabled, in the sense that they can be dragged and dropped onto a canvas. I have tried to build a list of button with the above mentioned charateristics and my code is as shown below. However, it didnt work for me.

       

      Code:

       

      <mx:Array id="arr">
        <mx:Object mouseDown="dragButton(event)" id="trans" name="Transformer" icon="{transIcon}" contextMenu="{buttonMenu}"/>
        <mx:Object mouseDown="dragButton(event)" id="isoTrans" name="Isolation Transformer" icon="{recIcon}" contextMenu="{buttonMenu}"/>
        <mx:Object mouseDown="dragButton(event)" id="ups" name="UPS" icon="{linuxIcon}" contextMenu="{buttonMenu}"/>
        <mx:Object mouseDown="dragButton(event)" id="pdu" name="PDU" icon="{vmIcon}" contextMenu="{buttonMenu}"/>        
      </mx:Array>

       

      <mx:HorizontalList id="horizontalList"
                             labelField="label"
                             iconField="thumbnailImage"
                             dataProvider="{arr}"
                             itemRenderer="CustomItemRenderer"
                             dragMoveEnabled="false"
                             columnCount="2"
                             columnWidth="150"
                             rowCount="2"
                             rowHeight="200"
                             horizontalScrollPolicy="on" />

       

       

      The CustomItemRenderer.mxml:

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
              horizontalAlign="center"
              verticalAlign="middle">

          <mx:Button mouseDown="data.mouseDown" icon="{data.icon}" contextMenu="{data.contextMenu}" buttonMode="true" useHandCursor="true" />

          <mx:Label text="{data.name}" />

      </mx:VBox>

       

       

      Please let me know what i am missing. Thanks

        • 1. Re: Creating a list of Buttons
          RonnieCR7 Level 1

          Hello,

          Isnt it possible to create a list of buttons????

          • 2. Re: Creating a list of Buttons
            RonnieCR7 Level 1

            Can someone please help me out with this????

            • 3. Re: Creating a list of Buttons
              BhaskerChari Level 4

              Hi Ronnie,

               

              Try posting the total code you are working...

               

               

              Thanks,

              Bhasker Chari

              • 4. Re: Creating a list of Buttons
                RonnieCR7 Level 1

                Hi Bhaskar,

                I have posted the relevant code already in the first post. Anyway i ll include the other related code as well.

                The code:

                 

                <mxml>

                 

                <mx:Array id="arr">
                  <mx:Object mouseDown="dragButton(event)" id="trans" name="Transformer" icon="{transIcon}" contextMenu="{buttonMenu}"/>
                  <mx:Object mouseDown="dragButton(event)" id="isoTrans" name="Isolation Transformer" icon="{recIcon}" contextMenu="{buttonMenu}"/>
                  <mx:Object mouseDown="dragButton(event)" id="ups" name="UPS" icon="{linuxIcon}" contextMenu="{buttonMenu}"/>
                  <mx:Object mouseDown="dragButton(event)" id="pdu" name="PDU" icon="{vmIcon}" contextMenu="{buttonMenu}"/>        
                </mx:Array>

                 

                <mx:HorizontalList id="horizontalList"
                                       labelField="label"
                                       iconField="thumbnailImage"
                                       dataProvider="{arr}"
                                       itemRenderer="CustomItemRenderer"
                                       dragMoveEnabled="false"
                                       columnCount="2"
                                       columnWidth="150"
                                       rowCount="2"
                                       rowHeight="200"
                                       horizontalScrollPolicy="on" />

                 

                 

                The CustomItemRenderer.mxml:

                 

                <?xml version="1.0" encoding="utf-8"?>
                <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
                        horizontalAlign="center"
                        verticalAlign="middle">

                    <mx:Button mouseDown="data.mouseDown" icon="{data.icon}" contextMenu="{data.contextMenu}" buttonMode="true" useHandCursor="true" />

                    <mx:Label text="{data.name}" />

                </mx:VBox>

                 

                 

                <action script>

                 

                public function dragButton(e:MouseEvent):void
                   {
                   
                       if(e.buttonDown)
                       { 
                           var button:Button = e.currentTarget as Button;
                           var buttonProxy:Button = new Button();
                           buttonProxy.width = button.width;
                           buttonProxy.height = button.height;
                           var dragSource:DragSource = new DragSource();
                           dragSource.addData(button, 'button');
                           DragManager.doDrag(button, dragSource, e);
                        }
                  
                   }
                  
                   public function dragEnter(event:DragEvent): void
                   {
                       var target:Canvas = event.currentTarget as Canvas;
                       if (event.dragSource.hasFormat('button'))
                       {
                           DragManager.acceptDragDrop(target);
                           DragManager.showFeedback(DragManager.COPY);
                       }
                      
                   }

                 

                public function dragDrop(event:DragEvent): void
                   {
                   
                       var target:Canvas = event.currentTarget as Canvas;
                       var button:Button = event.dragSource.dataForFormat('button') as Button;

                       button.x = event.localX;
                       button.y = event.localY;
                       networkStage.addChild(button);
                           

                }

                • 5. Re: Creating a list of Buttons
                  BhaskerChari Level 4

                  Hi Ronnie,

                   

                  Can you zip the files and mail it at bhaskerchari903@gmail.com

                   

                  The code you posted misses some of the info.

                   

                  Thanks,

                  Bhasker Chari

                  • 6. Re: Creating a list of Buttons
                    RonnieCR7 Level 1

                    Hi Bhaskar,

                    I have posted everything that is needed. Only thing that is missing is the images. I have embedded the images in my app. You cud jus use some other images in place of them.

                    • 7. Re: Creating a list of Buttons
                      RonnieCR7 Level 1

                      Bhaskar plz let me know if you need anything else. What errors are you getting?

                      • 8. Re: Creating a list of Buttons
                        BhaskerChari Level 4

                        Hi Ronnie,

                         

                        What should I use for context menu...

                         

                        contextMenu="{buttonMenu}" I am getting error for this ....Access of undefined property "buttonMenu"

                         

                        Also I am getting erro for this line...

                        networkStage.addChild(button);

                         

                        Where is networkStage declared...??

                         

                        Also where should I include the ActionScript...either in main mxml file or CustomItemRenderer.mxml file...?

                         

                        Please clear the above ones...ASAP

                         

                         

                        Thanks,

                        Bhasker Chari

                        • 9. Re: Creating a list of Buttons
                          RonnieCR7 Level 1

                          Hey Bhaskar,

                          Thx for the prompt reply.

                          You can very well remove the contextMenu thing. networkStage is the id of the canvas onto which i am dragging and dropping the buttons. The action script will come in the same file as the  mxml code. Only the customRenderer file would be different.

                          • 10. Re: Creating a list of Buttons
                            BhaskerChari Level 4

                            Hi Ronnie,

                             

                            I have done almost 95% of your work...You just need to figure out one thing which I have explained in detail...in dragDrop function in comments.

                             

                            There are lot many changes that I had to be made to your code.

                             

                            Here is your main Application file:

                             

                            <?xml version="1.0" encoding="utf-8"?>
                            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
                            <mx:Script>
                              <![CDATA[
                               import mx.controls.Button;
                               [Bindable]
                               [Embed(source='assets/arrowIcon.JPG')]  
                               private var transIcon:Class;
                              
                               [Bindable]
                               [Embed(source='assets/close.png')]
                               private var recIcon:Class;
                              
                               [Bindable]
                               [Embed(source='assets/liazon_logo.png')]
                               private var linuxIcon:Class;
                              
                               [Bindable]
                               [Embed(source='assets/max.png')]
                               private var vmIcon:Class;
                              
                               [Bindable]
                               private var buttonMenu:ContextMenu = new ContextMenu();;
                              
                              
                               import mx.managers.DragManager;
                                  import mx.containers.Canvas;
                                  import mx.core.DragSource;
                                  import mx.events.DragEvent;
                                      
                                
                                 public function dragEnter(event:DragEvent): void
                                 {
                                     var target:Canvas = event.currentTarget as Canvas;
                                     if (event.dragSource.hasFormat('button'))
                                     {
                                         DragManager.acceptDragDrop(target);
                                         DragManager.showFeedback(DragManager.COPY);
                                     }
                                    
                                 }
                               
                               public function dragDrop(event:DragEvent): void
                               {
                                     var target:Canvas = event.currentTarget as Canvas;
                                     var button:Button = event.dragSource.dataForFormat('button') as Button;
                                 
                                  var myButton:Button = new Button();
                                  //myButton.label = "HELLO";     
                                  myButton.setStyle("icon",transIcon);
                                  // Actuall in the setStyle Method you need to dynamically set the icon
                                  // I have hardCode here as transIcon so it varies depending on the button dragged
                                  myButton.width = button.width;
                                  myButton.height = button.height;
                                  myButton.x = event.localX;
                                     myButton.y = event.localY;
                                    
                                     button.x = event.localX;
                                     button.y = event.localY;
                                    
                                     // Here you need to note two things
                                     // 1) If you directly add the button to the networkStage Canvas you can see the Dragged button getting added to the stage
                                     // but here the problem is you cannot find the button in the HorizontalList since the button instance here refers to actual button dragged from the HList
                                     // 2) The work around here is you should not add the button directly instead you need to create the new button instance and assign the icon and dimensions asame as the button instance.
                                     // But the problem I am facing here is capturing the icon class that is being used for the draggedImage. So you dynamically need to track the icon name and you need to assign to the new myButton instance
                                     //
                                     //networkStage.addChild(button);
                                     networkStage.addChild(myButton);
                               }

                                   
                              ]]>
                            </mx:Script>
                            <mx:Array id="arr">
                               <mx:Object mouseDown="dragButton(event)" id="trans" name="Transformer" icon="{transIcon}" contextMenu="{buttonMenu}"/>
                               <mx:Object mouseDown="dragButton(event)" id="isoTrans" name="Isolation Transformer" icon="{recIcon}" contextMenu="{buttonMenu}"/>
                               <mx:Object mouseDown="dragButton(event)" id="ups" name="UPS" icon="{linuxIcon}" contextMenu="{buttonMenu}"/>
                               <mx:Object mouseDown="dragButton(event)" id="pdu" name="PDU" icon="{vmIcon}" contextMenu="{buttonMenu}"/>        
                            </mx:Array>

                            <mx:HorizontalList id="horizontalList"
                                                   labelField="label"
                                                   iconField="thumbnailImage"
                                                   dataProvider="{arr}"
                                                   itemRenderer="CustomItemRenderer"
                                                   dragMoveEnabled="false"
                                                   dragEnabled="false"
                                                   columnCount="2"
                                                   columnWidth="150"
                                                   rowCount="2"
                                                   rowHeight="200"
                                                   horizontalScrollPolicy="on" />
                                 <mx:Canvas id="networkStage" dragEnter="dragEnter(event);" dragDrop="dragDrop(event);" width="400" height="400" left="400" top="0" backgroundColor="red"/>                  
                            </mx:Application>

                            Here is your CustomItemRenderer.mxml file

                             

                            <?xml version="1.0" encoding="utf-8"?>
                            <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
                                    horizontalAlign="center"
                                    verticalAlign="middle">
                                    <mx:Script>
                                     <![CDATA[
                                      import mx.managers.DragManager;
                                      import mx.core.DragSource;
                                        public function dragButton(e:MouseEvent):void
                                  {
                                      if(e.buttonDown)
                                      { 
                                          var button:Button = e.currentTarget as Button;
                                          var buttonProxy:Button = new Button();
                                          buttonProxy.width = button.width;
                                          buttonProxy.height = button.height;
                                          buttonProxy.setStyle("icon", data.icon);
                                         
                                          var dragSource:DragSource = new DragSource();
                                          dragSource.addData(button, 'button');
                                         
                                          DragManager.doDrag(button, dragSource, e,buttonProxy);
                                       }
                                  }

                                     ]]>
                                    </mx:Script>

                                <mx:Button mouseDown="dragButton(event)" icon="{data.icon}" contextMenu="{data.contextMenu}" buttonMode="true" useHandCursor="true" />

                                <mx:Label text="{data.name}" />

                            </mx:VBox>

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


                            Thanks,

                            Bhasker Chari

                            1 person found this helpful
                            • 11. Re: Creating a list of Buttons
                              BhaskerChari Level 4

                              Hi Ronnie,

                               

                              Have you tested the application..

                               

                              Is it working for you..?

                               

                              Thanks,

                              Bhasker Chari

                              • 12. Re: Creating a list of Buttons
                                RonnieCR7 Level 1

                                Hi Bhaskar,

                                I checked your post only this morning as i was held up with other things. I will try your suggestions n get back to you asap.

                                Thx

                                • 13. Re: Creating a list of Buttons
                                  RonnieCR7 Level 1

                                  Hi Bhaskar,

                                  I have implemented the changes you suggested. But When i drag and drop the button now, i cant see any icon and the label also displays some random text (Button 10).

                                  • 14. Re: Creating a list of Buttons
                                    RonnieCR7 Level 1

                                    Bhaskar,

                                    I have tinkered the code slightly. In the HorizontalList component, i have changed the iconField to appropriate field, and now i can see the button with the proper icon after dropping. But only the first time . The next time i drag and drop the same button again, this time icon doesnt appear.

                                    • 15. Re: Creating a list of Buttons
                                      BhaskerChari Level 4

                                      I have already explained about this problem in my previous post in which I have posted the code.

                                       

                                      You should add the same button to the networkStage but create a new button instance which is similar to the dragged button and add it to the network stage so that you can eliminate this problem.

                                       

                                      Hope you have read clearly the comments posted by me in the code.

                                       

                                      Thanks,

                                      Bhasker Chari

                                      • 16. Re: Creating a list of Buttons
                                        RonnieCR7 Level 1

                                        Hi Bhaskar,

                                        I have done exactly as u said. I have created a new button and copied the properties of actual dragged button to the new button. I have set up the icon property to the new button based on what button is being dragged using a switch case. So when i drag a button first time i get the button with the icon. But when i drag the same button again, a plain button without any icon is seen. I could send you the changed to your mail if you want, but its the same as u suggested.

                                        Thanks a lot. Your suggestions have been very helpful so far.

                                        • 17. Re: Creating a list of Buttons
                                          BhaskerChari Level 4

                                          Hi Ronnie,

                                           

                                          Please email your current total code at bhaskerchari903@gmail.com

                                           

                                          Thanks,

                                          Bhasker Chari

                                          • 18. Re: Creating a list of Buttons
                                            RonnieCR7 Level 1

                                            Bhaskar,

                                            I have mailed the code to you.

                                             

                                            Thanks,

                                            Ronnie

                                            • 19. Re: Creating a list of Buttons
                                              BhaskerChari Level 4

                                              Hi Ronnie,

                                               

                                              I have received the mail...But it seems that there are lot of errors and unnecessary characters at the top of the main file ....I dont understand.

                                               

                                              Please find the screenshot of the mainfile.mxml I received. Also the <PDNComponents:/> are missing it seems...I cannot run the app.

                                               

                                              1.JPG

                                               

                                              Thanks,

                                              Bhasker Chari

                                              • 20. Re: Creating a list of Buttons
                                                RonnieCR7 Level 1

                                                Hi Bhaskar,

                                                I have absolutely no idea how those unnecessary characters popped up in the code. As for the <PDNComponents:> tag you cud do with just commenting them. Infact i have commented or removed most of them but unfortunately some have still remained. Sorry for the trouble. I could send the mail again this time with no such problems.

                                                Thanks,

                                                Ronnie