12 Replies Latest reply on Dec 18, 2009 4:38 PM by cyber0897

    can you create a linkbutton dynamically in actionscript 3? if so how?

    cyber0897 Level 1

      hey guys... im trying to create a new linkbutton in my application in my for loop, but i dont know how to do this dynamically...

       

      i get the label name and the "x" and "y" properties in my xml... i just need to create as many buttons as nessessary... if that makes any sence... lol

       

       

      thanks in advance!

        • 1. Re: can you create a linkbutton dynamically in actionscript 3? if so how?
          pajr Level 1

          something like:

           


          protected function addLinkButtonFunction():void{

           

              //you could start your loop here....

           

               //create the link button

               var lb:LinkButton = new LinkButton();                    

           

               //assign its label

               lb.label = "my link button";                              

           

               //assign its position

               lb.x=100;

               lb.y=100;    

           

               //add listener so it does something....

               lb.addEventListener(MouseEvent.CLICK, linkButtonClick);   

             

               //add it to the document (in this case to <s:Group />)

               target.addElement(lb); 

           

               //and end your loop here                                  
          }
                     

          //function that runs when clicked
          protected function linkButtonClick(e:MouseEvent):void{

               Alert.show("clicked");
          }

           

           


          This assumes you're in Flex Builder 4.  The only change for older versions (since your question just mentions actionscript3) would be when adding to the stage, use target.addChild(lb) .

           

          Is that what you're trying to do?

          1 person found this helpful
          • 2. Re: can you create a linkbutton dynamically in actionscript 3? if so how?
            cyber0897 Level 1

            yeah, thats exactly what i did in my code... and for some reason i dont see the button anywhere...

             

            the code i have is..

             

                            for each(var item:XML in imgList[currImage].buttons.children()){
                                var newButton:LinkButton = new LinkButton();
                                newButton.label = item.@name;
                                newButton.x = item.@posX;
                                newButton.y = item.@posY;
                                definition.addChild(newButton);      //<------------- need to add this button as a rollover on top of this image on a certain location
                            }

             

             

            i know it gets all the information correctly in the forloop.. but i dont see the button anywhere

            • 3. Re: can you create a linkbutton dynamically in actionscript 3? if so how?
              pajr Level 1

              A few things:

               

              What is the "definition" item in your code?   If "definition" is a Spark component (e.g. <s:Group>) then you need to use addElement instead of addChild:

               

              definition.addElement(newButton);

               

              If you use addChild nothing happens visually.

               

               

               

              Also, make sure the container allows for absolute (x,y) positioning.  For example an HBox will not respect the x,y layout, where as a  Group will.

               

              Does that work?

              • 4. Re: can you create a linkbutton dynamically in actionscript 3? if so how?
                cyber0897 Level 1

                oops i ment to explain what definition was... sry... definition is an image tag in my mxml, i need to add the button on top of that image...

                 

                the code i have is as below..., and as you can see i use (x,y)  positionining for my linkbuttons and that works just fine....

                 

                 

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

                <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
                         xmlns:s="library://ns.adobe.com/flex/spark"
                         xmlns:mx="library://ns.adobe.com/flex/halo" width="975" height="400"
                         creationComplete="app_creationComplete(event)">
                    <fx:Declarations>
                        <!-- Place non-visual elements (e.g., services, value objects) here -->
                        <!--s:HTTPService id="myXml" url="apx32TroubleshootingXml.xml" resultFormat="e4x"
                                        result="myXml_resultHandeler(event)" fault="myXml_faultHandler(event)" /-->
                    </fx:Declarations>
                    <fx:Script source="apx32Action.as" />
                    <fx:Style>
                        @namespace s "library://ns.adobe.com/flex/spark";
                        @namespace mx "library://ns.adobe.com/flex/halo";
                        .nextButton{
                            fontSize:12;
                            textRollOverColor:#333333;
                            fontFamily:dinb;
                            fontLookup: embeddedCFF;
                        }
                        .tabStyle{
                            fontSize:10;
                        }

                    </fx:Style>
                    <mx:HBox>
                        <mx:TabNavigator id="tabNav" width="275" tabStyleName="tabStyle" fontWeight="bold" height="400" paddingTop="0"
                                         tabWidth="137.5" creationPolicy="all" borderVisible="false">
                            <mx:VBox label="USER OPTIONS" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off">
                                <s:List id="userOptions" width="100%" height="100%" itemRenderer="modules.apx32.myComponents.listRenderer"
                                        borderVisible="false" contentBackgroundColor="#e9e9e9"
                                        change="userOptionsChange(event)">
                                    <s:dataProvider>
                                        <s:XMLListCollection id="userOptionProvider" />
                                    </s:dataProvider>
                                </s:List>
                            </mx:VBox>
                            <mx:VBox label="TROUBLESHOOTING">
                                <s:List id="trouble" width="100%" height="100%" itemRenderer="modules.apx32.myComponents.listRenderer"
                                        borderAlpha="0" borderVisible="false" contentBackgroundColor="#e9e9e9">
                                    <s:dataProvider>
                                        <s:XMLListCollection id="troubleShootProvider" />
                                    </s:dataProvider>
                                </s:List>
                            </mx:VBox>
                        </mx:TabNavigator>
                        <!--mx:ViewStack>
                            <mx:Canvas>
                                <mx:Image source="@Embed(source='images/APX32-adjustingVolume_01.png')" />
                            </mx:Canvas>
                        </mx:ViewStack-->
                    </mx:HBox>
                    <mx:Image id="definition" width="700" height="375" x="275" y="24" />
                    <mx:HBox x="685" y="371">
                        <mx:LinkButton label="WATCH VIDEO" id="watchVideo" skin="{null}" visible="true" paddingRight="20"  />
                        <mx:LinkButton label="Back" id="back" skin="{null}" visible="false" click="backClickHandler(event)" />
                        <mx:LinkButton label="More Options" id="next" skin="{null}" visible="false" click="nextClickHandler(event)" />
                    </mx:HBox>
                    <!--mx:LinkButton label="WATCH VIDEO" id="watchVideo" skin="{null}" y="371" paddingRight="20" paddingLeft="800" />
                    <mx:LinkButton label="More Options" id="next" skin="{null}" x="830" y="371" visible="false" click="nextClickHandler(event)" /-->
                   
                </s:Group>
                • 5. Re: can you create a linkbutton dynamically in actionscript 3? if so how?
                  pajr Level 1

                  Ah.  I see.

                   

                  You can't add an element as a child of an image (which is what your code is trying to do).  You can only add elements to containers (like Box or Group).

                   

                  What you want to do is put the buttons on top of the image (I assume to basically create something like the old html image map).

                   

                  Given your current code, the easist way to do that is to put a wrapper around your image, then add the linkbuttons to the wrapper (making sure your dimensions work out properly).  Something like:

                   

                  <s:Group id="definitionWrapper" width="700" height="375"  x="275" y="24">

                        <mx:Image id="definition" width="700" height="375" />

                  </sGroup>

                   

                   

                  Then, in your actionscript:

                  definitionWrapper.addElement(newButton);

                   

                  This will append the newButton after the image (as a child of the s:Group).  But because the s:Group has no inherent layout, it will treat things as absoutely positioned, and the x,y coordinates will be relative to the top left corner of the s:Group.  Assuming your image is also at the top left corner of the s:Group, things should line up.

                  • 6. Re: can you create a linkbutton dynamically in actionscript 3? if so how?
                    cyber0897 Level 1

                    YESS!!!! you are the man!!! lol its always somehting stupid i do.. LOL

                     

                    that worked like a champ! i can see the buttons.. but for some reason it moves my image more to the right.. but i should be able to fix that issue...

                     

                    and the last thing is... is there a way to destroy all the dynamically created buttons when the user click onto a different list item??

                    • 7. Re: can you create a linkbutton dynamically in actionscript 3? if so how?
                      pajr Level 1

                      Glad that worked.

                       

                      As for removing elements, there are a few ways to go.

                       

                      In general you can do something like:

                       

                      definitionWrapper.removeAllElements();

                       

                      But that will also remove the Image (since it's a child of the wrapper just like the linkButtons).

                       

                      So two options would be:

                       

                       

                       

                       

                       

                      1.  Add a second wrapper, that is a child of your new wrapper, and manage your buttons within it.  Something like:

                       

                      <s:Group width="700" height="375"  x="275" y="24">

                           <mx:Image id="definition" width="700" height="375" />

                                <s:Group id="definitionWrapper" width="700" height="375" />

                      </sGroup>


                      //add buttons

                      defintionWrapper.addElement(newButton);


                      //remove all buttons

                      definitionWrapper.removeAllElements();

                       

                       

                       

                       

                      2. Remove the buttons by their index.  Something like:

                       

                      definitionWrapper.removeElementAt(<indexOfYourButton>);

                       

                      In this case you need to either keep track of where you're putting the buttons in the first place, or loop through the wrapper's children and remove.

                       

                       

                       

                       

                      There are other ways to do this, but these are two easy ways off the top of my head.

                      • 8. Re: can you create a linkbutton dynamically in actionscript 3? if so how?
                        cyber0897 Level 1

                        so if i did definitionWraper.removeAllElements(), that should remove the need to keep track of all my buttons, and remove everything within that wrapper?? right?

                        • 9. Re: can you create a linkbutton dynamically in actionscript 3? if so how?
                          pajr Level 1

                          Yes - removeAllElements()  removes all children within the given element....

                          • 10. Re: can you create a linkbutton dynamically in actionscript 3? if so how?
                            cyber0897 Level 1

                            yep tried that, and it worked like a champ! , thank you for all your help pjar

                            • 11. Re: can you create a linkbutton dynamically in actionscript 3? if so how?
                              cyber0897 Level 1

                              hey pjar.... i have a small problems again lol

                               

                              I have the following code

                               

                                      if(imgList[currImage].@details == "true"){
                                          if(imgList[currImage].buttons.@hasButtons == "true"){
                                              for each(var item:XML in imgList[currImage].buttons.children()){
                                                  var newButton:customLinkButton = new customLinkButton();
                                                  newButton.label = item.@name;
                                                  newButton.tabId = item.@tab;
                                                  newButton.changeTo = item.@changeTo;
                                                  newButton.x = item.@posX;
                                                  newButton.y = item.@posY;
                                                  newButton.setStyle("skin", null);
                                                  newButton.styleName = "dynamicButtonStyle";
                                                  newButton.addEventListener(MouseEvent.MOUSE_DOWN, customButtonPressed);
                                                  dynamicButtons.addElement(newButton);
                                              }
                                          }
                                      }

                               

                              as you can see its creating the dynamic buttons perfectly..

                              the only problem is that, when i click on the first button the eventlistener takes me to customButtonPressed...

                              otherwise it dosent go to that function at all...

                              I have no idea whats goin on...

                               

                              I thought i was attaching a new event listener for each dynamic button created... ??

                               

                              any ideas on why my click dosent work on the other buttons?