FLOW XRender Example [Archive URL] [Comments: 0]

FLOW is a layout/application engine for Flash that allows you to draw both data and movieclips to stage. XRender provides an XML interface to FLOW allowing you to author in XML and render at runtime.

FLOW is divided into 2 parts. The methods that handle the recursive rendering and handlers. Handlers define the tag elements and define how the arguments are interpreted and instantiated. You can support new elements by adding functions at _global.flow.xrender.handler['myhandler']. This allows the renderer to be infinitely extensible allowing old and new components to be supported. I have tested support with all v1, v2, and ghostwire components and they all work seamlessly in both Flash player 6 & 7.

XRender Sample:
FLOW XRender Sample
Using the tags defined below build a layout in XML and press 'Render'. This sample always renders to _level0 although it is possible to target any MC of a movie and render content there as needed. Rendering to different targets allows a portion of an interface to be updated like a table or dialog without a predefined frame or movieClip. Also since XRender works at the movieClip level there is no reason it cannot be used within components themselves.

FLOW XRender Sample Source

Supported Elements:
<mc/> or <movieclip/>
Example: <mc name='myOuterClip'><mc name='myInnerClip'/></mc>
Result: 2 Empty MovieClips are added to the stage with the instance names provided.
Def: Adds a MovieClip to stage. As MovieClips are container elements you can add tags internally to create trees of movieclips. All base movieClip properties are supported : _x, _y,_rotation,_width,_height, etc.

<button/> or <mx:button/> or <mx:controls:button/>
Example: <button name='myOuterClip' label='Hello World'/>
Result: Button is added to Stage with label.
Def: Adds a Button to stage supporting all Button properties.

<number/> or <n/>
Example: <n name='counter' value='1234'/>
Result: Variable 'counter is created as a number.
Def: Adds a number variable to the stage path.

<string/> or <s/>
Example: <s name='myName' value='Ted Patrick'/>
Result: Variable 'myName' is created as a string.
Def: Adds a string variable to the stage path.

<boolean/> or <b/>
Example: <b name='myBool' value='1'/>
Result: Boolean 'myBool' is created.
Def: Adds a boolean variable to the stage path.

<object/> or <o/>
Example: <o name='myObject'/>
Result: Object 'myObject' is created.
Def: Adds an Object to the stage path. Inner elements are rendered also.

<array/> or <a/>
Example: <a name='myArray'/>
Result: Array 'myArray' is created.
Def: Adds an Array to the stage path. Inner elements are rendered also.

<reference/> or <r/>
Example: <r name='myFunctionInstance' value='_global.myFunction'/>
Result: Reference to the function _global.myFunction is created.
Def: Adds an reference to the stage path.

This is a single aspect of FLOW as different handlers produce different effects. Assuming I use a persistent handler to render a component, when the component is rendered again it will be restored to its prior state.

Next week, I will show you some of the persistence codebase with FLOW and a linear and tree based form engine using the persistence handlers. I will also touch on events and some of the design classes in FLOW.

Hopefully this will be useful in your workflow as it simplifies writing lots of movieclips and data to stage.

Cheers,
ted ;)