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:
- Download and unzip somewhere
- Startup XUL Explorer
- Open the ‘Options’ dialog/sheet
- Use the ‘Manifest’ section to add the path to the unzipped manifest file
- Open one of the mozStorage XUL test files
- 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: