FXG Tutorial : Getting Started with a Hello World Example.

FXG is an XML based graphics interchanged format for the Flash Platform. In this tutorial,we are going to get started with FXG with a simple Hello World example. So after you set up Flex Builder with the latest nightly build of Flex 4, (You can see how here if you don’t know.) we can start.

FXG documents have a logical structure. The Graphic element serves as the root for any FXG document. The Group elementis used to group related graphic elements.Currently, basic shapes such as Rectangle and Ellipse can provided but we can easily create our required shapes with the given functions.We can add text with the SimpleText tag which provides simple text formatting as well.

Here is the Hello World code:

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

 <Graphic>
        <Group>
            <Rect width="200" height="200">
                <fill>
                    <SolidColor color="#000000"/>
                </fill>
                <stroke>
                 <SolidColorStroke weight="3" color="#FF0000"/>
                </stroke>
            </Rect>
           <SimpleText text="Hello World" x="50" y="50"/>
        </Group>
 </Graphic>

</Application>

This will create a black square with a red stroke with the text “Hello World”. I’ll be posting more tutorials on FXG soon. Happy experimenting :D