11 Replies Latest reply: Jul 7, 2009 7:50 AM by Handycam RSS

    Skin an HGroup or VGroup?

    Handycam Community Member

      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.

        • 1. Re: Skin an HGroup or VGroup?
          CoreyRLucier Adobe Employee

          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

          • 2. Re: Skin an HGroup or VGroup?
            Handycam Community Member

            Can you please elaborate a bit further?

            • 3. Re: Skin an HGroup or VGroup?
              CoreyRLucier Adobe Employee

              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.

              • 4. Re: Skin an HGroup or VGroup?
                Handycam Community Member

                That was excellent, thanks.

                 

                Except it is not working for me...

                 

                My "HGroups" are separate components, called StepSlider.mxml.  I build them in a loop, such as:

                private function buildSection1(list:XMLList):void {
                var numSteps:int = list.length();
                for (var i:uint=0; i<numSteps; i++){
                var q:StepSlider = new StepSlider;
                q.itemName.text = list[i].@name;
                q.items = list..items[i].item;
                q.addEventListener("SLIDER_CHANGED", updateSlider);
                q.id = "slider"+i;
                panel1.addElement(q);
                section1Sliders.push(q);
                }
                }
                

                So, to work with your HBin example, I created the AS class, the skin file mxml (I decided to rename it SliderBox instead of HBin).  Then I modified my component, which was an HGroup, to be a SliderBox:

                 

                <?xml version="1.0" encoding="utf-8"?>
                <c:SliderBox 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: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)" />
                </c:SliderBox>
                

                But now the do not get instantiated.  Of course the mxml file is still called "StepSlider.mxml", but it won't let me rename it SliderBox.mxml since it complains of a duplicate in the same scope...

                • 5. Re: Skin an HGroup or VGroup?
                  CoreyRLucier Adobe Employee

                  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>
                  • 6. Re: Skin an HGroup or VGroup?
                    Handycam Community Member

                    I just meant they are never added to the panels.  No errors.

                     

                    Ok, just so I understand, if I change the name of the component class as you

                    did below, does my MXML file need to match this base name, as in

                    SkinnableContainer.mxml?  That usually the way I do it, but not sure if it's

                    needed. So i left the mxml file with its old name.

                     

                    Anyway, if I just replace the contents of my old hgroup-based component with

                    the code you post, it compiles but the panels are empty.

                    • 7. Re: Skin an HGroup or VGroup?
                      CoreyRLucier Adobe Employee

                      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

                      • 8. Re: Skin an HGroup or VGroup?
                        Handycam Community Member

                        No, I used the exact code for the skin class you posted, there is a content group.  I have attached the 3 files: the skiln class, the skin mxml, and the component I am trying to skin.

                         

                        In my main app, I created these in a loop, as I said, and add them to the panel, like:

                         

                        private function buildSection1(list:XMLList):void {
                             var numSteps:int = list.length();
                             for (var i:uint=0; i<numSteps; i++){
                             var q:StepSliderSkinnable = new StepSliderSkinnable;
                             q.itemName.text = list[i].@name;
                             q.items = list..items[i].item;
                             q.addEventListener("SLIDER_CHANGED", updateSlider);
                             q.id = "slider"+i;
                             panel1.addElement(q);
                             section1Sliders.push(q);
                             }
                        }
                        

                        OK, forum refused to let me attach files, so here is the code:

                         

                        *SliderBox.as*

                        package com
                        {
                             import spark.components.SkinnableContainer;
                             import spark.layouts.HorizontalLayout;
                             
                             public class SliderBox extends SkinnableContainer
                             {
                                  public function SliderBox()
                                  {
                                       super();
                                       super.layout = new HorizontalLayout();
                                  }
                             }
                        }
                        

                        *SliderBoxSkin.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>
                        
                        

                        *StepSliderSkinnable.mxml*

                         

                        <?xml version="1.0" encoding="utf-8"?>
                        <s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                    xmlns:s="library://ns.adobe.com/flex/spark" xmlns:c="com.*" 
                                    xmlns:mx="library://ns.adobe.com/flex/halo" 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>
                        

                         

                        Message was edited by: Handycam Could not upload files, added code to message

                        • 9. Re: Skin an HGroup or VGroup?
                          CoreyRLucier Adobe Employee

                          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

                          • 10. Re: Skin an HGroup or VGroup?
                            Handycam Community Member

                            Thanks for all your help.  I will look.  I am sure it is something minor and

                            hard-to-spot on my part!

                            • 11. Re: Skin an HGroup or VGroup?
                              Handycam Community Member

                              Finally got it to work.  I needed to delete that old .as class.

                               

                              Many thanks.