XsltDb javascript API

When building Rich Internet Applications you often need to access server using AJAX and show retrieved data without page reload. XsltDb allows you to create a server side handler for your javascript function and organize client/server communications. XsltDb provides a mechanism similar to DotNetNuke Client API but you put server side code into the XsltDb module. Within the XSLT you can use <mdo:callable /> tag to separate blocks that are mapped to javascript functions.

Example: List of files in portal root directory with automatic update.

<!-- Container for the flie list. -->
<div id="the-list"/>

<!-- Javascript that refreshes list if changes found. -->
<script type="text/javascript">
  function refreshList()
  {
    var html = getFiles('').trim(); <!-- empty path means root files -->
    if ( $("#the-list").html() != html )
      $("#the-list").html(html);
  }
  refreshList(); <!-- Build files when page is loading -->
  window.setInterval("refreshList()", 2000); <!-- Refresh files each 2 seconds. -->
</script>

<!-- Create a javascript function that executes the following XSLT on server. -->
<mdo:callable js="getFiles(folder)" type="text/html"> <!-- function accepts relative path to query it for file list -->
  <xsl:for-each select="mdo:portal-files(mdo:request('folder'))//file">
    {{.}}<br/>
  </xsl:for-each>
</mdo:callable>
<mdo:callable /> sections are processed before the main XSLT processor. Instead executing XSLT each section produces a javascript function with prototype specified in js attribute. And when the function is called on client, the XSLT of particular <mdo:callable />is executed. So mdo:callable section have NO access to the objects declared outside the section. Also each mdo:callable section can have it's own xsl:stylesheet element and a set of xsl:template elements according to the common XsltDb rules.

Javascript function can be executed both synchronously and asynchronously. Previous example shows us synchronous call. This is convenient if you have a quick server and fast connection. If you pass a callback after all parameters, specified in mdo:callable/@js, the function will perform XSLT asynchronously. Something like that:

<!-- Javascript that ASYNCHRONOUSLY refreshes list if changes found. -->
<script type="text/javascript">
  function refreshList()
  {
    getFiles('', function(html){ <!-- empty path means root files -->
      html = html.trim();
      if ( $("#the-list").html() != html )
        $("#the-list").html(html);
    });
  }
  refreshList(); <!-- Build files when page is loading -->
  window.setInterval("refreshList()", 2000); <!-- Refresh files each 2 seconds. -->
</script>
Parameters are passed using POST and can be accessed as ordinal query string parameter or form field – using mdo:request extension. One thing is to say here about parameters. Inside <mdo:callable />, mdo:request('parameterName') can return 'undefined', 'null', 'function' or 'object' depending of passed value. In future versions I will convert them to empty value. In case of strings, numbers and dates all values are passed without changes.

Last edited Jul 31, 2010 at 11:19 AM by findy, version 5

Comments

No comments yet.