An XForms case study, part 1 (look and feel)

[16 January 2012]

In a previous post, I mentioned the evaluation forms we put together for the Balisage conference last year, using XForms. This is the first of a series of posts discussing some aspects of the design and development in more detail.

One of the first requirements for these forms was that if at all possible they should have the same look and feel as the pages on the main conference site. In XForms, this turns out to be remarkably simple: XForms is designed to be styled using whatever styling mechanisms are usual for the host document vocabulary. In the case of XForms in XHTML, running in a Web browser, that means the form can be styled using CSS. And because the form is embedded in a normal XHTML document, any necessary logos or graphic apparatus can be embedded in the normal way.

The forms pointed to http://balisage.blackmesatech.com/ do three things to maintain the Balisage look and feel:

  • They point to an appropriate CSS stylesheet, in the usual way.

    <html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:xf="http://www.w3.org/2002/xforms"
    xmlns:xhtml="http://www.w3.org/1999/xhtml"
    xhtml:dummy="Help the poor user of Mozilla
    evade the Mozilla namespace curse"
    ...
    >
    <head>
    <title>Balisage Speaker/Presentation Feedback</title>
    
    ...
    
    <link href="lib/feedback.css" rel="stylesheet" />
    
    ...
    

    [The xhtml:dummy attribute is a work-around that helps XSLTForms compensate for the bug in Mozilla’s XSLT implementation: Mozilla does not support the XPath namespace axis, so the only way XSLTForms can discover what namespaces are in scope is to walk around the tree collecting namespace bindings from elements and attributes in the document. The value of the attribute doesn’t matter; I use a value that reminds me of why I have to have the attribute there in the first place.]

  • They use the same overall document structure as the main Balisage pages: three divs of class header, mainbody, and footer, respectively,
    with the second in turn divided into navbar and body.

    <body>
    
    <div class="header">
    ...
    </div>
    
    <div class="mainbody">
    <div class="navbar">
    ...
    </div>
    
    <div class="body">
    ...
    </div>
    </div>
    
    <div class="footer">
    <hr />
    <p>Last revised 26 July 2011.
    Copyright &#169; 2011 <a
    href="https://blackmesatech.com/">Black Mesa
    Technologies LLC</a>.
    <a rel="license"
    href="http://creativecommons.org/licenses/by-sa/3.0/">
    <img alt="Creative Commons License"
    style="border-width:0"
    src="http://i.creativecommons.org/l/by-sa/3.0/88x31.png"
    /></a>
    <br/>
    The <span xmlns:dct="http://purl.org/dc/terms/"
    href="http://purl.org/dc/dcmitype/InteractiveResource"
    property="dct:title"
    rel="dct:type">Balisage 2011
    Feedback Forms</span>
    by <a xmlns:cc="http://creativecommons.org/ns#"
    href="http://balisage.blackmesatech.com/2011/feedback/"
    property="cc:attributionName"
    rel="cc:attributionURL">Black Mesa Technologies
    LLC</a>
    are licensed under a
    <a rel="license"
    href="http://creativecommons.org/licenses/by-sa/3.0/"
    >Creative Commons Attribution-ShareAlike 3.0
    Unported License</a>.</p>
    </div>
    
    </body>

    [Note: strictly speaking, as those who go and look at the HTML coding of the main Balisage site will discover, this is not “the same overall document structure” as the main Balisage pages. For reasons I won’t go into here, the main Balisage site uses XHTML tables to lay out the pages. I usually try to avoid tables, so the forms use div elements with CSS style rules to govern the layout. Apart from avoiding invidious comments from those who disapprove of using tables for layout purposes, I find the documents somewhat easier to navigate and edit this way.]

  • They embed the appropriate material. The header embeds the Balisage logo:

    <div class="header">
    <a href="http://www.balisage.net/">
    <img src="bflib/Balisage-2011-logoType.png"
    width="35%"
    alt="Balisage 2011 logo"/>
    </a>
    </div>

    And the navbar embeds a suitable set of links.

    <div class="navbar">
    <p class="upbutton">
    <a href="http://www.balisage.net/">Balisage 2011</a>
    </p>
    <p class="upbutton">
    <a href="../../">Balisage at Black Mesa Technologies</a>
    </p>
    <p class="downbutton">
    <a href="http://www.balisage.net/2011/Program.html">Program</a>
    </p>
    <p class="downbutton">
    <a href="index.xml">Balisage 2011 Feedback Forms</a>
    </p>
    <p class="downbutton">
    <a href="conference.xhtml">Conference Feedback</a>
    </p>
    <p class="downbutton">
    <a href="symposium.xhtml">Symposium Feedback</a>
    </p>
    <p class="downbutton">
    <a href="speaker.xhtml">Speaker Feedback</a>
    </p>
    </div>

It turns out to be psychologically helpful to have the form appropriately styled, both for me in developing it and for those whom I ask to review draft versions of the form. It’s so helpful, in fact, that one of the first things I do, in developing a form for a particular site, is to create an XForms template for the site, with

  • the namespace declarations for XHTML, XForms, XML Events, XSD, and any other namespaces that may be needed (extra namespace declarations cause no trouble, and missing ones cause a lot);
  • a link to the standard site stylesheet, or (if the standard site stylesheet uses tables) an equivalent stylesheet that provides the correct look
  • the high-level document structure needed by the site stylesheet
  • dummy headings and body text, using Greeking (‘lorem ipsum …’)

XForms is designed to allow forms to be integrated nicely into a site’s normal look and feel; the template makes it easier to do that consistently across all the forms used on a given site.