Join David Gassner for an in-depth discussion in this video Drawing vector graphics with MXML, part of Flash Builder 4 and Flex 4 Essential Training.
The Flex 4 SDK includes a number of new ActionScript classes, which are used to render vector graphics on the screen and are at the core of the new Spark skinning architecture. In this chapter, I'm going to describe how to use these vector graphic classes, declaring instances of vector graphics with MXML code, and then how to incorporate those vector graphics into custom skins that are applied to Spark components. All of the exercises in this chapter will be done in a project that's included with the Exercise Files.
If you have access to the Exercise Files, you can import this project now. Select File > Import Flex Project, then click Browse and navigate to the folder 11_Skinning/begin and select the file Skinning.fxp, and import it. That will create a new project in your workspace named Skinning. Open the Project, open its source folder and its default package, and then open an application named MXMLGraphics.mxml.
I'll expand the MXML editor to full screen. This is a very simple application that starts with a layout property set to VerticalLayout so that objects that I place in the application will stack from top to bottom. I'm going to show you how to declare instances of vector graphic objects using these new primitive classes that are a part of the Flex 4 SDK. There are three primary graphic classes that you can use, named Rect to create rectangles or squares, Ellipse to create ellipses or circles, and Path to create graphics that have arbitrary shapes.
All three of these classes render graphics as a vector graphics. That makes them very scalable. In contrast to bitmap graphics where you show one bit at a time, vector graphics are calculated mathematically. So if you grow them or shrink them, they still retain smooth curves and other aspects of their presentation. These vector graphics are members of a package named spark.primitives. They are called primitives because that contrasts them with components.
Full components such as the Group, Panel, Button and other interactive controls in the Flex SDK, all are implemented as subclasses of the UIComponent class. Those full components can be added to either Spark containers such as the application or to the older MX containers. In contrast, the primitive graphics can only be added directly to Spark containers. I'll show you how to use two of the primitive graphics here, the Rect and the Ellipse classes.
I'll place the cursor after the layout property in the application, and I'll start by creating a rectangle, creating an instance of the Rect class. Each of the primitive graphics supports a width and height property, which you can set to explicit sizing with a numeric value, which is translated as the number of pixels, or with percentage values. For the Rectangle, I'll use explicit sizes with the width of 300 pixels and a height of 200.
Each of the graphic classes supports a property named Fill and another one named Stroke. You use the Fill property to set the inner presentation of the graphic and the Stroke to set its border. When you declare these classes in MXML, you can set the Fill property using a child element. I'll create an s:fill child element. Then within the fill element, you can add instances of one of these four classes. BitmapFill, which is used to render a bitmap graphic in the center of a vector graphic, LinearGradient and RadialGradient, to create gradient presentations and SolidColor.
For this first very simple graphic, I'll use the SolidColor class. I'll set its color property to #FF0000. If you like, you can also set the alpha property. The alpha property renders transparency and its set to a value from 0 to 1. 0 being fully transparent, and 1 being fully opaque. I'll give this rectangle an alpha property of .8 or 80% opaque and I'll complete the tag.
Now I'll run the application in the browser and show you the results so far. The rectangle is rendered as a solid red color. It's a little lighter than a full red because of the transparency and the white background. So that's about as simple a graphic as you can render. Now I'm going to add a couple of other properties to it. I'm also going to add the Stroke property. The Stroke property renders a border around the edges of the rectangle. You set the Stroke property to one of these classes: LinearGradientStroke, RadialGradientStroke, or SolidColorStroke.
I'll use SolidColorStroke. I'll set the color attribute to #000000. I'll set the weight property to 5. That means that the stroke will have a width of 5 pixels. I'll then save and run the application again. Now the rectangle has a 5-pixel wide black stroke all the way around. There are many other properties that you can add to the stroke object. You can set its color, shape, and other attributes.
Take a look at the documentation for the Stroke classes for more information. Finally, I'm going to add radius settings to the rectangle. The Rect class supports properties named radiusX and radiusY. I'll set these to values of 10 and that will result in the graphic being presented with rounded corners. Once again, I'll run the application and here is my graphic with a border and rounded corners.
Now I'll show you how to use the Ellipse class. You can use the Ellipse class to create a circle or an ellipse. If you set the width and height to the same values then it's a circle. Otherwise it's an ellipse. With the Ellipse class, I'll show you how to use percentage sizing. I'll set the width to a property of 75%, and that means that the graphic will shrink and grow to fill 75% of its container, the application. I'll give it an explicit height of 200 pixels.
For the Ellipse, I'll set the Fill property to a gradient object. I'll create the Fill property as a child element of Ellipse and then declare an instance of the RadialGradient class. The RadialGradient class has a property named entries. The entries property is set to an array of GradientEntry objects. I'll declare the entries property as a child element of RadialGradient. Then I'll create three instances of the GradientEntry class.
The GradientEntry class has a color property. I'll set the first one to a color of red using #FF0000. Then I'll clone that line of code, holding down Ctrl+Alt on Windows or Command+Option on Mac, and pressing the Down Arrow twice. Then I'll change the colors for the second and third GradientEntry objects. The second one will be green with a color of #00FF00.
The last one will be blue with a color of #0000FF. I'll run the application and here is the visual result. The ellipse expands to fill 75% of the container, the application. If I resize the browser, you'll see the object shrink and grow to accommodate the change. Now the application has a min width setting. So if I shrink the width of the browser to less than the minimum width of the application, the graphics stops growing.
So this is a look at how you can use a vector graphics in a Flex application, declaring them with MXML code. Once again, these are simply ActionScript classes that are parts of the Flex 4 SDK. In addition to the Rect class, which you'll use for rectangles and squares, and the Ellipse class, which you used for ellipses and circles, you can also use the Path class that renders arbitrary shapes. You'll be able to use these vector graphics in custom skins that you build for your Spark-based components.
I'll show you how to incorporate such graphics in custom skins in other videos in this chapter.
- Understanding the history of Adobe Flex
- Installing the Flash Builder components
- Using Eclipse views and editors
- Programming with MXML and integrating MXML and ActionScript
- Debugging Flex applications
- Adding visual controls to a Flex application interface
- Displaying images and dynamic data
- Formatting with CSS
- Skinning Spark components with MXML graphics
- Creating data entry form components
- Integrating with Apache, PHP and MySQL
Skill Level Beginner
Q: After importing the Debugging.fxp file following the steps outlined in the “Importing and exporting projects as FXP files” video, several of the applications will not run.
When I attempt to debug or run the Variables.mxml or Watchpoints.mxml applications, I am unsuccessful. Pressing F11 to debug causes Flex to look for an application it CAN run, and runs that one. If I Right-Click one of the aforementioned applications and then click Run Application, an error appears that says “This file cannot be launched.”
What is causing this problem?
A: This is a common issue with Flash Builder. Before pressing F11 (or right-clicking and choosing Run Application), set the current MXML application file as the "default" by right-clicking it and choosing "Set as default application".
This should ensure that the application you want to preview opens in the browser when you press F11.
Q: When trying to specify the fontStyle as italic in both ways described in the first and second videos of the “Using Cascading Style Sheets (CSS)” chapter, only the literal string "italic" seems to work. If I use the constant for the same value like this:
I get a warning that reads:
"Design mode: Error during component layout. Choose Design > Refresh to refresh design mode."
Even if I try to refresh, design mode will not work until I change it back to the literal string. I made sure the import for this namespace was there by pressing Ctrl+spacebar, refreshed design mode several times, and even restarted Flash Builder. However, the only solution seems to be to use the literal. Is there a fix for this?
A: The use of constants and bindings in MXML style attributes results in unpredictable results in Design View, as evidenced by this error. Unfortunately, the best you can expect is that design view will render the presentation, but won't show the results of the style setting, because Design View isn't capable of evaluating MXML bindings without the benefit of Flash Player's runtime capabilities.
Q: Is Flash Builder compatible with Mac OS X 10.7 (Lion)?