2 Replies Latest reply on Dec 13, 2011 3:17 AM by Pooja Kuber

    Background color in Spark HGroup?

    rexdtripod Level 1

      I'm missing something simple here.  How do you change the background color of a Spark HGroup?  Code below doesn't get it?

       

      <?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/mx" minWidth="955" minHeight="600">

                <fx:Declarations>

                          <!-- Place non-visual elements (e.g., services, value objects) here -->

                </fx:Declarations>

                <s:HGroup x="377" y="187" width="225" height="200" contentBackgroundColor="red">

                          <s:Button label="Button"/>

                          <s:Button label="Button"/>

                          <s:Button label="Button"/>

                </s:HGroup>

      </s:Application>

        • 1. Re: Background color in Spark HGroup?
          rexdtripod Level 1

          Ahhhh..  I see.  I think you're supposed to use a SkinnableContainer and make it's layout horizontal.  Like this...

           

          <?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/mx" minWidth="955" minHeight="600">

                    <fx:Declarations>

                              <!-- Place non-visual elements (e.g., services, value objects) here -->

                    </fx:Declarations>

                    <s:SkinnableContainer x="377" y="187"

                                                                        width="225"

                                                                        height="200"

                                                                        backgroundColor="red">

                              <s:layout>

                                        <s:HorizontalLayout>

                                        </s:HorizontalLayout>

                              </s:layout>

                              <s:Button label="Button"/>

                              <s:Button label="Button"/>

                              <s:Button label="Button"/>

                    </s:SkinnableContainer>

          </s:Application>

           

          Am I looking at this correctly?

          • 2. Re: Background color in Spark HGroup?
            Pooja Kuber Level 2

            Hi rexdtripod,

             

            You can add a background color to a Group by using a Rect with 100% width and height as the first element.

             

            Here is an example of how to add a background color to a HGroup:

             

             

            <?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/mx" minWidth="955" minHeight="600">

                <fx:Declarations>

                    <!-- Place non-visual elements (e.g., services, value objects) here -->

                </fx:Declarations>

                <s:Group>

                    <s:Rect width="100%" height="100%">

                        <s:fill><s:SolidColor color="0xFF0000" /></s:fill>

                    </s:Rect>

                    <s:HGroup>

                        <s:Button label="Button"/>

                        <s:Button label="Button"/>

                        <s:Button label="Button"/>

                    </s:HGroup>

                </s:Group>   

            </s:Application>

             

            Hope this will help you. 

             

             

            Thanks and Best regards,

            ---------------------------------------------------------------------------------------

            Pooja Kuber | pkuber@infocepts.com | www.infocepts.com

            ---------------------------------------------------------------------------------------

            1 person found this helpful