Real World XML (2nd Edition)

CONTENTS

The way you present XML in browsers should not be limited to simple text in fact, there are various initiatives to create graphics-based XML applications. We created graphical browsers in Chapter 11, "Java and the XML DOM," and Chapter 12, "Java and SAX," to use XML to display circles. I also discussed the W3C language, Scalable Vector Graphics (SVG), in Chapter 1, "Essential XML." SVG has been around for a long time but has not been very widely implemented. Today, the most widespread graphics-based XML application is the Vector Markup Language (VML) from Microsoft.

Here's how Microsoft describes VML: "VML is an application of Extensible Markup Language (XML) 1.0 which defines a format for the encoding of vector information together with additional markup to describe how that information may be displayed and edited."

VML supports the markup of vector graphic information in the same way that HTML supports the markup of textual information. Besides its own XML elements, VML also supports CSS, so you can style and position shapes as you like. It's supported in Microsoft Office 2000 Microsoft Word, PowerPoint, and Excel. When you create graphics in those programs, the graphics are stored in VML. Internet Explorer also supports VML. You can use the tools that come with Microsoft Office to draw VML figures, or you can create VML yourself. We'll do it ourselves in this chapter.

There are two primary online resources for VML: the VML reference at Microsoft, and the note that Microsoft wrote and sent to the W3C, which the W3C has posted (not much has come of that note; no one besides Microsoft seems very inclined to implement VML). Here are these resources (bear in mind that URIs on Microsoft's sites change very frequently):

VML was added to Internet Explorer before that browser added its built-in XML support, so the way you implement VML does not involve Internet Explorer XML islands or any such mechanism. Instead, you use a namespace for VML and then use the VML engine in Internet Explorer, which is actually implemented as an Internet Explorer behavior (an external code module). We saw this example in Chapter 1, and I'll take a closer look at it in this chapter:

<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> <BODY> <CENTER> <H1> Using Vector Markup Language </H1> </CENTER> <P> <v:oval STYLE='width:100pt; height:75pt' fillcolor="yellow" /> <P> <v:rect STYLE='width:100pt; height:75pt' fillcolor="blue" strokecolor="red" STROKEWEIGHT="2pt"/> <P> <v:polyline POINTS="20pt,55pt,100pt,-10pt,180pt,65pt,260pt,25pt" strokecolor="red" STROKEWEIGHT="2pt"/> </BODY> </HTML>

Internet Explorer Behaviors

You can find out more about Internet Explorer behaviors, which represent one of Microsoft's techniques for separating markup from document content, at http://msdn.microsoft.com/workshop/c-frame.htm#/workshop/author/default.asp

This example just drew a few VML shapes, and you can see the results of this page in Figure 19.1.

Figure 19.1. A VML page sample page.

Now that we're discussing VML in depth, the syntax of this document bears a little examination.

Creating VML Documents

In Internet Explorer, VML is embedded in HTML documents. You start by declaring this namespace, v:

<HTML xmlns:v="urn:schemas-microsoft-com:vml"> . . .

You must also instantiate the VML engine, which is implemented as an Internet Explorer behavior. To implement this behavior, you use a <STYLE> element, connecting the v namespace to the VML default behavior:

<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> . . .

This indicates to Internet Explorer that the VML in the page should be handled by the VML engine. Now you can add VML elements such as <oval> if you use the proper namespace, v:

<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> <BODY> <CENTER> <H1> Using Vector Markup Language </H1> </CENTER> <P> <v:oval STYLE='width:100pt; height:75pt' fillcolor="yellow" /> <P> <v:rect STYLE='width:100pt; height:75pt' fillcolor="blue" strokecolor="red" STROKEWEIGHT="2pt"/> <P> <v:polyline POINTS="20pt,55pt,100pt,-10pt,180pt,65pt,260pt,25pt" strokecolor="red" STROKEWEIGHT="2pt"/> </BODY> </HTML>

I'll take a look at what VML elements are available now.

The VML Elements

Twenty elements are defined in VML, as shown in Table 19.1.

Table 19.1. The VML Elements
Element Description
<arc> Draws an arc
<background> Adds a background
<curve> Draws a curve
<fill> Fills a shape
<formulas> Specifies a formula that lets you scale shapes
<group> Groups shapes
<handles> Draws handles on shapes
<image> Supports images
<imagedata> Specifies an image to be rendered on top of a shape
<line> Draws a line
<oval> Draws an oval
<path> Specifies a path for rendering
<polyline> Draws a shape from line segments
<roundrect> Draws a rounded rectangle
<shadow> Adds a shadow to a shape
<shape> Creates a basic shape
<shapetype> Defines a reusable shape
<stroke> Specifies how to draw a path
<textbox> Creates a text box
<textpath> Specifies a path for text to be drawn along.

The overall structure of VML is based on the two primary elements: <shape> and <group>. The <shape> element is the most basic VML element, and you use it to define general graphic shapes in VML. You can use the <group> element to group shapes together so that they can be handled as a single unit.

Besides the <shape> and <group> elements, VML also defines additional top-level elements to help make the editing and representation of complex graphical information more compact and convenient. For example, you can use the <shapetype> element to define a definition of a shape. A <shape> element may then reference a <shapetype> element to instantiate several copies of the same shape.

You also can use a number of predefined shapes, based on the <shape> element. Using the predefined shapes means that you don't have to explicitly declare the shape you want to use. These predefined shapes are <line>, <polyline>, <curve>, <rect>, <roundrect>, <oval>, <arc>, and <image>.

Common Attributes

You can find parts (but only parts) of the VML DTD in the VML note at http://www.w3.org/TR/NOTE-VML. Two important parts are the entity parameters coreattrs and shapeattrs, which define attribute lists, because many of the elements we'll see in this chapter use those attributes. Here's how coreattrs is defined:

<!entity %coreattrs id id #implied -- document-wide unique id -- class cdata #implied -- space separated list of classes -- style cdata #implied -- associated style info -- title cdata #implied -- advisory title/amplification -- href cdata #implied -- URL link if the element is clicked on -- target cdata #implied -- target frame for href --- alt cdata #implied -- alternate text if element cannot be displayed -- coordsize cdata #implied -- size of coordinate space inside the element -- coordorigin cdata #implied -- coordinate at top-left corner of element -- wrapcoords cdata #implied -- outline to use for tight text wrapping -- >

Here is the shapeattrs parameter entity:

<!entity %shapeattrs opacity cdata #implied -- opacity of the shape -- chromakey cdata #implied -- color to be made transparent -- stroke cdata #implied -- Boolean whether to stroke the outline or not -- strokecolor cdata #implied -- RGB color to use for the stroke -- strokeweight cdata #implied -- weight of the line to use for stroking -- fill cdata #implied -- Boolean whether to fill the shape or not -- fillcolor cdata #implied -- RGB color to use for the fill -- print cdata #implied -- Boolean whether the element is to be printed -- >

VML Uses CSS

VML uses CSS to position and orient shapes. In addition to standard CSS layout, the VML elements may also be rotated or flipped. Each element also establishes a coordinate space for its content, which allows scaling of the content with respect to the containing elements.

VML used a number of VML styles to augment CSS2, and I'll take a look at them here.

The rotation Property

You can use the rotation property to specify a rotation for a shape or group. The rotation is measured in clockwise degrees about its center.

The flip Property

You use the flip property to specify that a shape or group should be flipped about its center on either the x or the y axis. Here are the two values that you can assign to the flip property:

Value Description
x Flip the rotated shape about the y axis
y Flip the rotated shape about the x axis
The center-x and center-y Properties

You use the center-x and center-y properties to specify the center of the block that contains the shape. These properties can be used as an alternative to the customary CSS positioning properties, left and top.

Local Coordinate Space

The <shape> and <group> elements are CSS block-level elements. Inside their blocks, a local coordinate system is defined for any subelements using the coordsize and coordorigin attributes, and all CSS2 positioning information is expressed in terms of this local coordinate space. We'll run into these attributes in this chapter when we group shapes.

The VML coordsize attribute defines how many units there are along the width of the containing block. The coordorigin attribute defines the coordinate at the top left corner of the containing block. For example, take a look at a group defined as follows:

<v:shape style='width: 500px; height: 200px' coordsize="100,100" coordorigin="-50,-50" />

Here, the containing block would be 500 pixels wide by 200 pixels high. The coordinate system inside the block ranges from -50.0 to 50.0 along the x axis and -50.0 to 50.0 along the y-axis. The point (0, 0) is right in the center of the block. Shapes inside the group are positioned and sized according to this local coordinate system. That's useful because, no matter how the width and height of the group is changed, the local coordinate system inside will remain the same.

The <shape> Element

The <shape> element is the primary one in VML, although I rarely find myself using it in practice (I mostly use the predefined shapes based on <shape>). This element may appear by itself or within a <group> element. The <shape> element includes all the attributes in coreattrs and shapeattrs, and adds three more:

<!attlist shape %coreattrs; %shapeattrs; type cdata #implied -- reference to shapetype -- adj cdata #implied -- list of adjust values for parameterized paths -- path cdata #implied -- string with command set describing a path -- >

For the sake of reference, all the attributes of this element and their descriptions appear in Table 19.2; note that VML attributes can be part of either the VML or the CSS namespaces.

Table 19.2. Attributes of the <shape> Element
Namespace Attribute Type Default Value Description
CSS flip String null Specifies that the shape image inside the reference rectangle should be flipped along the given axes in the order specified. Takes the values "x", "y", or both.
CSS height Number 100 Specifies the height of the containing block of the shape.
CSS left, margin-left, center-x, etc Number 0 Sets the position of the left of the containing block of the shape.
CSS position string "static" Sets the CSS type of positioning. When inside a group, this value must always be "absolute".
CSS rotation number 0 Specifies the angle by which to rotate.
CSS top, margin-top, center-y, etc number 0 Sets the position of the top of the containing block of the shape.
CSS visibility string visible Sets the visibility of shapes.
CSS width number 100 Specifies the width of the container rectangle of the shape.
CSS z-index number 0 Specifies the z-index of the shape. Positive numbers come out of the screen, and negative ones go into it.
VML adj string null Is a comma-separated list of numbers that are "adjusting" parameters for the formulas that define the path of the shape.
VML alt string null Text associated with the shape that may appear instead of the shape.
VML chromakey color null Sets a color value that will be transparent so that anything behind the shape will show through.
VML class string null Gives the CSS class of this shape.
VML coordorigin Vector2D "0 0" Gives the coordinates at the top-left corner of the containing block.
VML coordsize Vector2D "1000 1000" Gives the width and height of the coordinate space inside the containing block of this shape.
VML fill boolean true If "true", the path defining the shape will be filled.
VML fillcolor color "white" Specifies the color of the brush to use to fill the path of this shape.
VML href string null Specifies the URI to jump to when this shape is clicked.
VML id string null A unique identifier for the shape.
VML opacity number 1.0 Sets the opacity of the entire shape. Set this to values between 0 (transparent) and 1 (opaque.)
VML path string null Specifies the path that defines the shape a string containing the commands that define the path.
VML print boolean true If true, this shape should be printed.
VML stroke boolean true If true, the path defining the shape will be stroked (rendered) using a solid line, unless there is a stroke subelement.
VML strokecolor color "black" Sets the color of the brush to use to draw the path of this shape.
VML stroke weight number "0.75pt" Sets the width of the brush to use to stroke the path.
VML target string null The target frame URI.
VML title string null Gives the title of the shape.
VML type string null Holds a shapetype ID that describes the shape.
VML v string null A string containing the commands that define the path.
VML Wrapcoords string null Used for the wrapping text around an object.

Microsoft gives all VML elements an "XML template" that specifies default values for each of its attributes; here's the XML template for the <shape> element:

<shape type=null adj=null path=null opacity="100%" chromakey="none" stroke="true" strokecolor="black" strokeweight="0.75pt" fill="true" fillcolor="white" print="true" id=null class=null style='visibility: visible' title=null href=null target=null alt=null coordsize="1000, 1000" coordorigin="0, 0" wrapcoords=null />

Using the <shape> element to draw shapes can be a little complex because you need to define the whole shape yourself, which you do by specifying a VML path. Doing that means giving the actual locations to use to draw the shape. To show how that works, I'll use a shape that Microsoft supports in its reference material; it draws a heart:

<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> <BODY> <CENTER> <H1> VML Shapes </H1> <v:shape fillcolor="red" strokecolor="red" coordsize="21600,21600" path="m10860,2187c10451,1746,9529,1018,9015,730, 7865,152,6685,,5415,,4175, 152,2995,575,1967, 1305,1150,2187,575,3222,242,4220,,5410,242,6560, 575,7597l10860, 21600,20995,7597c21480,6560, 21600,5410,21480,4220,21115,3222,20420,2187,19632, 1305,18575,575,17425,152,16275,,15005,,13735,152, 12705,730,12176,1018,11254,1746, 10860,2187xe" style='width:200;height:160;'/> </CENTER> </BODY> </HTML>

You can see the results in Figure 19.2.

Figure 19.2. Using the <shape> element.

Another way of drawing this shape is to specify the shape's path in a <shapetype> element and then reference the <shapetype> element's ID with the <shape> element's type attribute:

<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> <BODY> <CENTER> <H1> VML Shapes </H1> <v:shapetype id="Valentine" fillcolor="red" strokecolor="red" coordsize="21600,21600" path="m10860,2187c10451,1746,9529,1018,9015,730, 7865,152,6685,,5415,,4175, 152,2995,575,1967, 1305,1150,2187,575,3222,242,4220,,5410,242,6560, 575,7597l10860, 21600,20995,7597c21480,6560, 21600,5410,21480,4220,21115,3222,20420,2187,19632, 1305,18575,575,17425,152,16275,,15005,,13735,152, 12705,730,12176,1018,11254,1746, 10860,2187xe"> </v:shapetype> <v:shape type="#Valentine" style='width:200;height:160;'/> </CENTER> </BODY> </HTML>

However, unless you have a drawing tool of some kind, it's pretty tedious to calculate all the points in a path; it's usually far easier to use the predefined shapes.

Using Predefined Shapes

There are quite a few predefined shapes in VML, and using them can save you a lot of effort. In this section, I'll take a look at how to draw graphics using these elements.

The <rect> Element

The <rect> element just draws rectangles. This element supports both the coreattrs and shapeattrs attributes; here is its XML template, showing the default values for those attributes:

<rect id=null href=null target=null class=null title=null alt=null style='visibility: visible' opacity="1.0" chromakey="null" stroke="true" strokecolor="black" strokeweight="1" fill="true" fillcolor="white" print="true" coordsize="1000,1000" coordorigin="0 0" />

Here's an example; in this case, I'll draw a rectangle that's red with a green border of 4 points wide:

<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> <BODY> <CENTER> <H1> VML Rectangles </H1> <v:rect style='width:200pt;height:100pt' fillcolor="red" strokecolor="green" strokeweight="4pt"/> </CENTER> </BODY> </HTML>

You can see the results in Figure 19.3.

Figure 19.3. Using the <rect> element.

The <roundrect> Element

You can use the <roundrect> element to draw a rectangle with rounded corners. This element supports the coreattrs and shapeattrs attributes, along with one additional attribute, arcsize:

<!attlist roundrect %coreattrs; %shapeattrs; arcsize cdata #implied -- size of arc on corners of rectangle -- >

The arcsize attribute defines the rounded corners as a percentage of half the smaller dimension of the rectangle. Here's the XML template for this element:

<roundrect arcsize="0.2" id=null href=null target=null class=null title=null alt=null style='visibility: visible' opacity="1.0" chromakey="null" stroke="true" strokecolor="black" strokeweight="0.75pt" fill="true" fillcolor="white" print="true" coordsize="1000,1000" coordorigin="0 0" />

As an example, I'll convert the rectangle in the previous example to a rounded rectangle with rounded corners 20% of half the smaller dimension of the rectangle. To do that, you specify an arcsize of "0.2":

<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> <BODY> <CENTER> <H1> VML Rounded Rectangles </H1> <v:roundrect style="width:200pt;height:100pt" arcsize="0.2" fillcolor="red" strokecolor="green" strokeweight="4pt"/> </CENTER> </BODY> </HTML>

You can see the results of this VML in Figure 19.4.

Figure 19.4. Using the <roundrect> element.

The <line> Element

You use the <line> element to create a straight line. Here are the attributes of this element:

<!attlist line %coreattrs; %shapeattrs; from cdata #implied to cdata #implied >

These are the two attributes specific to the <line> element:

Attribute Description
from The starting point of the line. Specified using Vector2D format, like this: "100 100".
to The ending point of the line. Specified using Vector2D format, like this: "100 100".

And here's the XML template for this element:

<line from="0 0" to="10 10" id=null href=null target=null class=null title=null alt=null style='visibility: visible' opacity="1.0" chromakey="null" stroke="true" strokecolor="black" strokeweight="1" fill="true" fillcolor="white" print="true" coordsize="1000,1000" coordorigin="0 0" />

Here's an example; in this case, I'm drawing a thick blue line from the pixel coordinates (20, 20) to (400, 100):

<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> <BODY> <CENTER> <H1> VML Lines </H1> <v:line from="20px,20px" to="400px,100px" strokecolor="blue" strokeweight="4pt"> </CENTER> </BODY> </HTML>

You can see the results of this VML in Figure 19.5.

Figure 19.5. Using the <line> element.

The <oval> Element

You use the <oval> element to draw ovals and circles. This element supports the coreattrs and shapeattrs attributes. Here is the <oval> element's XML template:

<oval position="0 0" size="100 100" id=null href=null target=null class=null title=null alt=null style='visibility: visible' opacity="1.0" chromakey="null" stroke="true" strokecolor="black" strokeweight="0.75pt" fill="true" fillcolor="white" print="true" coordsize="1000,1000" coordorigin="0 0" />

Here's an example where I'm drawing a blue oval; as with other elements, you can specify the size of the oval using the CSS style attribute:

<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> <BODY> <CENTER> <H1> VML Ovals </H1> <v:oval style='width:200pt;height:100pt' fillcolor="blue" /> </CENTER> </BODY> </HTML>

You can see the results of this VML in Figure 19.6.

Figure 19.6. Using the <oval> element.

The <polyline> Element

You can use the <polyline> element to define shapes that are created from connected line segments. You use this element to draw your own shapes. Here's the attribute list for this element:

<!attlist polyline %coreattrs; %shapeattrs; points cdata #implied >

The points attribute is a string that defines the polyline shape to draw using pairs of values that specify points, such as "0 0 10 10 40 40". Here is the XML template for this element:

<polyline points="0 0 10 10 20 0" id=null href=null target=null class=null title=null alt=null style='visibility: visible' opacity="1.0" chromakey="null" stroke="true" strokecolor="black" strokeweight="1" fill="true" fillcolor="white" print="true" coordsize="1000,1000" coordorigin="0 0" />

For example, to draw a polyline shape, here's some VML:

<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> <BODY> <CENTER> <H1> VML Polylines </H1> <v:polyline points="0pt,0pt,90pt,-9pt,180pt,60pt,0pt,20pt -180pt,60pt,-90pt,-9pt,0pt,0pt" strokecolor="red" strokeweight="2pt"/> </CENTER> </BODY> </HTML>

You can see the results of this VML in Figure 19.7.

Figure 19.7. Using the <polyline> element.

The <curve> Element

You can use the <curve> element to draw a cubic be`zier curve. Here is the attribute list of this element:

<!attlist curve %coreattrs; %shapeattrs; from cdata #implied control1 cdata #implied control2 cdata #implied to cdata #implied >

These are the custom attributes for this element:

Attribute Description
from The starting point of the line in the coordinate space of the parent element. Specified using Vector2D format, like this: "100 100".
control1 The first control point for the curve. Specified using Vector2D format, like this: "100 100".
control2 The second control point for the curve. Specified using Vector2D format, like this: "100 100".
to The ending point of the line in the coordinate space of the parent element. Specified using Vector2D format, like this: "100 100".

The control points let you specify the bounding rectangle for the curve and so specify its shape. Here is this element's XML template:

<curve from="0 0" control1="10 10" control2="20 0" to="10 10" id=null href=null target=null class=null title=null alt=null style='visibility: visible' opacity="1.0" chromakey="null" stroke="true" strokecolor="black" strokeweight="1" fill="true" fillcolor="white" print="true" coordsize="1000,1000" coordorigin="0 0" />

For example, I'll draw a curve using this VML:

<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> <BODY> <CENTER> <H1> VML Curves </H1> <v:curve style='position:absolute' from="-100pt,0" control1="100pt,100pt" control2="200pt,100pt" to="100pt,0" strokecolor="blue" strokeweight="4pt"/> </CENTER> </BODY> </HTML>

You can see the results of this VML in Figure 19.8.

Figure 19.8. Using the <curve> element.

The <arc> Element

You can use the <arc> element to draw an arc. The arc is defined by the intersection of the oval with the start and end radius vectors given by angles. Here is the attribute list of this element:

<!attlist arc %coreattrs; %shapeattrs; startangle cdata #implied endangle cdata #implied >

These are the custom attributes for this element:

Attribute Description
startangle Specifies the angle where the arc starts
endangle Specifies the angle where the arc ends

Here is the XML template for this element:

<arc startangle="0" endangle="90" id=null href=null target=null class=null title=null alt=null style='visibility: visible' opacity="1.0" chromakey="null" stroke="true" strokecolor="black" strokeweight="0.75pt" fill="true" fillcolor="white" print="true" coordsize="1000,1000" coordorigin="0 0" />

For example, here's how to take an arc from an oval, extending from 0 to 160 :

<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> <BODY> <CENTER> <H1> VML Arcs </H1> <v:arc style='width:200pt;height:100pt' startangle="0" endangle="160" strokecolor="blue" strokeweight="4pt"/> </CENTER> </BODY> </HTML>

You can see the results of this VML in Figure 19.9.

Figure 19.9. Using the <arc> element.

Coloring Shapes

You may have noticed that I've specified colors so far using words such as "red", "blue", "green", and so on. In fact, there are three ways to specify colors in VML:

You can use the HTML 4.0 predefined color names in VML:

You can also specify colors by giving the red, green, and blue color values in the rgb function, like this: rgb(rrr, ggg, bbb). Here, rrr is the red color value, ggg is the green color value, and bbb is the blue color value, all of which range from 0 to 255. Or, you can give those color values directly using hexadecimal digits, as you would in HTML, like this: "#rrrgggbbb". For example, "000000" is black, "#0000FF" is bright blue, "#FFFFFF" is white, and so on.

Scaling Shapes

You may also have noticed that you can set the size for shapes with the style attribute, as in this case, where I'm setting the size of the bounding rectangle of an oval:

<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> <BODY> <CENTER> <H1> VML Ovals </H1> <v:oval style='width:200pt;height:100pt' fillcolor="blue" /> </CENTER> </BODY> </HTML>

To scale a shape, all you have to do is change the width and height, as specified with the style attribute. For example, to double the oval's size in both dimensions, I could assign style a value of "width:400pt;height:200pt".

Positioning Shapes

VML uses the same syntax defined in CSS2 to position shapes on a Web page. You can use static, relative, or absolute positioning to determine where the base point is located on a Web page. You can also use the top and left or center-x and center-y, style attributes to specify the offset from the base point at which the containing box for the shape will be positioned.

You can also use z-index to specify the z-order of shapes on a Web page. In addition, VML provides rotation and flip to rotate or flip shapes. I'll take a look at a few of the position styles here.

The static Position Style

The default position style is static, which makes the browser insert a shape at the current point in the browser's text flow. Here's an example putting static positioning to work, where I'm drawing a rectangle following some text:

<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> <BODY> <CENTER> <H1> VML Positioning </H1> Here is the rectangle: <v:rect style='width:200pt;height:100pt' fillcolor="red" strokecolor="green" strokeweight="4pt"/> </CENTER> </BODY> </HTML>

The results appear in Figure 19.10. As you see there, the shape's base line is aligned with the baseline of the text.

Figure 19.10. Using static positioning.

The relative Position Style

When you use static positioning, a shape is positioned with respect to the current location in the text flow. You can also position shapes relative to the current location in the text flow. To do so, you use the position:relative style and use the top and left style properties.

Here's an example where I position a shape 30 points to the left of the current text location and 15 points higher:

<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> <BODY> <CENTER> <H1> VML Relative Positioning </H1> Here is the rectangle: <v:rect style='position:relative;left:30pt; top:-15pt;width:200pt;height:100pt' fillcolor="red" strokecolor="green" strokeweight="4pt"/> </CENTER> </BODY> </HTML>

You can see the results in Figure 19.11. As you see in the figure, the shape is positioned relative to the current text flow location.

Figure 19.11. Using relative positioning.

The absolute Position Style

You can also position shapes in absolute terms. When you set the position style property to absolute, the shape is positioned with respect to the upper-left corner of its container. You can use the top and left style properties to position the top left of the shape with regard to the container's origin.

Here's an example. In this case, I'll position a VML shape 100 points from the top and left of the shape's container, which is the browser's display area in this case:

<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> <BODY> <CENTER> <H1> VML Absolute Positioning </H1> Here is the rectangle: <v:rect style='position:absolute;left:100pt; top:100pt;width:200pt;height:100pt' fillcolor="red" strokecolor="green" strokeweight="4pt"/> </CENTER> </BODY> </HTML>

You can see the results in Figure 19.12. The rectangle is positioned in absolute terms in the browser's display area; note that when you position shapes absolutely, they are not considered part of the text flow.

Figure 19.12. Using absolute positioning.

The z-index Position Style

It is possible to position a shape that overlaps another shape. In VML, you can control the z-order by using the z-index style attribute. You can set this attribute to zero, a positive integer, or a negative integer. The shape that has a larger z-index value appears on top of the shape that has a smaller z-index value. When both shapes have the same z-index value, the shape that was displayed last appears on top.

For example, in the following VML, the blue oval is displayed on top of the red rectangle. This is because the z-index value of the blue oval is greater than the z-index value of the red rectangle:

<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> <BODY> <CENTER> <H1> VML Z-Index Positioning </H1> <v:rect style='position:absolute;left:100pt;top:100pt; width:200pt;height:100pt;z-index:0' fillcolor="red" strokecolor="green" strokeweight="4pt"/> <v:oval style='position:absolute;left:150pt;top:60pt; width:100pt;height:100pt;z-index:1' fillcolor="blue" /> </CENTER> </BODY> </HTML>

You can see the results in Figure 19.13.

Figure 19.13. Using z-index positioning.

If you reverse the z-index of the shapes, the blue oval would move behind the red rectangle:

<v:rect style='position:absolute;left:100pt;top:100pt; width:200pt;height:100pt;z-index:1' fillcolor="red" strokecolor="green" strokeweight="4pt"/> <v:oval style='position:absolute;left:150pt;top:60pt; width:100pt;height:100pt;z-index:0' fillcolor="blue" />

You can see the new result in Figure 19.14.

Figure 19.14. Reversing z-index positioning.

Positive z-index values are considered out of the screen, and negative values are considered into the screen. Note that if you provide a negative integer, you can use z-index to position graphics behind the normal flow of text.

The rotation Position Style

You can use the rotation style property to specify how many degrees you want a shape to be rotated. A positive value specifies a clockwise rotation, and a negative value specifies a counterclockwise rotation.

For example, if you specify style='rotation:45', you can rotate this rectangle 45 clockwise:

<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> <BODY> <CENTER> <H1> VML Rotation Positioning </H1> <v:rect style='position:absolute;left:100pt;top:100pt; width:200pt;height:100pt;rotation:45' fillcolor="red" strokecolor="green" strokeweight="4pt"/> </CENTER> </BODY> </HTML>

You can see the results of this VML in Figure 19.15.

The flip Position Style

You can use the flip style attribute to flip a shape on its x or y axis. Here are the possible values of this property:

Value Description
x Flip the rotated shape about the y axis
y Flip the rotated shape about the x axis
Figure 19.15. Rotation positioning.

You can use either x or y or both. If you use style='flip:x y', the shape will flip on both its x and y axis. As an example, here's how to flip the shape in Figure 19.7, with respect to the y axis:

<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> <BODY> <CENTER> <H1> VML Flip Positioning </H1> <v:polyline points="0pt,0pt,90pt,-9pt,180pt,60pt,0pt, 20pt -180pt,60pt,-90pt,-9pt,0pt,0pt" style="flip: y" strokecolor="red" strokeweight="2pt"/> </CENTER> </BODY> </HTML>

The flipped shape appears in Figure 19.16.

Figure 19.16. Flip positioning.

The <group> Element

You can group shapes with the <group> element, which enables you to treat a number of shapes as one unit. To create a group, you use the <group> element, which supports the coreattrs attributes. Here is this element's XML template:

<group id=null class=null style='visibility: visible' title=null href=null target=null alt=null coordsize="1000, 1000" coordorigin="0, 0" wrapcoords=null />

Here's an example. In this case, I'll group a rectangle and an oval together. I do that by creating a <group> element this way:

<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> <BODY> <CENTER> <H1> VML Grouping Elements </H1> <v:group id="Group1" style='position:absolute; left:150pt;top:60pt;width:200pt;height:100pt' coordsize="100,100"> . . . </v:group> </CENTER> </BODY> </HTML>

You position grouped shapes together, so I'm specifying the absolute position and dimensions of the group with the <group> element's style property.

Here's an important point the shapes in a group use the group's coordinate system because the group is their container. To specify the group's coordinates, you can use the coordsize and coordorigin attributes. By default, the coordinate size is set to 1000 x 1000, and the origin is set to (0, 0) in a group (there are no units for these values they're relative measurements expressed simply as numbers).

In this example, I've set the coordinate size to 100 x 100, so I draw the contained shapes using that coordinate system:

<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> <BODY> <CENTER> <H1> VML Grouping Elements </H1> <v:group id="Group1" style='position:absolute; left:150pt;top:60pt;width:200pt;height:100pt' coordsize="100,100"> <v:rect fillcolor="red" strokecolor="green" style='width:50;height:50' strokeweight="4pt" /> <v:oval fillcolor="blue" style='width:50;height:50' /> </v:group> </CENTER> </BODY> </HTML>

You can see the results of this VML in Figure 19.17. The group of shapes is treated as one unit, which is useful because it enables you to position and scale all the shapes in the group at once.

Figure 19.17. Grouping elements.

The <shadow> Element

You can use the <shadow> element to add shadows to VML shapes, as well as create embossing effects and even double shadows. Here's the attribute list for this element:

<!attlist shadow id id #implied -- document-wide unique id -- on cdata #implied type cdata #implied obscured cdata #implied color cdata #implied opacity cdata #implied offset cdata #implied color2 cdata #implied offset2 cdata #implied origin cdata #implied matrix cdata #implied >

You can find the attributes of this element in Table 19.3.

Table 19.3. Attributes of the <shadow> Element
Namespace Attribute Type Default Value Description
VML color Boolean gray RGB (128,128,128) Sets the color of the primary shadow.
VML color2 Boolean gray RGB(203,203,203) Sets the color of the second shadow, or the highlight in an embossed shadow.
VML id string null Gives a unique identifier for the shadow.
VML matrix string null Is a perspective transform matrix using the form "scalexx,scalexy,scaleyx,scaleyy,perspectivex,perspectivey". The perspective units are measured in inverse fractions of the shape size.
VML obscured Boolean false Determines whether you can see the shadow if the shape is not filled.
VML offset vector2D 2pt,2pt Amount of x,y offset for the shadow from the shape's location.
VML offset2 vector2D 0pt,0pt Amount of x,y offset for the second shadow from the shape's location.
VML on Boolean true Turns the display of the shadow on and off.
VML opacity number 1.0 Sets the opacity of the shadow.
VML origin vector2D 0,0 Sets the origin. Set this to fractional values.
VML type string single Sets the shadow type. This can be single, double, emboss, or perspective.

This is the XML template for this element:

<shadow id=null on="false" type="single" obscured="false" color="rgb(128,128,128)" opacity="1.0" offset="2pt,2pt" color2="rgb(203,203,203)" opacity2="1.0" offset2="0pt,0pt" origin="0,0" matrix=null </shadow>

You place the <shadow> element inside the <shape>, <shapetype>, or any predefined shape element to draw a shape with a shadow. When creating a shadow, the tricky part is getting the perspective transform matrix to indicate how to create the shadow as you want it. In this example, I've created a matrix that will add a shadow to any VML shape that shape is a rectangle here, but you can use an oval or whatever you like pointing to the right and up at 45 :

<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> <BODY> <CENTER> <H1> VML Shadows </H1> <v:rect style='width:120pt;height:100pt;' fillcolor="blue"> <v:shadow on="true" type="perspective" origin=".5,.5" matrix="1,-1,0,1,0,-5e-7"/> </v:rect> </CENTER> </BODY> </HTML>

The result appears in Figure 19.18, where you can see the shadow apparently coming from a light source at the lower left.

Figure 19.18. Creating VML shadows.

The <fill> Element

As we've seen, you can use the fill attribute to set fill colors. The <fill> element works like the fill attribute, except that it's an element you enclose in VML shape elements. I'll take a look at this element here, including some of its more advanced capabilities. Here is the attribute list for the <fill> element:

<!attlist fill id id #implied -- document-wide unique id -- type cdata #implied on cdata #implied color cdata #implied color2 cdata #implied opacity cdata #implied src cdata #implied size cdata #implied origin cdata #implied position cdata #implied alignshape cdata #implied colors cdata #implied angle cdata #implied focus cdata #implied focussize cdata #implied focusposition cdata #implied method cdata #implied >

You can find these attributes explained in Table 19.4.

Table 19.4. Attributes of the <fill> Element
Namespace Attribute Type Default Value Description
VML alignshape Boolean true Aligns the image with the shape if true; otherwise, aligns the image with the window.
VML angle number "0" Specifies the angle along which the gradient is directed.
VML aspect string "ignore" Set this to "ignore" to ignore aspect issues, to "atleast" to specify that the image is at least as big as imageSize, or to "atmost"to specify that the image is no bigger than imageSize.
VML color color "white" Sets the fill color.
VML color2 color "white" Sets the secondary fill color for patterns.
VML colors string null Sets intermediate colors in the gradient and their relative positions along the gradient for example: "20% red, 60% blue, 80% green".
VML focus number "0" Sets the focus point for linear gradient fill; possible values range from 100 to 100.
VML focusposition Vector2D 0,0 For radial gradients, sets the position of the innermost rectangle.
VML focussize Vector2D 0,0 For radial gradients, sets the size of the innermost rectangle.
VML id string null Gives a unique identifier for the shape.
VML method string "sigma" Sets the fill method; set this to "none", "linear", "sigma" or "any".
VML on Boolean true Turns fill display on or off.
VML opacity number 1.0 Sets the opacity of the fill.
VML origin Vector2D "auto" Sets the origin, relative to the upper left of the image. By default, sets to the center of the image.
VML position Vector2D "auto" Is a point in the reference rectangle of the shape used to position the origin of the image. Specified as a fraction of the image size.
VML size Vector2D "auto" Gives the size of the image.
VML src string null Gives the URI of an image to load for image and pattern fills.
VML type string "solid" Sets the fill type. May be "solid", "gradient", "gradientradial", "tile", "pattern", or "frame".

This is the XML template for this element, showing the default values for its attributes:

<fill id=null type="solid" on="true" color="white" opacity="1.0" color2="white" opacity2="1.0" src=null size="auto" origin="center" position="center" aspect="ignore" alignshape="true" colors=null angle="0" focus="0" focussize="0,0" focusposition="0,0" method="sigma" />

You can create all kinds of fills, such as gradient fills, pattern fills, and picture fills.

Creating Gradient Fills

To draw a gradient-filled shape, you can set the type property attribute of the <fill> subelement to "gradient" or "gradientradial", and then specify other property attributes of the <fill> subelement, such as method, color2, focus, and angle. Here's an example; in this case, I'm creating a shaded egg shape with a standard gradient fill:

<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> <BODY> <CENTER> <H1> VML Gradient Fills </H1> <v:oval style='width:200pt;height:100pt' fillcolor="blue" strokecolor="white"> <v:fill method="linear sigma" angle="45" type="gradient" /> </v:oval> </CENTER> </BODY> </HTML>

You can see the results of this VML in Figure 19.19.

Figure 19.19. A gradient fill.

Another option is the gradientradial fill type, where the fill gradient is directed radially. Here's an example, this time with a rectangle:

<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> <BODY> <CENTER> <H1> VML Gradient Radial Fills </H1> <v:rect style='width:200pt;height:100pt' fillcolor="blue" strokecolor="white"> <v:fill method="linear sigma" angle="45" type="gradientradial" /> </v:rect> </CENTER> </BODY> </HTML>

You can see the results of this VML in Figure 19.20.

Figure 19.20. A gradient radial fill.

You can also set the origin of gradient radial fills, as in this case, where I'm setting the gradient origin to the center of the rectangle for an intriguing effect:

<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> <BODY> <CENTER> <H1> VML Gradient Radial Fills </H1> <v:rect style='width:200pt;height:100pt' fillcolor="blue" strokecolor="white"> <v:fill method="linear sigma" angle="45" focus="100%" focusposition=".5,.5" focussize="0,0" type="gradientradial" /> </v:rect> </CENTER> </BODY> </HTML>

You can see the results of this VML in Figure 19.21.

Figure 19.21. A gradient radial fill with origin at the center.

Creating Pattern Fills

To draw a pattern-filled shape, you can set the type property attribute of the <fill> element to "pattern", and then set the src property to the URI of an image file. For example, here's how I use the image bubbles.bmp, which comes with Windows, as a fill pattern (after converting bubbles.bmp to a GIF file so that Internet Explorer can handle it):

<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> <BODY> <CENTER> <H1> VML Fill Patterns </H1> <v:rect style='width:200pt;height:100pt' fillcolor="blue"> <v:fill type="pattern" src="bubbles.gif"/> </v:rect> </CENTER> </BODY> </HTML>

Note that you can also specify the color of the fill you want, as in this case, where I'm making it blue (the original image is black and white). You can see the results of this VML in Figure 19.22, where the bubbles pattern is repeatedly tiled inside a rectangle.

Figure 19.22. A pattern fill.

Creating Picture Fills

To draw a picture-filled shape, you can set the type property attribute of the <fill> element to "frame", and then set the src property to the URI of the image you want to use. Here's an example; in this case, I'll display the image fill.jpg:

<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> <BODY> <CENTER> <H1> VML Picture Fills </H1> <v:rect style='width:673px;height:89px'> <v:fill type="frame" src="fill.jpg"/> </v:rect> </CENTER> </BODY> </HTML>

You can see the results of this VML in Figure 19.23.

Figure 19.23. A picture fill.

Using the <shapetype> Element

You can parameterize the creation of shapes with the <shapetype> element. The <shapetype> element defines a shape type, and you can instantiate shapes of that type. You create a shape type and give it a name with the ID attribute of <shapetype>, and you use that shape type with the <shape> element's type attribute.

Here's the attribute list of the <shapetype> element:

<!attlist shapetype %coreattrs; %shapeattrs; adj cdata #implied -- list of adjust values for parameterized paths -- path cdata #implied -- string with command set describing a path -- >

These are the custom attributes of this element:

Attribute Description
adj A comma-separated list of numbers that are "adjusting" parameters for the formulas that define the path of the shape
path The path that defines the shape; a string containing the commands that define the path

Here is the <shapetype> element's XML template:

<shapetype adj=null path=null opacity="100%" chromakey="none" stroke="true" strokecolor="black" strokeweight="0.75pt" fill="true" fillcolor="white" print="true" id=null class=null style='visibility: visible' title=null href=null target=null alt=null coordsize="1000, 1000" coordorigin="0, 0" wrapcoords=null />

We saw an example using the <shapetype> element earlier in this chapter. In that example, the shape was defined with the path attribute, like this:

<v:shapetype id="Valentine" fillcolor="red" strokecolor="red" coordsize="21600,21600" path="m10860,2187c10451,1746,9529,1018,9015,730, 7865,152,6685,,5415,,4175, 152,2995,575,1967, 1305,1150,2187,575,3222,242,4220,,5410,242,6560, 575,7597l10860, 21600,20995,7597c21480,6560, 21600,5410,21480,4220,21115,3222,20420,2187,19632, 1305,18575,575,17425,152,16275,,15005,,13735,152, 12705,730,12176,1018,11254,1746, 10860,2187xe"> </v:shapetype>

The path defined here defines the shape. Specifying a path in the <shapetype> element is a little involved; you specify pairs of points along the path and use commands such as m (start a path), x (close the path), e (end the path), and so on. You can find the available commands in Table 19.5. This table also indicates how many parameters each command takes, using DTD notation; for example, 2* indicates that the command takes pairs of parameters. You can also skip any values that are zero when specifying points, so the point specification 16275,,15005,,13735,152 is the same as 16275,0,15005,0,13735,152.

Table 19.5. Commands for the path Attribute
Command Name Parameters Description
ae angleellipseto 6* center (x,y), size (w,h), start-angle, end-angle. Draws a segment of an ellipse.
al angleellipse 6* Same as angleellipseto, except that there is an implied move to the starting point of the segment.
ar arc 8* left, top, right, bottom, start (x,y), end (x,y). Same as arcto, except that a new subpath is started by an implied move to the start point.
at arcto 8* left, top, right, bottom, start (x,y), end (x,y). The first four values define the bounding box of an ellipse, and the second four define two radial vectors. This command draws a segment of the ellipse, starting at the angle defined by the start radius vector and ending at the angle defined by the end vector.
c curveto 6* Draws a cubic be`zier curve from the current point to the coordinate given by the final two parameters. The control points are given by the first four parameters.
e end 0 End of the current set of subpaths.
l lineto 2* Draws a line from the current point to the given point.
m moveto 2 Begins a new subpath at the given coordinate.
nf nofill 0 Ensures that the current set of subpaths will not be filled.
ns nostroke 0 Ensures that the current set of subpaths will not be drawn (stroked).
qb quadraticbezier 2+2* (controlpoint (x,y))*, end (x,y) Defines one or more quadratic be`zier curves with a set of control points and an endpoint.
qx ellipticalqaudrantx 2* end (x,y). Draws a quarter ellipse from the current point to the endpoint.
qy ellipticalquadranty 2* end (x,y). Same as ellipticalquadrantx, except that the segment starts out vertical.
r rlineto 2* Draws a line from the current point to the given point.
t rmoveto 2* Starts a new subpath at the indicated coordinate.
v rcurveto 6* Creates a cubic be`zier curve using the given coordinate relative to the current point.
wa clockwisearcto 8* left, top, right, bottom start (x,y), end (x,y). Same as arcto, except that here the arc is drawn in a clockwise direction.
wr clockwisearc 8* left, top, right, bottom start (x,y), end (x,y). Same as arc, except here the arc is drawn in a clockwise direction.
x close 0 Closes the current subpath. Draws a straight line from the current point to the original moveto point.

Here's how you can use this <shapetype> element to create a shape as we've done earlier in the chapter:

<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> <BODY> <CENTER> <H1> VML Shapes </H1> <v:shapetype id="Valentine" fillcolor="red" strokecolor="red" coordsize="21600,21600" path="m10860,2187c10451,1746,9529,1018,9015,730, 7865,152,6685,,5415,,4175, 152,2995,575,1967, 1305,1150,2187,575,3222,242,4220,,5410,242,6560, 575,7597l10860, 21600,20995,7597c21480,6560, 21600,5410,21480,4220,21115,3222,20420,2187,19632, 1305,18575,575,17425,152,16275,,15005,,13735,152, 12705,730,12176,1018,11254,1746, 10860,2187xe"> </v:shapetype> <v:shape type="#Valentine" style='width:200;height:160;'/> </CENTER> </BODY> </HTML>

The results of this VML appear earlier in Figure 19.2.

You can list properties for the shape in the <shapetype> element, as in this example, which assigns a value to the fillcolor property. However, if you want to override those properties, you can do so; just specify new values in the <shape> element when you instantiate the shape. For example, here's how I turn the heart this VML draws blue:

<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> <BODY> <CENTER> <H1> VML Shapes </H1> <v:shapetype id="Valentine" fillcolor="red" strokecolor="red" coordsize="21600,21600" path="m10860,2187c10451,1746,9529,1018,9015,730, 7865,152,6685,,5415,,4175, 152,2995,575,1967, 1305,1150,2187,575,3222,242,4220,,5410,242,6560, 575,7597l10860, 21600,20995,7597c21480,6560, 21600,5410,21480,4220,21115,3222,20420,2187,19632, 1305,18575,575,17425,152,16275,,15005,,13735,152, 12705,730,12176,1018,11254,1746, 10860,2187xe"> </v:shapetype> <v:shape type="#Valentine" fillcolor="blue" style='width:200;height:160;'/> </CENTER> </BODY> </HTML>

More Advanced VML

Besides the material we've seen in this chapter, there's plenty more in VML. Like many graphics languages, VML has a lot of depth. Here's a last example, adapted from the examples in the Microsoft VML reference, which displays text along a VML text path, specified using VML formulae:

<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <TITLE> Using Vector Markup Language </TITLE> <STYLE> v\:* {behavior: url(#default#VML);} </STYLE> </HEAD> <BODY> <CENTER> <H1> VML Text Paths </H1> <v:shapetype id="MyShape" coordsize="21600,21600" adj="9931" path="m0@0c7200@2,14400@1,21600, 0m0@5c7200@6,14400@6,21600@5e"> <v:formulas> <v:f eqn="val #0"/> <v:f eqn="prod #0 3 4"/> <v:f eqn="prod #0 5 4"/> <v:f eqn="prod #0 3 8"/> <v:f eqn="prod #0 1 8"/> <v:f eqn="sum 21600 0 @3"/> <v:f eqn="sum @4 21600 0"/> <v:f eqn="prod #0 1 2"/> <v:f eqn="prod @5 1 2"/> <v:f eqn="sum @7 @8 0"/> <v:f eqn="prod #0 7 8"/> <v:f eqn="prod @5 1 3"/> <v:f eqn="sum @1 @2 0"/> <v:f eqn="sum @12 @0 0"/> <v:f eqn="prod @13 1 4"/> <v:f eqn="sum @11 14400 @14"/> </v:formulas> <v:path textpathok="t" /> <v:textpath on="t" fitshape="t" xscale="t"/> </v:shapetype> <v:shape type="#MyShape" style='position:absolute; top:60pt; left:60pt; width:207pt;height:63pt;' adj="8717" fillcolor="blue" strokeweight="1pt"> <v:fill method="linear sigma" focus="100%" type="gradient"/> <v:shadow on="t" offset="3pt"/> <v:textpath style='font-family:"Times New Roman"; v-text-kern:t'trim="t" fitpath="t" xscale="f" string="VML"/> </v:shape> </CENTER> </BODY> </HTML>

You can see the results of this VML in Figure 19.24. You may have seen text graphics like this in Microsoft Office products such as Word and PowerPoint, and now you know how it's done.

Figure 19.24. Using a VML text path.

For more information on VML, take a look at the Microsoft VML site. VML is a powerful language, but it's limited to Internet Explorer. One day, browsers will implement a W3C language such as SVG, and I'll be able to rewrite this chapter.

It's time to take a look at using Perl and XML on the server side, and I'm going to do that in the next chapter.

CONTENTS
Related

Категории