Transformasjoner på klienten

Hva

I denne modulen skal vi laste opp en XML-fil, som DOM og som text. Videre skal vi laste opp to transformasjoner. Så skal vi la brukeren bestille transformasjon og utføre denne bestillingen, transformasjonen, på klienten.

Transformasjon på klienten

Vi skal bruke den samme boklista som den vi brukte i Basis : bokliste.xml

Koden blir ganske komplisert fordi IE ikke køser problemet på samme måte som de fleste andre nettlesere. Situasjonen blir ikke bedre ved at noen løsninger kommer (IE7) og forsvinner igjen (IE9). Det er all grunn til sjekke status.

Her rapporterer vi hva vi har lastet opp når siden lastes:

Loaded:

De enkelte komponentene vi laster og som er tilgjengelig for senere valg:

// documents (DOM-objects)
var XML_DOM;
var XSL_LIST;
var XSL_TABLE;
var XSL_LIST_PARAM;
// strings used when transforming in IE
var XML_STR;
var TRANS_LIST_STR;
 
// load a dom-obj or a string
// simple AJAX-access, syncronized
function getIt(address,targetNodeId,asText){
    xhttp=new XMLHttpRequest();
    xhttp.open("GET",address,false);
    xhttp.send("");
    // report load
    elt=document.getElementById(targetNodeId);
    elt.innerHTML=elt.innerHTML+"\n"+address+" : "+xhttp.statusText;
    if(xhttp.status!=200)
        return null;
    if(asText)
        return xhttp.responseText;
    else
        return xhttp.responseXML;    
    }
 
// set up DOM's and strings so they are ready
// called from HTML-page when loaded
// could be simplified to avoid double load
function init(){
    // DOM
    XML_DOM=getIt("bokliste.xml","loaded");    
    XSL_LIST=getIt("tolisteSelect.xslt","loaded");
    XSL_TABLE=getIt("totableSelect.xslt","loaded");
    
    //STR
    XML_STR=getIt("bokliste.xml","loaded",true);
    TRANS_LIST_STR=getIt("tolisteSelect.xslt","loaded",true);
    TRANS_TABLE_STR=getIt("totableSelect.xslt","loaded",true);
 }

En av to

I det første eksempelet lar vi brukeren foreta en av to enkle transformasjoner som produserer et HTML-fragment med en div som inneholder enten en liste av boktitler eller en tabell med alle bøkene:

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="xml" 
   omit-xml-declaration="yes"
   indent="yes" 
   encoding="utf-8"/>
<xsl:param name="category" select="'*'"/>   
   
  <xsl:template match="/">
    <div>
        <h1>Bokliste</h1>
        <ul>
        <xsl:apply-templates select="booklist/book[category=$category or $category='*']"/>
        </ul>
    </div>
  </xsl:template>
  
  <xsl:template match="//book">
          <li>
            <xsl:value-of select="title"/>
          </li>
  </xsl:template>
  
</xsl:stylesheet>

eller

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="xml" 
        omit-xml-declaration="yes"
        indent="yes" 
        encoding="utf-8"/>
<xsl:param name="category" select="'*'"/>   
<xsl:template match="/">
<table>
        <xsl:apply-templates select="booklist/book[category=$category or $category='*']"/>
</table>
</xsl:template>
 
<xsl:template match="//book">
   <tr>
   <td><xsl:value-of select="title"/></td>
   <td><xsl:value-of select="category"/></td>
   <td><xsl:value-of select="author"/></td>
   </tr>
</xsl:template>
</xsl:stylesheet>

Merk at begge transformasjonene er laget slik at de har en "wildcard" parameter * som fører til at vi velger alle bøkene.

<xsl:param name="category" select="'*'"/>
...
<xsl:apply-templates 
  select="booklist/book[category=$category or $category='*']"/>

Javascriptkoden som drar transfomasjonen er slik:

// perform simple non-paramter transform and
// display result
function displayResult(transDOM,transSTR,eltID)
{
    if(typeof (XSLTProcessor) != "undefined"){
        // Mozilla, Firefox, Opera, etc.
        xsltProcessor=new XSLTProcessor();
        try{      
            xsltProcessor.importStylesheet(transDOM);
            resultDocument = xsltProcessor.transformToFragment(XML_DOM,document);
            ser=new XMLSerializer();
            document.getElementById(eltID).innerHTML=
                ser.serializeToString(resultDocument);
            }
        catch(e){
            document.getElementById(eltID).innerHTML=e;
        }
        return
    }
    // IE at least some versions of it
    if (window.ActiveXObject || "ActiveXObject" in window ){// code for IE
        if(typeof (transformNode) != "undefined"){
            ex=XML_DOM.transformNode(transDOM);
            document.getElementById(eltID).innerHTML=ex;
            return;
            }
        try {
            var xslt = new ActiveXObject("Msxml2.XSLTemplate");
            // transformation from string
            var xsldoc = new ActiveXObject("Msxml2.FreeThreadedDOMDocument");
            xsldoc.async = false;
            xsldoc.loadXML(transSTR); 
            xslt.stylesheet = xsldoc;
            // XML from string 
            var xmldoc = new ActiveXObject("Msxml2.DOMDocument");
            xmldoc.async = false;
            xmldoc.loadXML(XML_STR); 
           
            var proc = xslt.createProcessor();
            proc.input = xmldoc;
            // do the transformation
            proc.transform();
            // show the result
            document.getElementById(eltID).innerHTML= proc.output;
        } catch (ex) {alert(ex)}         
    }
    else
        document.getElementById(eltID).innerHTML="gir opp, ingen transformasjon";
}

Parametere

I det andre eksempelet lar vi brukeren foreta en liste-transformasjon med bokkategori som parameter.

Javascriptkoden som drar transfomasjonen med parameter er slik:

// perform paramter transform and
// display result
function displayResultWithParam(transDOM,transSTR,eltID,param)
{
    if(typeof (XSLTProcessor) != "undefined"){
        // Mozilla, Firefox, Opera, etc.
        xsltProcessor=new XSLTProcessor();
        try{      
            xsltProcessor.importStylesheet(transDOM);
            xsltProcessor.setParameter(null, "category", param);
            resultDocument = xsltProcessor.transformToFragment(XML_DOM,document);
            ser=new XMLSerializer();
            // ok since we have "root"-doc
            document.getElementById(eltID).innerHTML=ser.serializeToString(resultDocument);
      }
      catch(e){
            document.getElementById(eltID).innerHTML=e;
      }
      return;
    }
    // IE, at least some versions of it
    if (window.ActiveXObject || "ActiveXObject" in window){// code for IE
        try {
            var xslt = new ActiveXObject("Msxml2.XSLTemplate");
            // transformation from string
            var xsldoc = new ActiveXObject("Msxml2.FreeThreadedDOMDocument");
            xsldoc.async = false;
            xsldoc.loadXML(transSTR); 
            xslt.stylesheet = xsldoc;
            // XML from string 
            var xmldoc = new ActiveXObject("Msxml2.DOMDocument");
            xmldoc.async = false;
            xmldoc.loadXML(XML_STR); 
           
            var proc = xslt.createProcessor();
            proc.input = xmldoc;
            // set parameter
            proc.addParameter("category", param);
            // do the transformation
            proc.transform();
            // show the result
            document.getElementById(eltID).innerHTML= proc.output;
        } catch (ex) {alert(ex)}         
    }
    else
        document.getElementById(eltID).innerHTML="gir opp, ingen transformasjon";
}

Kategori: