Load an XML File at Runtime with Markup

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.

<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.

/* 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.

<!-- 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.