FXG and MXML graphics

Adding graphics to your applications can make them more attractive and usable. In many cases, you might want to add graphics that are vector-based, and not import images that don’t scale well. You can create vector based graphics in Flex by using one of the following APIs:

  • FXG

  • MXML graphics

FXG is a declarative syntax for defining static graphics. You typically use a graphics tool such as Adobe Illustrator to export an FXG document, and then use the FXG document as an optimized component in your application. FXG graphics are used by the mobile skin classes because they are so lightweight.

MXML graphics, on the other hand, are a collection of classes that you use to define interactive graphics. You typically write MXML graphics code in Flash Builder. You can add interactivity to MXML graphics code because they use classes in the Flex SDK that are subclasses of GraphicElement. The result is not as optimized as FXG.

FXG and MXML graphics define the following:

  • Graphics and text primitives

  • Fills, strokes, gradients, and bitmaps

  • Support for effects such as filters, masks, alphas, transforms, and blend modes

FXG and MXML graphics share very similar syntax. For example, in FXG, you can define a rectangle with the <Rect> tag. In MXML graphics, you use the <s:Rect> tag. Most FXG elements have MXML graphics equivalents, although the attributes supported on FXG elements are only a subset of those supported on MXML graphics tags.

The amount of interactivity when using FXG and MXML graphics is different. If you use MXML graphics, the tags are mapped to their backing ActionScript implementations during compilation. You can reference the MXML graphic elements and have greater control over them in your code. If you use FXG, then you cannot reference instances of objects within the FXG document from the application or other components. In addition, you cannot add MXML code to it, nor can you add ActionScript.

FXG and MXML graphics do not share the same namespace. MXML graphics use the MXML namespace of the containing document. In most cases, this is the Spark namespace. An FXG document uses its own namespace.

You cannot use fragments of FXG syntax in an MXML file. You must either use the FXG document as a separate component or convert the code to MXML graphics syntax.

You can also draw with the ActionScript drawing APIs, described in Using the drawing API.