{RIA Developer}

Flex 4 Gumbo: Hello World :)

September 3rd, 2008 Posted in air, coding, expression, flex

Yesterday I downloaded an installed the latest stable build of Flex 4 “Gumbo”. After configuring and installing Flash Player 10, I was able to create my first Flex 4 app. It is only a Hello World kind of application but it shows you the new FXG format for graphics.

When you wanted to add some shape in a Flex project you always needed to go back to Flash and create objects that can be used in Flex. With the FXG you can  now declare shapes using XML. The specification documentation says the following:

FXG 1.0 describes an XML-based graphics interchange format for the Flash Platform. FXG contains high-level graphical and text primitives that can be used to create, group, transform and visually modify basic vector and bitmap shapes.

One of the basic concepts of FXG are graphical objects. FXG provides a general Path element that is used to create a bunch of graphical objects like Ellipses and Rectangles. There are three other concepts and you can read more about it here. For now I’ll stick to playing with the new graphical objects.

FXG supports shapes like Rectangle, Ellipse, Path and these shapes can be filled or stroked. This small example shows a Rectangle with a Stroke and a Fill:

<Rect width="200" height="200">
   <fill>
      <SolidColor color="#FF0000" />
   </fill>
   <stroke>
      <SolidColorStroke weight="10" color="#0000FF" alpha="0.5" />
   </stroke>
</Rect>

This is actually what Silverlight can already do right now with XAML, and why there already exists a tool like Expression Blend. When Flex 4 will be released the integration with design tools (like Thermo) will be a lot easier, at least thats what they are aiming for.

To conclude here is my first go at “Gumbo”. It is an ugly smiley, so don’t shoot me because I am just a developer and not a designer.

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://ns.adobe.com/mxml/2009"
            xmlns:mx="library:adobe/flex/halo"    
            xmlns:gumbo="library:adobe/flex/gumbo">
   
    <gumbo:Group>
        <gumbo:content>      
            <gumbo:Ellipse width="200" height="200">
                <gumbo:fill>
                    <mx:SolidColor color="#FFFF00" />              
                </gumbo:fill>
                <gumbo:stroke>
                    <mx:Stroke color="#000000" weight="2"/>  
                </gumbo:stroke>
            </gumbo:Ellipse>          
            <gumbo:Ellipse x="50" y="50" width="25" height="25">
                <gumbo:fill>
                    <mx:SolidColor color="#000000" />              
                </gumbo:fill>            
            </gumbo:Ellipse>          
            <gumbo:Ellipse x="125" y="50" width="25" height="25">
                <gumbo:fill>
                    <mx:SolidColor color="#000000" />              
                </gumbo:fill>            
            </gumbo:Ellipse>          
            <mx:Path left="50" top="125" data="Q 50 50 100 0">  
                <mx:stroke>
                    <mx:SolidColorStroke color="#000000" weight="5"/>
                </mx:stroke>          
            </mx:Path>
        </gumbo:content>
    </gumbo:Group>  
</Application>

Click here to see the smiley (you will need to have the Flash Player 10 installed to see it).

Post a Comment