Photobrowser example in Xthings

Or how to add stuff without restarting

Posted by David Masters

Fri 7 Jul 2006; 11:11

Lots of things are really easy in WebObjects — complex interfaces can be put together using existing or custom components, and connected to information taken from a database. A photo-browser would be a trivial example of WebObjects’s ease of development. But what if you wanted to add such a photo-browser without changing the WebObjects application? What if you wanted a generic content management system, and wanted to be able to add new components at run time? That’s exactly what we wanted with Xthings — to have a generic content management system, but to be able to make new interface components whenever we wanted, without changing the underlying WebObjects application.

Here’s a little example of this approach — the photo-browser. There’s an example of it at The Weekend Kitchen Project. While it isn’t as polished as we’d like, the functionality is working.

In the editor, the page looks something like this:

                        <paragraph>…many times.</paragraph>
                        
                        <photo_browser>
                        
                        _<photo>
                        
                        _
                        _<media>old_fireplace.jpg</media>
                        
                        _
                        _<caption>As it was</caption>
                        
                        _
                        _<description>The room as it was, with threadbare carpet, and forty-year old wallpaper.</description>
                        
                        _</photo>
                        
                        _<photo>
                        
                        _
                        _<media>window.jpg</media>
                        
                        _
                        _<caption>Windows vista</caption>
                        
                        _
                        _<description>The windows need some loving care to get them opening again, including recording the incredibly heavy sash weights.</description>
                        
                        _</photo>
                        
                        …
                        
                        </photo_browser>
                        
                        <paragraph>Another weekend looms…</paragraph>

The markup is fairly clean — within the photo_browser we can have any number of photos, each with a reference to a media object, a caption, and a description.

Within the XSLT transform we have a chunk of code which transforms these tags into (X)HTML:

                        <xsl:template match="photo_browser">
                        
                        _<div class="photo_browser">
                        
                        _
                        _<div class="photo_text">
                        
                        _
                        _
                        _<p id="photo_picture_caption"><xsl:value-of select="./photo[1]/caption" /></p>
                        
                        _
                        _
                        _<p id="photo_picture_description"><xsl:value-of select="./photo[1]/description" /></p>
                        
                        _
                        _</div>
                        
                        _
                        _<div class="photo_thumbnails">
                        
                        _
                        _
                        _<xsl:for-each select="photo">
                        
                        _
                        _
                        _
                        _<div class="photo_thumbnail">
                        
                        _
                        _
                        _
                        _
                        _<a>
                        
                        _
                        _
                        _
                        _
                        _
                        _<xsl:attribute name="href">
                        
                        _
                        _
                        _
                        _
                        _
                        _
                        _<xsl:text>javascript:pm_showPhoto('/_resources/images/blog/</xsl:text>
                        
                        _
                        _
                        _
                        _
                        _
                        _
                        _<xsl:value-of select="$post_name" />
                        
                        _
                        _
                        _
                        _
                        _
                        _
                        _<xsl:text>/</xsl:text>
                        
                        _
                        _
                        _
                        _
                        _
                        _
                        _<xsl:value-of select="./media" />
                        
                        _
                        _
                        _
                        _
                        _
                        _
                        _<xsl:text>', '</xsl:text>
                        
                        _
                        _
                        _
                        _
                        _
                        _
                        _<xsl:value-of select="./caption" />
                        
                        _
                        _
                        _
                        _
                        _
                        _
                        _<xsl:text>', '</xsl:text>
                        
                        _
                        _
                        _
                        _
                        _
                        _
                        _<xsl:value-of select="./description" />
                        
                        _
                        _
                        _
                        _
                        _
                        _
                        _<xsl:text>');</xsl:text>
                        
                        _
                        _
                        _
                        _
                        _
                        _</xsl:attribute>
                        
                        _
                        _
                        _
                        _
                        _
                        _<img src="/_resources/images/blog/{$post_name}/thumbnails/{./media}">
                        
                        _
                        _
                        _
                        _
                        _
                        _</img>
                        
                        _
                        _
                        _
                        _
                        _</a>
                        
                        _
                        _
                        _
                        _</div>
                        
                        _
                        _
                        _</xsl:for-each>
                        
                        _
                        _</div>
                        
                        _
                        _<div class="photo_view">
                        
                        _
                        _
                        _<img name="photo_placeholder" src="/_resources/images/blog/{$post_name}/{./photo[1]/media}">
                        
                        _
                        _
                        _</img>
                        
                        _
                        _</div>
                        
                        _</div>
                        
                        </xsl:template>

When we find a match on photo_browser, we create a number of divs, including a photo_browser to wrap everything up in.

Inside photo_text we put two paragraphs, with specific styles, for the first caption and description to be inserted by default. We’re assuming we have specified a list of photos, so we follow the path ./photo[1]/caption to get this information.

Inside photo_thumbnails we go over all the photos, using for-each, creating an a link around the thumbnail img, which calls a JavaScript function pm_showPhoto, to which it passes the path to the full image, plus the caption and description strings.

Finally, in the photo_view we create an img which we default to the first image, which we find using the construct: src="/_resources/images/blog/{$post_name}/{./photo[1]/media}" — the full path being "/_resources/images/blog/" followed by the name of the particular post, followed by the image’s subpath and filename.

The resulting page is then styled, courtesy of the pm_default.css file, and the behaviour is supplied, courtesy of a trivial pm_photo_browser.js script.

So there you go — a photo-browser added to the blog, with nice clean mark-up in the content, some template rules in the XSLT file, and a little bit of CSS and JS to get it working, all without any changes (or even a restart!) to the Xthings WebObjects application.. Now to make it look a bit nicer!

Post your own comment here.

Note: be friendly! We reserve the right to moderate inappropriate or wildly off-topic comments.