XForms and HTML Form Generation | Beginning XML Databases (Wrox Beginning Guides)

XForms is a generic (generate from XML content), the XML equivalent of creating static forms using HTML. Like HTML forms, XForms is used to create the ability for end users to input information into an application, ultimately changing data in a database. So, XForms performs the same function as HTML forms does, except that it is XML driven. Thus it can be easily data driven, allowing for more specific input screens, such as unique input screens for individual users, or groups of users.

The XForms Model

XForms utilizes what it calls the XForms Model, defining a template for data that will be collected using a form. An XForms model defines what a form is, the data it contains, and what its function is. Then there are the form input fields, which define input fields and the way they are displayed. So, lets examine the basic structure of the XForms model step-by-step. The XForms model conformant script is wrapped by the <model> tag:

   <xforms>    <model>       <instance>          <region>             <name></name>             <population></population>             <area></area>          </region>       </instance>       <submission id="form1" action="submitted.asp" method="get"/>    </model> </xforms>

Additionally, the <instance> tag defines the template for how data is gathered. In actuality, the <instance> tag defines the structure of the resulting XML data document. And the <submission> tag tells how data is submitted. Notice the form identifier, action, and method attributes just as for HTML.

Details of HTML are not included in this book but can be found in innumerate books available in bookstores.

Now back to the <instance> tag. If you know anything about applications, you will realize that XForms is a front-end applications screen generator. So, an SLE form is a Single Line Entry screen. In a relational database, an SLE form essentially adds a single object, usually a single row to a single table. This depends on the granularity of the relational database model. So, to add a city using the model detailed by the preceding example, the resulting XML data might look something like this:

   <region>    <name>Africa</name>    <population>789548670</population>    <area>26780325</area> </region>

Now to get the data into the XML dataset, you need to add what are called XForms controls into the <submission> tag. So, you can expand on the previous example as follows :

   <?xml version="1.0"?> <xforms>    <model>       <instance>          <region>             <name></name>             <population></population>             <area></area>          </region>       </instance>       <submission id="form1" action="submitted.asp" method="get">  <input ref="name"><label>Region</label></input>   <input ref="population"><label>Population</label></input>   <input ref="area"><label>Area</label></input>   <submit submission="form1"><label>Submit</label></submit>  </submission>    </model> </xforms>

Figure 12-21 shows the preceding script in Internet Explorer.

Figure 12-21: Executing XForms in Internet Explorer

XForms Namespaces

Processing of XForms is accessible from the XForms namespace and may be built into the browser you are using. The XForms processing namespace is as shown in the adaptation to the following script, which assigns the XForms namespace to the HTML page and thus, also all XForms elements to that namespace so that they are not interpreted as HTML commands:

   <html  xmlns:xf="http://www.w3.org/2002/xforms"  > <head>    <  xf:  model>       <xf:instance>          <region>             <name/>             <population/>             <area/>          </region>       </xf:instance>       <xf:submission id="form1" action="submitted.asp" method="get"/>    </xf:model> </head> <body>    <xf:input ref="name">       <xf:label>Region</xf:label>    </xf:input><br/>    <xf:input ref="population">       <xf:label>Population</xf:label>    </xf:input><br/>    <xf:input ref="area">       <xf:label>Area</xf:label>    </xf:input><br/><br/>    <xf:submit submission="form1">       <xf:label>Submit</xf:label>    </xf:submit> </body></html>

It does appear that Internet Explorer 5.0 and beyond can interpret some XForms commands directly, without reference to a namespace, but not all of them.

Other XForms Input Types

Some tag types are sometimes similar in function to HTML tags, but some are additional in XForms. The <secret> tag can be used to hide the input of a password with * characters :

   <secret ref="name/password"><label>Password:</label></secret>

The <trigger> tag is used to execute an action, perhaps another function, when an event occurs:

   <trigger ref="GoDoThis"><label>Go Do This:</label></trigger>

The <output> tag can be used to display data from within XForms:

   Country: <output ref="region/name"/>

The <upload> tag allows uploading of files to a server:

   <upload bind="name">    <label>Filename: </label>    <filename bind="thisisthefilename"/>    <mediatype bind="media"/> </upload>

You can also use multiple selection items, which are much the same as in HTML. However, in addition to HTML, XForms provides a range tag, which allows selection of a value of range of literal values:

   <range ref="length" start="1" end="10" step="1">    <label>Range of values: </label> </range>

Data Types in XForms

XForms can utilize XML Schema data types (see the next chapter). Use of Data types attached to input fields allows enforcement of restrictions on what is added as an entry field value. So, to make sure that certain input fields accept only specific values and types of values, you can change the previous XForms HTML page example like this:

   <html xmlns:xf="http://www.w3.org/2002/xforms"  xmlns:xsd="http://www.w3.org/2001/XMLSchema"  xmlns:xsi="http://www.w3.org/2002/XMLSchema-instance"> <head>    <xf:model>       <xf:instance>          <region>  <name xsi:type="xsd:string"/>   <population xsi:type="xsd:integer"/>   <area xsi:type="xsd:integer"/>   <dateofmeasure xsi:type="xsd:date"/>  </xf:instance>       <xf:submission id="form1" action="submitted.asp" method="get"/>    </xf:model> </head> <body>    <xf:input ref="name">       <xf:label>Region</xf:label>    </xf:input><br/>    <xf:input ref="population">       <xf:label>Population</xf:label>    </xf:input><br/>    <xf:input ref="area">       <xf:label>Area</xf:label>    </xf:input><br/><br/>    <xf:submit submission="form1">       <xf:label>Submit</xf:label>    </xf:submit> </body></html>

Restricting Values with XForms Properties

XForms can allow restriction to value inputs, such as forcing a value to be entered with the following property setting:

   required="true()"

To instantiate the functioning of an XForms property to an input field, the property must be bound to data values. The following example reverts back to purely XForms (no HTML), where the nodeset attribute of the <bind> tag applies (binds) the given property to the instance of the <name> tag in the region:

   <xforms>    <model>       <instance>          <region>             <name></name>             <population></population>             <area></area>          </region>       </instance>       <submission id="form1" action="submitted.asp" method="get">          <input ref="name"><label>Region</label></input>          <input ref="population"><label>Population</label></input>          <input ref="area"><label>Area</label></input>          <submit submission="form1"><label>Submit</label></submit>       </submission>    </model> </xforms>

Other XForms properties apply to the data item they are bound to (applied to), as follows:

constraint : A constraint is a restriction such as allowing only specific values.
required : A required value cannot be left as blank. This restriction can be a form of a constraint.
type : A value must be of a specific data type, which effectively applies a form of a constraint and defines the data type for the item.
calculate : Perform a calculation.
readonly : A value can only be viewed , not changed.
relevant : Relevance applies to display or submission.

XForms Object Actions

Various actions can be taken, based on specific events. For example, when rolling over an object, a tooltip can be displayed, much like the ALT attribute on an HTML <IMG> tag. The following script demonstrates :

   <xforms>    <model>       <instance>          <region>             <name></name>             <population></population>             <area></area>          </region>       </instance>       <submission id="form1" action="submitted.asp" method="get">          <input ref="name">             <label>Region</label>  <message level="ephemeral" event="DOMFocusIn">   Add the name of the region   </message>  </input>          <input ref="population"><label>Population</label></input>          <input ref="area"><label>Area</label></input>          <submit submission="form1"><label>Submit</label></submit>       </submission>    </model> </xforms>

In the preceding script, the event is set to DOMFocusIn . This means that when the input field takes the focus on the screen, the message pops up briefly on the display. The ephemeral setting displays a tooltip, which can also be set in other ways as well.

Focus is placed on an input screen when the user tabs to the entry field, clicks the mouse on the entry field, or the entry field is selected automatically by the applications program.

The dictionary definition of ephemeral is lasting for a markedly brief time . Its like an HTML button or ALT attribute rollover.

Another example object-induced action is the setting of a value using the setvalue action, as shown in the example script value:

   <xforms>    <model>       <instance>          <region>             <name></name>             <population></population>             <area></area>          </region>       </instance>       <submission id="form1" action="submitted.asp" method="get">          <input ref="name">             <label>Region</label>                <message level="ephemeral" event="DOMFocusIn">                   Add the name of the region                </message>          </input>          <input ref="population">              <label>Population</label>  <setvalue value="0" event="xforms-ready"/>  </input>          <input ref="area">             <label>Area</label>  <setvalue value="1" event="xforms-ready"/>  </input>          <submit submission="form1"><label>Submit</label></submit>       </submission>    </model> </xforms>

In the preceding script, the population defaults to 0, and area to 1, because xforms-ready refers to when XForms is first loaded to the display. These are again just some examples. Much more is possible, but this is application- and not database-level functionality so it is covered only briefly.

Built-in and User-Defined Functions

Just like many other aspects and tools of XML, such as XQuery, XForms has direct access to XPath built-in functions (see Chapter 10). XForms does have a few additional functions, specifically for use with XForms. For example:

property(<string>) : This returns the current value of a property. For example, property("version") returns the version number of the XForms model implemented in your browser.
instance(<string>) : An XForms instance is an instantiation (or copy) of an XForms model. So, obviously, each XForms model can contain more than one instance (or <instance> tag). This function simply returns the XML fragment (node plus children), containing the specified instance.

And as with XPath, user-defined functions can also be created for use with XForms models.

Binding Data Using XPath

In computer lingo, the term binding means to cause some type of programming language or model, and data, to be stuck together somehow (to be bound). XForms can use XPath to address data in XML documents. And thus, XForms can be bound using XPath. This following example was shown previously in this chapter, where the <upload> tag allows uploading of files to a server by binding the <upload> tag to a filename and media type:

   <upload bind="name">    <label>Filename: </label>    <filename bind="thisisthefilename"/>    <mediatype bind="media"/> </upload>

In fact, so far in this chapter, you have seen multiple references to the ref attribute. Lets examine the ref attribute in detail. Again, another previous example is shown here. In this case, the <input> tags (the entry fields on display) are bound to the <instance> of the XForms model using the ref attribute. In other words, the display fields are directly linked to the XML document data values of name, population, and area for each of the regions in any XML document in use. And also, region/name, region/ population, and region/area are all XPath expressions:

   <xforms>    <model>       <instance>          <region>  <name></name>   <population></population>   <area></area>  </region>       </instance>       <submission id="form1" action="submitted.asp" method="get">  <input ref="/region/name"><label>Region</label></input>   <input ref="/region/population"><label>Population</label></input>   <input ref="/region/area"><label>Area</label></input>  <submit submission="form1"><label>Submit</label></submit>       </submission>    </model> </xforms>

So, XPath expressions can be changed to do the same thing in another manner, in the following case, not searching from the root of the XML document:

   <xforms>    <model>       <instance>          <region>  <name></name>   <population></population>   <area></area>  </region>       </instance>       <submission id="form1" action="submitted.asp" method="get">  <input ref="//name"><label>Region</label></input>   <input ref="//population"><label>Population</label></input>   <input ref="//area"><label>Area</label></input>  <submit submission="form1"><label>Submit</label></submit>       </submission>    </model> </xforms>

Once again, variables and values have been bound (linked) together using the ref attribute of an XForms <input> tag.

You can also use the XForms bind keyword to bind variables and values together, as shown in the following repeated adaptation of this now familiar example. The name established in the <bind> tag can be referred to later on in the <input> tag by the name assigned to its id attribute:

   <xforms>    <model>       <instance>          <region>  <name></name>   <population></population>   <area></area>  </region>       </instance>       <bind nodeset=  "/region/name" id="region">  <bind nodeset=  "/region/population" id="regionalPopulation">  <bind nodeset=  "/region/area" id="squareMiles">  <submission id="form1" action="submitted.asp" method="get">  <input bind="region"><label>Region</label></input>   <input bind="regionalPopulation"><label>Population</label></input>  <input bind="squareMiles"><label>Area</label></input>          <submit submission="form1"><label>Submit</label></submit>       </submission>    </model> </xforms>

Most of what is involved in XForms coding is really like any front-end application programming language. This book is about XML and databases, and covering application details too deeply is beyond the scope of this book.

As with XLink and XPointer, XForms is not yet in production (a recommended standard only). XPointer does not work for my version of Internet Explorer (version 6). It is unlikely to work in version 7 either.