FXG Tutorial : Creating and using Symbols

In the previous tutorial, I showed you how to create a simple Hello World tutorial in FXG. In this tutorial, we will be creating and using symbols. Symbols are nothing but a set of graphics with a defined name which can used to use it multiple times without having to rewrite the code.Here is the code:

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
 xmlns="library://ns.adobe.com/flex/spark">

    <fx:Library>
        <fx:Definition name="Square">
            <Group>
                <Rect width="200" height="200">
                    <fill>
                        <SolidColor color="#FF0000" />
                    </fill>
                </Rect>
            </Group>
        </fx:Definition>

        <fx:Definition name="Circle">
            <Group>
                <Ellipse width="200" height="200">
                    <fill>
                        <SolidColor color="#FF0000" />
                    </fill>
                </Ellipse>
            </Group>
        </fx:Definition>

        <fx:Definition name="SampleText">
            <Group>
                <SimpleText text="This is a sample text"/>
            </Group>
        </fx:Definition>
    </fx:Library>

    <Group>
        <layout>
            <VerticalLayout/>
        </layout>

        <fx:Square/>
        <fx:Circle/>
        <fx:SampleText/>
    </Group>

</Application>

We can create symbols with the Definition tag. The definitions must be placed inside of the Library tag. As you can see, in the Definition tag, the name attribute is used to specify the name for the symbol. FXG also allows 2D transformations with the Matrix class. We can also apply Flex effects,filters,transitions,etc. in FXG.Happy Experimenting :D