Current Situation

Application frameworks need to be able to consume datasources. Mozilla allows one to consume several types of datasources, such as raw XML or SOAP web services, but only from scripting languages.

Applications also need to use these datasources to generate UI such as grids dynamically. Currently, the only way in Mozilla to do so without writing Javascript is to use XUL Templates and RDF. If a XML datasource is used, Javascript has to be written to load it, parse it and create new DOM nodes and appends those to the XUL document. If there are 1000 rows for a tree to create, this will slow down the application tremendously. Mozilla's XUL templates using RDF lazily generate the DOM for a XUL tree as the user scrolls, thus not having the problem.

Developers usually need to spend time to understand RDF and is often the cause of much pain. The XUL template syntax itself is highly RDF centric and documentation is sparse.

XUL 2.0 Datasources

XUL 2.0 need to provide an easier way to consume commonly used datasources and provide the developer a single way to query and access the data, independent of the type of datasource. The most used datasources currently are raw XML (either static XML files or dynamically generated) ones, SOAP-based web services and native datastructures. SOAP-based web services already hide the fact that XML is used and the developer only has to deal with native datastructures, allowing us to combine the later two.

A XUL 2.0 element could be introduced for this, and be referenced by other XUL elements or code to communicate with the datasource. Accessing the results of the datasource should probably be the same, no matter the type of web service. Since raw XML datasources need to be supported, it makes sense to use XPath, which provides a well defined and documented way to access XML documents. A subset of XPath could be applied to native datastructures (/class[member='foo']), and would be easier than having to create a new language with the same power of XPath on XML documents. Creating a new language that is simpler than XPath might help newcomers though.

XUL 2.0 Templates

Datasources are used to generate user interface elements dynamically, such as grids or dropdown options. Allowing to bind datasources directly to a widget is a natural follow up to the XUL 2.0 datasources idea. Currently XUL only allows this by using RDF and XUL Templates, and XUL 2.0 should be able to do this for any type of datasource.

The XUL Template syntax is designed for RDF, and while it could be extended to support other datasources, it isn't a natural evolution for newcomers. XUL Templates provides some of the basic programming functions such as boolean conditional checks, and but the syntax can confuse and isn't well documented.

Other than creating a more generic template language that is accessible, it might be wise to choose an existing templating standard such as XSLT. It is well documented and is growing in use, mainly on the server side. It provides a more familiar syntax (<xsl:if test=""/> for example rather than <rdf:rule condition="" />) as well, and uses XPath internally already. Mozilla also already has good support for XSLT built in. Not sure how it would work on RDF in regards to performance - might make sense to keep the RDF syntax separate.

Existing XUL-like Implementations

Macromedia Flex basically took XUL and added easier datasource access and binding. A simple example: 

  <PersonList>
    <Person>
      <name>Mr Foo</name>
      <id>1</id>
    </Person>
    <Person>
      <name>Mr Bar</name>
      <id>2</id>
    </Person>
    <Person>
      <name>Mr Fubar</name>
      <id>3</id>
    </Person>
  </PersonList>      
      
  <mx:HTTPService id="employeeSrv" url="employees.jsp">
    <mx:request>
      <deptId>{dept.selectedItem.data}</deptId>
    </mx:request>
  </mx:HTTPService>

  <mx:DataGrid dataProvider="{employeeSrv.result.PersonList.Person}" widthFlex="1">
    <mx:columns>
      <mx:Array>
        <mx:DataGridColumn columnName="name" headerText="Name"/>
        <mx:DataGridColumn columnName="id"  headerText="Id"/>
      </mx:Array>
    </mx:columns>
  </mx:DataGrid>

Since the XML is nicely formatted (the name is stored in , etc.), Flex doesn't even need to use "templates" - it automagically works. The query language is a custom one and simple. I couldn't find how I would make Flex work if the name were say stored in <item type="name"/> for an XML feed, though I assume it is possible. The same syntax works on a SOAP web service as well: 

  <mx:RemoteObject id="employeeRO" encoding="SOAP" source="samples.explorer.EmployeeManager"
                   result="empList=event.result" fault="alert(event.fault.faultstring, 'Error')">
    <mx:method name="getList"/>
  </mx:RemoteObject>

  <mx:DataGrid dataProvider="{empList}" width="410">
    <mx:columns>
      <mx:Array>
        <mx:DataGridColumn columnName="name" headerText="Name" width="120"/>
        <mx:DataGridColumn columnName="phone" headerText="Phone" width="100"/>
        <mx:DataGridColumn columnName="email" headerText="Email" width="150"/>
      </mx:Array>
    </mx:columns>
  </mx:DataGrid>

The closest thing Flex has to templates is the Repeater element:

  <mx:Model id="catalog" source="../assets/catalog.xml"/>
  <mx:Tile>
    <mx:Repeater id="list" dataProvider="{catalog.product}">
      <mx:VBox>
        <mx:Image width="60" height="56" source="{list.currentItem.image}" toolTip="Our Price: ${list.currentItem.price}"
                  visible="false" complete="event.target.visible=true;"/>
        <mx:Label text="{list.currentItem.name}"/>
      </mx:VBox>
    </mx:Repeater>
  </mx:Tile>

Finding good documentation on XAML datasources isn't easy, but here is what I have pieced together. Looking at the XAML code at http://www.joemarini.com/tutorials/tutorialpages/xamlblogexplorer.php, including a XML datasource is simple: 

  <XmlDataSource def:Name="NewsData" Source="http://msdn.microsoft.com/rss.xml" XPath="rss/channel" />

XPath is used, and the datasource is binded using:

  <DockPanel.DataContext>
    <Bind DataSource="{NewsData}" Path="item"/>
  </DockPanel.DataContext>

Again XPath is used, pointing to rss/channel/item elements. Regarding templating, XAML seems to have the concept of "styles", which access the <Bind> element from above:

  <Style def:Name="NewsDataStyle">
    <ContentPresenter/>
    <Style.VisualTree>
      <FlowPanel Margin="0 5 0 5">
        <SimpleText TextWrap="Wrap" FontSize="12pt" Foreground="Black" Text="*Bind(Path=title)"/>
        <SimpleText FontSize="9pt" Foreground="Blue" Text="*Bind(Path=author)"/>
        <SimpleText FontSize="9pt" Foreground="Gray" Text="*Bind(Path=pubDate)"/>
        <HyperLink NavigateUri="*Bind(Path=link)">
          <SimpleText FontSize="10pt" Text="*Bind(Path=link)"/>
        </HyperLink>
      </FlowPanel>
    </Style.VisualTree>
  </Style>

The XAML SimpleText element sets its text by referencing the DataContext's Bind element and then running XPath on it to get to rss/channel/item[]/title for example.

Looks like XAML can do some visually impressive things like have tree widgets where the content is rich, unlike XUL's current tree widget.