Mozilla XML - Series of questions on a simple invoice application

Author

Series of questions on a simple invoice application

Paul Everitt

2005-08-15, 8:04 pm

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

Aaron Reed

2005-08-17, 7:42 pm

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

Hey Paul,

What platform are you on? Windows, Linux or Mac? If you are on
Windows, I would suggest that any approach that you try with our nightly
you also try with Novell's plugin or the formsPlayer plugin. There are
still quite a few things we don't support yet and you may very well be
taking a solid approach and it just may be that we can't handle it, yet.
There are two good things that can come from this approach. The more
processors that you try, the better feedback you get as to whether your
understanding of XForms and the approaches that you are trying in XForms
are good. I've found that if I try something and it works on two or
more processors, then I am probably doing it right :=) Plus, if you
code forms that work in formsPlayer and Novell, but it doesn't work in
our processor then we'd love to know that so that we can work on those bugs.

Having said all of that, one of the reasons that your approach isn't
working right now is that we are currently only generating xforms-select
events for switch elements and not for select and select1 elements.
Though we do hope to be doing that soon. We are still in the process of
converting select and select1 from XTF to XBL so those interfaces
haven't really solidified, yet.

I think that I have a good idea of what you are trying to accomplish.
I'll try to write up a sample this afternoon and post it. The way that
I'm thinking about it should work in all of the processors AFAIK.

--Aaron

Aaron Reed

2005-08-18, 4:35 am

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

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

Paul Everitt

2005-08-18, 7:21 am

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/xfo.../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 Paul,
>
> Here is what I came up with. Doesn't work in Mozilla because of bug
> 305060.
>
> <?xml version="1.0" encoding="UTF-8"?>
> 
> <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>

Aaron Reed

2005-08-19, 7:38 pm

Paul Everitt wrote:

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

Hey Paul,

As for the double group, I had code in the for originally that started
at 0 instead of the first invoice, so I had a wrapping group connected
to a bind that went irrelevant (and thus hidden) if the index was < 1.
That way there would be no shown invoice. But now I've made it so that
the index starts at the first invoice and CAN'T go invalid (using the
buttons, at least) so that wrapping group is really no longer needed.

I'm sorry, I should have directed you at the links for the other
processors. The Novell XForms processor that I was talking about is an
IE plugin and you can get it at: http://lab.cph.novell.com/nxie/. I
don't know whether they've been keeping the publicly available java
processor up to date or not.

Let me know if you have any other problems,
--Aaron