2 Replies Latest reply on Jun 15, 2009 4:18 AM by James Whittaker

    100% widths & skins on skinnableContainer

    James Whittaker

      Hi all,

       

      Having great fun with Flex 4 however I can't work out how to get 100% width on a SkinnableContainer.

       

      I have the following 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/halo"
                     minWidth="1024"
                     minHeight="768">

       

          <s:layout>
              <s:VerticalLayout/>
          </s:layout>

       

          <s:SkinnableContainer skinClass="skins.SCSkin">
              <s:SimpleText text="Hello world"/>
          </s:SkinnableContainer>

       

      </s:Application>

       

      With my skinClass for skinnableContainer:

       

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

       

          <s:states>
              <mx:State name="normal"/>
          </s:states>

       

          <s:Rect top="1" bottom="1" left="1" right="1">
              <s:fill>
                  <mx:SolidColor color="#FF0000"/>
              </s:fill>
          </s:Rect>

       

          <s:Group id="contentGroup"
                   top="20"
                   bottom="20"
                   left="20"
                   right="20">
              <s:layout>
                  <s:BasicLayout/>
              </s:layout>
          </s:Group>

       

      </s:Skin>

       

       

      Now I understand that the skin sets things like the padding which I have placed on the Group above (top=20). What I can't figure is how to get 100% width for my SkinnableContainer to sit within it's parent. Reason is I want to style the SkinnableContainer to be kind of like a Box in Flex 3 and set width to be 100%. I can then style this as a containing box as a list item perhaps.

       

      How do you do it? It appears that the SkinnableContainer skin cannot set it's self to be 100% of IT'S parent only it's children. I bet I'm missing something there?

       

      Oh and I have also found that if you place a SkinnableContainer inside a Halo navigator (TabNavigator) you have to place a Halo container as the Halo navigator's first child, no problem. But t=any skin applied to the SkinnableContainer does not show. The only way round is to place the SkinnableContainer inside a Group, then the SkinnableContainer skin appears fine. This sounds like a bug to me, is it or is it intentional?

        • 1. Re: 100% widths & skins on skinnableContainer
          David_F57 Level 5

          If you define the host component in the metadata you can then use the containers information as below -

           

          <fx:Metadata>

          [HostComponent("spark.components.SkinnableContainer")]

          </fx:Metadata>

           

          <s:states>

          <s:State name="normal"/>

          </s:states>

           

           

          <s:Rect radiusX="5" radiusY="5" left="0" top="0" width="{hostComponent.width}" height="{hostComponent.height}" rotation="90">

          <s:fill>

          <s:LinearGradient>

          <s:entries>

          <s:GradientEntry color="{hostComponent.FrameOuter}" />

          <s:GradientEntry color="{hostComponent.FrameInner}" />

          <s:GradientEntry color="{hostComponent.FrameOuter}" />

          </s:entries>

          </s:LinearGradient>

          </s:fill>

          </s:Rect>

           

          The need to encapsulate gumbo components embedded in a halo container makes sense at is an easy way to deal with the namespaces over the way it is done in styleing.

          • 2. Re: 100% widths & skins on skinnableContainer
            James Whittaker Level 1

            Opps, yes I forgot about the Metadata an oversight. So the correct way is to use hostComponent (no code hinting yet in IDE) instead of something like width="100%"? They work the same.

             

            Ok so I now have (MXML snippet):

             

                <s:layout>
                    <s:VerticalLayout/>
                </s:layout>

             

                <mx:TabNavigator width="280" height="100%">
                    <mx:Box>
                        <s:SkinnableContainer skinClass="skins.SCSkin" width="100%" height="100%">
                            <s:SimpleText text="Hello world"/>
                        </s:SkinnableContainer>
                        <s:SkinnableContainer skinClass="skins.SCSkin" width="100%" height="100%">
                            <s:SimpleText text="Hello world"/>
                        </s:SkinnableContainer>
                    </mx:Box>
                </mx:TabNavigator>

             

                <s:SkinnableContainer skinClass="skins.SCSkin" width="25" height="50">
                    <s:SimpleText text="Hello world"/>
                </s:SkinnableContainer>

             

            With the following Skin code (snippet):

             

                <fx:Metadata>
                    [HostComponent("spark.components.SkinnableContainer")]
                </fx:Metadata>

                <s:states>
                    <mx:State name="normal"/>
                </s:states>

                <s:Rect top="1" bottom="1" width="{hostComponent.width}" height="{hostComponent.height}">
                    <s:fill>
                        <mx:SolidColor color="#FF0000"/>
                    </s:fill>
                </s:Rect>

                <s:Group id="contentGroup"
                         top="20"
                         bottom="20"
                         left="20"
                         right="20">
                    <s:layout>
                        <s:BasicLayout/>
                    </s:layout>
                </s:Group>

             

            This works fine.

             

            What is strange is that when I use <mx:Box> instead of <mx:Container> my SkinnableContainer skin shows up strange as Box extends Container.

            I agree with the concept of mixed Halo and Spark and the nsamespaces.

             

            Thanks