Re: Series of questions on a simple invoice application

Aaron Reed <[email protected]> Thu, 18 Aug 2005 01:45:18 -0500
Newsgroups	gmane.comp.mozilla.devel.xml
Organization	Another Netscape Collabra Server User
Message-ID	<[email protected]>
Paul Everitt wrote:
> 
> Hi all.  I have a series of questions in support of building a small 
> invoice application, which if I succeed in doing so, I'll try to write 
> up a decent tutorial on how I did it.
> 
> My questions mostly revolve around which design patterns I should use, 
> based on what parts are fairly stable in the nightly builds.  I follow 
> the status updates here:
> 
>   http://www.beaufour.dk/blog/
> 
> ...quite frequently and find the information exceptionally useful.  My 
> first attempt at doing this sample app in the nightly XPI 4 weeks ago 
> was quite frustrating.  This blog helps me get a feeling on which 
> direction to go.  (As a note, I've tinkered with XUL/chrome/RDF apps for 
> a few years.)
> 
> I won't go too much into requirements, just enough to start asking 
> questions.  Imagine a little application to browse, edit, add, and 
> delete invoices.  For the moment, pretend the information on each 
> invoice is very flat and boring: invoice number, title, amount, and a 
> vendor from a pre-defined list.
> 
> I must admit, I got stuck pretty quickly. :^)  I needed some way to 
> browse around the existing list of invoices.  I could do it in two basic 
> ways:
> 
> 1) Tree.  Use <select> and change the currently-displayed invoice for 
> the right event.
> 
> 2) VCR-like.  Use something like MS Access, where you have:
> 
>   <<    <    [90____]   >    >>
> 
> Handle each form control similarly to (1).
> 
> I found that event handling never worked quite the way I expected it to. 
>  I tried xforms-select but could never make anything happen. DOMActivate 
> didn't work.  Even attaching an HTML event via JS didn't produce much 
> help (as the model appears quite opaque to the DOM).
> 
> Based on the nightlies, what is a stable, good UI approach (select vs. a 
> series of <input> form elements) for browsing a series of "records"?
> 
> What is the right way to handle an event for that UI approach, 
> reflecting it into the model so that another <group> of elements 
> automatically changes to a different bound element?
> 
> --Paul

Hi Paul,

Here is what I came up with.  Doesn't work in Mozilla because of bug 305060.

<?xml version="1.0" encoding="UTF-8"?>
<!-- basic FO page definition stuff -->
<html xmlns="http://www.w3.org/1999/xhtml" 
xmlns:xforms="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:xsd="http://www.w3.org/2001/XMLSchema" >
     <head>
       <title>Invoice sample</title>
       <style>
         @namespace xf url("http://www.w3.org/2002/xforms");

         xf|*[disabled] {
           display: none;
         }
         xf|group xf|input {
           display: table-row;
         }
         xf|group xf|input>xf|label {
           display: table-cell;
           padding: .5em;
         }
       </style>

       <xforms:model>
           <xforms:instance id="instdata" xmlns="">
             <invoices>
               <invoice>
                 <invoiceNumber>IP00005</invoiceNumber>
                 <title>Procurement</title>
                 <amount>1100.00</amount>
                 <vendor>Fry's Electronics</vendor>
               </invoice>
               <invoice>
                 <invoiceNumber>IC00001</invoiceNumber>
                 <title>Catering</title>
                 <amount>335.50</amount>
                 <vendor>Chili's</vendor>
               </invoice>
               <invoice>
                 <invoiceNumber>IP00006</invoiceNumber>
                 <title>Procurement</title>
                 <amount>15.65</amount>
                 <vendor>Office Depot</vendor>
               </invoice>
               <invoice>
                 <invoiceNumber>IS00204</invoiceNumber>
                 <title>Shipping/Post</title>
                 <amount>27.78</amount>
                 <vendor>Fed Ex</vendor>
               </invoice>
               <index>1</index>
             </invoices>
           </xforms:instance>
           <xforms:bind id="invoiceIndex"
                        nodeset="/invoices/index"
                        type="xsd:integer"
                        relevant=". &gt; 0 and . &lt;= 
count(/invoices/invoice)"/>
       </xforms:model>
     </head>
     <body>
       <p>
         <xforms:output value="string(/invoices/index)"/>
       </p>
       <p>
         <xforms:trigger>
           <xforms:label>&lt;&lt;</xforms:label>
           <xforms:setvalue ev:event="DOMActivate" bind="invoiceIndex" 
value="1"/>
         </xforms:trigger>
         <xforms:trigger>
           <xforms:label>&lt;</xforms:label>
           <xforms:setvalue ev:event="DOMActivate"
                            bind="invoiceIndex"
                            value="if(. &gt; 1,.-1,.)"/>
         </xforms:trigger>
         <xforms:output 
value="string(/invoices/invoice[number(/invoices/index)]/title)"/>
         <xforms:trigger>
           <xforms:label>&gt;</xforms:label>
           <xforms:setvalue ev:event="DOMActivate"
                            bind="invoiceIndex"
                            value="if(. &lt; 
count(/invoices/invoice),.+1,.)"/>
         </xforms:trigger>
         <xforms:trigger>
           <xforms:label>&gt;&gt;</xforms:label>
           <xforms:setvalue ev:event="DOMActivate" bind="invoiceIndex" 
value="count(/invoices/invoice)"/>
         </xforms:trigger>
         <xforms:group bind="invoiceIndex">
           <xforms:group ref="/invoices/invoice[number(/invoices/index)]">
             <xforms:input ref="title">
               <xforms:label>Title: </xforms:label>
             </xforms:input>
             <xforms:input ref="invoiceNumber">
               <xforms:label>Invoice Number: </xforms:label>
             </xforms:input>
             <xforms:input ref="amount">
               <xforms:label>Amount: </xforms:label>
             </xforms:input>
             <xforms:input ref="vendor">
               <xforms:label>Vendor: </xforms:label>
             </xforms:input>
           </xforms:group>
         </xforms:group>
       </p>
     </body>
</html>