Mark Finkle’s Weblog

XUL, the XML-based UI language used in Mozilla products, has supported templating for a while now. Unfortunately, the only datasources you could use to drive the templates were RDF-based datasources. This has been a hurdle for some, including me, to really dive into XUL templates.

Back in July, I posted about support for using XML datasources with XUL templates. Recently, Laurent Jouanneau and Neil Deakin landed support for using SQLite-based (mozStorage) datasources. The SQL templates are a little harder to test/demo than the XML ones, but you can get a demo working fairly easily using XUL Explorer (use 0.8 just to be safe).

Laurent added some test cases to the bug. We can take those, add a manifest file and use them from XUL Explorer. Here is a storage-templates.zip archive of the test cases with a simple manifest added. Steps to get the mozStorage template tests working:

1. Download and unzip somewhere
2. Startup XUL Explorer
3. Open the ‘Options’ dialog/sheet
4. Use the ‘Manifest’ section to add the path to the unzipped manifest file
5. Open one of the mozStorage XUL test files
6. Preview the XUL to see it work

Here’s what a simple example looks like:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <description>template + storage</description>
    <description>Should display all 11 products</description>
    <grid>
        <columns>
            <column flex="1"/>
            <column flex="3"/>
            <column flex="2"/>
            <column flex="1"/>
        </columns>
        <rows datasources="chrome://data/content/tests.sqlite" ref="?" querytype="storage">
        <template>
            <query>select product_id, label, price, cat_id from products</query>
            <action>
                <row uri="?">
                    <label value="?product_id"/>
                    <label value="?label"/>
                    <label value="?price"/>
                    <label value="?cat_id"/>
                </row>
            </action>
        </template>
        </rows>
    </grid>

</window>

Here’s what that looks like when previewed in XUL Explorer:

The “dynamic parameters” demo is sorta neat too. It lets you pass a value in to dynamically effect the template query and rebuilds the XUL. Here’s what it looks like: