Chris Pollett > Students >
Julie

    ( Print View )

    [Bio]

    [CS297Proposal]

    [Del1]

    [Del2]

    [Del3]

    [Del4]

    [CS 297 Report-PDF]

    [CS 298 Proposal]

    [CS 298 Final Demo]

    [CS 298 Presentation-PDF]

    [CS 298 Report-PDF]

                          

























XML Transformation

This example demonstrates the use of Javascript and XMLDOM to transform an XML file to display some VML shapes. The shapes are transformed from one XML file and three stylesheets containing the VML code. The transformation occurs inside the Javascript block. To view the shapes, you need IE 5.0 or higher.

Click a Button

Rectangle Demo

XSL Source Code for the Red Rectangle

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
   <xsl:template match="/">
      <html xmlns:v="urn:schemas-microsoft-com:vml">
        <head>
            <style type="text/css">
              v\:*{behavior:url(#default#VML);}
            </style>
        </head>
        <body>
          <xsl:element name="v:rect">
            <xsl:attribute name="fillcolor">red</xsl:attribute>
            <xsl:attribute name="style">width:180;height:180</xsl:attribute>
          </xsl:element>
        </body>
      </html>
    </xsl:template>
 </xsl:stylesheet>

XSL Source Code for the Blue Round Rectangle

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
   <xsl:template match="/">
      <html xmlns:v="urn:schemas-microsoft-com:vml">
        <head>
            <style type="text/css">
              v\:*{behavior:url(#default#VML);}
            </style>
        </head>
        <body>
          <xsl:element name="v:roundrect">
            <xsl:attribute name="fillcolor">blue</xsl:attribute>
            <xsl:attribute name="style">width:200;height:200</xsl:attribute>
          </xsl:element>
        </body>
      </html>
    </xsl:template>
 </xsl:stylesheet>

XSL Source Code for the Yellow Circle

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
   <xsl:template match="/">
      <html xmlns:v="urn:schemas-microsoft-com:vml">
        <head>
            <style type="text/css">
              v\:*{behavior:url(#default#VML);}
            </style>
        </head>
        <body>
          <xsl:element name="v:oval">
            <xsl:attribute name="fillcolor">yellow</xsl:attribute>
            <xsl:attribute name="style">width:180;height:180</xsl:attribute>
          </xsl:element>
        </body>
      </html>
    </xsl:template>
 </xsl:stylesheet>

XML Source Code

<?xml version="1.0" encoding="ISO-8859-1"?>
<x xmlns:v="urn:schemas-microsoft-com:vml">
    <v:rect>
    </v:rect>
</x>