2 Replies Latest reply on Mar 10, 2010 6:54 AM by neypalm

    Creating custom container for MXML use

    neypalm Level 1

      Hi,

      I want to create a custom tab-container along the lines of this (let's call it TabContainer):

       

      NavigatorContent

      --BorderContainer

      ----HGroup

       

      And I want to use it like this:

      <view:TabContainer>

      ..<s:Label .../>

      ..<s:Label .../>

      </view:TabContainer>

       

      And I want the children of this TabContainer to end up inside the HGroup. If I had used the TabContainer in ActionScript, I could have just overridden addElement and used that when I wanted to add the children, but this does not get called when I specify the children in MXML.

       

      Is there any method I can override in TabContainer to make it work for MXML, or is there another preferred way of accomplishing my goal?

        • 1. Re: Creating custom container for MXML use
          Shongrunden Adobe Employee

          What about creating a custom NavigatorContent skin, for example:

           


          Main.mxml

           

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                         xmlns:s="library://ns.adobe.com/flex/spark">
              
              <s:NavigatorContent skinClass="NestedSkin">
                  <s:Button label="1" />
                  <s:Button label="2" />
              </s:NavigatorContent>
              
          </s:Application>

           

          NestedSkin.mxml

           

          <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark">
              <fx:Metadata>
                  <![CDATA[ 
                      [HostComponent("spark.components.NavigatorContent")]
                  ]]>
              </fx:Metadata> 
              
              <s:states>
                  <s:State name="normal" />
                  <s:State name="disabled" />
              </s:states>
              
              <s:BorderContainer backgroundColor="red" left="0" right="0" top="0" bottom="0">
                  <s:HGroup id="contentGroup" left="0" right="0" top="0" bottom="0" />
              </s:BorderContainer>
              
          </s:Skin>
          • 2. Re: Creating custom container for MXML use
            neypalm Level 1

            Thanks, Shongrunden!

            The trick was the id contentGroup on the container where I want the children.