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…

test & source (sdk 4.0.0.7282)

Follow any responses through RSS 2.0 feed. Leave a response, or trackback from your own site.