In the previous article, I showed you how to manage user input in the XForms model. I discussed the process of submitting an XForm and – more importantly - validating user input prior to submission using built-in XML Schema support. In this concluding article, find out how to use the <xforms:bind> element to perform calculations on form input values, integrate XPath expressions into your XForms model and get a crash course in the XForms event model.
It was the introduction of events in client-side scripting languages like JavaScript and VBScript that brought about the rise of the dynamic Web site. However, inconsistencies in implementation across browsers meant that developers had to grapple with multiple lines of code to make Web sites cross-browser compatible. XForms has put an end to this misery, at least so far as form events are concerned.
The XForms 1.0 specification divides the process of event handling into four phases:
Initialization: This is the very first stage, wherein the XForms processor "wakes up" and begins construction of the data model using the instance data provided. This is also the stage where all relevant XML Schemas are loaded, and all form controls (with their associated bindings) are initialized.
Interaction: Interaction events are fired as a result of action from the user - for example, keyboard navigation to a new input control, mouse clicks, data entry or item selection. A number of different events can occur in this phase, and each one has a default action associated with it.
Notification: Notification events don't usually have a default action associated with them; rather, they're triggered as a result of a change in the form state, such as a form control receiving focus or a button being clicked.
Error handling: These events occur due to errors in XForm processing, such as illegal binding expressions or illegal XPath references. Errors may be either fatal or non-fatal, depending on their severity.
OK, now enough of the theory. Let's look at a simple example:
<!-- define the form model --> <xforms:model id="bankAccount"> <xforms:instance> <account> <openingBalance>10000</openingBalance> <withdrawal /> <closingBalance /> </account> </xforms:instance> <xforms:bind id="nodeClosingBalance" nodeset="/account/closingBalance" /> </xforms:model> <!-- define the form interface --> <xforms:input id="txtwithdraw" ref="/account/withdrawal"> <xforms:label>Amount to withdraw</xforms:label> <xforms:hint>Please enter the amount you wish to withdraw</xforms:hint> </xforms:input> <xforms:trigger> <xforms:label>Calculate Closing Balance</xforms:label> <xforms:setvalue ev:event="DOMActivate" bind="nodeClosingBalance" value="/account/openingBalance - /account/withdrawal" /> </xforms:trigger>
By definition, the <xforms:trigger> element is the XForms counterpart of the regular HTML form button. When clicked, it generates a DOMActivate event, which is a catch-all event type fired whenever any event (pressing a button, selecting an option) occurs. The <xforms:setvalue> element, which is used to set the value for a particular node after computing it from an XPath expression, listens for this event and acts when it receives it. In this case, the action involves subtracting the withdrawal amount from the opening balance to obtain a new closing balance.
A number of other event types are available in the XForms model - you've already seen one of the other important ones, the xforms-submit event, in the previous segment of this tutorial. There are too many to list here, so you should take a look at the specification (and the excellent examples included within it), to better understand this topic.
