1 Reply Latest reply on Aug 18, 2012 4:50 AM by cdsvvxv

    SOLVED: Composite skinning

    cdsvvxv Level 1

      As far as I know there are two ways to skin Custom components:

       

      1) Copy and paste the base skin (spark.skins.spark.TitleWindow etc.) and modify it;

      2) Create a composite skin.

       

      I have 1) working but it is a little large and I was looking to cut down on the size of the skin. I read a post on extending skins that suggested that this is possible:

       

      -- START: DialogNoteSkin.mxml --

       

      <?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"

              xmlns:mx="library://ns.adobe.com/flex/halo"

              xmlns:skins="spark.skins.spark.*">

       

          <fx:Metadata>[HostComponent("view.DialogNote")]</fx:Metadata>

       

          <fx:Script>

              <![CDATA[

                  import spark.components.Group;

                  import spark.skins.spark.TitleWindowSkin;

       

                  public function get contentGroup():Group {

                      return titleWindowSkin.contentGroup;

                  }

       

              ]]>

          </fx:Script>

       

          <s:states>

              <s:State name="normal" />

              <s:State name="inactive" />

              <s:State name="disabled" />

              <s:State name="normalWithControlBar" />

              <s:State name="inactiveWithControlBar" />

              <s:State name="disabledWithControlBar" />

              <s:State name="closed" />

          </s:states>

       

          <skins:TitleWindowSkin id="titleWindowSkin" left="0" right="0" top="0" bottom="0" />

       

      </s:Skin>

       

      -- END: DialogNoteSkin.mxml --

       

      Where a skins:TitleWindowSkin is included in the DialogNoteSkin.mxml. However I end up with a title window that has a black content area, and it is not draggable either:

       

      dialog-note-skin.gif

       

      Does anyone know why this doesn't work?

        • 1. Re: SOLVED: Composite skinning
          cdsvvxv Level 1

          My original question hasn't really been answered, but I do have a solution to the problem I was trying to solve. I thought composite skinning was the easiest way to extend an MXML component, but that saying goodbye to templates and hello mxmlcontent has a better answer. For me the 'trick' to getting this solution working was to open a TitleWindow and then have my base component starting with a s:Group which allows it to be extended. The base component was then added to the TitleWindow. The provided override public function set mxmlContent function needs to go into the MyContainer Object and not the MySubContainer Object as I tried at first.

           

          My working solution is below, and hopefully it won't be too long before Flex MXML has an extend keyword because I find this to be painful!

           

          --- Main.mxml ---

           

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

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                         xmlns:s="library://ns.adobe.com/flex/spark"

                         xmlns:mx="library://ns.adobe.com/flex/mx"

                         xmlns:view="view.*">

           

              <fx:Script>

                  <![CDATA[

           

                      import mx.managers.PopUpManager;

                      import view.MyTitleWindow;

           

                      private var myTitleWindow:MyTitleWindow;

           

                      private function eventHandlerButtonClick():void {

                          myTitleWindow = PopUpManager.createPopUp(this , MyTitleWindow) as MyTitleWindow;

                          myTitleWindow.title = "My Title Window";

                          myTitleWindow.width = 300;

                          myTitleWindow.height = 300;

                          PopUpManager.centerPopUp(myTitleWindow);

                      }

                  ]]>

              </fx:Script>

           

              <s:Button label="Open title window" click="eventHandlerButtonClick()" />

           

          </s:Application>

           

           

          --- MyTitleWindow.mxml ---

           

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

          <s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"

                         xmlns:s="library://ns.adobe.com/flex/spark"

                         xmlns:mx="library://ns.adobe.com/flex/halo"

                         xmlns:view="view.*">

           

              <s:VGroup paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10">

                  <view:MySubContainer width="300" height="300" />

              </s:VGroup>

           

          </s:TitleWindow>

           

           

          --- MyContainer.mxml ---

           

          <?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"

                          xmlns:view="view.*">

           

              <fx:Script>

                  <![CDATA[

                      /**

                       * Add the child components to this component.

                       */

                      public override function set mxmlContent(value:Array):void {

                          var len:int = super.numElements;

                          for (var i:int = len - 1 ; i >= 0;  --i) {

                              value.unshift(super.getElementAt(i));

                          }

                          super.mxmlContent = value;

                      }

                  ]]>

              </fx:Script>

           

              <s:layout>

                  <s:VerticalLayout/>

              </s:layout>

              <s:Label text="My Container text" />

           

          </s:Group>

           

          --- MySubContainer.mxml ---

           

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

          <view:MyContainer    xmlns:fx="http://ns.adobe.com/mxml/2009"

                              xmlns:s="library://ns.adobe.com/flex/spark"

                              xmlns:mx="library://ns.adobe.com/flex/halo"

                              xmlns:view="view.*">  

           

              <s:Label text="mySubContainer text 1" />

              <s:Label text="mySubContainer text 2" />

           

          </view:MyContainer>