Groups in FXG and MXML graphics

Groups contain content items. In MXML, these items are typically of type IGraphicElement (the base interface class for graphic elements), but can also include effects such as the <transform>, <filters>, <mask> elements, and other <Group> elements. In MXML graphics, items inside a group can be any MXML tags.

You define a group in an FXG document by using the <Group> tag. In MXML graphics, you use the <s:Group> tag, which corresponds to the Group class. This class implements the IGraphicElementContainer interface.

The order of graphical objects inside a group determines their depth order when rendered. The last object defined in a group is the top-most tag of the depth order.

A group can be inside a graphic or another group. When a group is inside a graphic or other group, it is considered an instance group. Instance groups can optionally contain features such as transforms, filters, and masks. The order that these children appear does not matter. Graphical effects such as these are rendered based on a predefined order, as described in Effects in FXG and MXML graphics.

A Group can also be used inside a definition in the library section. When a group is inside a definition, it is considered a symbol definition. Groups inside libraries (symbol definition groups) cannot contain effects such as masks or transforms.

A group defines a new local coordinate space for its immediate child elements.

For more information about using the <s:Group> tag in MXML, see the ActionScript 3.0 Reference for the Adobe Flash Platform.

FXG example

The following FXG example uses the YellowShape FXG component:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/GroupCoordinateExample.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:comps="comps.*">

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    
     <mx:Panel title="Group Coordinate Example"
        height="75%" width="75%" layout="horizontal"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

       <s:Group>
            <comps:YellowShape/>
       </s:Group>

     </mx:Panel>
</s:Application>

The executing SWF file for the previous example is shown below:

The following file defines the YellowShape FXG component used in the previous example. The component is defined in a <Group> tag inside a <Library>, which means it is a symbol definition group:

<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/YellowShape.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">    
     <Library>
          <Definition name="YellowRect">
               <Group>
                   <Rect height="10" width="10">                              
                         <stroke>
                              <SolidColorStroke color="#000000" weight=".5"/>
                         </stroke>
                         <fill>
                              <SolidColor color="#FFFF00"/>
                         </fill>
                   </Rect>
                </Group>          
          </Definition>
     </Library> 

     <YellowRect x="0" y="0"/>
     <YellowRect x="0" y="12"/>
     <YellowRect x="12" y="0"/>
     <YellowRect x="12" y="12"/>     
</Graphic>
     

MXML graphics example

The following MXML graphics example uses the <s:Group> tag to define a group of yellow shapes:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/GroupCoordinateExampleMXML.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:comps="comps.*">

     <fx:Library>
          <fx:Definition name="YellowRect">
               <s:Group>
                   <s:Rect height="10" width="10">                              
                         <s:stroke>
                              <s:SolidColorStroke color="#000000" weight=".5"/>
                         </s:stroke>
                         <s:fill>
                              <s:SolidColor color="#FFFF00"/>
                         </s:fill>
                   </s:Rect>
                </s:Group>          
          </fx:Definition>
     </fx:Library> 

     <mx:Panel title="Group Coordinate MXML Graphics Example"
        height="75%" width="75%" layout="horizontal"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

       <s:Group>
                 <fx:YellowRect x="0" y="0"/>
                 <fx:YellowRect x="0" y="12"/>
                 <fx:YellowRect x="12" y="0"/>
                 <fx:YellowRect x="12" y="12"/>
       </s:Group>

     </mx:Panel>
</s:Application>

The executing SWF file for the previous example is shown below: