3 Replies Latest reply on Feb 19, 2008 9:43 AM by Gregory Lafrance

    Skinning / Extending Panel

    mac_55 Level 1
      Hi,

      I'm looking to skin or extend the panel so that I can have things such as a close button in the title bar, and so that the panel's resizeable. What's the best way to do this? If I extend the panel, how do I go about this? since my components are in <mx:panel/> 's

      Thanks :)
        • 1. Re: Skinning / Extending Panel
          Ratsnackbar Level 2
          Hello:

          You need to override the createChildren method to do this. This is just an example but is similar to the method I use. If you are adding many components then you would want to break out each components configurations into their own methods or your createChildren() method will get quite long. Or even better create a custombutton class in advance that extends the Button Class and use it.

          Example:

          private var panelTB:UIComponent;
          private var myCloseButton:Button = new Button();

          override protected function createChildren():void {
          super.createChildren();
          //make yourself a reference to the titlebar
          this.panelTB = super.titleBar;
          //Your components go here, Example:
          this.myCloseButton.width = 25;
          this.myCloseButton.height = 25;
          this.myCloseButton.styleName = "myCloseButtonStyle";
          //Add your objects (a button in this case to the referenced titlebar
          this.panelTB.addChild(this.myCloseButton);
          this.positionTBChildren();
          }

          The positionTBChildren method would then set the X,Y of the button based on your desired location and needs.

          Hope that helps.
          -Joe
          • 2. Re: Skinning / Extending Panel
            mac_55 Level 1
            Thanks!

            Is it possible to do this from the mxml? e.g. define the children using tags and somehow override the panel with a property? Sorry if it's a stupid question.
            • 3. Re: Skinning / Extending Panel
              Gregory Lafrance Level 6
              Maybe using styles:

              <?xml version="1.0"?>
              <!-- skins/EmbedImagesTypeSelector.mxml -->
              <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml">
              <mx:Style>
              Button {
              overSkin: Embed("../assets/orb_over_skin.gif");
              upSkin: Embed("../assets/orb_up_skin.gif");
              downSkin: Embed("../assets/orb_down_skin.gif");
              }
              </mx:Style>
              <mx:Button id="b1" label="Click Me"/>
              </mx:Application>