MXML graphics

MXML graphics are a collection of classes that define graphic elements in an application. MXML graphics tags support interactivity. They can be children of any container or group, can be declared as children of the root Application tag, and can be added to the application’s display list.

Most MXML graphics classes are in the mx.graphics and spark.primitives packages. These classes include shapes, strokes, colors, fills, and gradients.

MXML graphics tags have an implicit depth order. The order in which elements are defined defines their depth. Each tag is effectively drawn above its previous sibling. Children are drawn above their parents.

The following example uses MXML graphics to draw a filled rectangle:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/GraphicCompMainMXML.mxml -->
<s:Application backgroundColor="0xFFFFFF"      
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark">
    <s:Graphic>    
         <s:Rect id="rect1" width="200" height="200">
              <s:fill>
                 <s:SolidColor color="0xFFFFCC"/>
              </s:fill>
              <s:stroke>
                 <s:SolidColorStroke color="0x660099" weight="2"/>
              </s:stroke>
         </s:Rect>
    </s:Graphic>
</s:Application>
The executing SWF file for the previous example is shown below:
Because the classes that make up MXML graphics are part of the Flex SDK, you can reference them from within ActionScript or from other components. The following example changes the rectangle’s color when you click the button:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/ReferenceGraphics.mxml -->
<s:Application backgroundColor="0xFFFFFF"      
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark">

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <s:Graphic>    
         <s:Rect id="rect1" width="200" height="200">
              <s:fill>
                 <s:SolidColor id="sc1" color="0xFFFFCC"/>
              </s:fill>
              <s:stroke>
                 <s:SolidColorStroke color="0x660099" weight="2"/>
              </s:stroke>
         </s:Rect>
    </s:Graphic>
    
    <s:Button label="Change Color" click="sc1.color=0xCCFFFF"/>
</s:Application>
The executing SWF file for the previous example is shown below:

All MXML graphics classes have backing ActionScript implementations. This means that every MXML tag has a corresponding ActionScript class that the compiler maps the tag to during compilation. The table in Graphics classes and elements lists the tags and their backing ActionScript classes. You can use the classes in ActionScript directly in your <fx:Script> blocks to draw vector based graphics instead of the MXML tags. For more information, see Using the drawing API.