tags:

views:

83

answers:

1

I recently asked a question about using XSL/t for creating a site layout and child pages Here.. Where the layout would decorate the child page. I want to expand on that idea and come up with SiteMesh like functionality. Note that I'm going to have a very small number of xsl layout files, most of my xsl files should be for the child pages.. The layout is fairly basic, it includes a header, a main menu, a footer, a body with a content div under it. SiteMesh allows you to define template files as a fairly standard html file, and then child pages which will override sections of the parent. For instance, here is a basic template (decorator) for sitemesh:

<%@ taglib prefix="decorator" uri="http://www.opensymphony.com/sitemesh/decorator" %>

<head>
  <title>
    <decorator:title default="SiteMesh Tutorial Example" /> - Site Title
  </title>
  <style type="text/css">@import "css/global.css";</style>
  <decorator:head />
  <body>
    <div id="header">
      <h2><a href="http://www.my-site.com/"&gt;Mysite.com&lt;/a&gt; goes here</h2>
    </div>
    <div id="content">
      <decorator:body />
    </div>
  </body>
</html>

And then here would be an example of a child page:

<html>
  <head>
    <title>Child Page</title>
    <style type='text/css'> 
     p { margin: 10 }    
    </style>
  </head>
  <body>
    Content Goes here
  </body>
</html>

Once the decorator is applied to the child page, the result contains the body of the child page where the decorator:body was at, and the decorator:head gets replaced as well, etc.. Pretty simple how it works and fairly effective way of organizing a site.

So now lets say we are using XSL/T instead and we want to use a similar structure where we don't keep redefining what the layout looks like, rather we define that hopefully only once (or maybe a few times for pages that aren't very similar), and we replace out sections if the child template has them. Sounds like this would be very simple, but the problem is that the data backing this site will look like (not really a blog site but just as an example of what i'm dealing with)

<xml>
<section>Blogs</section>
<page>UserBlogs</page>
<data>
 <blogs>
   <blog>
     <title>First Blog</title>
     <author>John Doe</author>
     <description>...</description>
   </blog>
 </blogs>
</data>
</xml>

So now Lets say I have a master template like this:

<html>
<head>
  <title><!-- replace this with child title --> - Site Title</title>
  <script src="common-scripts.js"></script>
  <style type="text/css">@import "common.css" </style>
  <!-- insert everything in the child <head> here except the title -->

</head>
<body>
  <div id="header">Header/log that stuff here</div>
  <div id="menu">
     <ul><li><a href="#">Cat 1</a></li><li><a href="#">Cat 2</a></li></ul>
  </div>
  <div id="content">
    <!-- replace this with everything between <body>...</body> in the child -->
  </div>
  <div id="footer">My Site, copyright, bla bla</div>
</body>
</html>

So then what I want to do is take that xml from above (the one about blogs) and apply that to my child page, and take the result of that transformation and apply it to my master template (which will copy/apply elements as needed). I'm not sure if there is a way to do this in a single transformation. Currently the architecture is such that I'm provided with the xml as shown, and I have to construct that into a page.. I thought maybe I could have the master template include the child template, then use xsl:call-template wrapped in an xsl:variable declaration to capture the results of the child template on the current xml.. I need to somehow take the results of that transformation to replace the master templates title/header/content section.

Any idea how this can be done?

I see on this site: http://www.devguru.com/technologies/xslt/quickref/xslt_element_calltemplate.html that you can capture the results of a xsl:call-template in the xsl:variable declaration I'm just confused how you can then use that data besides ouputing it..

Any help would be appreciated

+1  A: 

With this input:

<xml>
    <section>Blogs</section>
    <page>UserBlogs</page>
    <data>
        <blogs>
            <blog>
                <title>First Blog</title>
                <author>John Doe</author>
                <description>...</description>
            </blog>
        </blogs>
    </data>
</xml>

This "master.xml" document:

<html>
    <head>
        <title><!-- replace this with child title --> - My Site</title>
        <script src="common-scripts.js"></script>
        <style type="text/css">@import "common.css" </style>
        <!-- insert everything in the child <head> here except the title -->
    </head>
    <body>
        <div id="header">Header/log that stuff here</div>
        <div id="menu">
            <ul>
                <li>
                    <a href="#">Cat 1</a>
                </li>
                <li>
                    <a href="#">Cat 2</a>
                </li>
            </ul>
        </div>
        <div id="content">
            <!-- replace this with everything between 
                                   <body>...</body> in the child -->
        </div>
        <div id="footer">My Site, copyright, bla bla</div>
    </body>
</html>

This "child.xml" document:

<html>
    <head>
        <title>Child Page</title>
        <style type='text/css'>p { margin: 10 }</style>
    </head>
    <body>
        <h3 id="title">#</h3>
        <dl>
            <dt id="author">#</dt>
            <dd id="description">#</dd>
        </dl>
    </body>
</html>

This stylesheet:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"&gt;
    <xsl:output method="xml"/>
    <xsl:variable name="child" select="document('child.xml')"/>

    <!-- From here to next comment could be in other stylesheet
         like "master.xsl" and included with "xsl:include"      -->

    <xsl:variable name="master" select="document('master.xml')"/>
    <xsl:template match="@*|node()">
        <xsl:param name="context"/>
        <xsl:copy>
            <xsl:apply-templates select="@*|node()">
                <xsl:with-param name="context" select="$context"/>
            </xsl:apply-templates>
        </xsl:copy>
    </xsl:template>
    <xsl:template match="/">
        <xsl:apply-templates select="$master/*">
            <xsl:with-param name="context" select="/"/>
        </xsl:apply-templates>
    </xsl:template>
    <xsl:template match="div[@id='content']">
        <xsl:param name="context"/>
        <xsl:copy>
            <xsl:apply-templates select="@*"/>
            <xsl:for-each select="$context/xml/data/blogs/blog">
                <xsl:apply-templates select="$child/html/body/node()">
                    <xsl:with-param name="context" select="."/>
                </xsl:apply-templates>
            </xsl:for-each>
        </xsl:copy>
    </xsl:template>
    <xsl:template match="title/comment()">
        <xsl:param name="context"/>
        <xsl:value-of select="$context/xml/page"/>
    </xsl:template>
    <xsl:template match="head/comment()">
        <xsl:param name="context"/>
            <xsl:apply-templates 
                            select="$child/html/head/node()[not(self::title)]">
                <xsl:with-param name="context" select="$context"/>
            </xsl:apply-templates>
    </xsl:template>

    <!-- Here ends the posible "master.xsl" to be included -->

    <xsl:template match="@id[.='title']|@id[.='author']|@id[.='description']"/>
    <xsl:template match="*[@id='title']/text()">
        <xsl:param name="context"/>
        <xsl:value-of select="$context/title"/>
    </xsl:template>
    <xsl:template match="*[@id='author']/text()">
        <xsl:param name="context"/>
        <xsl:value-of select="$context/author"/>
    </xsl:template>
    <xsl:template match="*[@id='description']/text()">
        <xsl:param name="context"/>
        <xsl:value-of select="$context/description"/>
    </xsl:template>
</xsl:stylesheet>

Output:

<html>
    <head>
        <title>UserBlogs - My Site</title>
        <script src="common-scripts.js"></script>
        <style type="text/css">@import "common.css" </style>
        <style type="text/css">p { margin: 10 }</style>
    </head>
    <body>
        <div id="header">Header/log that stuff here</div>
        <div id="menu">
            <ul>
                <li>
                    <a href="#">Cat 1</a>
                </li>
                <li>
                    <a href="#">Cat 2</a>
                </li>
            </ul>
        </div>
        <div id="content">
            <h3 id="title">First Blog</h3>
            <dl>
                <dt id="author">John Doe</dt>
                <dd id="description">...</dd>
            </dl>
        </div>
        <div id="footer">My Site, copyright, bla bla</div>
    </body>
</html>

Note: This is just an example. Could be better. The pricipal issues about population pattern: the logic is trasverse the layout, not the data, mostly with identity transform; you need to have some anchors into the layout to reference the data (this is wide open to improve, as example, by own namespace, by specific pattern like id="include:some-data", etc.); you need to remove those anchor if they are @id; for text replacement use dummy text nodes in layout, this simplifies the content template with just xsl:value-of; "poor man's tunnel pattern" (Dimitre calls) for passing data context, mostly because iterated population. Other issues: when dealing with XHTML (better than HTML) take care of: DOCTYPE mostly for IE7 (loose improved CSS handling, otherwise), empty elements declared in DTD (wrong behavior with <br /> otherwise). Be free to check the site I've posted earlier to see how I'd handled those.

Alejandro