Server-Side Mashup Tutorial

Date: 2008-02-17
Author: Mike Amundsen


Building read/write HTTP resources w/ Exyus, while cool, is sometimes more than you need. In this article, you'll see how you can use the XmlPageResource to create a read-only (GET/HEAD) resource that can act as a 'mashup' of other content from remote sites. This allows you to publish cache-able resources that include content from multiple HTTP end-points, including your own local content.

You can view the online version of the Server-Side Mashup.


Sometimes you want to publish an HTML resource that is a 'mashup' of the contents of several other HTTP resources. A good example is the 'home' page of a web site. It might include the most recent posts to the site's news blog, the list of new members, as well as some home-page static content. Exyus makes creating these mashups easy using the XmlPageResource class. This class is designed to load a single associated XML and XSL document pair. since Exyus supports XInclude and XPointer, the source XML document can contain pointers to other remot resources.


Coding the XmlPageResource

code The first step in the process is to define the HTTP resource you plan to publish. For this demo, the URL will be /server-mashup/ serving text/html. The caching will be set to 60 seconds and we'll use validation caching to improve performance, too. That's really all we need.

Here's the entire code for the ServerMashUp class that derives from the base XmlPageResource base class.

// call up the XML and XSL set to do mashup
class ServerMashUp : XmlPageResource
    public ServerMashUp()
        this.AllowCreateOnPut = false;
        this.AllowDelete = false;
        this.AllowPost = false;
        this.ContentType = "text/html";
        this.LocalMaxAge = 60;
        this.MaxAge = 60;
        this.TemplateXml = "/server-mashup/index.xml";
        this.TemplateXsl = "/server-mashup/index.xsl";
        this.UseValidationCaching = true;

That's all we need to compile. Next we need to compose the XML and XSL documents that will produce the output we want to show to users.


The XML Content Document

XML The XML content document is the document that details all the data to display on the page. Since we are showing off the 'mashup' abilities of Exyus, our XML will contain some XInclude statements to pull data from other sources. It will also contain some inline content to show you how to that you don't need XInclude to define content.

For this demo, we'll use two remote resources: USGS Earthquake Center. Both sites offer XML-based feeds that we can use. The USGS site uses Atom and the National Geographic site uses RSS.

Below is the complete XML content document we'll need for the demo:

<?xml version="1.0" encoding="utf-8"?>
<root  xmlns:x="">
      <h1>Server-Side Mashup w/ XmlPageResource</h1>
    <x:include href="" />
    <x:include href=""/>
    <x:include href="/xcs/templates/server-mashup/notes.xml" />

Note that one of the x:include elemetns points to a local resource (notes.xml). This document contains some supporting XHTML content that will appear within the page. You can also see (in the local element) some inline XHTML content. XML content documents can contain direct content that can be rendered in the transformation. There is no requirement to use x:include to popupate your XML content documents.

Now it's time to create an XSL Transformation that will produce XHTML that can be viewed with a common browser.


The XSL Transform Document

XSL In this step, we'll create an XSL transform document that produces valid XHTML. We'll take it in a couple stages to highlight the process.

The Main Template Rule

The main template rule produces the valid HTML document, head and body along with handling the details of calling other template rules to transform the content from the XML document. Here's how the main template rule looks:

<xsl:template match="/">
      <title>Exus Server-Side Mashup</title>
      <link type="text/css" rel="stylesheet" href="/xcs/files/server-mashup/server-mashup.css"/>
      <div id="page">
        <div id="header">
          <xsl:copy-of select="//local/root"/>
            <xsl:value-of select="date:format-date(date:date-time(),'yyyy-MM-dd hh:mm:ss')"/>
        <div id="news">
            <xsl:value-of select="//nat-geo/rss/channel/title" />
            <xsl:apply-templates select="//nat-geo/rss/channel/item" />
        <div id="side-bar">
          <div id="notes">
            <xsl:copy-of select="//notes/root"/>
          <div id="quakes">
              <xsl:value-of select="//atom:feed/atom:title" />
              <xsl:value-of select="//atom:feed/atom:subtitle"/>
              <xsl:apply-templates select="//atom:entry" />
        <hr class="clear"/>

Transforming the RSS Content

The content from the National Geographic web site is in RSS format. Here's the rule to convert RSS item elements for our page:

<!-- handle national geographic items-->
<xsl:template match="nat-geo/rss/channel/item">
    <a href="{link}" title="{pubDate}" target="_blank">
      <xsl:value-of select="title"/>
    <xsl:value-of select="description" disable-output-escaping="yes"/>

Transforming the Atom Content

the content from the USGS web site is in Atom format. Here's the rule to handle Atom entry elements:

<!-- handle usgs entries -->
<xsl:template match="atom:entry">
    <a href="{//atom:feed/@xml:base}{atom:link[@rel='alternate']/@href}" title="{atom:updated}" target="_blank">
      <xsl:value-of select="atom:title"/>

That's really all there is. Some additional preamble in the XSL document has been left out here, but you can check out the complete XSL document online.

The only thing left is to spruce up the display using some CSS.


Adding CSS Styles

styles We could stop at this point. The demo does what it puports to do - combining multiple HTTP end-points into a single resource. But we must admit, the page looks pretty ugly. Let's add a bit of CSS to give it a better loo-and-feel.

Below is the complete CSS file needed to update the display:

  clear: both;
  visibility: hidden;
h1, h2, h3, h4, p
  margin: 0;
  padding: 0;
h2, h3, h4
  margin-top: .5em;
  font-weight: bold;
  margin-bottom: .2em;
  margin-bottom: .5em;
  margin-left: .3em;
  margin-right: .3em;
  border: 0;
  margin: 0;
  padding: 0;
  list-style-position: inside;
  background-color: silver;
  border: 1px solid black;
  padding: .3em;
  margin: -.3em;
  width: 760px;
  margin: auto;
  background-color: #e6e6e6;
  border: 1px solid silver;
  padding: .3em;
  width: 400px;
  float: left;
  width: 300px;
  float: right;
  border: 1px solid silver;
  padding: 0 .3em;
#notes h2

And that's the end. Not so bad, eh?



In this article, you learned how to use the XmlPageResource class to build a 'server-side mashup' that includes content from multiple remote (and local) HTTP end-points. You learned how to use the x:include element in the XML Content Document and how to build the XSL Transform Document to convert the imported content into valid XHTML to display to common browsers. Finally, you added a bit of CSS to improve the look of the demo page.


About the Author

Mike Amundsen Mike Amundsen lives and works as a contract programmer in Kentucky, USA. He currently spends most of his time creating and supporting large-scale web sites running under Windows and ASP.NET. In the past, he spent quite a bit of time as a trainer/speaker and was involved in the writing of several books on programming with Microsoft technologies.