15 Replies Latest reply on Oct 20, 2009 2:31 PM by rfkrocktk

    Build a Group with a Rect Background

    rfkrocktk

      I'm trying to build a simple component extending spark.components.Group to have a background color, more specifically a spark.primitives.Rect component stretched to fill the background.

      This is what I've come up with thus far:

       

      <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"
          <fx:Metadata>
              [DefaultProperty(name="content")]
          </fx:Metadata>
      
          <s:Rect id="background" width="100%" height="100%">
              <s:fill>
                  <s:SolidColor color="#990000"/>
              </s:fill>
          </s:Rect>
      
          <s:Group id="container"/>
      
          <s:filters>
              <!-- For good measure ;) -->
              <s:DropShadowFilter color="#000000" strength="0.4" blurX="5" blurY="5" distance="2" angle="90"/>
          </s:filters>
      
          <fx:Script>
              <![CDATA[
                  public function set content(value:Array):void {
                      this.container.mxmlContent = value;
                  }
              ]]>
          </fx:Script>
      </s:Group>
      
      

       

      Ok, so the logic here basically makes sense, right? All children declared in MXML go to the Group called "container". That is working just fine. However, when I run the example below, the layout is completely fubar.

       

      <s:VGroup>
          <!-- This is the component described above -->
          <components:MessageContainer id="component" width="100" height="100"/>
          <mx:Slider/>
          <mx:Slider/>
          <mx:ColorPicker/>
      </s:VGroup>
      
      

       

      This is what it looks like:

      http://i34.tinypic.com/s4p0tz.jpg

      Is there something I'm missing here? Maybe a method I need to override?

        • 1. Re: Build a Group with a Rect Background
          Handycam Level 1

          What I would do is us a skinnable component, like a spark panel not a group.  Then I would use a skin for the layout, like:

           

           

          <?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" 
              alpha.disabled="0.5"  minWidth="200" minHeight="200">
          
              <fx:Metadata>
                   [HostComponent("spark.components.Panel")]
              </fx:Metadata> 
              
               <!-- here is your frame-filling rect -->
               <s:Rect top="0" right="0" bottom="0" left="0">
                    <s:fill>
                         <s:SolidColor color="#f5f3aa"/>
                    </s:fill>
               </s:Rect>
               
               <!-- contents -->
                  <s:Group  left="10" right="10" top="10" bottom="10" id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
                  </s:Group>
          </s:Skin>
          

           

          And then, where you want your content in the main application, just use a Spark Panel with this skinClass:

           

          <s:Panel skinClass="mypanelskin">
          <s:layout><s:VerticalLayout/></s:layout>
          <mx:Slider/>
          <mx:Slider/>
          <mx:ColorPicker/>
          </s:Panel>
          
          • 2. Re: Build a Group with a Rect Background
            rfkrocktk Level 1

            That makes perfect sense. I have no idea why I didn't think of building a skin and applying it to SkinnableContainer or something.

             

            Is there an easy way to pass styles on to the skin from the host component? I want to be able to control a style like "backgroundColor" or "backgroundAlpha."

            • 3. Re: Build a Group with a Rect Background
              Handycam Level 1

              Here is a button skin I made like that:

               

              <?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" 
                        minWidth="21" minHeight="21"
                        alpha.disabled="0.5">
                   
                   <fx:Metadata>
                        [HostComponent("spark.components.Button")]
                   </fx:Metadata>
                   
                   <fx:Script>          
                        
                        [Bindable] private var tColor:uint;
                        [Bindable] private var tColorOver:uint;
                        [Bindable] private var tColorDown:uint;
                        [Bindable] private var tColorDisabled:uint = 0xCCCCCC;
                        
                        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                        {
                             bgcolor.color = getStyle("backgroundColor");
                             bgcolorover.color = getStyle("backgroundOverColor");
                             bgcolordown.color = getStyle("backgroundDownColor");
                             tColor = getStyle("color");
                             tColorOver = getStyle("colorOver");
                             tColorDown = getStyle("colorDown");
                             super.updateDisplayList(unscaledWidth, unscaledHeight);
                        }
                   </fx:Script>
                   
                   <s:states>
                        <s:State name="up" />
                        <s:State name="over" />
                        <s:State name="down" />
                        <s:State name="disabled" />
                   </s:states>
                   
                   <s:Rect top="0" left="0" right="0" bottom="0" radiusX="6" radiusY="6">
                        <s:filters>
                             <s:BevelFilter strength=".3" distance="2" blurX="4" blurY="4"/>
                        </s:filters>
                        <s:filters.down>
                             <s:BevelFilter strength=".3" distance="-2" blurX="4" blurY="4"/>
                        </s:filters.down>
                        <s:fill>
                             <s:SolidColor id="bgcolor" />
                        </s:fill>
                        <s:fill.over>
                             <s:SolidColor id="bgcolorover" />
                        </s:fill.over>
                        <s:fill.down>
                             <s:SolidColor id="bgcolordown" />
                        </s:fill.down>
                   </s:Rect>
                   
                   <!-- label -->
                   <s:Label id="labelDisplay" horizontalCenter="0" verticalCenter="1"
                        left="10" right="10" top="2" bottom="2"
                        textAlign="center" verticalAlign="middle"
                        styleName="buttonLabel" color="{tColor}" color.over="{tColorOver}" color.down="{tColorDown}" color.disabled="{tColorDisabled}">
                   </s:Label>
              </s:Skin>
              

               

              When I use the button: <s:Button label="Click me" skinClass="skins.ButtonSkin" styleName="myButton" />

               

              And in the css, you just define that style:

               

              .myButton {
                   backgroundColor: #999999;
                   backgroundOverColor: #999999;
                   backgroundDownColor: #999999;
                   color: #cccccc;
                   overColor: #cccccc;
                   downColor: #cccccc;
              }
              
              

               

               

              Note you can even "make up" parameters like I did with "overColor".

               

              Message was edited by: Handycam Note this forum turns quoted text red.

              • 4. Re: Build a Group with a Rect Background
                rfkrocktk Level 1

                So the Skin component inherits styles from the HostComponent automagically?

                • 5. Re: Build a Group with a Rect Background
                  Handycam Level 1

                  Any styles at the app level apply to everything.

                  • 6. Re: Build a Group with a Rect Background
                    Shongrunden Adobe Employee

                    Hi rfkrocktk,

                     

                    I wasn't able to reproduce the problem you are seeing with the code in the first post.  Are you on an older build of the SDK?

                     

                    Steve

                    • 7. Re: Build a Group with a Rect Background
                      rfkrocktk Level 1

                      I'm on 4.0.0.10485

                      • 8. Re: Build a Group with a Rect Background
                        Shongrunden Adobe Employee

                        Could you attach the full sample code?  I might be missing something.

                        • 9. Re: Build a Group with a Rect Background
                          mewk Level 3

                          if you want to dynamically modify the skin at runtime you can do so by using a custom component and the hostComponent property on the skin (there are other methods (using parentApplication, setStyle(), etc), but this is what I prefer). good luck,

                           

                          - e

                          • 10. Re: Build a Group with a Rect Background
                            rfkrocktk Level 1

                            Ok, so I migrated my code to work within spark.components.SkinnableContainer and spark.components.Skin.

                             

                            I have attached two versions of my project. The first version (coloredBackground_working.zip) is working fine. The second version (coloredBackground_broken.zip) is broken because of one change to line 23 in src/componentTester.mxml . If I change these properties ([minimum,maximum]) of the mx.controls.Slider control as a child of my skinned component, layout completely fails. Is this something that natively has to do with Spark + MX integration?

                             

                            I have also attached screenshots to show what I mean.

                             

                            Working:

                            http://i33.tinypic.com/73gpc7.jpg

                             

                            Broken:

                            http://i38.tinypic.com/70kop1.jpg

                             

                            BY THE WAY: This was all compiled using 4.0.0.10485

                            • 11. Re: Build a Group with a Rect Background
                              Shongrunden Adobe Employee

                              Definitely something funny going on here.  I filed a bug: http://bugs.adobe.com/jira/browse/SDK-23720

                               

                              This seems to have to do with halo Slider not playing nice with the spark VerticalLayout.  It seems to work fine when using a spark HSlider.

                               

                              Are you able to use the s:HSlider instead of mx:Slider in your app?

                              • 12. Re: Build a Group with a Rect Background
                                rfkrocktk Level 1

                                It's not only the Slider that screws things up. Try putting an

                                mx.controls.Form beneath the custom component or inside of it. It's as if it

                                throws the entire layout off. Very weird stuff indeed.

                                • 13. Re: Build a Group with a Rect Background
                                  Shongrunden Adobe Employee

                                  Could you please post a simplified code example that demonstrates the issue you are seeing with Form to the bug?

                                  • 14. Re: Build a Group with a Rect Background
                                    Joann Chuang Anderson Level 1

                                    Hi,

                                     

                                    I was triaging your bug, and when I change the mx:Slider to mx:HSlider things work as expected (see attached HSlider.JPG).  mx:Slider actually isn't intended to be used as an MXML class, per the language reference: "The Slider class cannot be used as an MXML tag. Use the <mx:HSlider> and <mx:VSlider> tags instead. However, the Slider class does define tag    attributes used by the <mx:HSlider> and <mx:VSlider> tags." (http://livedocs.adobe.com/flex/3/langref/mx/controls/sliderClasses/Slider.html)

                                     

                                    I also tried to put in the Form into the code you posted, and I don't see any problems.  I've attached a screenshot of that too. (Form.JPG)

                                     

                                    Joann

                                    1 person found this helpful
                                    • 15. Re: Build a Group with a Rect Background
                                      rfkrocktk Level 1

                                      This issue has basically been fixed. It was the evil mx.controls.Slider component that was messing everything up.

                                       

                                      FOR EVERYONE: DO NOT EVER USE mx.controls.Slider! USE mx.controls.HSlider IF YOU REALLY NEED IT! Otherwise, use the spark.components.Slider