Defining and Reusing Symbols in Flex 4 FXG

If you have done Flash development using the Flash Authoring tool, or have done any low level work with the SWF format, then you should be familiar with the concept of symbols. Basically a symbol is a reusable object (graphics, buttons, MovieClip) that can be included in the SWF once, but referenced and used many times.

Flex 4 FXG has a similar concept of symbol, although the actual underlying implimentation is different. Using the Library and Definition elements, you can define a graphic symbol, which can then be reused multiple times within the FXG or MXML document.

For example, here is our HelloWorld example from yesterday, which uses a symbol to display the content, as opposed to just generating it inline:

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

    <Library>
        <Definition name="HelloWorldText">
            <gumbo:Group>
                <TextGraphic fontFamily="Verdana" fontWeight="bold">
                    <content>Hello, World</content>
                </TextGraphic>
            </gumbo:Group>
        </Definition>
    </Library>

    <!-- Flex 4 Hello World with FXG -->
    <mx:Canvas top="0" bottom="0" left="0" right="0">
        <gumbo:Group verticalCenter="0" horizontalCenter="0">
            <HelloWorldText />
        </gumbo:Group>
    </mx:Canvas>

    <!-- reference the symbol again -->
    <gumbo:Group left="5" bottom="5">
        <HelloWorldText />
    </gumbo:Group>
</Application>

Pay attention to the namespace usage as right now, it can be a little tricky.

Notice that once we define a symbol, we can then reuse it multiple times by referencing its name attribute as if it was a native FXG element.

A Library element must contain one of more Definition elements. A Definition element must have a name attribute and contain one Group element.

One thing to keep in mind, is that currently, this is code that is executed at runtime, and thus underneath the hood, FXG is not creating actual SWF symbols at compile time. However, that is something that we are looking at to optimize working with static assets.

You can of course, read more details on this in the FXG 1.0 Specification.

I also have a post on how to get started with Flex 4 FXG in Flex Builder 3.