Load an XML File at Runtime with Markup

THESE PAGES ARE STILL UNDER CONSTRUCTION AND DO NOT NECESSARELY REFLECT THE CURRENT VERSION OF TÓPICO

This tutorial is a follow up to this one: Load an External XML File at Runtime. It shows how to replace the script that would be embedded in the topic with markup that can be labeled in the editor through XStandard markers ans transformed into the actual script during the XSLT steps of the publishing process.

Before applying the following steps, make sure you've read and understood this tutorial:Load an External XML File at Runtime

Tip

Note that most of this tutorial has been integrated into the default Tópico collection and you can add the resulting markup through the Insert button

Define the desired markup

The first thing to do is to figure out what markup we want to use for this feature. I've decided on the following format.

HTML
<div class="runtime_include">
 <div class="runtime_include_id">runtime_include_01</div>
 <div class="runtime_include_xml">//path_to_xml_file_http_or_network</div>
 <div class="runtime_include_xpath">/</div>
 <div class="runtime_include_xsl">//path_to_xsl_file_http_or_network</div>
</div>

The above markup will now be styled in the editor and transformed through the publishing template.

Define the XStandard maker labels

To display the above markup to the author in such a way that makes a bit more sense to him/her. Let's add the following CSS rules to the styles_editor.css file.

CSS
/* runtime include */
div.runtime_include {margin:4px; -xs-marker-label:attr(class);}
div.runtime_include_id {margin:2px; -xs-marker-label:"id";}
div.runtime_include_xml {margin:2px; -xs-marker-label:"xml";}
div.runtime_include_xpath {margin:2px; -xs-marker-label:"xpath";}
div.runtime_include_xsl {margin:2px; -xs-marker-label:"xsl";}

Using the above CSS custom rules, the markup will result in the following display, which is much better for an author than a single script icon (see image on the right).

The only thing left to do is to transform the markup into the script shown in the Load an External XML File at Runtime tutorial. Let's do just that.

Add the XSLT tempate to create the script

To transform the markup into a script element in the published page, we'll use to following XSLT template.

XSLT
<!-- runtime include template -->
<xsl:template match="xhtml:div[@class='runtime_include']" mode="import">
 <div class="section">
  <xsl:element name="div">
   <xsl:attribute name="id">
    <xsl:value-of select="xhtml:div[@class='runtime_include_id']"/>
   </xsl:attribute>
  </xsl:element>
  <xsl:choose>
   <xsl:when test="xhtml:div[@class='runtime_include_xsl']">
    <script lang="JavaScript" type="text/javascript">
    <xsl:text>TransformXmlFileInElementId("</xsl:text> <xsl:value-of select="xhtml:div[@class='runtime_include_xml']"/><xsl:text>", "</xsl:text>
    <xsl:value-of select="xhtml:div[@class='runtime_include_xpath']"/><xsl:text>", "</xsl:text>
    <xsl:value-of select="xhtml:div[@class='runtime_include_id']"/><xsl:text>", "</xsl:text>
    <xsl:value-of select="xhtml:div[@class='runtime_include_xsl']"/>
    <xsl:text>")</xsl:text>
    </script>
   </xsl:when>
   <xsl:otherwise>
    <script lang="JavaScript" type="text/javascript">
    <xsl:text>TransformXmlFileInElementId("</xsl:text> <xsl:value-of select="xhtml:div[@class='runtime_include_xml']"/><xsl:text>", "</xsl:text>
    <xsl:value-of select="xhtml:div[@class='runtime_include_xpath']"/><xsl:text>", "</xsl:text>
    <xsl:value-of select="xhtml:div[@class='runtime_include_id']"/>
    <xsl:text>")</xsl:text>
    </script>
   </xsl:otherwise>
  </xsl:choose>
 </div>
</xsl:template>

The above template basically works like this:

  1. It wraps the whole block into a <div class="section">;
  2. It then creates the output div where the XML file will be loaded/transformed;
  3. It then create the appropriate script tag depending on the presence of the "runtime_include_xsl" element in the markup.

With this method, it's possible to hide the actual script from the author and eventually provide other processing options based on the markup we defined in this tutorial.

THESE PAGES ARE STILL UNDER CONSTRUCTION AND DO NOT NECESSARELY REFLECT THE CURRENT VERSION OF TÓPICO

66 / 194