[ Team LiB ] Previous Section Next Section

14.1 Mozilla

Mozilla started out as a redesign of Netscape's browser but ended up being more than anyone expected. It became an effort to develop a component-based architecture and framework for a development environment, on which Mozilla, the browser, was then implemented. Because of this underlying framework, other applications could use bits and pieces of Mozilla, or the underlying technology, for their own efforts.

Right from the start, Mozilla incorporated the use of RDF/XML to manage all TOC- and other tree-structured data, such as the favorites list, sidebar, and so on. As stated earlier, it was through Mozilla's work with RDF/XML that I was originally introduced to the specification—an introduction that colors my view of RDF as more of a "practical" specification then one necessary for Semantic Web efforts.

You can download the most recent release of Mozilla at http://mozilla.org. Developer documentation is located at http://mozilla.org/catalog/, and a development forum and repository is at http://www.mozdev.org/.

Mozilla contains many components, but the one we'll focus on because of its association with RDF/XML is XUL (eXtensible User interface Language)—the component that controls the user interface, including all windowing and window components.

14.1.1 XUL Briefly

Rather than hardcode a user interface for each of the visual components of Mozilla, the Mozilla Working Group decided to use XML to define user interface components and then provide behind-the-scenes functionality to make these components active. By using this approach, rather than having to use some form of code to change or create a new application interface, you'd just create a new XML file, hooking in the appropriate functionality as needed.

For instance, the XML to create a window with two buttons would be as follows:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="example-window" title="Example 2.2.1"
        xmlns:html="http://www.w3.org/1999/xhtml"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<button label="Practical"/>
<button label="RDF"/>
</window>

Opening the window in Mozilla, or some other browser that supports XUL, would show a window similar to that in Figure 14-1. Of course, clicking on any of the buttons doesn't do anything at this point; you'll need to use a little scripting to add functionality.

Figure 14-1. Window application with two functionality buttons created using XUL
figs/prdf_1401.gif

Clicking on a button or a list item or opening or closing windows all trigger events that you can trap and use to perform some action, such as the following, added to a button to call a JavaScript function that's defined in an external file:

<button label="Open New Window" oncommand="openBrowser(  );" />

The script is then included in the XUL document with the script tag:

<script src="open.js" />

Mozilla has ways of connecting to the core functionality of the underlying engine through XPConnect, in addition to XBL (Extensible Binding Language), which offers a way of binding behaviors to an XUL widget. However, both of these are considerably beyond the scope of this book. What is within scope is RDF/XML's place in the Mozilla effort, through its use with templates, discussed next.

The coverage of XUL and templates in this section is by necessity very light. Developing applications using the Mozilla components could fill an entire book. In fact, it has; see O'Reilly's Creating Applications with Mozilla.

14.1.2 XUL Templates

When building a new application interface, for the most part you'll add static components—adding the XML for one button, one browser window, one menu or toolbar, etc. However, you may also want to display a list or treeview based on larger amounts of data likely to change over time. In this case, you'll want to use an XUL template in your XML and then connect the template with an external RDF/XML datafile. Using this approach, the data in the RDF/XML file can change without your having to alter the XML for the user interface directly.

At its simplest, a template is nothing more than a set of rules that maps XUL components to RDF/XML elements, repeating the XUL components for each RDF/XML element found that matches the specific rule. Templates can be used with most XUL widgets, including listboxes and buttons, but one of the more common uses is binding RDF/XML data into a treeview.

A treeview control is actually a container for several other XUL widgets, each of which controls a different part of the treeview. The structure of the widgets is:

tree

Outer treeview container

treecols

Container for treecol widgets

treecol

A column within the treeview

treechildren

Container for the data rows

treeitem

Controls the top row within the treeview and also the behavior of each other row within the treeview

treerow

One individual row in the treeview

treecell

One individual cell (cross-section between a unique column and a unique row)

Before showing you the XML for treeview as well as the RDF/XML data source, Figure 14-2 shows an XUL application in development that's using a treeview to manage data in the left-most box in the page. This particular view is two columns, with a category in the left column, and a title in the right. Clicking on any category opens up the display and shows all the titles underneath. One of the rows can be selected and the column widths altered by moving the sizing bar between the columns.

Figure 14-2. XUL application under development that contains a treeview widget populated by an external RDF/XML file, through a template
figs/prdf_1402.gif

The first part of the XUL created is the tree definition. Among the attributes you can define is one called datasources, and it's to this attribute that you assign an RDF/XML document:

<tree flex="1" width="200" height="200"
      datasources="postings.rdf" ref="urn:weblog:data">

In addition to the datasources attribute, there's also a ref attribute that points to the start of data access within the document. This is matched to an rdf:about value, which you'll see later when we get to the datafile.

The next XML added to the document defines the columns and provides a titlebar for each:

<treecols>
  <treecol id="category" label="Category" primary="true" flex="1"/>
  <treecol id="title" label="Title" flex="2"/>
</treecols>

Following the columns, the template element and the rule element are added, because at this point, all of the treeview structure is connected to the data in some way. This simple case needs only one rule because there is no processing splitting the data across different columns or some other specialized processing.

Following the template and rule is the treeitem element, containing an attribute, uri, which tells the processor to repeat this element for every resource within the file:

<treeitem uri="rdf:*">

The "resource" referenced is the resource identified with a URI. It is defined using a standard rdf:Description element within the RDF/XML.

Finally, the rest of the treeview elements are added; for every left-side treecell, the data defined as category is displayed. For every right treecell, the data defined as title is displayed, as shown next.

<treerow>
   <treecell label="rdf:http://weblog.burningbird.net/postings#category"/>
   <treecell label="rdf:http://weblog.burningbird.net/postings#title"/>
</treerow>

Since the application isn't using any advanced template processing, the entire treeview isn't very large (see Example 14-1, which contains a complete XUL application containing the treeview just described).

Example 14-1. XUL application containing treeview with data controlled through a template
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>

<window xmlns:html="http://www.w3.org/1999/xhtml"
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  align="vertical">

<tree flex="1" width="500" 
      datasources="postings.rdf" ref="urn:weblog:data">

  <treecols>
    <treecol id="category" label="Category" primary="true" flex="1"/>
    <treecol id="title" label="Title" flex="2"/>
  </treecols>

  <template>
    <rule>
      <treechildren>
       <treeitem uri="rdf:*">
         <treerow>
           <treecell label="rdf:http://weblog.burningbird.net/postings#category"/>
           <treecell label="rdf:http://weblog.burningbird.net/postings#title"/>
         </treerow>
       </treeitem>
      </treechildren>
    </rule>

  </template>
</tree>
</window>

If you were to open this page in a browser that supports XUL, such as Mozilla, you'd see only an empty treeview control because you also need the RDF/XML document, postings.rdf.

The RDF/XML used for XUL templates isn't anything odd or unusual, and no special namespaces are needed other than those you create for your own data. The structure of the data is to some extent determined by the outcome of the display, but the RDF/XML is, itself, nothing more than valid RDF/XML (with a caveat, as you'll see later).

For this use, the categories and their associated titles become list items within a container, a Seq to be exact. Each category is given a different container, and each title a different list item. This provides the structure of the TOC. To add the data, each resource is defined in a separate block, with properties matching the cell values contained within the resource. Though it's a bit large for the book, the entire RDF/XML document for the example is duplicated in Example 14-2 as it's important to see the mapping between the RDF/XML document, the template, and the treeview.

Example 14-2. RDF/XML document used to provide data in template
<?xml version="1.0"?>

<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
         xmlns:bbd="http://weblog.burningbird.net/postings#">


   <rdf:Description rdf:about="urn:weblog:photos">
     <bbd:category>Photography</bbd:category>
   </rdf:Description>

       <rdf:Description rdf:about="urn:weblog:photos:bwstudy">
         <bbd:category>Black and White</bbd:category>
         <bbd:title>Study</bbd:title>
       </rdf:Description>

       <rdf:Description rdf:about="urn:weblog:photos:sanfran" >
         <bbd:category>San Francisco</bbd:category>
         <bbd:title>City</bbd:title>
       </rdf:Description>

       <rdf:Description rdf:about="urn:weblog:photos:tower">
         <bbd:category>Tower Grove</bbd:category>
         <bbd:title>Babble Meadow</bbd:title>
       </rdf:Description>

   <rdf:Description rdf:about="urn:weblog:politics">
     <bbd:category>Politics</bbd:category>
   </rdf:Description>

       <rdf:Description rdf:about="urn:weblog:politics:international">
         <bbd:category>International</bbd:category>
         <bbd:title>War in Iraq</bbd:title>
       </rdf:Description>

       <rdf:Description rdf:about="urn:weblog:politics:national">
         <bbd:category>National</bbd:category>
         <bbd:title>Health Care</bbd:title>
       </rdf:Description>

   <rdf:Description rdf:about="urn:weblog:writing">
     <bbd:category>Writing</bbd:category>
   </rdf:Description>

       <rdf:Description rdf:about="urn:weblog:writing:rdfbook">
         <bbd:category>Practical rdf</bbd:category>
         <bbd:title>First draft posted</bbd:title>
       </rdf:Description>

       <rdf:Description rdf:about="urn:weblog:writing:poetry">
         <bbd:category>Poetry</bbd:category>
         <bbd:title>e.e. Cummings</bbd:title>
       </rdf:Description>

       <rdf:Description rdf:about="urn:weblog:writing:review">
         <bbd:category>Book Review</bbd:category>
         <bbd:title>Burning the Days</bbd:title>
       </rdf:Description>

       <rdf:Description rdf:about="urn:weblog:writing:ebook">
         <bbd:category>eBooks</bbd:category>
         <bbd:title>Safari Online Tech Library</bbd:title>
       </rdf:Description>

       <rdf:Description rdf:about="urn:weblog:writing:online">
         <bbd:category>Online Books</bbd:category>
         <bbd:title>Paths and other Threads</bbd:title>
       </rdf:Description>

       <rdf:Description rdf:about="urn:weblog:writing:journal">
         <bbd:category>Journals</bbd:category>
       </rdf:Description>

       <rdf:Description rdf:about="urn:weblog:writing:journal:weblog">
         <bbd:category>Weblog Journals</bbd:category>
         <bbd:title>Keeping an Online Travel Journal</bbd:title>
       </rdf:Description>
       <rdf:Description rdf:about="urn:weblog:writing:journal:paper">
         <bbd:category>Paper Journals</bbd:category>
         <bbd:title>The Advantages of a Paper Journal</bbd:title>
       </rdf:Description>

   <rdf:Description rdf:about="urn:weblog:connecting">
     <bbd:category>Connecting</bbd:category>
   </rdf:Description>

       <rdf:Description rdf:about="urn:weblog:connecting:relationships">
         <bbd:category>Relationships</bbd:category>
         <bbd:title>Looking for Romance</bbd:title>
       </rdf:Description>

       <rdf:Description rdf:about="urn:weblog:connecting:conferences">
         <bbd:category>Conferences</bbd:category>
         <bbd:title>Open Source Convention</bbd:title>
       </rdf:Description>

  <rdf:Seq rdf:about="urn:weblog:data">
     <rdf:li>
         <rdf:Seq rdf:about="urn:weblog:photos">
           <rdf:li rdf:resource="urn:weblog:photos:bwstudy"/>
           <rdf:li rdf:resource="urn:weblog:photos:sanfran"/>
           <rdf:li rdf:resource="urn:weblog:photos:tower"/>
         </rdf:Seq>
     </rdf:li>
     <rdf:li>
         <rdf:Seq rdf:about="urn:weblog:politics">
           <rdf:li rdf:resource="urn:weblog:politics:international"/>
           <rdf:li rdf:resource="urn:weblog:politics:national"/>
         </rdf:Seq>
     </rdf:li>
     <rdf:li>
         <rdf:Seq rdf:about="urn:weblog:writing">
           <rdf:li rdf:resource="urn:weblog:writing:rdfbook"/>
           <rdf:li rdf:resource="urn:weblog:writing:poetry"/>
           <rdf:li rdf:resource="urn:weblog:writing:review"/>
           <rdf:li rdf:resource="urn:weblog:writing:ebook"/>
           <rdf:li rdf:resource="urn:weblog:writing:online"/>
           <rdf:li>
             <rdf:Seq rdf:about="urn:weblog:writing:journal">
                <rdf:li rdf:resource="urn:weblog:writing:journal:weblog"/>
                <rdf:li rdf:resource="urn:weblog:writing:journal:paper"/>
             </rdf:Seq>
           </rdf:li>
         </rdf:Seq>
     </rdf:li>
     <rdf:li>
         <rdf:Seq rdf:about="urn:weblog:connecting">
           <rdf:li rdf:resource="urn:weblog:connecting:relationships"/>
           <rdf:li rdf:resource="urn:weblog:connecting:conferences"/>
         </rdf:Seq>
    </rdf:li>
  </rdf:Seq>

</rdf:RDF>

Note that the top-level rdf:Seq is given a URI of urn:weblog:data, matching the starting position given in the template. Each major category is given its own sequence and its own resource. Each title item is listed as an rdf:li and defined as a separate resource with both category and title.

When the data is processed, the rule attached in the template basically states that all category values are placed in the left column, and all titles in the right. Since the major categories don't have titles, the treecells for these values are blank. However, clicking on the drop-down indicator next to the categories displays both the minor category (subcategory) and titles for each row.

Earlier I mentioned there was a caveat about the validity of the RDF/XML used in the example. The RDF/XML document shown in Example 14-2 validates with the RDF Validator, but not all RDF/XML documents used in providing data for templates in Mozilla do. For instance, I separated out each rdf:Seq element, something that's not necessary with XUL but is necessary to maintain the RDF/XML striping (arc-node-arc-node). In addition, many of the XUL RDF/XML documents also don't qualify the about or resource attributes, which is discouraged in the RDF specifications. This doesn't generate an error, but does generate warnings. However, when you create your own RDF/XML documents, you can use the qualified versions without impacting on the XUL processing.

The Mozilla group wasn't the only organization to use RDF/XML to facilitate building a user interface. The Haystack project at MIT, http://haystack.lcs.mit.edu/, uses RDF as the primary data modeling framework.

    [ Team LiB ] Previous Section Next Section