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:
Graphicsobject and called drawing functions on that object to tell the object how to render itself.
ThreeCirclesexample 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
Spriteabove. 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
GraphicElementobjects, like the
Ellipsein 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.
| Chet Haase is author of Flex 4 Fun, which is available as a PrePrint™ (early access release) at:
Adobe's Flash Builder 4
For more on states in Flex 4, see "Working with States in Flex 4":
Have an opinion? Be the first to post a comment about this article.
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.