Flex

Flex 4 Fun
Excerpt

artima
A RTIMA P RESS
M OUNTAIN V IEW, C ALIFORNIA

Buy the Book · Discuss

2 Thank you for downloading this sample eBook chapter from the First Edition of Flex 4 Fun. The only difference between the actual eBook chapter and this sample is that in this document, the page numbers start at 1, and references outside the chapter are not hyperlinked. In the actual eBook,those reference also serve as a hyperlink to the referenced page in the book. The difference between this chapter and its appearance in the paper book is that the paper book uses shades of gray, not color, for figures and to syntax highlight code. We hope you find this sample chapter useful and enjoyable. Bill Venners President, Artima, Inc.

Copyright © 2010 Chet Haase. All rights reserved.Buy the Book · Discuss

Excerpt from Flex 4 Fun

Chapter 2

Graphics
Graphics are the heart of GUI applications. Graphical objects are used to describe the visual appearance of components as well as to create custom rendering like gradient backgrounds. The richness of the graphics platform in a GUI toolkit determines how easily you can build rich client applications with that toolkit. SinceFlex sits atop the Flash platform, there is a wealth of graphics capabilities available, enabling very rich clients indeed. You can see the use of graphics objects in every Flex 4 component, like this panel full of controls:

Every one of these components is made up of simple graphics primitives. The panel consists of a couple of rectangles with a darker fill for its header. The button is arounded rectangle filled with a light gradient and stroked Buy the Book · Discuss

Chapter 2 · Graphics with a darker border color. The checkbox has a filled and stroked rectangle for the box and a path object for the check mark. The slider is composed of a rounded rectangle for the track and a circle for the thumb. And the radio button has one circle for the button and one for the selectionindicator. You use these same graphics primitives to create very custom and dynamic objects on the screen, as seen here:

4

(Demo: Shapely)

In this drawing application, all of the control panel objects on the left as well as the scribbled face on the drawing canvas were created with graphic elements. We’ll see more of the Shapely application later in this chapter as we explore various shapes anddrawing attributes available in Flex 4.

Flex 4 graphics
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 circlein Flex 3:

Buy the Book · Discuss

Chapter 2 · Graphics
(File: ThreeCircles.mxml)
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);

5

Flex 4 provides a new graphics API that allows you to easilycreate 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 a 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 aeven better example of the Flex 4 approach, using some of the new MXML tags:


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...