StaticMesh Tutoral

This tutorial demonstrates how you can use StaticMesh with Ant to skin html pages. It takes you through the process of installing StaticMesh, defining a page layout template (a site skin), creating some sample html files, creating the Ant build script and then applying the page template to the sample html pages.

We assume that you have a basic knowledge of creating and modifying Ant build files.

The source files for this tutorial are located in the standard StaticMesh distribution, under the tutorial folder. In the tutorial folder you will find the source template files and the ant build file.

Installing Static Mesh

You will need StaticMesh, and Ant installed on your system, preferably the latest versions.

For instructions on installing Ant consult the Apache Ant User Manual.

To install StaticMesh:

* Obtain the latest StaticMesh release from here.

* Unzip the StaticMesh release. If using Winzip ensure that Use folder names is enabled so that the correct folder hierarchy is created.

Ok, lets get started...

Create A Sample HTML file

Let's start by creating a simple html page that we would like to skin. As you can see, it's a standard html file consisting of a heading, and two unremarkable paragraphs.

<html>
<head>
    <title>StaticMeshSample Home Page</title>
    <meta name="description" content="A static mesh sample page">
</head>
<body>
    <h1>StaticMesh Demo</h1>
    <p>
        This is a simple two column layout with a left menu
        box.
        Based on the demo on the <a href="http://bluerobot.com
        /web/layouts/layout1.html">BlueRobot</a> web site.
        Check it out, we really liked it.
    </p>
    <p>
        As you can see, it contains simple html. Staticmesh
        will merge it with the chosen page layout template,
        appling the appropriate stylesheets... You should see
        this with a StaticMesh header and left-hand menu...
    </p>
</body>
</html>

Defining A Web Page Template

The following page layout template is used to skin pages based on the BlueRobot two column layout style.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
    $!headerContent
    <style type="text/css" media="all">@import "layout1.css";</style>
</head>

<body>
    <div id="Header">
        <a href="http://pols.co.uk/downloads/static-mesh/index.html"
        title="StaticMesh">StaticMesh</a>
    </div>

    <div id="Content">
        
        #parse($innerTemplate)
    </div>

    #parse("fragments/menu.vm")

</body>
</html>

StaticMesh uses the Apache Velocity templating engine. You can use any Velocity Template Language (VTL) commands in your layout templates. Check it out for more information.

When StaticMesh applies the layout template to an html source to create a skinned html file. It simply places the contents of the original html body in the $innerTemplate variable and the original header in the $headerContent variable. That's all there is to it!

StaticMesh Variables

StaticMesh has a number of custom variables that can be used in the HTML pages and templates (we have already seen some of these in action).

Variable	Description
$headerContent	Contains the html header from the source page. Used in the template to mixin the original header with the template's header. See example above.
$innerTemplate	The contents of the source page's body. See example above.
$page	The sitemesh FastPage object - if you want to be able to make use of any Sitemesh features. This makes StaticMesh behave exactly like SiteMesh. For example: to access the title of a page just do $page.title.
$currentDate	The date the page was created (You can customize the format using the dateFormat ant task attribute)

Custom Decorators

Coming soon...

Controlling StaticMesh from Ant

Once we have some html and a layout, we can use Ant to create the resulting html files:

This tells StaticMesh to skin all the velocity ("vm") files in the src/templates/pages folder using the layouts/default.vm skin, placing the resulting html in the target/webapp/ folder.

We are now ready to skin our pages by running:

ant pagegen

You can customize the ant task using the following attributes:

Attribute	Description
skin	The look and feel you want to apply
destDir	Where do you want the generated html to be created?
logDir	Where do you want the task log file to be created?
templateDir
verbose	Do you want staticmesh to report progress to the commandline? Values are "true" or "false"
inputEncoding	What's the character encoding of the source page?
outputEncoding	What's the character encoding of the generated pages?
dateFormat	What format should the $currentDate variable have?
config	Which staticmesh configuration file should be used? This defines which decorators are going to be used.