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]

                          

























Experimenting with Two Stylesheet Transformations

Clicking the first button, xsl1.xsl will transform smileys.xml into another xml file. This xml file will be transformed using the second stylesheet xsl2.xsl into an html file with VML images.

Transformation Demo

Source Code

smiley.xml

<?xml version="1.0" ?>
<!DOCTYPE smileys SYSTEM "smileys.dtd">
<smileys>
  <face type="graphical" filetype="jpg">
    <emotion>happy</emotion>
    <width>130</width>
    <color>yellow</color>
    <hatcolor>black</hatcolor>
    <hatheight>20</hatheight>
   </face>

   <face type="graphical" filetype="gif">
      <emotion>sad</emotion>
      <width>100</width>
      <color>blue</color>
      <hatcolor>blue</hatcolor>
    <hatheight>20</hatheight>
   </face>

   <face type="graphical" filetype="bmp">
    <emotion>grumpy</emotion>
    <width>130</width>
    <color>red</color>
    <hatcolor>yellow</hatcolor>
    <hatheight>20</hatheight>
   </face>

   <face type="text" filetype="txt">
    <emotion>bored</emotion>
    <width>120</width>
    <color>yellow</color>
    <hatcolor>red</hatcolor>
    <hatheight>20</hatheight>
   </face>

   <face type="graphical" filetype="jpg">
    <emotion>mustached</emotion>
    <width>110</width>
    <color>yellow</color>
    <hatcolor>black</hatcolor>
    <hatheight>40</hatheight>
   </face>
</smileys>

xsl1.xsl

<?xml version="1.0" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output    method="xml"
                    standalone="yes"
                    omit-xml-declaration="yes"
                    doctype-system="images.dtd"/>


  <xsl:template match="/">
    <xsl:element name="images">
      <xsl:apply-templates />
    </xsl:element>
  </xsl:template>


  <xsl:template match="face">
    <image>
        <xsl:apply-templates />
    </image>
  </xsl:template>

  <xsl:template match="emotion" >
    <xsl:element name="name">
      <xsl:value-of select="." />
    </xsl:element>
  </xsl:template>

   <xsl:template match="width" >
    <xsl:element name="radius">
      <xsl:variable name="r" select="." />
        <xsl:value-of select="$r div 2" />
    </xsl:element>
  </xsl:template>

 <xsl:template match="color">
  <xsl:element name="fillcolor">
    <xsl:value-of select="." />
  </xsl:element>
 </xsl:template>


 <xsl:template match="hatcolor">
  <xsl:element name="secondcolor">
    <xsl:value-of select="." />
  </xsl:element>
 </xsl:template>

 <xsl:template match="hatheight">
  <xsl:element name="rec-height">
    <xsl:value-of select="." />
  </xsl:element>
 </xsl:template>

</xsl:stylesheet>

xsl2.xsl

<?xml version="1.0" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns:v="urn:schemas-microsoft-com:vml">

  <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:for-each select="//image">
        <xsl:variable name="look">
          <xsl:value-of select="name" />
      </xsl:variable>
      <h3><xsl:value-of select="$look" /></h3>
      <br></br>

      <xsl:variable name="width">
        <xsl:value-of select="radius" />
      </xsl:variable>

      <xsl:variable name="fillcolor">
        <xsl:value-of select="fillcolor" />
      </xsl:variable>

<!-- DRAW CIRCLES -->

        <xsl:element name="v:oval" >
        <xsl:attribute name="style">width:
          <xsl:value-of select="$width"/>;height:50px</xsl:attribute>
        <xsl:attribute name="fillcolor">
          <xsl:value-of select="$fillcolor"/></xsl:attribute>
        </xsl:element>

  <!-- LEFT EYE -->
        <xsl:element name="v:oval">
        <xsl:attribute name="style">position:relative;top:-20px;left:-40px;width:5px;height:5px</xsl:attribute>
        <xsl:attribute name="fillcolor">black</xsl:attribute>
        </xsl:element>

   <!-- RIGHT EYE -->
        <xsl:element name="v:oval">
        <xsl:attribute name="style">position:relative;top:-20px;left:-30px;width:5px;height:5px</xsl:attribute>
        <xsl:attribute name="fillcolor">black</xsl:attribute>
        </xsl:element>

 <!-- DRAW THE MOUTHS -->
          <xsl:if test="$look='bored'">
            <xsl:element name="v:line">
              <xsl:attribute name="from">-35,40</xsl:attribute>
              <xsl:attribute name="to">-55,40</xsl:attribute>
            </xsl:element>
          </xsl:if>

          <xsl:if test="$look='happy'">
            <xsl:element name="v:arc">
              <xsl:attribute name="style">position:relative;top:-5;left:-55;width:20;height:20</xsl:attribute>
              <xsl:attribute name="startangle">90</xsl:attribute>
              <xsl:attribute name="endangle">270</xsl:attribute>
              <xsl:attribute name="fillcolor">yellow</xsl:attribute>
            </xsl:element>
          </xsl:if>

          <xsl:if test="$look='grumpy'">
            <xsl:element name="v:arc">
              <xsl:attribute name="style">position:relative;top:-5;left:-48;width:5;height:10</xsl:attribute>
              <xsl:attribute name="startangle">0</xsl:attribute>
              <xsl:attribute name="endangle">360</xsl:attribute>
              <xsl:attribute name="fillcolor">yellow</xsl:attribute>
            </xsl:element>
          </xsl:if>

          <xsl:if test="$look='sad'">
            <xsl:element name="v:arc">
              <xsl:attribute name="style">position:relative;top:-5;left:-55;width:20;height:20</xsl:attribute>
              <xsl:attribute name="startangle">-45</xsl:attribute>
              <xsl:attribute name="endangle">45</xsl:attribute>
              <xsl:attribute name="fillcolor">yellow</xsl:attribute>
            </xsl:element>
          </xsl:if>

          <xsl:if test="$look='mustached'">
        <xsl:element name="v:line">
              <xsl:attribute name="from">-30,40</xsl:attribute>
              <xsl:attribute name="to">-55,40</xsl:attribute>
            </xsl:element>

            <xsl:element name="v:rect">
              <xsl:attribute name="style">position:relative;top:-5;left:-48;width:8;height:8</xsl:attribute>
              <xsl:attribute name="fillcolor">black</xsl:attribute>
            </xsl:element>
        </xsl:if>

 <!-- GET OTHER VARIABLES -->

        <xsl:variable name="hat-color">
          <xsl:value-of select="secondcolor" />
        </xsl:variable>

        <xsl:variable name="rec-height">
          <xsl:value-of select="rec-height" />
        </xsl:variable>

<!-- DRAW THE HATS -->

      <xsl:element name="v:rect">
        <xsl:attribute name="style">position:relative;top:-38;left:-90;width:50;height:5
        </xsl:attribute>
        <xsl:attribute name="fillcolor">
          <xsl:value-of select="secondcolor" />
        </xsl:attribute>
        <xsl:attribute name="strokecolor">
          <xsl:value-of select="secondcolor" />
        </xsl:attribute>
      </xsl:element>

      <xsl:element name="v:rect">
        <xsl:attribute name="style">position:relative;top:-52;left:-128;width:18;height:
          <xsl:value-of select="rec-height"/>
        </xsl:attribute>
        <xsl:attribute name="fillcolor">
          <xsl:value-of select="secondcolor" />
        </xsl:attribute>
        <xsl:attribute name="strokecolor">
          <xsl:value-of select="secondcolor"/>
        </xsl:attribute>
      </xsl:element>

      </xsl:for-each>

 </body>
 </html>
 </xsl:template>
</xsl:stylesheet>