MXML ~ A Serious Business Part – 2

In previous article of MXML Programming Guide, we have understood the basic concepts, syntax and requirement of Macro-media Extensible Markup Language in present time. We have ascertained that how Adobe Flex technology has made RIA development simpler and innovative. So far, we have created some primary vector graphics i.e. Line, circle, Ellipse, Rectangle etc. with the help of MXML classes. Now moving on further in MXML development, we will learn to create some more complex vector graphics with the help of Path Class.

This Path class enables you to declare any shape based on a set of commands that replicate the features of the Flash drawing API. Its data property is a string that executes cursor placement and drawing operations. The data string alternates commands and sets of numeric values. Each command is notated with a single alphabetical character as follows:

C – Draws a cubic Bezier curve. The first two values are the first set of control coordinates, the second two values are the second set of control coordinates, and the last two values are the drawing destination.

H – Draws a horizontal line from the current cursor coordinate to a new X coordinate.

L – Draws a line from the current cursor position to a set of coordinates. For example, the command L 100 100 causes a line to be drawn from the current cursor position to X and Y coordinates of 100 and 100.

M – Move the cursor to a set of coordinates. For example, the command M 50 100 causes the cursor to be placed at an X coordinate of 50 and a y coordinate of 100.

Q – Draws a quadratic Bezier curve. The first two values are the control coordinates and the last two are the drawing destination.

V – Draws a vertical line from the current cursor coordinate to a new Y coordinate.

Z – Closes the path.

The following simple path object draws a horizontal line starting at X and Y positions of 100, and then draws a horizontal line to an X position of 500. The color and weight of the path are determined by its stroke property:

<s:Path data=”M 100 100 H 500 Z”>
<s:stroke>
<s:SolidColorStroke color=”black” weight=”5” />
</s:stroke>
</s:Path>

More complex Path object can be drawn with the more commands, and multiple shapes and lines can be drawn in the same Path object by moving the cursor and initiating new draw commands. The following code draws two arrows one with absolute coordinates and other with relative:

<s:Path data=”
M 20 0
C 50 0 50 35 20 35
L 15 35
L 15 45
L 0 32
L 15 19
L 15 29
L 20 29
C 44 29 44 6 20 6″>
<!– Define the border color of the arrow. –>
<s:stroke>
<s:SolidColorStroke color=”0x888888″/>
</s:stroke>
<!– Define the fill for the arrow. –>
<s:fill>
<s:LinearGradient rotation=”90″>
<s:GradientEntry color=”0x000000″ alpha=”0.8″/>
<s:GradientEntry color=”0xFFFFFF” alpha=”0.8″/>
</s:LinearGradient>
</s:fill>
</s:Path>

Visual Effects

The primitive vector graphic classes support many properties that enable you to modify their appearance. Examples include gradient fills and strokes, drop shadows and other filters, and scaling or resizing of vector graphics. In this section we look at some of the most commonly used effects from which you can choose.

Using Gradient Fills

The fill property supported by Rect, Ellipse and Path classes can be set to a solid color with the SolidColor class or to a gradient with either RadialGradient or LinearGradient. Each does exactly what its name implies:

LinearGradient Class – Defines a change in colors in a linear using calculation from one coordinate to another. By default the gradient is calculated from left to right but it can be adjusted by changing the gradient class’s direction property; for example to change the gradient to go from top to bottom, change the LinearGradient object’s direction to 90.

RadialGradient – Defines a change in colors starting from the certain point in an object and radiating outward to its borders. You can set the focalPoint Ratio and rotation properties to change the point from the gradient radiates.

<!– RadialGradient Example –>
<s:Rect height=”100″ width=”200″>
<s:stroke>
<s:SolidColorStroke color=”0x000000″ weight=”2″/>
</s:stroke>
<s:fill>
<s:RadialGradient>
<s:GradientEntry color=”0x0056FF” ratio=”0″ alpha=”.5″/>
<s:GradientEntry color=”0x00CC99″ ratio=”.33″ alpha=”.5″/>
<s:GradientEntry color=”0xECEC21″ ratio=”.66″ alpha=”.5″/>
</s:RadialGradient>
</s:fill>
</s:Rect>

<!– LineaGradient Example –>
<s:Rect x=”0.5″ y=”0.5″ width=”100″ height=”30″ ai:knockout=”0″>
<s:fill>
<s:LinearGradient x=”0.5″ y=”15.5″ scaleX=”100″
rotation=”-0″>
<s:GradientEntry color=”#ffffff” ratio=”0″ />
<s:GradientEntry ratio=”1″ />
</s:LinearGradient>
</s:fill>
<s:stroke>
<s:SolidColorStroke color=”#0000ff” caps=”none”
weight=”1″ joints=”miter” miterLimit=”4″ />
</s:stroke>
</s:Rect>

<fx:Library> and <fx:Definition>

The Flex SDK now has a new MXML element named <fx:Library> that you use to define graphic elements that can then be reused anywhere in the same MXML document. Within the <fx:Library> element, you define one or more <fx:Definition> element. Each <fx:Definition> describes a graphic element. Note, the <fx:Library> tag must be places as the first child element within MXML document’s root element. If you place any other tags before it, a compiler error is generated.

<?xml version=”1.0″ encoding=”utf-8″?>
<!– fxg/LibraryExampleMXML.mxml –>
<s:Application
xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:mx=”library://ns.adobe.com/flex/mx”
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:comps=”comps.*”>

<fx:Library>
<fx:Definition name=”YellowRect”>
<s:Group>
<s:Rect height=”10″ width=”10″>
<s:stroke>
<s:SolidColorStroke color=”#000000″ weight=”.5″/>
</s:stroke>
<s:fill>
<s:SolidColor color=”#FFFF00″/>
</s:fill>
</s:Rect>
</s:Group>
</fx:Definition>
</fx:Library>
</s:Application>

The <fx:Library> MXML tag is new in flex. You use it to define reusable graphic elements. Each reusable element is defined in an <fx:Definition> class with a name property. The definition becomes an ActionScript class at compilation time. You can then declare instances of the reusable graphic element by referring to its name as an MXML tag with the fx prefix. For example, in the code, the <fx:Library> tag is a direct child of <s:Application> It contains this definition:

<fx:Definition name=”YellowRect”>
<s:Rect… />
</fx:Definition>

The resulting YellowRect graphical element can be used anywhere in the visual content of the document in which the <fx:Library> tag is declared.

Scaling Graphic Elements

An MXML graphic is rendered as a vector graphic, this means that its rendering is calculated mathematically rather than as a set of pixels. As a result, you can increase or decrease the size of the graphic (this is called scaling) without disturbing the graphic’s resolution. When you do the same thing with a bitmap graphic, it’s often pixelated, showing jagged edges. With vector graphics, the rendering stays clean and attractive. The graphic That’s defined in the <fx:Library> section is rendered three times, each time with a different value for the object’s scaleX and scaleY properties:

<fx:YellowRect scaleX=”1” scaleY=”1”/>
<fx:YellowRect scaleX=”2” scaleY=”2”/>
<fx:YellowRect scaleX=”4” scaleY=”4”/>

Filters

Each of the primitive vector graphic classes supports the filters property, an array of objects derived from one of the classes in the spark, filters package. The following filter classes are included in the Flex 4.5 SDK:

BevelFilter
BlurFilter
ColorMatrixFilter
ConvolutionFilter
DisplacementMapFilter
DropShadowFilter
GlowFilter
GradientBevelFilter
GradientFilter
GradientGlowFilter
ShaderFilter

Each filter class supports a set of properties that modify its effects on the graphical element. For example, the following Path object adds two filters, a drop shadow and a blur:

<s:Path data=”M 20 0
C 50 0 50 35 20 35
L 15 35 L 15 45
L 0 32 L 15 19
L 15 29 L 20 29
C 44 29 44 6 20 6”>
<s:stroke>
<s:SolidColorStroke color=”#888888” />
</s:stroke>
<s:fill>
<s:LinearGradient rotation=”90”>
<s:GradientEntry color=”#000000” alpha=”0.8” />
<s:GradientEntry color=”#FFFFFF” alpha=”0.8” />
</s:LinearGradient>
</s:fill>
<s:filters>
<s:DropShadowFilter distance=”20” color=”#333333” />
<s:BlurFilter />
</s:filters>
</s:Path>

 

In the last, keep one thing in your mind that you can make use of Adobe Flash Filters to apply special effects like different styles to the Flex components for example, Labels and Text. You can apply these filters to any visual component in Flex that is derived from the UIComponent. Note that Filters are not styles because you will not be able to apply then using a style sheet or the set Style() method. The result of a filter, none the less is often thought of as a style.