Re: Series of questions on a simple invoice application
Paul Everitt <[email protected]>
| Newsgroups | gmane.comp.mozilla.devel.xml |
|---|---|
| Organization | Another Netscape Collabra Server User |
| Message-ID | <[email protected]> |
Great Aaron, thanks for posting the example, including the bugzilla
entry explaining what I should keep an eye on.
I tried the xform with this:
http://ftp.novell.com/pub/forge/xforms-explorer/java/home.html
The navigation buttons worked ok, changing the first two xforms:output
elements. However, the main form, showing the detail on the "selected"
entry, never updated.
Also, I didn't understand the need for the double <xforms:group>:
<xforms:group bind="invoiceIndex">
<xforms:group ref="/invoices/invoice[number(/invoices/index)]">
--Paul
Aaron Reed wrote:
> 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=". > 0 and . <=
> count(/invoices/invoice)"/>
> </xforms:model>
> </head>
> <body>
> <p>
> <xforms:output value="string(/invoices/index)"/>
> </p>
> <p>
> <xforms:trigger>
> <xforms:label><<</xforms:label>
> <xforms:setvalue ev:event="DOMActivate" bind="invoiceIndex"
> value="1"/>
> </xforms:trigger>
> <xforms:trigger>
> <xforms:label><</xforms:label>
> <xforms:setvalue ev:event="DOMActivate"
> bind="invoiceIndex"
> value="if(. > 1,.-1,.)"/>
> </xforms:trigger>
> <xforms:output
> value="string(/invoices/invoice[number(/invoices/index)]/title)"/>
> <xforms:trigger>
> <xforms:label>></xforms:label>
> <xforms:setvalue ev:event="DOMActivate"
> bind="invoiceIndex"
> value="if(. <
> count(/invoices/invoice),.+1,.)"/>
> </xforms:trigger>
> <xforms:trigger>
> <xforms:label>>></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>