[XSL-LIST Mailing List Archive Home] [By Thread] [By Date]

[xsl] xslt-events and questions


Subject: [xsl] xslt-events and questions
From: Hermann Stamm-Wilbrandt <STAMMW@xxxxxxxxxx>
Date: Tue, 10 Apr 2012 18:27:19 +0200

Hello,

I know of Michael's talk on "XSLT in the browser (XMLPrague 2011)":
http://www.youtube.com/watch?v=_eA6Br1qPA8

Saxon CE provides some features allowing to do XSLT processing based on
user
events and even allows running XSLT 2.0 on mobile devices.


I just want to do XSLT processing in the browser with events (like "onLoad"
or just '<a href="...">...</a>') and can live with a solution working fine
on
the big5 browsers (Chrome, Firefox, Internet Explorer, Opera, Safari).


I need a solution providing the XML to be transformed dynamically.
Why do I need that and cannot live with xml-stylesheet PI in stored XML
files?

For example I do want to do a game of (Peg) solitair in the browser by
XSLT:
http://en.wikipedia.org/wiki/Peg_solitaire

Generating initial position from an XML configuration file is not difficult
(see http://stamm-wilbrandt.de/en/xsl-list/solitair0/img0.gif).

Now selecting a piece to move would mark that piece in a different color,
eg. http://stamm-wilbrandt.de/en/xsl-list/solitair0/img1.gif .

Then clicking on an empty field to complete the move would result in
http://stamm-wilbrandt.de/en/xsl-list/solitair0/img2.gif .

A standard XML file approach with xml-stylesheet runs into this problem:
Even not taking the marking color into account we have 33 fields, and each
of those can have a peg on it or not resulting in 2^33 or more than 8
billion
possible configurations.
I do not have that much webspace on my private web server ... ;-)


So my idea is to have a link associated with a click for each possible
field.
The stylesheet will
* take the XML configuration to display
* generate HTML page in the browser
* display the board as defined by the configuration XML
* provide hyperlinks for each field
* those hyperlinks generate dynamic XML based on the associated field
* when clicking on a field, the dynamic XML will be transformed for new
display

First I thought on a form-post or XMLHttpRequest approach.
But for those solutions a "backend service" is needed to just return the
XML
hidden in the sent data which seems to be ugly.

Because the standard xml-stylesheet approach was not possible by argument
from
above I remembered the Javascript snippets I used in
"[xsl] support of stylesheet embedding for ALL browsers" posting:
http://www.biglist.com/lists/lists.mulberrytech.com/xsl-list/archives/201002/msg00301.html

Basically these were:
//  "DOMParser.parseFromString() in Explorer"
//  http://www.van-steenbeek.net/?q=explorer_domparser_parsefromstring

//  "Transforming XML to XHTML in the Browser"
//  http://www.w3schools.com/xsl/xsl_client.asp
function loadXMLDoc(dname)

//  "Transforming XML to XHTML in the Browser" (modified)
//  http://www.w3schools.com/xsl/xsl_client.asp
function displayResult(xslURL, xmlStr)


So just for demoing the (new?) approach (xslt-events) I use simple
stylesheet
"squares.ext.xsl" to generate a list of square values for the input values:

Input "<ns> <n>2</n> <n>3</n> </ns>" will be transformed to
output "2<sup>2</sup>=4<br>3<sup>2</sup>=9<br>".

You can find the demo here:
http://stamm-wilbrandt.de/en/xsl-list/solitair0/xslt-events.html

Clicking on "doit1" link will execute squares.ext.xsl for 6 and 5, clicking
on "doit2" will do the same for 2, 3 and 4.


I tested this approach successfully with all big5 browsers.
I know that I have to rely on the Javascript XSLT engines, not the
browser's.


I have some questions wrt the xslt-events.* files and links below:

1) Can you think of another approach without the need of a "backend
service"?

2) Is there something which can be done to avoid the need to generate
&quot;
   in doit2 sample below (because " and ' are already used by the
Javascript
   function call in the href)?

3) In DataPower XSLT Processor we have a proprietary extension element
   dp:url-open which allows tho post XML data like this:

   <dp:url-open target="someURL" response="someType">
     <!-- XML data here will be posted to "someURL" -->
   </dp:url-open>

   How close can we come to this with xslt-events Javascript approach of
   <a href="javascript:displayResult(xslURL, xmlString)">...</a> ?



This is http://stamm-wilbrandt.de/en/xsl-list/solitair0/xslt-events.html:
-------------------------------------------------------------------------
<!--
  xslt-events.html (4/10/2012)
-->
<html>
<head>
<script src="xslt-events.js" type="text/javascript"></script>
</head>
<body>
<ul>
<li/><a href="javascript:displayResult('squares.ext.xsl','
<ns><n>6</n><n>5</n></ns>
')">doit1</a>
<li/><a href="javascript:displayResult('squares.ext.xsl','
<ns test=&quot;abc&quot;><n>2</n><n>3</n><n>4&lt;/n></ns>
')">doit2</a>
</ul>
</body>
</html>


This is http://stamm-wilbrandt.de/en/xsl-list/solitair0/xslt-events.js:
-----------------------------------------------------------------------
// xslt-events.js (4/10/2012)

//  "DOMParser.parseFromString() in Explorer"
//  http://www.van-steenbeek.net/?q=explorer_domparser_parsefromstring
if(typeof(DOMParser) == 'undefined') {
  DOMParser = function() {}
  DOMParser.prototype.parseFromString = function(str, contentType) {
    if(typeof(ActiveXObject) != 'undefined') {
      var xmldata = new ActiveXObject('MSXML.DomDocument');
      xmldata.async = false;
      xmldata.loadXML(str);
      return xmldata;
    } else if(typeof(XMLHttpRequest) != 'undefined') {
      var xmldata = new XMLHttpRequest;
      if(!contentType) {
        contentType = 'application/xml';
      }
      xmldata.open('GET', 'data:' + contentType + ';charset=utf-8,' +
encodeURIComponent(str), false);
      if(xmldata.overrideMimeType) {
        xmldata.overrideMimeType(contentType);
      }
      xmldata.send(null);
      return xmldata.responseXML;
    }
  }
}

//  "Transforming XML to XHTML in the Browser"
//  http://www.w3schools.com/xsl/xsl_client.asp
function loadXMLDoc(dname)
{
  if (window.XMLHttpRequest)
  {
    xhttp=new XMLHttpRequest();
  }
  else
  {
    xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xhttp.open("GET",dname,false);
  xhttp.send("");
  return xhttp.responseXML;
}

//  "Transforming XML to XHTML in the Browser" (modified)
//  http://www.w3schools.com/xsl/xsl_client.asp
function displayResult(xslURL, xmlStr)
{
  // get parser
  var parser = new DOMParser();

  xml = parser.parseFromString(xmlStr, "text/xml");
  xsl = loadXMLDoc(xslURL);

  with (document) {open(); write("<div id='example'/>"); close(); }

  // code for IE
  if (window.ActiveXObject)
  {
    result=xml.transformNode(xsl);

    // display result
    document.getElementById("example").innerHTML=result;
  }
  // code for Mozilla, Firefox, Opera, etc.
  else if (document.implementation)
  {
    xsltproc = new XSLTProcessor();
    xsltproc.importStylesheet(xsl);
    result = xsltproc.transformToFragment(xml, document);

    document.getElementById("example").appendChild(result);
  }
}


Mit besten Gruessen / Best wishes,

Hermann Stamm-Wilbrandt
Level 3 support for XML Compiler team and Fixpack team lead
WebSphere DataPower SOA Appliances
https://www.ibm.com/developerworks/mydeveloperworks/blogs/HermannSW/
----------------------------------------------------------------------
IBM Deutschland Research & Development GmbH
Vorsitzende des Aufsichtsrats: Martina Koederitz
Geschaeftsfuehrung: Dirk Wittkopp
Sitz der Gesellschaft: Boeblingen
Registergericht: Amtsgericht Stuttgart, HRB 243294


Current Thread
Keywords