Basic Example

  • Revision slug: The_XSLT//JavaScript_Interface_in_Gecko/Basic_Example
  • Revision title: Basic Example
  • Revision id: 183860
  • Created:
  • Creator: Fredchat
  • Is current revision? No
  • Comment /* Adding fr */

Revision Content

Basic Example

The basic example will load an XML file and apply a XSL transformation on it. These are the same files used in the Generating HTML example in the XSLT in Netscape Gecko article. The XML file describes an article and the XSL file formats the information for display.

Figure 4 : XML file

XML Document (example1.xml):

  <?xml version="1.0"?>
  <myNS:Article
                         xmlns:myNS="http://devedge.netscape.com/2002/de">
    <myNS:Title>My Article</myNS:Title>
    <myNS:Authors>
      <myNS:Author company="Foopy Corp.">Mr. Foo</myNS:Author>
      <myNS:Author>Mr. Bar</myNS:Author>
    </myNS:Authors>
    <myNS:Body>
         The <b>rain</b> in <u>Spain</u> stays mainly in the plains.
    </myNS:Body>
  </myNS:Article>

Figure 5 : XSLT Stylesheet

XSL Stylesheet (example1.xsl):

  <?xml version="1.0"?>
  <xsl:stylesheet version="1.0"
                           xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                           xmlns:myNS="http://devedge.netscape.com/2002/de">

    <xsl:output method="html" />

    <xsl:template match="/">
      <html>

        <head>

          <title>
            <xsl:value-of select="/myNS:Article/myNS:Title"/>
          </title>

          <style type="text/css">
            .myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
          </style>

        </head>

        <body>
          <p class="myBox">
            <span class="title">
              <xsl:value-of select="/myNS:Article/myNS:Title"/>
            </span> </br>

            Authors:   <br />
              <xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/>
            </p>

          <p class="myBox">
            <xsl:apply-templates select="//myNS:Body"/>
          </p>

        </body>

      </html>
    </xsl:template>

    <xsl:template match="myNS:Author">
       --   <xsl:value-of select="." />

      <xsl:if test="@company">
       ::   <b>  <xsl:value-of select="@company" />  </b>
      </xsl:if>

      <br />
    </xsl:template>

    <xsl:template match="myNS:Body">
      <xsl:copy>
        <xsl:apply-templates select="@*|node()"/>
      </xsl:copy>
    </xsl:template>

    <xsl:template match="@*|node()">
        <xsl:copy>
          <xsl:apply-templates select="@*|node()"/>
        </xsl:copy>
    </xsl:template>
  </xsl:stylesheet>

The example loads using synchronous XMLHTTPRequest both the .xsl (xslStylesheet) and the .xml (xmlDoc) files into memory. The .xsl file is then imported (xsltProcessor.importStylesheet(xslStylesheet)) and the transformation run (xsltProcessor.transformToFragment(xmlDoc, document)). This allows fetching of data after the page has been loaded, without initiating a fresh page load.

Figure 6 : Exampleview example

var xslStylesheet;
var xsltProcessor = new XSLTProcessor();
var myDOM;

var xmlDoc;

function Init(){

  // load the xslt file, example1.xsl
  var myXMLHTTPRequest = new XMLHttpRequest();
  myXMLHTTPRequest.open("GET", "example1.xsl", false);
  myXMLHTTPRequest.send(null);

  xslStylesheet = myXMLHTTPRequest.responseXML;
  xsltProcessor.importStylesheet(xslStylesheet);

  // load the xml file, example1.xml
  myXMLHTTPRequest = new XMLHttpRequest();
  myXMLHTTPRequest.open("GET", "example1.xml", false);
  myXMLHTTPRequest.send(null);

  xmlDoc = myXMLHTTPRequest.responseXML;

  var fragment = xsltProcessor.transformToFragment(xmlDoc, document);

  document.getElementById("example").innerHTML = "";

  myDOM = fragment;
  document.getElementById("example").appendChild(fragment);
}
{{ wiki.languages( { "fr": "fr/L\'interface_XSLT//JavaScript_dans_Gecko/Exemple_basique" } ) }}

Revision Source

<p>
</p>
<h2 name="Basic_Example"> Basic Example </h2>
<p>The basic example will load an XML file and apply a XSL transformation on it. These are the same files used in the <a href="en/XSLT_in_Gecko/Generating_HTML">Generating HTML</a> example in the <a href="en/XSLT_in_Gecko">XSLT in Netscape Gecko</a> article. The XML file describes an article and the XSL file formats the information for display.
</p><p><small><b>Figure 4 : XML file</b></small>
</p><p><span class="comment">XML Document (example1.xml):</span>
</p>
<pre>  &lt;?xml version="1.0"?&gt;
  &lt;myNS:Article
                         xmlns:myNS="http://devedge.netscape.com/2002/de"&gt;
    &lt;myNS:Title&gt;My Article&lt;/myNS:Title&gt;
    &lt;myNS:Authors&gt;
      &lt;myNS:Author company="Foopy Corp."&gt;Mr. Foo&lt;/myNS:Author&gt;
      &lt;myNS:Author&gt;Mr. Bar&lt;/myNS:Author&gt;
    &lt;/myNS:Authors&gt;
    &lt;myNS:Body&gt;
         The &lt;b&gt;rain&lt;/b&gt; in &lt;u&gt;Spain&lt;/u&gt; stays mainly in the plains.
    &lt;/myNS:Body&gt;
  &lt;/myNS:Article&gt;
</pre>
<p><small><b>Figure 5 : XSLT Stylesheet</b></small>
</p><p><span class="comment">XSL Stylesheet (example1.xsl):</span>
</p>
<pre>  &lt;?xml version="1.0"?&gt;
  &lt;xsl:stylesheet version="1.0"
                           xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                           xmlns:myNS="http://devedge.netscape.com/2002/de"&gt;

    &lt;xsl:output method="html" /&gt;

    &lt;xsl:template match="/"&gt;
      &lt;html&gt;

        &lt;head&gt;

          &lt;title&gt;
            &lt;xsl:value-of select="/myNS:Article/myNS:Title"/&gt;
          &lt;/title&gt;

          &lt;style type="text/css"&gt;
            .myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
          &lt;/style&gt;

        &lt;/head&gt;

        &lt;body&gt;
          &lt;p class="myBox"&gt;
            &lt;span class="title"&gt;
              &lt;xsl:value-of select="/myNS:Article/myNS:Title"/&gt;
            &lt;/span&gt; &lt;/br&gt;

            Authors:   &lt;br /&gt;
              &lt;xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/&gt;
            &lt;/p&gt;

          &lt;p class="myBox"&gt;
            &lt;xsl:apply-templates select="//myNS:Body"/&gt;
          &lt;/p&gt;

        &lt;/body&gt;

      &lt;/html&gt;
    &lt;/xsl:template&gt;

    &lt;xsl:template match="myNS:Author"&gt;
       --   &lt;xsl:value-of select="." /&gt;

      &lt;xsl:if test="@company"&gt;
       ::   &lt;b&gt;  &lt;xsl:value-of select="@company" /&gt;  &lt;/b&gt;
      &lt;/xsl:if&gt;

      &lt;br /&gt;
    &lt;/xsl:template&gt;

    &lt;xsl:template match="myNS:Body"&gt;
      &lt;xsl:copy&gt;
        &lt;xsl:apply-templates select="@*|node()"/&gt;
      &lt;/xsl:copy&gt;
    &lt;/xsl:template&gt;

    &lt;xsl:template match="@*|node()"&gt;
        &lt;xsl:copy&gt;
          &lt;xsl:apply-templates select="@*|node()"/&gt;
        &lt;/xsl:copy&gt;
    &lt;/xsl:template&gt;
  &lt;/xsl:stylesheet&gt;
</pre>
<p>The example loads using synchronous <code>XMLHTTPRequest</code> both the .xsl (<code>xslStylesheet</code>) and the .xml (<code>xmlDoc</code>) files into memory. The .xsl file is then imported (<code>xsltProcessor.importStylesheet(xslStylesheet)</code>) and the transformation run (<code>xsltProcessor.transformToFragment(xmlDoc, document)</code>). This allows fetching of data after the page has been loaded, without initiating a fresh page load.
</p><p><small><b>Figure 6 : Example<span class="comment">view example</span></b></small>
</p>
<pre>var xslStylesheet;
var xsltProcessor = new XSLTProcessor();
var myDOM;

var xmlDoc;

function Init(){

  // load the xslt file, example1.xsl
  var myXMLHTTPRequest = new XMLHttpRequest();
  myXMLHTTPRequest.open("GET", "example1.xsl", false);
  myXMLHTTPRequest.send(null);

  xslStylesheet = myXMLHTTPRequest.responseXML;
  xsltProcessor.importStylesheet(xslStylesheet);

  // load the xml file, example1.xml
  myXMLHTTPRequest = new XMLHttpRequest();
  myXMLHTTPRequest.open("GET", "example1.xml", false);
  myXMLHTTPRequest.send(null);

  xmlDoc = myXMLHTTPRequest.responseXML;

  var fragment = xsltProcessor.transformToFragment(xmlDoc, document);

  document.getElementById("example").innerHTML = "";

  myDOM = fragment;
  document.getElementById("example").appendChild(fragment);
}
</pre>
{{ wiki.languages( { "fr": "fr/L\'interface_XSLT//JavaScript_dans_Gecko/Exemple_basique" } ) }}
Revert to this revision