Skip navigation
Currently Being Moderated

Skin an HGroup or VGroup?

Jul 5, 2009 2:47 PM

I have some items in a spark panel, a Vgroup enclosing a series of hgroups.  I'd like to be able to "skin" the appearance of the hgroups, so the all look alike, and the look is managed centrally.

 

They don't seem to support skins per se, or fills, so how would I accomplish this?

 

I know how to style Hgroups by putting a rect, fills, etc., but what I am looking for is an easy way to define one look and then use it over and over.

 
Replies
  • Currently Being Moderated
    Jul 6, 2009 5:14 AM   in reply to Handycam

    HGroup and VGroup are simply instances of the lighter weight (unskinnable) container class Group.

     

    You can pretty easily fashion your own skinnable equivalents by leaning on the SkinnableContainer class (and pairing it with a layout and/or skinClass of your choice)...

     

    Regards,

     

    Corey Lucier

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 6, 2009 8:46 AM   in reply to Handycam

    Oh sure...

     

    I was just mentioning that as you asserted, Groups are not skinnable.... but SkinnableContainer is.

     

    So I'm not entirely sure what you are going for but, let's say you created a new class that was derived from SkinnableContainer but served the same purpose as an HGroup.  For lack of a better name, let's call it HBin:

     

    HBin.as:

     

    package
    {
        import spark.components.SkinnableContainer;
        import spark.layouts.HorizontalLayout;

        public class HBin extends SkinnableContainer
        {
            public function HBin()
            {
                super();
                super.layout = new HorizontalLayout();
            }
        }
    }

     

    Then you can use it just like an HGroup, something close to what you described in your original post:

     

    SampleApp.mxml:

     

    <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"
        width="696" height="696" xmlns:local="*" >

        <s:VGroup>
            <local:HBin skinClass="BinSkin">
                <s:Button label="Button One"/>
                <s:Button label="Button Two"/>
            </local:HBin>
           
            <local:HBin>
                <s:SimpleText text="Label One"/>
                <s:SimpleText text="Label Two"/>
            </local:HBin>
           
        </s:VGroup>
    </s:Application>

     

    Note that the first 'HBin' instance is skinned... you can of course use CSS to skin all instances of HBin if you wish.  The Skin I'm using here:

     

    BinSkin.mxml:

     

    <?xml version="1.0" encoding="utf-8"?>
    <s:SparkSkin 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>
            <s:State name="normal"/>
        </s:states>
       
        <s:Rect left="1" right="1" top="1" bottom="1" radiusX="4" radiusY="4">
            <s:fill>
                <s:SolidColor color="0xAAAAAA" />
            </s:fill>
        </s:Rect>
        <s:Group left="1" right="1" top="1" bottom="1" id="contentGroup"/>
    </s:SparkSkin>

     

    There are of course many ways to skin a cat (pardon the pun)... so this is just one suggestion.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 6, 2009 2:35 PM   in reply to Handycam

    Not entirely sure what's going on, but why not just change it to something like this:

     

    When you say they aren't getting instantiated, are you seeing any runtime errors at all when running under a debug player? Strange.

     

    -C

    <s:SkinnableContainer 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:c="com.*" skinClass="com.SliderBoxSkin">
         <fx:Script>
              <![CDATA[
                   import mx.events.SliderEvent;
                   import mx.core.FlexGlobals;
                   [Bindable]
                   public var category:String;
                   [Bindable]
                   public var items:XMLList;
                   public var value:int =1;
                  
                   protected function hslider1_changeHandler(event:SliderEvent):void
                   {
                        value = event.currentTarget.value;
                        this.dispatchEvent(new Event("SLIDER_CHANGED", true));
                        caption.text = items[value-1];
                   }
              ]]>
         </fx:Script>
         <s:layout>
             <s:HorizontalLayout/>
         </s:layout>

         <s:RichText id="itemName" styleName="stepLabel" width="100" text="{category}"/>
         <s:RichText id="caption" text="{items[0]}" width="350" />
         <mx:HSlider labels="[1,2,3,4,5]" maximum="5" minimum="1"
                        snapInterval="1" tickInterval="1" showDataTip="false"
                        change="hslider1_changeHandler(event)" />
    </
    s:SkinnableContainer>
     
    |
    Mark as:
  • Currently Being Moderated
    Jul 7, 2009 5:13 AM   in reply to Handycam

    So, when you change the name of the root tag within an MXML document you are simply specifying the base class of the new component class..in this case, SkinnableContainer.

     

    So not sure why things aren't showing up.  I haven't seen your skin class, but perhaps you are missing a required part (contentGroup) or required state (normal)...just guessing at this point.

     

    -C

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 7, 2009 6:35 AM   in reply to Handycam

    Well, this may be all I can help with...seems to work for me.

     

    Check out this URL (pared down test case):

     

    http://www.justsuppose.com/Share/SkinTest/SkinTest.html

     

    Click on the 'addItems' button. The components are instantiated, skinned, realized, and added to the Panel.

     

    I've included the source (right click on the movie, View Source) in case you can spot what may be different about my sample.  I'm using a Flex 4 panel with a vertical layout, fwiw.

     

    -C

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points