8 Replies Latest reply on Dec 9, 2009 6:29 AM by therealraziel

    Custom Button Component, addChild adds behind button style

    therealraziel

      Hello,

       

      I'm making a custom button with a brandinglogo on it. The branding logo is an mc that changes logo depending on the area of the user.

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Button xmlns:mx="http://www.adobe.com/2006/mxml" styleName="branding" addedToStage="addBranding()">
           <mx:Style source="styles/styles.css"/>
           <mx:Script>
                <![CDATA[
                     import mx.core.UIComponent;
                     import localisation.BrandingLogo;
                     
                     private var brandCont:UIComponent = new UIComponent();
                     private var brandLogo:BrandingLogo = new BrandingLogo();
                     
                     private function addBranding():void
                     {
                          addChild( brandCont );
                          brandCont.addChild( brandLogo );
                          
                          setChildIndex( brandCont, numChildren-1 );
                     }
                ]]>
           </mx:Script>
      </mx:Button>
      
      

       

      But for some reason it puts the logo behind the button. Any idea's?

        • 1. Re: Custom Button Component, addChild adds behind button style
          paul.williams Level 4

          Skins are created on the fly by the button and this changes the ordering of the button's children. The layoutContents method later restores the correct ordering of the button's skin, logo and textField as follows:


          if (currentSkin)
             setChildIndex(DisplayObject(currentSkin), numChildren - 1);

          if (currentIcon)
             setChildIndex(DisplayObject(currentIcon), numChildren - 1);

          if (textField)
             setChildIndex(DisplayObject(textField), numChildren - 1);


          You'll have to override layoutContents to also set the correct ordering for your additional logo.


          I would also suggest that you override createChildren to instantiate your logo rather than using the addedToStage event.

          1 person found this helpful
          • 2. Re: Custom Button Component, addChild adds behind button style
            danny_run Level 1

            Why don't u use a link button:

            <mx:LinkButton id="logout" click="doLogout()" label="Logout" height="20" icon="{logOutImage}"/>

             

              [Embed(source='/images/logOutImage.png')]
               public static const logOutImage:Class; 

             

            You can make a custom LinkButton or just modify the icon in some way when the area is changed.

            • 3. Re: Custom Button Component, addChild adds behind button style
              therealraziel Level 1

              Why don't u use a link button:

              <mx:LinkButton id="logout" click="doLogout()" label="Logout" height="20" icon="{logOutImage}"/>

               

                [Embed(source='/images/logOutImage.png')]
                 public static const logOutImage:Class; 

               

              You can make a custom LinkButton or just modify the icon in some way when the area is changed.

               

              Because what i'm adding isn't a simple image. It is a complex flash component that's part of my branding class that deals with different portals and languages. So ideally i would just like to add it to the button.

               

              I'd put some effort into making this thing the proper way as a flex component but due to time constraint and all that i'd would just like to add it to a custom button component.

              • 4. Re: Custom Button Component, addChild adds behind button style
                therealraziel Level 1

                You'll have to override layoutContents to also set the correct ordering for your additional logo.


                I would also suggest that you override createChildren to instantiate your logo rather than using the addedToStage event.

                Can't seem to find these functions under LiveDocs. Mayhaps i could bother you for a link or an example?

                • 5. Re: Custom Button Component, addChild adds behind button style
                  paul.williams Level 4

                  "createChildren()" is one of the core lifecycle methods of UIComponent. It is called once when a component is first added to the display-list. You override this method if you want to add additional child objects to your component. It is described at the links below, but the best way to learn about how to use these core methods is by browsing the Flex SDK source code:

                   

                  http://livedocs.adobe.com/flex/3/html/ascomponents_advanced_3.html

                   

                  http://www.adobe.com/livedocs/flex/3/langref/mx/core/UIComponent.html#createChildren()

                   

                  The layoutContents() method is an mx_internal method of Button. It isn't documented, so the only way to learn about it is by looking at the source code for the Button class.

                   

                  The following code may help you get started:

                   

                  package
                  {
                  import flash.display.DisplayObject;
                  import mx.controls.Button;
                  import mx.core.mx_internal;

                  use namespace mx_internal;

                  public class CustomButton extends Button
                  {
                    private var extraLogo : Logo;
                   
                    protected override function createChildren() : void
                    {
                     super.createChildren();
                    
                     extraLogo = new Logo();
                     addChild( extraLogo );
                    }
                   
                    override mx_internal function layoutContents(

                       unscaledWidth:Number,
                       unscaledHeight:Number,
                       offset:Boolean):void
                       {
                        super.layoutContents( unscaledWidth, unscaledHeight, offset );
                      
                           if (currentSkin)
                               setChildIndex(DisplayObject(currentSkin), numChildren - 1);
                           if (currentIcon)
                               setChildIndex(DisplayObject(currentIcon), numChildren - 1);
                           if (extraLogo)
                               setChildIndex(DisplayObject(extraLogo), numChildren - 1);   
                           if (textField)
                               setChildIndex(DisplayObject(textField), numChildren - 1);
                       } 
                  }
                  }

                  1 person found this helpful
                  • 6. Re: Custom Button Component, addChild adds behind button style
                    therealraziel Level 1

                    Amazing, thank you. No doubt will learn a great deal more about flex now.

                    • 7. Re: Custom Button Component, addChild adds behind button style
                      therealraziel Level 1

                      Hmm can't seem to get it right, atleast my google-fu isn't coming up with a solution. Getting a namespace not found OR if i remove the override, it complains that i'm performing an illegal override on a function

                       

                      <?xml version="1.0" encoding="utf-8"?>
                      <mx:Button
                          xmlns:mx="http://www.adobe.com/2006/mxml"
                          styleName="branding">
                          <mx:Style source="styles/styles.css"/>
                          <mx:Script>
                              <![CDATA[
                                  import mx.core.mx_internal;
                                  use namespace mx_internal;
                                 
                                  protected override function createChildren():void
                                  {
                                      addChild( brand );
                                  }
                                  mx_internal override function layoutContents(
                                          unscaledWidth:Number,
                                           unscaledHeight:Number,
                                           offset:Boolean):void
                                  {
                                      super.layoutContents( unscaledWidth, unscaledHeight, offset );
                          
                                       if (currentSkin)
                                           setChildIndex(DisplayObject(currentSkin), numChildren - 1);
                                       if (currentIcon)
                                           setChildIndex(DisplayObject(currentIcon), numChildren - 1);  
                                       if (textField)
                                           setChildIndex(DisplayObject(textField), numChildren - 1);
                                       if (brand)
                                           setChildIndex(DisplayObject(brand), numChildren - 1);
                                  }
                              ]]>
                          </mx:Script>
                      </mx:Button>

                      Am i perhaps building my component the wrong way?

                      • 8. Re: Custom Button Component, addChild adds behind button style
                        therealraziel Level 1

                        Never mind me. I rebuild the button in pure as and no mxml and it works fine now!

                         

                        thanks again for pointing me in in the right direction.