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.
Hey Mike
Are the ‘Group’ tags required when you use this graphic symbol, means that the graphics symbol was declared with is own ‘Group’ tag?
i.e. isn’t this putting a ‘Group’ tag inside another ‘Group’ tag like so?
[code]
Hello, World
[/code]
Tink
30 Aug 08 at 2:39 am
[...] Defining and Reusing Symbols in Flex 4 FXG (from Mike Chambers) [...]
Flex Monkey Patches » Blog Archive » Rubbernecker’s Review - Week 10
17 Sep 08 at 2:29 pm
Mike,
Can I load an fxg document into a flex application during runtime? Is there any inbuilt support for that. If not, i guess the only way would be to load an fxg into a swf and load teh swf during runtime and access the fxg as a public variable. Please confirm.
thanks,
Om
Om
2 Feb 09 at 12:58 pm
Mike,
I have the same question like Om. I am considering one application the heart of which would be loading of the external FXG graphic during runtime. It would be very cool. Without it the whole idea will have to be replaced by the standard means, quite unattractive. Is there somewhere stated that it will be supported or not? And if not, is there any serious reason (security)?
BTW, for my purpose also conversion of the XML content into element would be very helpful. There would be also nice Boolean function XML.isGraphic to avoid crash :-)
honyk
8 Feb 09 at 2:00 pm