XForms/Print version

IntroductionEdit

Introduction to XForms

XForms is a standardized set of HTML form elements, designed to be integrated with other world-wide-web standards.

XForms has many advantages over traditional HTML web forms that use complex JavaScript. These advantages include:

  1. an elegant Model-View-Controller (MVC) architecture
  2. a movement toward declarative programming which is easier to learn, maintain and debug
  3. a rich set of user interface controls for handling complex things such as dates, numbers and ranges
  4. compatibility with XML standards such as Cascading Style Sheets (CSS), XML Schema and XPath
  5. extensibility

XForms can be run today from almost any web browser by either using an downloadable plugin or extension (such as the Firefox extension) or by loading a JavaScript file. For more information see the Benefits section of this book.

About this bookEdit

This book is intended to be a tutorial and cookbook with many complete running XForms examples. The initial examples are designed to teach the fundamental concepts of XForms. The more advanced examples are designed to solve specific tasks and reduce the amount of JavaScript necessary to write high-quality forms.

We would like to have the examples ordered from simple to complex. At the end of the cookbook there are integration examples of how to extend and integrate XForms with other systems such as web services.

The philosophy behind this book centers around the fact that people often learn best by taking a fully-functioning program and making slight modifications to it to understand how it works.

Guidelines for contributorsEdit

Please feel free to add your own examples to this tutorial and cookbook! Here are a few suggestions for contributors:

Focus on Tutorial ExamplesEdit

The first set of examples should focus on new XForms users. Please keep tutorials on foundational concepts (XPath and XML Schema) in a separate area so that users already familiar with these concepts can skip these sections.

Focus on Reducing JavaScriptEdit

One of the goals of this book is to help forms developers move away from hard-to-maintain scripting languages such as JavaScript. Any examples that focus on getting rid of commonly used JavaScript functions are very much appreciated.

TestingEdit

Please tell us what XForms systems you have used to test your examples. If you can, we recommend testing using the major browsers (Internet Explorer and Firefox) using either an extension, plug-in or a JavaScript translator such as FormFaces. See also the Installing XForms in Firefox.

We would like to eventually have a small box in the upper right corner that tells what systems each example was tested under.

Avoid DuplicationEdit

Try to avoid duplication with other example programs in this cookbook and other Wikibooks on CSS, XML Schemas and XPath. That being said, sometimes the cookbook needs small samples of CSS and XPath to demonstrate how they are integrated with XForms.

Naming ConventionsEdit

Our first goal is to get as many complete working examples installed for new users of XForms. After they are working, they should hopefully be made as consistent as possible. This document describes an initial attempt at some of the naming conventions used in previous examples.

Next Page: Background

Home: XForms

BackgroundEdit

BackgroundEdit

The XForms standard arose from the desire of many people to use the web for more than just linking documents. The original design of the world wide web standard introduced many innovative concepts including the URL, the HTML markup language and the HTTP protocol.

But innovation aside, elegant form processing was not one of the design goals of the initial HTML language. In fact, many of the advanced input fields were added to the HTML specification after it became popular.

One thing is clear: the introduction of clean MVC concepts were never part of the original HTML specification. Many attempts were made to introduce better controls into browsers and the HTML language, but most of these additions fell short for four reasons:

  1. They were either browser or vendor specific solutions to a specific problem
  2. They did not integrate mainstream developments in XML Schema, XPath and CSS
  3. They did not take into account the need for clear separation-of-concerns
  4. They did not meet the rigorous needs of application architects that understood the benefits of MVC architectures

As a result, many of these point-solutions have been discarded or have seen only niche use by some vendors.

Around 1997 the W3C started to address the concerns of these users and studied how web forms could be processed in a better way. They realized that validating data elements was a large concern and that re-inventing the validation tools already present in XML Schema would only duplicate efforts.

The first XForms draft specification was published on April 6, 2000. Since then it has been revised with the most recent version (1.1) appearing in March of 2006.

Today the XForms standard addresses several web forms development issues:

  1. Model-View-Binding architecture
  2. Advanced functionality
  3. Precise specification for all browsers to integrate
  4. Extensibility without resorting to JavaScript programming
  5. Built-in assumptions about how form elements get updated

The Dependency GraphEdit

Embedded within every XForms application is the ability to automatically recalculate values when a form element changes. If you have a complex form with calculation rules then this feature becomes critical for avoiding writing manual recalculation code. Most JavaScript forms libraries require the author to specify not only form rules, the order these rules must be executed. This slow and painful form-author-specified recalculation order is replaced in XForms by an automated method to determine the order of recalculation.

The way XForms applications do this is by doing automated determination of recalculation order based on optimal graph algorithms.

One of the most important papers about how XForms is designed come from the following paper:

The XForms Computation Engine: Rationale, Theory and Implementation Experience html version

If you have a simple form with just a few elements and no calculation rules, HTML forms might be a good solution for you. If you have forms with rules such as sum and total calculations in a purchase order, then XForms might be the ideal fit for your web form.

For the current working draft of the XForms specification you can go to the w3 web site:

W3C Candidate Recommendation 29 November 2007

Next Page: Benefits | Previous Page: Introduction

Home: XForms

BenefitsEdit

Why XForms?Edit

There are many benefits to using XForms over traditional HTML forms. Some of the most frequently mentioned benefits are:

Benefits of XFormsEdit

  1. Web Standard - XForms is a W3C standard and allows web applications to be created without lockin to any specific vendor such as Microsoft, Adobe or Apple
  2. Consistency with Other Standards - XForms was designed to be very consistent with other web standards such as CSS, XML Schema and XPath. If you know CSS then you can quickly learn how to style your XForms.
  3. Declarative - XForms is considered a declarative system in that it allows users to declare what they want the forms to do, not how to do it. Movement away from highly complex and primitive procedural JavaScript to advanced declarative styles is the principal way that non-programmers can participate in the forms development process.
  4. Less JavaScript - XForms allows the movement away from hard-to-maintain, difficult to debug and potentially insecure JavaScript
  5. Fewer "round trips" of pages being transferred from web server to web browser. This means that fewer web servers are needed in your DMZ and smaller bandwidth is needed between the client and the servers
  6. Clean and consistent use of MVC architectures
  7. Forms are easier to create, debug and maintain
  8. Forms can accommodate multiple languages and multiple currencies
  9. Forms have clear Separation of Concerns, meaning all your forms can share a common style sheet, model, bindings and presentation.
  10. Advanced user interface controls such as the XForms/Range control
  11. Extensibility of XForms (see XForms/Custom Controls)
  12. Allows the designer to focus on concrete business models and abstract user interfaces (attributed to Joern Turner)

The last point is very critical since business models are designed to be consistent with the business area that tend to be more constant over time. User interface technology on the other hand changes rapidly and must be highly contextual to a browser, browser version mobile device or table. This core philosophy of Separation of Concerns is one of the key elements to the philosophy of XForms and good human-machine interactions.

Disadvantages of XFormsEdit

Just to be fair, we should also mention the disadvantages. Most of these problems are related to the newness of XForms and will be mitigated over time:

  1. Web browser limitations have made it difficult for XForms tools vendors to support all XForms tags in all browsers
  2. Slow performance on very-large forms - forms with over 200 fields sometimes can be slow to load on some older browsers
  3. Using non-native browser forms players such as XSLTForms require an initial download of around 100K of JavaScript, CSS and XSL files that can be slow, especially over slower dial-up lines. Note that these files are usually cached on the local hard drive so that the second time a form package is used the files do not have to be re-downloaded.
  4. Lack of understanding of XML - Many traditional HTML/JavaScript forms developers are not familiar with XML standards
  5. Few complete working XForms examples and applications exist (a problem which we are trying to correct with this book)
  6. Few high-quality and low-cost GUI forms builder tools exist today (with the exception of IBM's Workplace forms, OpenOffice Forms, Onyx Forms and few other tools)

You will note that most of the disadvantages of XForms are related to limitations of XForms clients, current browser shortcomings, or skills and training issues. There are few fundamental architectural disadvantages with XForms.

Analysis of XForms Nay-sayersEdit

When there is negative discussion about XForms we have found that most of the negative comments about XForms usually comes from people with one or more of the following attributes:

  • They don't understand the role that standards play in lowering the cost of software development
  • They are trying to promote a vendor-specific proprietary technology
  • They have very little actual real-world XForms experience or have not had strong mentorship by and experienced XForms consultant
  • They do not appreciate the architectural advantages of MVC-based systems and the use of dependency graphs
  • They are focused on the limitations of one or more specific browsers or XForms products
  • They are comparing XForms with a problem domain outside of the scope of XForms charter such as graphics or complex navigation controls

Next Page: Installing and Testing | Previous Page: Background

Home: XForms

Naming ConventionsEdit

Here are some naming conventions used for this WikiBook. These naming conventions are designed to be consistent across the sample programs, allowing our students to be able to copy and paste blocks of code from the sample programs with a minimum amount of reformatting. So even though it may be a little bit annoying to have the xf: prefix on the XForms data elements, it does make it easy for students to quickly build new applications from the samples.

The audiences for much of this material are state and federal agencies that are converting paper forms to electronic forms. As a result we tend to use the XML Naming and Design Guidelines used by these organizations. Since these standards are built around ISO/IEC-11179 and other ebXML standards, they should not be too strange to most business developers.

There are over 150 of "Naming and Design Rule" guidelines but we don't need to use them all. A web site that discusses them is the Component Organization and Registration Environment web site.

Here are some guide lines to start out with:

IndentationEdit

Please use three space characters to indent your examples. MediaWiki does not allow us to set tab stops and by default they are 8 characters.

Wrap XML Code in Source TagsEdit

Please enclose all your sample XML code with the source tags with the lang="xml" attribute like this:

<source lang="xml">
 ....your XML code here...
</source>

Namespace StandardsEdit

Namespaces are core to XForms today and essential for our examples to work under a large number of diverse platforms. Please take some time to think carefully about namespaces and namespace prefixes.

Please use the following template at the head of your example:

<html 
   xmlns="http://www.w3.org/1999/xhtml" 
   xmlns:xf="http://www.w3.org/2002/xforms" 
   xmlns:ev="http://www.w3.org/2001/xml-events">
   <head>
   ...

Note that the first line:

xmlns="http://www.w3.org/1999/xhtml" 

indicates that the file uses XHTML as its default namespace. Any tags that do not have a namespace prefix are by default elements in the xhtml namespace.

We feel that keeping the examples in this default namespace will make students familiar with HTML more at home with XForms. Standard tags such as <h1>, <p>, <b> and <i> can be freely used in all our examples.

You can optionally add the XML processing instruction before the <html> tag:

<?xml version="1.0" encoding="UTF-8"?>

but most XForms systems do not need this. Any file that has a file extension of ".xhtml" implicitly implies that it is an XML file.

Warnings about DOCTYPEEdit

Please do not put the !DOCTYPE tag in the header for xhtml1-strict.dtd. This specifically states that the file ONLY contains XHTML and most systems will not allow XForms tags when they see this. Many example programs have this and it should be removed to be correct.

XForms Player Specific MarkupEdit

Please do not put any player-specific markup in the examples. This book is about W3C standards, specifically XForms, CSS, XML Schema and XHTML. These examples should not require a specific implementation of a client forms player. If you are working with a specific player that does require special HTML tags, they can be automatically inserted by the web application server using an XML transform. This allows these examples to be used in a wide variety of classroom environments and by a large number of server and client XForms players.

For a general template see XForms/Template

For player specific instructions see Player Specific Instructions.

List of Example Program Naming ConventionsEdit

  1. Use a separate namespace for HTML, XForms controls and Data.
  2. Give HTML the default namespace. This makes it easy to take existing XHTML code and use it in the examples
    1. If it is not possible to give HTML a default namespace, give it a namespace prefix that is short, such as "h".
  3. Use the "xf" namespace prefix for XForm elements. I find about 3/4 of the examples use this already but some use the full "xform" or "xforms" prefix. I suggest avoiding the confusion and just use "xf" since it is short and in common use already.

Examples for US State and Federal AgenciesEdit

It is our hope that many US state and federal agencies may integrate this material into their training programs. This is an important audience for XForms since much of the XForms standards were promoted by agencies that did not allow JavaScript to be executed on their desktops for security reasons.

The namespace that we are using for most of our federal data model examples is the NIEM. The namespace prefix is "u" for "Universal" data elements for things like Address, Contact, Activity, Documents, Organizations, Person. The NIEM also has a very nice sub-schema generator that works very well with the process of building forms. See the niem.gov web site for more information on this. If you have any suggestions on any better tools then the NIEM tools, please let us know.

Next Page: Comparison of XForms Products | Previous Page: Installing and Testing

Home: XForms

Installing and TestingEdit

XForms Client OptionsEdit

There are several ways to get started using XForms. But we must first understand that running XForms within a web browser has several security-related issues that prevent software from saving to your local hard drive. There are several workarounds for this.

There are several XForms systems that can be used to build XForms. For example:

XSLTForms is a XForms implementation that can run within your browser or on the server. The client-based system run an XSLT transform within your browser.

BetterFORM is a server-side implementation of XForms that comes bundled with a native XML database (eXist-db).

There are JavaScript-based solutions and other plugins as well as web-server solutions available. See the Player Specific Instructions or the wikipedia page on XForms for more details. Note that these XForm solutions usually require you to download a web server and install Java Web Archive Files (War files) in the correct directory or add player-specific code to your examples.

FireFox PluginEdit

The FireFox plugin has limited support on the Mac and may not be supported in current versions of FireFox.

One of the most common today is Installing XForms in Firefox. This takes only about a minute to install so it is used by many of our students. Most of these exercises have been tested with the Firefox 0.7 extension on both Firefox 1.5 and Firefox 2.0.

Firefox 3.6 plugin: xForms 0.8.7

Firefox 2.0 plugin: FireFox 2.0 for the Mac

XForms ProcessorsEdit

XSLTForms uses XSLT and JavaScript in the browser to transform an XForms into HTML.

betterFORM processes XForms on the server with Java.

Orbeon Forms processes XForms on the server with Java.

All can be used with the eXist Native XML Database.

See also the Wikipedia article on XForms

Next Page: Naming Conventions | Previous Page: Benefits

Home: XForms

Getting StartedEdit

Hello WorldEdit

Background and MotivationEdit

Since K&R wrote the first book on C programming, it has become tradition for programming books to begin with a "Hello World" program. Running this program will indicate if you have XForms installed correctly.

Here is a sample "hello world" program in XForms. It uses one input, one variable in the model, and one output. You should be able to just copy and paste the text into a program such as Notepad and save it to a file such as hello.htm. This will tell you if you have the Firefox or other browser extension installed correctly.

Screen ImageEdit

XForms-hello-world.jpg

(Note that this is only a .jpg and NOT an actual form!)

Link to Working ExampleEdit

Hello World

ProgramEdit

To run this program, just copy the following text into a file "hello.xhtml" and open it with your web browser with the appropriate XForms extension loaded.

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms">
   <head>
      <title>Hello World in XForms</title>
      <xf:model>
         <xf:instance xmlns="">
            <data>
               <PersonGivenName/>
            </data>
         </xf:instance>
      </xf:model>
   </head>
   <body>
      <p>Type your first name in the input box. <br/>
        If you are running XForms, the output should be displayed in the output area.</p>   
         <xf:input ref="PersonGivenName" incremental="true">
            <xf:label>Please enter your first name: </xf:label>
         </xf:input>
         <br />
         <xf:output value="concat('Hello ', PersonGivenName, '. We hope you like XForms!')">
            <xf:label>Output: </xf:label>
         </xf:output>
   </body>
</html>

ProblemsEdit

If this program does not work, you may not have the extension or plug-in installed in your browser.

For help see Installing XForms in FireFox.

Note that if you have the NoScript Firefox extension installed, you may need to configure NoScript to allow scripts from the location from which you are loading HelloWorld.

Also note, in Firefox the file has to be saved with a xhtml or xml extension. A file with a .html exension won't show the XForms.

DiscussionEdit

Note that the file looks much like a standard HTML file with a few exceptions.

  1. there is a namespace declaration at the beginning of the file and there are two elements with a xf: prefix in front of them.
  2. there is something called a model inside the HTML <head> element
  3. There are some new elements: input and output.

The two important lines are:

   <xf:input ref="PersonGivenName" incremental="true"/>

and

   <xf:output value="concat('Hello ', PersonGivenName, '. We hope you like XForms!')"/>

As the user types, this line takes the input that the user types in and copies it to the instance variable "PersonGivenName". Each time you type a character this program updates the output and using the XPath concat() function to wrap the string "Hello " in front of the name and the string ". We hope you like XForms!" after it.

You should also note that there is not a single line of JavaScript required to run this program. Getting rid of JavaScript is one of the biggest reasons people are migrating their applications to XForms.

ExperimentEdit

Try changing the input attribute incremental from:

 incremental="true"

to:

 incremental="false"

The output should update only after you enter "Tab" or press the "Enter" (Return) key.

Next Page: Simple Message | Previous Page: Comparison of XForms Products

Home: XForms

MessageEdit

MotivationEdit

With JavaScript you did not have much choice in how intrusive you were about alerting a user. The JavaScript alert() function required the user to acknowledge a message before they proceeded in filling out a form. With XForms there are now three ways to proceed. Each has a different level of intrusiveness. There are three message options:

  1. ephemeral - a message that just appears briefly and goes away by itself
  2. modeless - a message you can ignore for now
  3. modal - a message the user must acknowledge before you go on

Screen ImageEdit

Here is a sceen image with the ephemeral message showing:

XForms-message-types.jpg

Link to working XForms ApplicationEdit

Simple Messages

Sample ProgramEdit

<html
 xmlns="http://www.w3.org/1999/xhtml"
 xmlns:xf="http://www.w3.org/2002/xforms"
 xmlns:ev="http://www.w3.org/2001/xml-events"
>
   <head>
      <title>XForms Message</title>
      <xf:model id="myModel">
         <xf:instance>
            <MyMessage xmlns="">This is a modeless message stored directly in the model.
                Note you can drag me to the side and still proceed to the next task.
            </MyMessage>
         </xf:instance>
      </xf:model>
   </head>
   <body>
      <p>Put your cursor in the first input.  A message will appear for just a moment.</p>
         <xf:input>
            <xf:label>Ephemeral message: </xf:label>
            <xf:message level="ephemeral" ev:event="DOMFocusIn">This is an ephemeral message.
                Don't worry, I go away after a few seconds.</xf:message>
         </xf:input>
         <br/>
          <p>Press enter in the input field to get a modeless message:</p>
         <xf:input>
            <xf:label>Modeless message input: </xf:label>
            <xf:message level="modeless" model="myModel" ref="/MyMessage" ev:event="DOMActivate"/>
         </xf:input>
         <br/>
          <p>A standard and intrusive modal message that must be dismissed:</p>
         <xf:trigger>
            <xf:label>Press for a modal message</xf:label>
            <xf:message level="modal" ev:event="DOMActivate">This is a modal message.</xf:message>
         </xf:trigger>
   </body>
</html>

DiscussionEdit

The data for the first and last message come from the body of the document. The modeless message is taken directly from the body by using an XPath expression into the model.

Note that the first event happens when you start to enter data in an input field. This is the DOMFocusIn event. The other two use the DOMActivate event which happens when you enter a return on the second example and press the button on the last example.

Next Page: Textarea | Previous Page: Secret

Home: XForms

Model View ControllerEdit

InputEdit

Basic Form InputEdit

One of the most common user interface controls in a web form is a simple, one-line text area. In this example we have a very simple form with two input fields. Each input has its own label to the left of the input field.

XForms-input.jpg

Link to XForms ApplicationEdit

Input Fields

Program StructureEdit

Our program has two parts, a model and a view. The model has instance data in it to store the values that the user enters in the form. The view is part of the presentation in the body of the HTML document.

Sample ProgramEdit

<html
 xmlns="http://www.w3.org/1999/xhtml"
 xmlns:xf="http://www.w3.org/2002/xforms">
   <head>
      <title>XForms inputs with labels</title>
      <xf:model>
         <xf:instance xmlns="">
            <data>
               <guru/>
               <PersonSurName/>
            </data>
         </xf:instance>
      </xf:model>
   </head>
   <body>
      <p>Enter your first name, and last name.</p>
         <xf:input ref="PersonGivenName" incremental="true">
            <xf:label>Input First-Name:</xf:label>
            <xf:hint>Also known as given name.</xf:hint>
         </xf:input>
         <br/>
         <xf:input ref="PersonSurName" incremental="true">
            <xf:label>Input Last Name:</xf:label>
            <xf:hint>Also known as sur name or family name.</xf:hint>
         </xf:input>
         <br/>
         <br/>
         Output First Name: <b><xf:output ref="PersonGivenName"/></b>
         <br/>
         Output Last Name: <b><xf:output ref="PersonSurName"/></b>
      <p>Note that as you type the model output will be updated.</p>
   </body>
</html>

HintsEdit

You can also provide the user with data entry hints using the <xf:hint> element.

DiscussionEdit

Notice that as you type, the output gets immediately updated. This is because the XForms input control has an incremental="true" attribute.

Our model is simple, just the first and last name of a person.

Note that the label and hint tags are nested INSIDE the input tags.

ReferencesEdit

W3C XForms specification for input control

Next Page: Address | Previous Page: Adder

Home: XForms

Incremental Many to OneEdit

MotivationEdit

Sometimes a single input field will be used to create a new output. Not only does the input field need to be updated, but other fields that depend on this input also need to change.

Here is an example program that has three input fields. As an example, it uses a data dictionary entry (called a Data Element). The name of the Data Element is a concatenation of three fields: the Object Class Name, the Property Name and the Representation Term. The first two are text fields and the third is a value that is picked from a list.

This form creates a single output based on the values of the input fields. This shows that the model can take many different inputs and create a single output.

Link to working XForms ApplicationEdit

Load XForms Application

Sample CodeEdit

<html
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:xf="http://www.w3.org/2002/xforms">
<head>
    <title>Many to one</title>
    <xf:model>
         <xf:instance >
            <DataElement xmlns="">
               <ObjectClassName />
               <PropertyName />
               <RepresentationTerm />
            </DataElement>
         </xf:instance>
      </xf:model>
   </head>
   <body>
      <xf:group nodeset="/DataElement">
         <fieldset>
            <legend>Data Element Name</legend>
            <xf:label>DataElementName: </xf:label>
            <xf:output value="concat(ObjectClassName, PropertyName, RepresentationTerm)"/>
            <p>
               <xf:input ref="ObjectClassName" incremental="true">
                  <xf:label>Object Name:</xf:label>
               </xf:input>
            </p>
            <p>
               <xf:input ref="PropertyName" incremental="true">
                  <xf:label>Property Name:</xf:label>
               </xf:input>
            </p>
            <p>
               <xf:select1 ref="RepresentationTerm" incremental="true">
                  <xf:label>Representation Term:</xf:label>
                  <xf:item>
                     <xf:label>Amount</xf:label>
                     <xf:value>Amount</xf:value>
                  </xf:item>
                  <xf:item>
                     <xf:label>Code</xf:label>
                     <xf:value>Code</xf:value>
                  </xf:item>
                  <xf:item>
                     <xf:label>Count</xf:label>
                     <xf:value>Count</xf:value>
                  </xf:item>
                  <xf:item>
                     <xf:label>ID</xf:label>
                     <xf:value>ID</xf:value>
                  </xf:item>
                  <xf:item>
                     <xf:label>Indicator</xf:label>
                     <xf:value>Indicator</xf:value>
                  </xf:item>
                  <xf:item>
                     <xf:label>Name</xf:label>
                     <xf:value>Name</xf:value>
                  </xf:item>
                  <xf:item>
                     <xf:label>Percent</xf:label>
                     <xf:value>Percent</xf:value>
                  </xf:item>
                  <xf:item>
                     <xf:label>Text</xf:label>
                     <xf:value>Text</xf:value>
                  </xf:item>
               </xf:select1>
            </p>
         </fieldset>
      </xf:group>
   </body>
</html>

DiscussionEdit

How can you then take that output and put it back into the model? This will be covered later in the tutorial.

Next Page: Spreadsheet like updating | Previous Page: Input Example

Home: XForms

Spreadsheet like updatingEdit

Updating the ModelEdit

Many developers of traditional JavaScript-based forms are not accustomed to variables automatically updating for them. With XForms, you can easily create a complex system where XForms automatically figures out what cells to update. This is similar to using a spreadsheet. A dependency graph is automatically created for you and the appropriate cells are automatically updated if an input they depend upon changes.

Here is an example program that demonstrates this.

Screen ImageEdit

Here is a screen capture of the application:

XForms-spreadsheet-update.jpg

Note that top grid is actually just unlabeled input cells. Below that is a sample output inside a table. You should be able to change any of the input cells, enter a tab, and see the output and the footer calculations change.

Link to Working XForms ApplicationEdit

Spreadsheet-like Updating

Sample ProgramEdit

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xs="http://www.w3.org/2001/XMLSchema">
   <head>
      <title>XForms Spreadsheat like Update</title>
      <style type="text/css">
    table {
       font-family: Arial, Helvetica, sans-serif;
        border-collapse: collapse;
      }
 
    th {
        color: white;
        background-color: black;
      }
 
    .output tr td {
       border: solid black 1px;
       padding: 2px;
       text-align: center;
    }
    </style>
      <xf:model>
         <xf:instance>
            <Spreadsheet xmlns="">
               <Row>
                  <A>10</A>
                  <B>20</B>
                  <C>30</C>
               </Row>
               <Row>
                  <A>40</A>
                  <B>50</B>
                  <C>60</C>
               </Row>
               <Row>
                  <A>70</A>
                  <B>80</B>
                  <C>90</C>
               </Row>
               <Results>
                  <sum/>
                  <avg/>
                  <min/>
               </Results>
            </Spreadsheet>
         </xf:instance>
         <xf:bind nodeset="/Spreadsheet/Results/sum" calculate="sum(/Spreadsheet/Row/A)" type="xs:decimal" />
         <xf:bind nodeset="/Spreadsheet/Results/avg" calculate="avg(/Spreadsheet/Row/B)" type="xs:decimal" />
         <xf:bind nodeset="/Spreadsheet/Results/min" calculate="min(/Spreadsheet/Row/C)" type="xs:decimal" />
      </xf:model>
   </head>
   <body>
      <xf:group ref="/Spreadsheet">
         <xf:input ref="Row[1]/A">
            <xf:label></xf:label>
         </xf:input>
         <xf:input ref="Row[1]/B">
            <xf:label></xf:label>
         </xf:input>
         <xf:input ref="Row[1]/C">
            <xf:label></xf:label>
         </xf:input>
         <br/>
         <xf:input ref="Row[2]/A">
            <xf:label></xf:label>
         </xf:input>
         <xf:input ref="Row[2]/B">
            <xf:label></xf:label>
         </xf:input>
         <xf:input ref="Row[2]/C">
            <xf:label></xf:label>
         </xf:input>
         <br/>
         <xf:input ref="Row[3]/A">
            <xf:label></xf:label>
         </xf:input>
         <xf:input ref="Row[3]/B">
            <xf:label></xf:label>
         </xf:input>
         <xf:input ref="Row[3]/C">
            <xf:label></xf:label>
         </xf:input>
         <table class="output">
            <thead>
               <tr>
                  <th>#</th>
                  <th>A</th>
                  <th>B</th>
                  <th>C</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>
                     <xf:output value="1" />
                  </td>
                  <td>
                     <xf:output ref="Row[1]/A" />
                  </td>
                  <td>
                     <xf:output ref="Row[1]/B" />
                  </td>
                  <td>
                     <xf:output ref="Row[1]/C" />
                  </td>
               </tr>
               <tr>
                  <td>
                     <xf:output value="2" />
                  </td>
                  <td>
                     <xf:output ref="Row[2]/A" />
                  </td>
                  <td>
                     <xf:output ref="Row[2]/B" />
                  </td>
                  <td>
                     <xf:output ref="Row[2]/C" />
                  </td>
               </tr>
               <tr>
                  <td>
                     <xf:output value="3" />
                  </td>
                  <td>
                     <xf:output ref="Row[3]/A" />
                  </td>
                  <td>
                     <xf:output ref="Row[3]/B" />
                  </td>
                  <td>
                     <xf:output ref="Row[3]/C" />
                  </td>
               </tr>
               <tr>
                  <td />
                  <td>Sum=<xf:output ref="Results/sum" />
                  </td>
                  <td>Avg=<xf:output ref="Results/avg" />
                  </td>
                  <td>Min=<xf:output ref="Results/min" />
                  </td>
               </tr>
            </tbody>
         </table>
      </xf:group>
   </body>
</html>

DiscussionEdit

Due to limitations with some of the XForms implementations this example does not use the "repeat" command but just addresses each cell directly by its address.

Suggested ImprovementsEdit

This example could be a lot simpler if we used the repeat-nodeset statement in a table. This currently does not work with input cells using FormFaces.

Next Page: Bind | Previous Page: Incremental Many to One

Home: XForms

BindEdit

MotivationEdit

There are three core concepts that you will learn in building XForms applications:

  1. The model is a tree of data elements
  2. The presentation is a tree of data elements
  3. To build your form, these two trees need to be wired together - this is called "binding"

Many of the exercises in this cookbook give examples of this binding. This process is a small example of how this can work. In practice there are many ways to bind the user interface to the model.

Screen ImageEdit

The screen image is similar to input programs from a prior example. This example has two input fields for a person's first and last name and two output controls.

Xforms-input.jpg

Sample ProgramEdit

<html
   xmlns="http://www.w3.org/1999/xhtml"
   xmlns:xf="http://www.w3.org/2002/xforms" 
   xmlns:xs="http://www.w3.org/2001/XMLSchema" 
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
   <head>
      <title>Your Title Here</title>
      <xf:model>
         <xf:instance xmlns="">
            <data>
               <PersonGivenName/>
               <PersonSurName/>
            </data>
         </xf:instance>
         <xf:bind id="PersonGivenName" nodeset="/data/PersonGivenName"/>
         <xf:bind id="PersonSurName" nodeset="/data/PersonSurName"/>
      </xf:model>
   </head>
   <body>
       <xf:input bind="PersonGivenName" incremental="true">
          <xf:label>Input First Name:</xf:label>
       </xf:input>
       <br/>
       <xf:input bind="PersonSurName" incremental="true">
          <xf:label>Input Last Name:</xf:label>
       </xf:input>
       <br/>
       <xf:output bind="PersonGivenName">
          <xf:label>Output First Name:</xf:label>
       </xf:output>
       <br/>
       <xf:output bind="PersonSurName">
          <xf:label>Output Last Name:</xf:label>
       </xf:output>
   </body>
</html>

DiscussionEdit

Here are the two lines in the model that bind the data element paths to identifiers:

  <xf:bind id="PersonGivenName" nodeset="/data/PersonGivenName"/>
  <xf:bind id="PersonSurName" nodeset="/data/PersonSurName"/>

Note that bind uses nodeset, not ref to specify the path name to the leaf element in the instance document.

After this is done, each user interface element that inputs or outputs the data elements just adds the bind attribute:

 <xf:input bind="PersonGivenName">

We should also note that in this case there is a single input and a single output for each data element. This does not need to be the case. A single input can be bound to many outputs and an output could also depend on many inputs. An example of this would be using the "calculate" attribute of the bind statement.

Bind attributesEdit

Here are the following attributes of the bind element and a short description of how they are used:

type

  • Associate an instance variable with a specific XML Schema data type
  • Extend or restrict schema type definitions

relevant

  • Enabling or disable controls based on the values of data elements in the model

required

  • Conditionally make fields required based on the values of data elements in the model

readonly

  • Disable editing of fields based on model data elements such as role

constraint

  • Create complex schema constraints between two or more data elements
  • Set the limits of minimum or maximum values of a node-set

calculate

  • Creating computational dependency among data elements
  • Compute the value of new data elements based on other data elements
  • Enable spread-sheet like calculations within XForms

Next Page: Adder | Previous Page: Spreadsheet like updating

Home: XForms

Last modified on 30 November 2007, at 04:05