Creating Pages

by Andrew Taylor <andy@benow.ca>

At its core, the BeNOW Web Framework delivers html to a browser. The html may be static, or it might be dynamically generated. Dynamically generated html is done within the framework by implementing pages. Pages are structured XSL templates which take input and deliver html. Page creation will be demonstrated in this tutorial. We'll start with a simple overview of xsl and build a simple static page. After this tutorial, you should be able to build simple pages and be ready to create service dynamic driven pages.

Contents

Creating a Page
Authoring a Page
CSS
Javascript
The Site Template
Other Considerations

Creating a Page

Pages are a XSL with a certain structure. A new page can be created by creating a new file and adding the boilerplate:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet exclude-result-prefixes="java" version="1.0"
    xmlns:java="http://xml.apache.org/xslt/java" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:include href="libutil.xsl"/>
    <xsl:include href="libcontrol.xsl"/>
    <xsl:output method="xml"/>
    <xsl:param name="user"/>
    <xsl:param name="render"/>

    <xsl:template match="index">
    <!-- insert content here -->
    </xsl:template>
</xsl:stylesheet>

or by proceeding to the web dev page (localhost:8080) page and choosing Dynamic Pages and entering a page name. Pages are created in the html/ directory within the project and can be created with full path. A value of tutorial/test.page would the file html/tutorial/test.page. When created in this manner, the boilerplate is created for you:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="2.0" 
  exclude-result-prefixes="java" 
  xmlns:java="http://xml.apache.org/xslt/java" 
  xmlns:xhtml="http://www.w3.org/1999/xhtml" 
	xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
>
  <xsl:include href="libutil.xsl"/>
  <xsl:include href="libcontrol.xsl"/>

  <xsl:param name="user"/>
  <xsl:param name="render"/>
  
  <xsl:template match="index">
  <!-- service invocation template, change and uncomment to access service
      <svc op="opName" sig="org.some.ThingService.getThings()"/>
  -->
  </xsl:template>

  <!-- do something with service xml
  <xsl:template name="opName">
  </xsl:template>
  -->
</xsl:stylesheet>

Authoring a Page

Type some HTML within the <xsl:template match="index"> of tutorial/test.page, such as:

  <xsl:template match="index">
		<b>This is a test</b>
  </xsl:template>

The page can now be viewed by hitting http://localhost:8080/tutorial/test.page. There is no caching getting in the way, so changes can be made to pages and pages refreshed.

The input XML (which is of little concern for this simple page) can be shown by dumping it in a textarea:

<textarea rows="20" cols="120"><xsl:copy-of select="."/></textarea>

or by viewing it via is via the XML viewer. From the tutorial page (localhost:8080), choose the XML link in the top left of the page or hit the Alt-X shortcut (hold down alt, shift and x). This pops open a new windows which shows the XML used in constructing the page. Use the drop down to select the XML you wish to view. This is a most useful tool when authoring pages.

That's it for a basic static page. It doesn't do much without dynamic content. Dynamic pages using the Services are covered in the Creating Service Pages tutorial.

CSS

Overriding the default styles for the site can be done by editing html/css/custom.css. This file is included in the default index.css which is included in each page request. Custom css specific to a page (say tutorial.page) can be include in a css file in the page directory with the same name as the page (ie tutorial.css). This per-page css will be automatically included in the page header.

Javascript

Custom javascript specific to a page (say tutorial.page) may also be specified in a js file in the page directory with the same name as the page (ie tutorial.js). This per-page javascript will be automatically included in the page header.

The Site Template

There's alot more on the page than This is a test, however. All the larger page definition (html, body, menu, content div, etc) is defined in the site template. All pages within the site are displayed within the template (unless otherwise specified). The template is in var/site/page.xsl. This template can be edited directly to change the feel of all pages within the site. The site template references the libpage.xsl library, found as lib/xsl/libpage.xsl. It might seem daunting, but modifying the site template is quite easy.

The logo used across all pages can be changed by replacing html/images/logo.png

Other Considerations

There are other aspecsts of content management within the web framework, which may be of interest. They are covered in the advanced tutorial and include:

The BeNOW tutorials are a work in progress. If you have any comments or suggestions, please email <andy@benow.ca>.