XUL and Datasources
===================

Web applications 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 fill in ui elements such as grids.  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, one has to write Javascript that walks the datasource and creates 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.  RDF and XUL templates have a benefit, as they lazily generate the DOM for a XUL
tree as the user scrolls.

The template syntax can be hard to learn and documentation is sparse, but the problem is that RDF
datasources are not used much in the wild (the common one being RSS probably).  Also, the
RDF-XML syntax is confusing to someone who are used to raw XML, which is in fact being used today as
datasources.

Proposal
--------

My proposal to to add more datasources to XUL, and to have as much of a common syntax for these as 
possible.

The datasources we want to support are raw XML, Web Services and data objects.  SQL might be another
one, though it could be wrapped in an XML/Web Service wrapper.  

Raw XML is used today and should be familiar to most web application developers.  Mozilla has decent
support for XML. 

Web Services are all the rage, and Mozilla's support still needs to mature.  Web Services return
SOAP packed XML data, which gets converted into an data object that Javascript can use.

Data objects are heavily used in web applications, as data is stored in them. Adding a data object as 
a datasource already is possible for XUL's tree widget using "treeviews", but that too requires
writing Javascript code.  Being able to reuse an data object to generate any XUL content would be nice.

XUL would probably get a datasource element that can be referenced by the template elements.

The current RDF template syntax has some limitations - doing boolean logic isn't straigh forward for 
example.

I can think of 3 ways of doing this: extending the current RDF template syntax, taking parts of XSLT 
(a standardized language for templates based on xml data sources) or creating a brand new syntax.

The more I think of it, the more I like using the XSLT syntax.  It is well documented, already in use
and its syntax is more familiar (<xsl:if test=""/> for example rather than <rdf:rule condition="" />
and has a powerfull selection language in XPath.

Using the below XML, getting the 2nd person's name would be: //Person[1]/name

<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>

XPath syntax could work on data objects, like this JavaScript Object that contains an 
PersonList array:

{

  PersonList : [
                 {name:"Mr Foo",   id:1},
                 {name:"Mr Bar",   id:2},
                 {name:"Mr Fubar", id:3}
                ]

}

Getting the 2nd person's name in XPath could be: /PersonList[1]/name.  The only difference is that
there are no "Person" elements to match.

Taking a peek at Macromedia's Flex, using the above XML example to create a grid:

    <mx:DataGrid dataProvider="{datasourceElement.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 <name />), Flex doesn't even need to use 
"templates" - it automagically works.  The query language is a custom one and simple.  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>

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 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.  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.

Other examples:
http://www.joemarini.com/tutorials/tutorialpages/amazonwishwatch.php
http://blogs.msdn.com/digitalnetbizz/archive/2004/02/16/73603.aspx