New Datasources for XUL Templating [Part 2]

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:
simple-mozstorage-template.png

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:
dynamic-mozstorage-template.png

4 Comments

  1. Raymond said,

    November 29, 2007 @ 7:31 am

    If I would like to re-use the database connection for an insert or update query. How would I do that ?

    Can I open the database via mozIStorageService interface and then use that connection as datasource ???

  2. MSchultz said,

    November 29, 2007 @ 1:57 pm

    This would be fairly easy to use to do insert and update queries, wouldn’t it?

    Instead of a select, do an insert and use the params to send the new row to the db.

    This is awesome.

  3. Mark Finkle’s Weblog » XUL Explorer - 0.8 Sneaks Out said,

    December 9, 2007 @ 11:47 pm

    [...] See this post for XUL templating examples using SQL [...]

  4. Mark Finkle’s Weblog » New Datasources for XUL Templating [Part 3] said,

    January 2, 2008 @ 1:42 pm

    [...] have talked a bit about the new built-in datasources (XML and SQL) developers can use with XUL templating (guide and tutorial). I wanted to wrapup my little foray [...]

RSS feed for comments on this post