2 Replies Latest reply on May 25, 2010 1:24 AM by chaky\

    How to create custom skinnable component in flex 4 that has dynamic children?

    chaky\ Level 1

      I made custom component that is similar to buttonbar and i extend from SkinnableComponent class however when i try to add some

      children susch as custom buttons that i made it throws me error that i should use addElement() method instead addChild() but

      addElement() method is not available when i extend SkinnableComponent class so what should i do?

      Do i need to implement some interfece or what?

        • 1. Re: How to create custom skinnable component in flex 4 that has dynamic children?
          UbuntuPenguin Level 4

          Try extending skinnable container.  Not really sure if that'll work though.


          • 2. Re: How to create custom skinnable component in flex 4 that has dynamic children?
            chaky\ Level 1

            Well i found solution. I extended SkinnableComponent and add reqired skin part Group and there added my children.

             

            This is example of my button bar class:

             

            package utilityClasses
            {
                 import Skins.DesktopWindowSkins.DesktopButtonSkin;
                 
                 import mx.core.IVisualElement;
                 
                 import spark.components.Group;
                 import spark.components.supportClasses.SkinnableComponent;
            
            
                 public class DesktopButtonBar extends SkinnableComponent
                 {
                      
                      [SkinPart(reqired='true')]
                      public var defaultGroup:Group;
                      
                      
                      public function DesktopButtonBar()
                      {
                           super();
                      }
                      
                      private var _i:Number = 1;
                      public function addButton(label:String, icon:Class, iconDirection:String, labelVisible:Boolean):DesktopButton
                      {
                           var b:DesktopButton = new DesktopButton();
                               b.icon = icon;
                                b.label = label;
                                b.iconDirection = iconDirection;
                                b.labelVisible = labelVisible;
                                b.setStyle('skinClass', DesktopButtonSkin );
                                defaultGroup.addElement(b); 
                                
                           return b;
                      }
                           
                 }
            }
            
            
            

             

             

            and this is skin file:

             

            <?xml version="1.0" encoding="utf-8"?>
            
            <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
                    alpha.disabled="0.5" xmlns:utilityClasses="utilityClasses.*" width="100%" height="100%">
            
                <fx:Metadata>
                <![CDATA[ 
                   /** 
                     * @copy spark.skins.spark.ApplicationSkin#hostComponent
                     */
                    [HostComponent("utilityClasses.DesktopButtonBar")]
                ]]>
                </fx:Metadata> 
            
                <s:states>
                    <s:State name="normal" />
                    <s:State name="disabled" />
                </s:states>
            
                 
                 <s:Group id="defaultGroup">
                      <s:layout>
                           <s:HorizontalLayout  />
                      </s:layout>
            
                 </s:Group>
                 
            </s:Skin>
            
            

             

             

            and this works perfectly.