XML in 60 Minutes a Day phần 7 docx
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (9.53 MB, 72 trang )
exercise is simple and fast, and you won’t have to do a lot of typing. Once
you see how it works and that it works, you will actually own a func-
tioning example of this kind of data file. You can copy and modify this
file to create more of them.
1. Download the file called gemsB_IDI.htm from the Chapter 10 page
of the XML in 60 Minutes a Day Web site, as described in this book’s
introduction, and put the file in the C:\WWW\SpaceGems directory.
The _IDI has been inserted into the filename to remind you that it
contains an internal XML data island.
2. Test the gemsB_IDI.htm file in the browser to make sure that it
works. There is no link to this particular file yet, so you must enter
the filename as part of the URL (don’t forget the underscore between
the B and the IDI). In the browser’s locator bar, type:
http://localhost/spacegems/gemsB_IDI.htm
3. When the file is displayed, it should look like Figure 10.15.
4. Using HTML-Kit, open the gemsB_IDI.htm file.
5. Using the following steps as a guide, examine the content of the
gemsB_IDI.xml file:
a. Note that the actual XML data instance is situated between the
HTML <head> tags.
b. Look closely at the <xml id=”gemdata”> opening and </xml>
closing tags. This element type can only be named <xml>. It indi-
cates to the browser’s parser that the information between the
start and end tags is the data island. If you were to change the
element name from <xml> to <xmla>, for example, it would not
work.
c. The id attribute defined inside the <xml id=”gemdata”> start tag
is also mandatory. The value gemdata provides the subsequent
data island with a data source reference that will be used later
in the file.
d. Now examine the HTML <table> element start tag in the following:
<table border=”1” width=”100%”
summary=”Space Gems Quick List of Details”
datasrc=”#gemdata”>
e. The datasrc=”#gemdata” attribute binds the data source (speci-
fied by the id attribute mentioned in Step c.) to the HTML table.
This attribute therefore designates the HTML table as a data
consumer.
402 Chapter 10
422541 Ch10.qxd 6/19/03 10:12 AM Page 402
Figure 10.15 Displaying the gemsB_IDI.htm file.
f. You must include a pound sign (#) as the first character of the
value specified for the datasrc attribute.
g. Every table must have table data <td> tags that define the
individual cells where data is to be displayed.
h. You must define the <div> tag. Refer to the chapter notes for
alternatives. The datafld=”name” attribute inside the <div
datafld=”name” /> element tag (which is nested within the <td
align=”left” > </td> tags) binds the value of name= attribute to
that table cell.
i. The rest of the code is similar and binds more table cells to respec-
tive <gem> elements and the values of their attributes. Beyond
that, several regular HTML tags specify display formats for the
various elements.
Lab 10.2: XHTML File Containing a
Reference to an External Data Island
With two quick changes, you can morph the internal data island in the first
example data file into a reference to an external data source or external data
XML Data Binding 403
422541 Ch10.qxd 6/19/03 10:12 AM Page 403
island. After you make the changes to your XHTML file, we’ll provide an
already created data file named gemsB.xml as the data source.
In a situation where you have a small Web site without a lot of data,
you may not need a sophisticated database. Keeping your data inside
external XML files like gemsB.xml is sufficient. (Incidentally, it is no coin-
cidence that the data in that file is identical to the data found in the inter-
nal data island example.)
1. If you do not already have a fully functional gemsB.xml data file,
you can download a new copy from the Chapter 10 page of the
XML in 60 Minutes a Day Web site.
2. Using HTML-Kit, open the gemsB_IDI.htm file.
3. Before you begin modifying this file, save it as gemsB_EDI.htm to
the C:\WWW\SpaceGems directory. The EDI in the filename is
intended to remind you that this document will contain the refer-
ence to the external data island.
4. Delete all the code nested within the <xml id=”gemdata”> and
</xml> tags, including the <xml id=”gemdata”> and </xml> tags
themselves.
5. Replace the deleted code with the following new <xml> tag, which
contains the reference to the external data island file named
gemsB.xml:
<xml id=”gemdata” src=”gemsB.xml” />
6. Check to make sure that this new <xml> tag is situated between the
<head> and <title> elements.
7. Replace the word Internal with External inside the <title> tag.
8. Save the modified file.
9. Test the gemsB_EDI.htm file in the browser to make sure that it
works. Because there is no link to this particular file yet, you must
enter the filename as part of the URL in the browser’s locator bar.
(Don’t forget to include the underscore between the B and the EDI
in the filename.)
http://localhost/SpaceGems/gemsB_EDI.htm
When displayed, the file should once again look like Figure 10.15.
10. So that you won’t have to keep entering the filename as part of the
URL, modify the existing Quick List of Diamonds hyperlink on the
index.html file. To do this:
a. Using HTML-Kit, open the index.html file.
b. Change the code for the link from.
404 Chapter 10
422541 Ch10.qxd 6/19/03 10:12 AM Page 404
<a href=”gems1.xml”>Quick List of Diamonds</a>
to
<a href=”gemsB_EDI.htm”>Quick List of Diamonds</a>.
11. Save the file back as index.html.
12. Test the link on the index.html file in the browser to make sure that
it works. Type the following into the browser’s locator bar:
http://localhost/SpaceGems/
13. When the index/home page appears, click the Quick List of
Diamonds hyperlink. The successful display should look like
Figure 10.15.
Lab 10.3: JavaScript Using Internet Explorer’s
DSO Binding Technology
This is a slightly more advanced lab, but we won’t let it get too far
beyond you. Whether or not you understand and use JavaScript regu-
larly, this lab should interest you and perhaps stimulate your creativity.
In it, we show you how to create and bind data, then how to navigate it
on your local system, without having to enlist the original Web server to
recast and retransmit the data. In a situation where you have a small Web
site with little data, you may not need a database at all. Keeping your
data inside an external XML file is just fine. This data may even be
exported from a larger database, in which the XML file is just a temporary
store.
Four basic steps make up this JavaScript lab exercise:
■■
Creating the data island
■■
Binding the data fields
■■
Creating a JavaScript navigation mechanism
■■
Testing the catalog.htm Web page
Please note that this lab is a Microsoft-specific solution.
1. Download both the catalog.xml and catalogempty.htm files from the
Chapter 10 page of the XML in 60 Minutes a Day Web site into the
C:\WWW\SpaceGems directory.
XML Data Binding 405
422541 Ch10.qxd 6/19/03 10:12 AM Page 405
2. Open the catalogempty.htm file using HTML-Kit. You should see a
partial HTML file solution with comments inside it, similar to this
code:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“DTD/xhtml1-strict.dtd”>
<html xmlns=” xml:lang=”en” >
<head>
<title>Space Gems Catalog</title>
<! JavaScript start >
<! JavaScript end >
</head>
<body text=”#9999cc”>
<! Data island start >
<! Data island end >
<h2 font-family:Verdana,sans-serif”>
Space Gems Catalog
</h2>
<! HTML table start >
<! HTML table end >
<! Navigation buttons start >
<! Navigation buttons end >
</body>
</html>
3. Rename the file catalog.htm and save it.
4. Open the catalog.xml file using HTML-Kit. This is the data source
for this exercise. Review the document but do not make any changes
to it. When you are familiar with the file’s structure and contents,
you can close it.
5. Open the catalog.htm file again and create a reference to an external
data island inside it by adding the appropriate code between the data
island comment lines. When done, the lines should look like this:
<! Insert the XML data island >
<xml id=”data” src=”catalog.xml”></xml>
<! Insert the HTML table code after this line >
6. Note that the value specified for the id attribute—the data source
id—is data.
7. Add the following HTML table code to the catalog.htm Web page
between the appropriate comment lines:
<! HTML table start >
<table border=”0” style=”font: 10pt Verdana,sans-serif;”
cellpadding=”5”>
<tr>
<td>
<img dataSrc=”#data” dataFld=”image” />
</td>
</tr>
406 Chapter 10
422541 Ch10.qxd 6/19/03 10:12 AM Page 406
</table>
<table border=”0” style=”font: 10pt Verdana,sans-serif;”
cellpadding=”5”>
<tr>
<td>Name</td>
<td>
<span style=”background: white;
width:150; border: inset;
border-width:1” dataSrc=”#data”
dataFld=”name”>
</span>
</td>
<td>Carat</td>
<td>
<span style=”background: white;
width:150; border: inset;
border-width:1” dataSrc=”#data”
dataFld=”carat”>
</span>
</td>
</tr>
<tr>
<td>Origin </td>
<td>
<span style=”background: white;
width:150; border: inset;
border-width:1” dataSrc=”#data”
dataFld=”origin”>
</span>
</td>
<td>Shape </td>
<td>
<span style=”background: white;
width:150; border: inset;
border-width:1” dataSrc=”#data”
dataFld=”shape”>
</span>
</td>
</tr>
<tr>
<td>Cost $</td>
<td>
<span style=”background: white;
width:150; border: inset;
border-width:1” dataSrc=”#data”
dataFld=”cost”>
</span>
</td>
</tr>
</table>
<! HTML table end >
XML Data Binding 407
422541 Ch10.qxd 6/19/03 10:12 AM Page 407
8. Anytime you want to see the progress, click the Preview tab within
HTML-Kit. Feel free to change the HTML look and feel if you think
this file is too ugly for words.
9. Add the following JavaScript code to the catalog.htm Web page
between the appropriate comment lines, as indicated:
<! JavaScript start >
<script language=”JavaScript”>
function first(){
data.recordset.moveFirst();
}
function previous(){
if(data.recordset.absoluteposition>1)
data.recordset.movePrevious();
}
function next(){
if(data.recordset.absoluteposition <
data.recordset.recordcount)
data.recordset.moveNext();
}
function last(){
data.recordset.moveLast();
}
</script>
<! JavaScript end >
10. This code uses some standard predefined JavaScript functions that
will navigate the recordset. Here the recordset is defined as the data
island, which in our case is everything inside the catalog.xml file.
11. Create the navigation buttons that will invoke the functions defined
previously. Add the following code to the catalog.htm file between
the appropriate comment lines:
<! Navigation buttons start >
<hr />
<input type=”button” style=”width:70px”
value=”|<” onClick=”first()”>
</input>
<input type=”button” style=”width:70px”
value=”<” onClick=”previous()”>
</input>
<input type=”button” style=”width:70px”
value=”>” onClick=”next()”>
</input>
<input type=”button” style=”width:70px”
value=”>|” onClick=”last()”>
</input>
<! Navigation buttons end >
408 Chapter 10
422541 Ch10.qxd 6/19/03 10:12 AM Page 408
12. View the file inside HTML-Kit Preview, and save the file.
13. Using Internet Explorer, enter http://localhost/SpaceGems/
catalog.htm into the locator bar. If successful, the display should
resemble Figure 10.16. Check the functionality by clicking the
navigation buttons.
14. For optional practice, you can add another link to the index.html
page, one that will give you instant access to this page. The code is as
follows. Just follow the procedure indicated in the earlier exercises.
<a href=”catalog.htm”>Space Gems Catalog</a>
15. When you are done, don’t forget to test the new link.
Figure 10.16 Space Gems Catalog including JavaScript navigation functions.
Summary
Several concepts discussed in this chapter serve us well with respect to native
XML data and to discussions of other database technologies, especially when
they are applied in the Internet world:
XML Data Binding 409
422541 Ch10.qxd 6/19/03 10:12 AM Page 409
■■
More and more individuals and organizations are adopting XML tech-
nologies and standards, and native XML databases are expected to play
a larger role in the future. However, they are not expected to unseat
relational database technology. The challenge will be to increase their
interchangeability.
■■
Data binding is the process of mapping and synchronizing data in a
data source to designated (usually local) data placeholders. In this
chapter, data consumer elements, also called bindable elements, are the
placeholders. Data binding also involves moving and synchronizing
data from a remote server to a local system and manipulating it on the
local system.
■■
The advantages to data binding are reduced network traffic, lighter
loading on servers, and more efficient use of local resources.
■■
Data consumer elements bind two types of data: single-valued and
tabular. Inserting more than one value at once is called data set binding.
■■
HTML extended attributes, such as datasrc and datafld, allow us
to point to data sources and to the data fields within those sources,
respectively.
■■
XML data is stored in internal or external data islands. Internal data
islands are located within the Web page documents that display and
manipulate the data. External data islands are located in separate
documents that are referred to by the Web page documents.
■■
XML data retrieval and synchronization are performed by the XML
data source object plus the data binding agent or the table repetition
agent. XML DSO activation is easier and more automatic since the
release of Internet Explorer 5.
■■
The DSO is activated by the data binding agent or the table repetition
agent. The DSO retrieves data and assembles it in recordsets in the local
browser.
■■
Basic XML recordset navigation can be facilitated quite easily with
JavaScript coding in the Web page documents themselves.
410 Chapter 10
422541 Ch10.qxd 6/19/03 10:12 AM Page 410
Review Questions
1. Which of the following is not an aspect of data binding?
a. Mapping and synchronizing data
b. Interchangeability with relational databases
c. Transmitting data from sources to data placeholders
d. Local data manipulation
e. None of the above
2. Which of the following are data bindable elements? (There may be more than one
correct answer.)
a. <div>
b. <table>
c. <span>
d. <td>
e. All of the above
3. True or false? The <div> element is a grouping element, but the <span> element is
only an inline element.
4. True or false? Single valued elements can be used to build tablelike structures.
5. To display data from a data source without worrying about the format of the data,
which of the following attributes would you use?
a. datasrc=”$text”
b. datafld=”$text”
c. datasrc=”$table”
d. datafld=”table”
e. None of the above
6. Which of the following attributes points to an external XML data island?
a. datasrc
b. datafld
c. src
d. id
e. None of the above
XML Data Binding 411
422541 Ch10.qxd 6/19/03 10:12 AM Page 411
7. The standard syntax for specifying data located below the second nesting level resem-
bles which of the following?
a. cost.retail
b. cost/retail
c. cost;retail
d. cost:retail
e. cost_retail
8. Which of the following is the proper syntax for an external data island?
a. <xml id=”gemdata” src=”gems.xml” />
b. <xml id=”gemdata” datasrc=”gems.xml” />
c. <xml id=”gemdata” src=”gems.xml” >
d. <xml datasrc=”gemdata” datafld=”data” />
e. None of the above
9. True or false? The DSO searches a Web page document for bindable elements, then
activates the data binding agent or the table repetition agent.
10. Which of the following atttributes could tie navigation buttons to JavaScript functions?
a. input=”value”
b. function=”value”
c. recordset=”value”
d. onClick=”value”
e. None of the above
412 Chapter 10
422541 Ch10.qxd 6/19/03 10:12 AM Page 412
Answers to Review Questions
1. b. The interchangeability of native XML data and relational databases is an objective of
developers and vendors of both technologies. But interchangeability is not an aspect
of XML data binding.
2. a., b., and c. The <td> element can only be used if a <div> element is nested within it.
3. False. In fact, the statement is a little nonsensical. Both the <div> and <span> elements
are grouping elements. However, <div> is block level while <span> is inline level.
4. True. In fact, two examples are provided in the text, in the section titled The <table>
Element.
5. b. This is discussed in the Single-Valued Elements Avoid Overrestrictive Data section.
6. c. This is discussed in the External Data Island section.
7. a. Remember, the first term is the name affiliated with the second level. The delimiter
is a period.
8. a. The <xml /> element has to be declared an empty element type, and the two
relevant attributes are id and src.
9. False. Actually, the reverse is true: The data binding and table repetition agents search
a Web page document for bindable elements; if they find any, they activate the appro-
priate DSO.
10. d. This is discussed in the Navigating Recordsets section.
XML Data Binding 413
422541 Ch10.qxd 6/19/03 10:12 AM Page 413
422541 Ch10.qxd 6/19/03 10:12 AM Page 414
415
Even though it has only been about 10 years, the World Wide Web seems to
have moved worlds away from its initial “text-only” days. During the past
decade, graphics have become so important that—let’s face it—a Web site
without graphics isn’t even considered a proper Web site. Research demands
graphics, e-commerce demands graphics, and those who just want to have fun
really demand graphics. In light of these ever-increasing demands, it is impera-
tive to deliver graphic images (diagrams, still pictures, movies) while simulta-
neously optimizing the consumption of system and network resources.
In this chapter, we introduce the Vector Markup Language (VML), presently
the most widespread of the XML-related graphic languages. We start by review-
ing some basic graphic technology concepts, then provide a quick definition
and background for VML itself. Finally, we show you how to create VML doc-
uments and figures. By the end of the chapter, you will be able to create your
own VML objects, manipulate them, and display them in your browser.
A word of caution, though: As a graphics standard, Scalable Vector Graphics
(SVG) is gaining acceptance in the IT world. Within the next few years, it may
eclipse VML.
VML
CHAPTER
11
422541 Ch11.qxd 6/19/03 10:12 AM Page 415
Basic Digital Imaging Technologies
Two basic digital imaging technologies exist: those using bitmap graphics and
those using vector graphics. Although VML involves vector graphics, each is
discussed in turn.
Bitmap Graphics
A bitmap graphic file (also known as a raster graphic file) is one in which each
bit of data in the file corresponds to a specific location on a raster—which is the
viewing area of a terminal screen—or to a specific ink dot on a printed page.
Actually, the converse of that statement may be easier to understand: The data
value for each picture element (usually called a pixel) is stored in a data file.
Pixels are easily seen on terminal screens (and television screens) by looking at
the screen through a magnifying glass. They are similar in nature to the com-
binations of black and white or colored ink dots that are still used to create
newspaper and magazine photographs. The resolution (Windows calls it the
screen image) that you specify for your terminal is measured in pixels. For
example, 800 by 600 (also indicated by 800x600) means that there are 800
columns and 600 rows of pixels in your viewing area. The higher the numbers,
the sharper the image that can be displayed. However, if you have higher
numbers in your resolution setting, you will generally need larger data files to
store the image data.
A bitmap is also characterized by its color density, which is the number of
data bits required to display each pixel. The bits per pixel may vary from four
to 32, depending on the number of shades of gray, or the combination of red,
green, and blue colors per pixel. For example:
■■
If we want 16 colors, each pixel requires four bits of data.
■■
If we want 256 colors, each pixel requires eight bits.
■■
If we want 65,536 colors (high color), each pixel requires 16 bits.
■■
If we want 16.78 million colors (true color), each pixel requires 24 bits.
We can readily see that if we want a higher color density in an image, we
need a larger data file.
Classroom Q & A
Q: What’s with all those bitmap formats: GIFs, TIFFs, JPEGs, and the
others? What’s the difference?
A: Bitmap files do indeed occur in various formats, depending on the
features of the various algorithms used to compress the data
within them. If the files weren’t compressed, they would take up
416 Chapter 11
422541 Ch11.qxd 6/19/03 10:12 AM Page 416
much more storage space and take much longer to transmit and
display. These formats are referred to by their acronyms (BMP,
TIFF, GIF, PNG, or JPEG) and are also reflected in the extensions
added to the respective data filenames. The various formats allow
graphic files to be exchanged between several different platforms
and applications.
The header of a bitmap file specifies the file format, the dimensions of the
display in pixels, and information about color density. Following the header are
the data bytes that create the image. Output devices, such as printers and mon-
itors, contain rasterizers, which are combinations of hardware and software
that translate all graphic objects into bitmaps. Thus, with some output devices,
all graphic objects (including vector graphic objects, which are discussed in the
next section) must be translated into bitmaps before being produced.
The advantages to bitmap graphics include the following:
■■
Because the composition of each individual display pixel or printed dot
is controlled, bitmapped images do not need on-time calculation, which
lessens their consumption of CPU cycles.
■■
Bitmaps are found just about everywhere on the Web and on private
networks.
■■
Bitmaps allow us to enhance image details; we can literally modify each
pixel in an image using applications that are commonly called paint
programs or photo suites.
But bitmap graphics have several disadvantages, too. Among them:
■■
They may require a larger amount of RAM on motherboards, video
adapter cards, or within printers.
■■
Bitmap images still require fast processors, since video terminals
may require a wholesale image change (also called a refresh) between
50 and 200 times per second, depending on monitor characteristics.
■■
The generally larger file sizes cause them to download slowly
(especially frustrating when subject to slow Web connections).
■■
The files are usually stored externally with respect to the rest of the Web
page or other containing documents, which causes processors to work
harder, makes the images more difficult to distribute, and causes extra
system administration issues.
■■
They do not provide real overall flexibility: Once the image has been
created, significant changes cannot be easily made. Even minor changes
cannot be made without using the appropriate paint or photo software
(which likely includes software to uncompress and then recompress the
VML 417
422541 Ch11.qxd 6/19/03 10:12 AM Page 417
files) on a system that must meet certain minimum requirements. Thus,
you cannot access a bitmap, make quick (and, especially, significant)
changes, and redraw it quickly.
■■
Bitmap graphic images become jagged looking beyond a certain magni-
fication level.
Vector Graphics
Vector graphic images are objects created by drawing a series of lines, poly-
gons, and text, while providing only the starting positions and directions for
each line. Vector graphic images are also called object-oriented graphics, but
they are not related to object-oriented programming.
The drawing activity is actually the activation of mathematical expressions
and descriptions in an application, which, in turn, will use attributes provided
in the respective Web document to create representations of the vector images.
Vector graphics always use one or more algorithms in real time to create a
shape and then draw that image on the screen or send it to a printer. Vector
graphic files create bitstreams that describe their images as display lists that
contain a mathematical description of every object in a shape (imagine a jewel
being composed of triangles, octagons, and other individual objects grouped
together), including their respective locations and dimensions, as well as other
attributes like fill colors, line stroke widths, and layers.
Vector graphics are widely used in word processing, graphics editing, pub-
lishing, and presentation applications. Almost all sophisticated graphics sys-
tems, including computer-aided design and drafting (CADD or CAD) systems
and animation software, use vector graphics. Applications used to create and
manipulate vector graphics are generally called drawing programs (as opposed
to the paint programs used to manipulate bitmap graphics). In everyday word
processing, fonts are often created using vectors. These are called vector fonts,
scalable fonts, object-oriented fonts, and outline fonts. Some vector graphic-
enabled output devices contain built-in interpreters that execute the instruc-
tions (as opposed to rasterizing into bitmaps).
Vector graphics have several advantages:
■■
Vector graphics files use smaller amounts of memory to represent a
respective object no matter what the intended actual size. If the graphics
files are altered to create bigger or smaller images, almost no difference
occurs in the size of their already smaller definition files, thus saving
RAM and hard disk drive storage.
■■
The smaller files also transmit (download) faster.
418 Chapter 11
422541 Ch11.qxd 6/19/03 10:12 AM Page 418
■■
Vector graphics are more scalable. Their representations can potentially
be output on any device, with any resolution, and at any size, with no
loss of clarity and no distortion. In fact, they look better when dis-
played at higher resolutions and at higher magnifications. By contrast,
bitmapped images become jagged at higher magnification and look no
better on higher-resolution devices than on lower-resolution devices.
■■
Overlapping shapes can be manipulated independently without using
different layers for each.
■■
Once vector graphic files are created, the objects within them can
be selected, resized, moved, and reordered at any time; significant
changes can be made, more quickly than the “pixel detailing” of
bitmap manipulation.
■■
Vector graphic files are searchable for data and attributes.
■■
Users can interact easily with the created image files using a simple
computer system and text editor. Vector files are actually text files.
The disadvantages of vector graphics are as follows:
■■
As vector graphics become more sophisticated (possibly containing
scores, hundreds, or even thousands of mathematical expressions that
define many finer details), more powerful processors may be needed to
handle them. It may take significant time to redraw or output (that is,
recalculate, pass the information to a rasterizer, store the data in RAM,
and quickly transfer and refresh it to a screen) all the objects, not only
all at once, but at perhaps hundreds of times a second as a monitor
screen refreshes. This may result in flicker as you move an image to a
new location on a page.
■■
The very fine image details might be better handled by bitmaps.
As a workaround for these bottlenecks and to save processing time, some
programmers develop software that includes strategically placed bitmapped
fonts or other images in otherwise vector graphic files. They still allow the use
of vector fonts and images to produce fine results in hard copy.
VML Development
VML was designed to help developers address the problems and disadvan-
tages of bitmap technology and to provide a textual method for prescribing
vector graphics. Those prescriptions can be easily transferred to a wide variety
of authoring tools, from the simple to the sophisticated, by simple cut-and-
paste methods. Further, VML is written so that it can be integrated into exist-
ing HTML 4.0 Web-related documents.
VML 419
422541 Ch11.qxd 6/19/03 10:12 AM Page 419
The initial VML draft specification was authored jointly by Autodesk Inc.,
Hewlett-Packard Company, Macromedia Inc., Visio Corporation, and Microsoft
Corporation, and it was submitted to the W3C in May 1998. The VML specifi-
cation never attained W3C Recommendation status, despite the support of
Microsoft and other developers. This support included the incorporation of
VML graphic-rendering functionality into recent versions (since Version 5.0)
of Microsoft’s Internet Explorer browser. The VML specification document
survives as a W3C Note. (As mentioned in Chapter 6, a W3C Note is a dated,
public record of an idea, comment, or document. Publication as a Note does
not represent any commitment by the W3C to pursue work related to it.
Neither does its Note status indicate any endorsement of its content, nor any
present or future allocation of resources to the issues addressed by it.)
Thus, no further VML development is likely to take place. In fact, both the
VML Note and the (rival) Precision Graphics Markup Language Note (also
submitted in 1998) were overtaken and passed by the development of the Scal-
able Vector Graphics specification, which became a W3C Recommendation in
mid-2001. We discuss these documents in the last sections of this chapter.
What Is VML? A Definition
The W3C (at www.w3.org/TR/NOTE-VML) describes VML as follows: “VML
is an application of the 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 is fully compliant with other W3C standards such as Cascading Style
Sheets, HTML, XHTML, and others. For example, all top-level VML elements
support the <style> element and its related attributes, in the same manner that
all HTML elements support it. Further, since VML also supports CSS, shapes
can be styled and positioned as required by a Web document developer.
True to its vector graphics heritage, VML uses mathematical descriptions to
prescribe its shapes. VML’s vector graphics definitions can be included within
XHTML-/HTML-compliant documents (integrated with the Web page coding).
Unlike bitmaps, VML definitions are not relegated to external files. True to its
Microsoft heritage, VMLalso contains a few MS Office-related features that allow
it to cooperate with VML generated by Microsoft 2000 and XP technologies.
Images can be generated using nothing but VML. However, bitmap data is
still considered important to VML and can be combined with vector data by
including appropriate references. Furthermore, VML provides (admittedly
limited) transformation attributes (such as chromakey, gamma, picture, and
black level adjustments) that can be applied to the bitmap data from within the
VML/Web document.
420 Chapter 11
422541 Ch11.qxd 6/19/03 10:12 AM Page 420
Some of VML’s advantages stem from its vector graphics heritage; some
from its Microsoft Internet Explorer affiliation:
■■
VML’s vector graphic files are generally smaller, so they transmit faster
than bitmap images.
■■
VML documents are easily and quickly created, updated, and pub-
lished to servers. Editing activities can be done using text editors or
other office environment applications. The files can be republished
directly and quickly after that.
■■
VML is both open and standards-based. It is compliant with other
W3C standards such as HTML, XHTML, and others, including, as
mentioned previously, Cascading Style Sheets.
■■
Because it is a text-based encoding system, developers are able to
search, cut, and paste vector graphics from one document to another,
and scale VML graphics to interact with other page elements and
objects. When a page is displayed in a browser window, the source
code can also be viewed.
■■
VML has become the most widespread graphics-related XML applica-
tion (although the Scalable Vector Graphics Recommendation is closing
the gap) and comes incorporated with recent versions of Microsoft’s
Internet Explorer browser. Thus, it is accessible to a wide audience and
requires no additional downloads or plug-ins to be functional.
■■
VML does not always require the implementation of a rasterizer.
Existing operating system facilities can be used, such as those found in
the Win32 Graphical Device Interface (GDI, the Windows standard for
representing graphical objects and transmitting them to output devices)
or Macintosh QuickDraw (the underlying graphics display system for
Apple Macintosh computers).
■■
Although images can be generated using nothing but VML, bitmap data
can also be combined with vector graphics data. VML also provides
some bitmap transformation attributes.
These advantages all contribute to faster Web site design and have allowed
VML to contribute to geographic information system technologies, where
VML’s map-making and drawing strengths can be quickly and easily employed
alongside XML-related spatial databases.
Creating VML Documents
Now that we know something about VML’s background and basic vector
graphic technology, it’s time to introduce its structure and other features.
VML 421
422541 Ch11.qxd 6/19/03 10:12 AM Page 421
Because VML is an application of XML, if it is used in an XML/XHTML envi-
ronment, its syntax must be strictly adhered to. If VML is used in an HTML
environment, however, not all XML-like features need be included.
Logical Structure: A Prolog and an <html> Element
VML document structures are very similar to XHTML/HTML documents. A
VML document consists of two main parts: a prolog and an <html> element.
The prolog resembles other XHTML-related documents. It consists of an
XML declaration and a DOCTYPE declaration indicating the DTD variant.
However, a prolog is not necessary when VML is used with HTML.
The <html> element consists of the <head> element and the <body> ele-
ment. In a VML/XHTML document, the <head> element contains a <title>
element followed by a <style> element. The <style> element also contains a
behavior declaration, which is discussed later.
Namespace Declarations
For VML to render properly, we must pay attention to the namespace declara-
tions. Two namespace declarations are necessary: a VML namespace and a
default namespace for the HTML or XHTML tags. Both declarations must
appear in the <html> element’s start tag.
Here is the VML namespace declaration that should appear in the <html>
start tag:
<html xmlns:v=”urn:schemas-microsoft-com:vml”>
When we are declaring a VML namespace, convention prescribes the prefix
v:. Later in the document, needless to say, the v: prefix precedes each VML-
related element tag.
If we omit the VML declaration, the VML figures will not be displayed. If
you ever have trouble producing VML output, start debugging by looking
for this declaration in your documents.
The default namespace is inserted next, in the same <html> element start
tag. If our document is XHTML-compliant, the default declaration must reflect
that. In that case, add the following as the default namespace declaration to the
<html> start tag:
xmlns=” />422 Chapter 11
422541 Ch11.qxd 6/19/03 10:12 AM Page 422
If our document is not XHTML-compliant (that is, if it is only HTML-
compliant), then we have to add the following default namespace declaration
to the <html> start tag, instead of the previous declaration:
xmlns=” />The code used tells Internet Explorer that all tags without prefixes are part
of the XHTML or HTML namespaces, respectively.
Because of VML’s Microsoft heritage, it is supported by Microsoft Office
2000/XP applications: Microsoft Word, PowerPoint, and Excel. We can use
those applications to draw VML objects, but you must add a third namespace
declaration to the <html> start tag, since those applications will add the prefix
o: to their VML elements. The third declaration follows:
xmlns:o=”urn:schemas-microsoft-com:office:office”
Please remember that if we are not creating VML objects with Microsoft
Office applications, we can omit that third namespace declaration.
Behavior Declarations
VML is supported as a default behavior in Microsoft Internet Explorer Version
5.0 and later. Introduced in Microsoft IE 5, behaviors are complete and encap-
sulated subroutines that, when called, extend MS IE browser functionality. If
the IE browser does not include a VML behavior, we may need to add it as an
option. Look for the VGX.DLL in the C:\Program Files\Common Files\
Microsoft Shared\VGX folder on the Windows system.
Since they are complete in themselves, we can declare behaviors at the
beginning of an XHTML/HTML document and then apply (or “call”) them to
any element in our document. Thus, behaviors provide the ability to reuse
blocks of code and to keep our content separated from that actual code.
To activate IE’s VML behavior, insert the following code into the <style>
element within the <head> element:
<style>
v\:* { behavior: url(#default#VML); }
</style>
This instructs the browser to pass all tags beginning with v: to its VML ren-
dering subroutine.
Like the VML namespace declaration, if you omit the behavior, your VML
images will not be displayed. So, if you have trouble producing VML output,
consider looking for this code once you have examined your namespace
declarations.
VML 423
422541 Ch11.qxd 6/19/03 10:12 AM Page 423
Once again, because VML is supported in several recent Microsoft Office
applications, if we create VML objects with those programs, we must add this
behavior declaration to the <style> element:
o\:* {behavior:url(#default#VML);}
Later, you will learn how to create primitive graphic objects (objects created
by setting a path for a virtual pen to traverse). When adding such objects to
a VML document, we must add a shape behavior declaration to the <style>
element:
.shape {behavior:url(#default#VML);}
The .shape referred to here is like an object-oriented programming class
name. In embedded-style behaviors like this, the class name is used as a selec-
tor and begins with the period (.). This causes every element assigned the class
name of shape to be rendered according to the specifications in this IE behavior.
VML Elements in the <body> Element
The VML elements that we use to create shapes will appear within the <body>
element of the XHTML/HTML Web page document. Those elements are cate-
gorized according to their function within a VML-related hierarchy of cate-
gories. Some elements are members of more than one category. The main
categories, along with examples from each, are listed in Table 11.1. (Several of
the elements listed in Table 11.1 are discussed in this chapter; for details on
these and other elements, please refer to the W3C VML Note at www.w3.org/
TR/NOTE-VML.)
VML applies to each element a default template consisting of the full set of
attributes that may apply to that particular element. In the following section,
for example, we discuss the <shape> element and Table 11.2 lists the default
VML template for that element. However, when we specify a particular ele-
ment type, we can override the default values for any of its attributes by spec-
ifying the attribute name and a new value.
Table 11.1 VML Element Categories
CATEGORY MEMBERSHIP (EXAMPLES)
Top-level <group>, <shape>, <shapetype>, and <background>
Primary <group>, <shape>
Subelements Several. Examples include <fill>, <formulas>,
<strokeweight>, <handles>, <image>, <imagedata>
Predefined Several. Examples include <rect>, <roundrect>, <line>,
<oval>, <polyline>, <curve>, <arc>
424 Chapter 11
422541 Ch11.qxd 6/19/03 10:12 AM Page 424
The <shape> Element
Creating a <shape> element is the first step toward defining our own vector
graphic figure. But <shape> really only defines the containing box for the
actual figure we want to create. When this block-level box is created, we use the
<shape> element’s coordsize and coordorigin attributes to define a local coor-
dinate system for any subelement figures that may be created within the box.
Thus, any subsequent positioning information specified for subelement fig-
ures is expressed in terms of the box’s local coordinate space. As a result, posi-
tion attributes like left, top, width, height, and others are not expressed in
commonly recognized measures like inches, millimeters, or the like; they are
expressed as coordinate divisions, as you have defined them, within the box.
To clarify, the coordsize attribute defines how many divisions exist along the
base of the containing box, across its width. The coordorigin attribute specifies
the coordinates of the top left corner of the containing box. This strategy
allows the vectors defining a figure inside the block-level box to be specified
with respect to its local coordinate system. Later, if the dimensions of the con-
taining box are changed, the outline of the figure will be automatically scaled
to the new dimensions.
To create a figure inside the block-level box, specify a path within <shape>.
The path may take the form of a path attribute or a <path> element. Both are
discussed in the next section.
Table 11.2 lists the attributes, complete with their default values, that make
up the <shape> element’s default VML template. Notice that some values use
quotes, while others do not. Those with quotes are standalone attributes; those
without, appear within a style=” ” attribute. To override any of <shape>’s
default attribute values, insert the attribute name and specify a new value in
the <shape> element’s start tag.
Table 11.2 Default Template for the <shape> Element
ATTRIBUTE=VALUE ATTRIBUTE=VALUE
flip=null chromakey=null
height=100 coordorigin=”0, 0”
left=0, margin-left=0, center-x=0, etc. strokecolor=”black”
position=”static” opacity=”100%”
rotation=0 fillcolor=”white”
top=0, margin-top=0, center-y=0, etc. coordsize=”1000, 1000”
style=’visibility=visible’ strokeweight= “0.75pt”
(continued)
VML 425
422541 Ch11.qxd 6/19/03 10:12 AM Page 425
Table 11.2 (continued)
ATTRIBUTE=VALUE ATTRIBUTE=VALUE
width=100 type=null
z-index=0 adj=null
stroke=true path=null
wrapcoords=null alt=null
href=null id=null
title=null class=null
v=null print=true
fill=true target=null
As a simple example of <shape> element usage, the following code is just
about the minimum needed to produce a shape. Don’t worry about the path
attribute yet; after reading the next few sections, you will be able to interpret it
easily.
<shape fillcolor=”gray”
style=”position:relative;top:1;left:1;width:400;height:300”
path=”m 1,1 l 1,300, 400,300, 400,1 x e”>
</shape>
From the example, you can see that we must define, at a minimum, a
<shape>’s position, top, left, width, height, and path attributes. The fillcolor
attribute was included because the path is an attribute. If instead we had used
a <path> element, the fill color would have been specified within the <path>
element’s start tag.
Although the most basic of VML’s graphic elements, <shape> is not used as
frequently as we would expect. Most developers prefer to use predefined
shapes like <rect>, <oval>, <line>, and others. These are discussed later, in the
section titled VML’s Predefined Shapes.
Creating Graphic Objects Using the
path Attribute or <path> Element
To define what are called primitive graphic objects (which we refer to as shapes
or figures) within the <shape> element, we either use a nested <path> element
within the <shape> element, or specify a path attribute within the start tag of
the <shape> element.
426 Chapter 11
422541 Ch11.qxd 6/19/03 10:12 AM Page 426
