This article is sponsored by Adobe.

---

Advertisements

This article is based on material from the book Flex 4 Fun by Chet Haase, available as a PrePrint™ from Artima Press.

Once upon a time (as far back as Flex 3), if you wanted custom graphics, you had to dive into ActionScript code, override a method or two, create and use Flash display objects, and issue calls into their Graphics objects. It was the only way to draw custom graphics from your Flex application.

For example, here's how you might draw a circle in Flex 3, from the ThreeCircles application in my book Flex 4 Fun:

    var component:UIComponent = new UIComponent();
    var sprite:Sprite = new Sprite();
    sprite.graphics.beginFill(0xff0000);
    sprite.graphics.drawEllipse(0, 0, 100, 100);
    sprite.graphics.endFill();
    component.addChild(sprite);
    addElement(component);

Flex 4 provides a new graphics API that allows you to easily create objects that describe visual elements. The Flex library internally handles the details of telling Flash how to create and render these objects. For example, here's sample code from the sample example application that draws simple circle using the new graphics classes of Flex 4:

    var circle:Ellipse = new Ellipse();
    circle.width = 100;
    circle.height = 100;
    circle.fill = new SolidColor(0x0000ff);
    circle.x = 100;
    addElement(circle);

And here's a even better example of the Flex 4 approach, using MXML markup:

    <s:Ellipse x="200" y="0" width="100" height="100">
        <s:fill>
            <s:SolidColor color="green"/>
        </s:fill>
    </s:Ellipse>

Here's the stunning output from this complex application:

You will notice some important differences between the old way of creating graphics and the new way of doing it in Flex 4:

• Declarative: The approach of creating graphics in Flex 4, like much of the rest of Flex, is object-oriented and declarative. You create the graphics primitive you need, set the properties of that object to tell it how to draw itself, and add it to the appropriate container in your application. The old way of drawing in Flex 3 was, by contrast, very manual. You got a reference to the Flash Graphics object and called drawing functions on that object to tell the object how to render itself.
• MXML: Because the new graphic elements are declarative, you can use MXML markup to describe your visuals. You can now use MXML to describe the visual aspects of your program, and only dive into ActionScript code for the more programmatic functionality of your application, like the business logic. This is particularly important when customizing the look of Flex 4 components through their skins. These component skins, which are written in MXML files, hold the graphical elements that describe the component's appearance.
• Flex-friendly: You'll notice, in the Flex 3 code in the ThreeCircles example where we draw into a sprite graphics object, an indirect approach of adding our sprite to a UIComponent, which is then added to our Flex application. This is because Flex 3 applications only understand UI components, not raw Flash display objects like our Sprite above. So whenever we want custom graphics in a Flex 3 application, they need to be drawn into a custom component, or added into a UIComponent, or by some other means added indirectly to the Flex display list. The Flex 4 approach is much more tightly integrated with Flex overall. We create GraphicElement objects, like the Ellipse in the Flex 4 example code, and add them directly to Flex containers.

In future articles (and in the book Flex 4 Fun), you can read more about the different kinds of graphics objects that you can create with Flex 4.

Resources

Chet Haase is author of Flex 4 Fun, which is available as a PrePrint™ (early access release) at: http://www.artima.com/shop/flex_4_fun

Adobe's Flash Builder 4
http://www.adobe.com/products/flashbuilder

Flex SDK 4
http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK

For more on states in Flex 4, see "Working with States in Flex 4":
http://www.artima.com/articles/flex_4_states.html

Flex.org
http://www.flex.org

Talk back!

Have an opinion? Be the first to post a comment about this article.

About the author

Chet Haase worked as a senior computer scientist on the Flex SDK team at Adobe Systems, Inc., during the Flex 4 release. He was responsible for Flex effects, and writing the next effects infrastructure and classes for Flex 4. Prior to his work at Adobe, he worked at Sun Microsystems for several years, and co-authored the book Filthy Rich Clients about creating rich user experiences with the Java client platform. His entire career has been in graphics software, from the application level to APIs and libraries to drivers for graphics chips. As long as it puts pixels on the screen, he's interested. He earned a B.A. in Mathematics from Carleton College and an M.S. in Computer and Information Sciences from the University of Oregon.

Chet posts regularly to his technical blog at http://graphics-geek.blogspot.com, where you can find articles, videos, demos, and plenty of source code. Chet is also interested in writing and performing comedy; you can see some his work in this completely unrelated field at http://chetchat.blogspot.com, and in his book When I am King..., which is available at Amazon.com.