Chapter 19. Vector Markup Language | Real World XML (2nd Edition)

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. Besides being supported in Microsoft applications, VML is supported by many leading software vendors such as Autodesk and Macromedia.

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 supports CSS, so you can style and position shapes as you like. VML is supported in Microsoft Office 2000 and XPMicrosoft 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.

Here's the primary online resource for VML, the note that Microsoft wrote and sent to W3C, which W3C has posted: www.w3.org/TR/NOTE-VML

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. This 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:

Listing ch19_01.html

 <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; you can see the result of this page in Figure 19-1.

Figure 19-1. A VML sample page.

graphics/19fig01.gif

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