Libraries and symbols in FXG and MXML graphics

A symbol is a named grouping tag that can be made up of other symbols and graphic elements. You can define a symbol once and reuse it any number of times in an FXG document by using the <Library> and <Definition> elements. In MXML graphics, you use the MXML file’s <fx:Library> and <fx:Definition> tags.

In FXG, the <Library> tag contains <Definition> elements. The <Library> tag can only be placed as a child of the root tag of an FXG document, just as the <fx:Library> tag can only be a child of the root tag in an MXML file. Symbols defined in a library can be referenced by name anywhere in the document.

In FXG, the <Library> tag must be the first child of the root tag.

The FXG <Definition> tag and the MXML <fx:Definition> tag can contain only a Group or other symbols. You cannot nest definitions, as the following example shows:
<!-- This is illegal. --> 
<Library> 
    <Definition name="A"> 
        <Definition name="B"/> 
    </Definition> 
</Library>
You can, however, reference symbols inside definitions. Symbols can be used anywhere a Group can be used, as the following example shows:
<!-- This is OK. --> 
<Library> 
    <Definition name="A/> 
    <Definition name="B"> 
        <A/> 
    </Definition> 
</Library>

All attributes that are legal on an instance group are also legal on a symbol.

Libraries can have any number of definitions. Each definition defines a named symbol that you can reuse in that document. For example, you can define a rectangle shape in your library, and then use that rectangle shape any number of times in the document. The named symbol can optionally contain effects such as color transforms, filters, blend modes, or masks. These elements can appear in any order in FXG.

For more information about using the <fx:Library> and <fx:Definition> language tags in MXML, see ActionScript 3.0 Reference for the Adobe Flash Platform.

FXG examples

The following example uses three FXG components. Each component includes a library definition of an object, and uses that tag multiple times to make up its shape.
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/LibraryExample.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.*">

     <mx:Panel title="Library Example"
        height="75%" width="75%" layout="horizontal"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
          <s:VGroup>          
            <comps:YellowShape/>
            <comps:BlueShape/>
            <comps:RedShape/>            
          </s:VGroup>
     </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:
<?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>
     
The following file defines the BlueShape FXG component used in the previous example:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/BlueShape.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">    
     <Library>
          <Definition name="BlueRect">
               <Group>
                   <Rect height="10" width="10">                              
                         <stroke>
                              <SolidColorStroke color="#000000" weight=".5"/>
                         </stroke>
                         <fill>
                              <SolidColor color="#66CCFF"/>
                         </fill>
                   </Rect>
                </Group>          
          </Definition>
     </Library> 

     <BlueRect x="0" y="0"/>
     <BlueRect x="12" y="0"/>
     <BlueRect x="24" y="0"/>
     <BlueRect x="36" y="0"/>

</Graphic>
     
The following file defines the RedShape FXG component used in the previous example:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/RedShape.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">    
     <Library>
          <Definition name="RedRect">
               <Group>
                   <Rect height="10" width="10">                              
                         <stroke>
                              <SolidColorStroke color="#000000" weight=".5"/>
                         </stroke>
                         <fill>
                              <SolidColor color="#FF3333"/>
                         </fill>
                   </Rect>
                </Group>          
          </Definition>
     </Library> 

     <RedRect x="0" y="0"/>
     <RedRect x="12" y="0"/>
     <RedRect x="12" y="12"/>
     <RedRect x="24" y="12"/>

</Graphic>

MXML graphics examples

The following example draws three groups of shapes using MXML graphics that are defined in the library:

<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/LibraryExampleMXML.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:Definition name="BlueRect">
               <s:Group>
                   <s:Rect height="10" width="10">                              
                         <s:stroke>
                              <s:SolidColorStroke color="#000000" weight=".5"/>
                         </s:stroke>
                         <s:fill>
                              <s:SolidColor color="#66CCFF"/>
                         </s:fill>
                   </s:Rect>
                </s:Group>          
          </fx:Definition>
          <fx:Definition name="RedRect">
               <s:Group>
                   <s:Rect height="10" width="10">                              
                         <s:stroke>
                              <s:SolidColorStroke color="#000000" weight=".5"/>
                         </s:stroke>
                         <s:fill>
                              <s:SolidColor color="#FF3333"/>
                         </s:fill>
                   </s:Rect>
                </s:Group>          
          </fx:Definition>
     </fx:Library> 

     <mx:Panel title="Library MXML Graphic Example"
        height="75%" width="75%" layout="horizontal"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
          <s:VGroup>          
            <s:Graphic>    
             <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:Graphic>

            <s:Graphic>    
             <fx:BlueRect x="0" y="0"/>
             <fx:BlueRect x="12" y="0"/>
             <fx:BlueRect x="24" y="0"/>
             <fx:BlueRect x="36" y="0"/>
            </s:Graphic>
     

            <s:Graphic>    
             <fx:RedRect x="0" y="0"/>
             <fx:RedRect x="12" y="0"/>
             <fx:RedRect x="12" y="12"/>
             <fx:RedRect x="24" y="12"/>
            </s:Graphic>
     
     </s:VGroup>
     </mx:Panel>
</s:Application>

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