Andy Hulstkamp

about creating online experiences

15. July 2009

Creating FXG-Library Elements at runtime in Flex 4 (Gumbo)

Part of the FXG 1.0 specification in Flex 4 makes it possible to define elements inside a library. The elements can then be re-used in a FXG document:

<!--Library with the definitions -->
<Library>
   <Definition name="circle">
    <s:Ellipse x="0" y="0" width="100" height="100" >
       <s:fill>
        <s:SolidColor color="0x000000" />
       </s:fill>
    </s:Ellipse>
   </Definition>
</Library>

<!-- use some instances of the definition  -->
<circle/>
<circle x="200" y="100"/>
<circle x="300" y="100" height="75" width="75" />

As of now there is no way to create these symols at runtime. For example, if you’d like to create a starfield, you would need to place all the objects inside the document - not exactly elegant.

Fortunately there’s a hack that works. The Flex compiler creates classes of the Library-Definitions in the background, which opens a path to create instances at runtime.

The Flex-Compiler creates classes with the name [DocumentName]_definition[1..n] from the definitions in the library. Using actionscript we can the do something like this:

//create an instance of the graphic element. 
//The definition is declared in a document with the name 'MyLibrary'
var obj:GraphicElement = new MyLibrary_definition1();

//set some properties of the graphic element
var wh:Number = Math.random() * 25 + 25;
obj.width = obj.height = wh;
obj.x = Math.random() * container.width;
obj.y = Math.random() * container.height;
obj.blendMode = "screen";

//the definition is a FilledElement. Change fill to blue
var scf:SolidColor = SolidColor(FilledElement(obj).fill);
scf.color = 0x0000ff;

//container is just a group that holds the created elements
container.addElement(obj);

Relying on the fact that the Flex-Compiler creates classes for the definitions in the background might not be the best way, but it works. Let’s hope we’ll get something like FXGLibrary.createElement(libraryName:String, defintionName:String) in the future…

further reading

Flex 4 custom Knob Button - Part 1

Custom Component in Flex 4. First Part in creating an Knob Button with custom LAF.

Getting Vector Graphics into Spark Skins

How to get vector graphics into flex Skins