XML.com: XML From the Inside Out
oreilly.comSafari Bookshelf.Conferences.

advertisement

Editing XML Data Using XUpdate and HTML Forms

June 12, 2002

In this article I will discuss how XUpdate can be used in conjunction with XSLT to write tools for authors of web-based applications that will automatically generate HTML forms for editing various kinds of data. Forms are the primary means that web-based applications collect information from a user. XML, XUpdate, XSLT can be employed to automate this process for arbitrary data types.

Introduction

Most web applications that require a substantial amount of data from the user agent will have to deal with fashioning HTML forms for this purpose. This is a very common scenario, and authors will find themselves often repeating certain patterns in the form elements used for various types of data. For example, data entry fields where the value is restricted to a range of values are often rendered using selection form elements, and in situations where large amounts of text input is required, a textarea is often employed. These common patterns are often abstracted by developing templates for specific data

1.  Introduction
2.  XUpdate
3.  Specifying the application data schema
3.1.  Common data fields
3.2.  Larger text data fields
3.3.  Boolean data fields
3.4.  List-type data fields.
4.  Transforming application data to HTML forms
4.1.  The source document.
4.2.  The stylesheet
4.3.  The data templates
4.4.  The resulting form
5.  Transforming form data to XUpdate documents
5.1.  Routing form data to the stylesheet.
5.2.  XUpdates per data type
6.  Conclusion
7.  Resources

This is especially true among XML applications, i.e., applications that depend on XML or XML-related technologies for data storage, knowledge management, or implementation. The structured nature of XML serves to cause certain data patterns to repeat themselves in most situations.

The most common of these patterns can be identified and abstracted into an XML schema. Web developers can then model their data as instances of this schema and use two stylesheets (detailed later in the article) to transform the document instances into HTML forms for editing the specified data and process data from a submitted form and generate an XUpdate document for updating the data.

XUpdate

XUpdate is an XML language for updating arbitrary XML documents. XUpdate makes heavy use of XPath for selecting a set of nodes to modify or remove. XUpdate was the obvious choice to use for updating our arbitrary data documents. And we will be writing a stylesheet which generates XUpdate documents that can be used to update XML application data automatically. The reader should briefly review the specification to refresh her or his knowledge of XUpdate syntax.

Specifying the application data schema

In order to abstract data such that we can generate forms automatically for its modification, we need to look at some common scenarios where data is entered into an HTML form. Consider a contact manager that provides a screen for editing the properties of a user. The application will probably want the name of the user and some contact information (email, homepage, etc.). These are all single entry data fields.

Common data fields

In order to abstract data enough to automatically generate forms for its modification, we need to look at some common scenarios where data is entered into an HTML form to an application. Consider a contact manager that provides a screen for editing the properties of a user. The application will probably want the name of the user and some contact information (email, homepage, etc.). These are all single entry data fields.

  • name: [ name of the user ]
  • email: [ email of the user ]
  • homepage: [ homepage of the user ]

These are simply name-value pairs.

First, let's define a namespace for this schema, http://chimezie.ogbuji.net/xml/EditableData/. We will use an element in this namespace named Object, which will represent the abstract object being edited. The element will have a "name" attribute, which is a name associated with the object. We will also have an Entry child element for each name-value pair. In our mythical contact manager, the editable data for a user object will be represented by the following document:

<Object xmlns="http://chimezie.ogbuji.net/xml/EditableData/"
        name="Chimezie Ogbuji">
  <Entry key="name">Chimezie Ogbuji</Entry>
  <Entry key="email">chimezie@ogbuji.net</Entry>cnn
  <Entry key="homepage">http://chimezie.ogbuji.net</Entry>
</Object>

Larger text data fields

Often simple text data is alternatively edited using a text area form element. The main distinction in this case is usually the amount of text being assigned. We will be distinguishing this kind of data by abstracting it with a LargeEntry element.

For instance, consider an entry for the user's biography. This usually consists of one or a few paragraphs, and it would typically be edited with a textarea. Following the schema we have developed so far, we can serialize a user with the previously defined data fields as well as an entry for his or her biography as follows:

<Object xmlns="http://chimezie.ogbuji.net/xml/EditableData/" 
        name="Chimezie Ogbuji">
  <Entry key="name">Chimezie Ogbuji</Entry>
  <Entry key="email">chimezie@ogbuji.net</Entry>
  <Entry key="homepage">http://chimezie.ogbuji.net</Entry>
  <LargeEntryType name="biography">Chimezie Ogbuji is software
    developer with a bachelors degree in Computer Engineering.
    He is currently a contractor for Fourthought Inc.
  </LargeEntryType>
</Object>

Boolean data fields

Another data type used in common form inputs is the checkbox. This usually represents a labeled boolean value. Let's consider a boolean value which specifies whether a user is an administrator of the application. Following our schema convention, we could model this value like the following.

<Object xmlns="http://chimezie.ogbuji.net/xml/EditableData/"
  name="Chimezie Ogbuji">
  <Entry key="name">Chimezie Ogbuji</Entry>
  <Entry key="email">chimezie@ogbuji.net</Entry>
  <Entry key="homepage">http://chimezie.ogbuji.net</Entry>
  <LargeEntryType name="biography">Chimezie Ogbuji is software
    developer with a bachelors degree in Computer Engineering.
    He is currently a contractor for Fourthought Inc.
  </LargeEntryType>
  <Boolean key='administrator' value='1' />
</Object>

In this case, we use a number to represent the boolean value of the entry (which could take the value of 1 or 0), indicating that the user Chimezie Ogbuji is an administrator.

List-type data fields.

The other common data-type entered from a form is a list of values from which one or more is selected. Consider an entry for a user's age range:

  • 12 - 18
  • 19 - 35
  • 36 - 50
  • 51 - up

This data type needs to be abstracted into a set of elements to represent an instance. For our elements, we will try to use names already associated with the form element. In this case we will have a List and an Option element to represent these kinds of data fields.

<Object xmlns="http://chimezie.ogbuji.net/xml/EditableData/"
  name="Chimezie Ogbuji">
  <Entry key="name">Chimezie Ogbuji</Entry>
  <Entry key="email">chimezie@ogbuji.net</Entry>
  <Entry key="homepage">http://chimezie.ogbuji.net</Entry>
  <LargeEntryType name="biography">Chimezie Ogbuji is software
    developer with a bachelors degree in Computer Engineering.
    He is currently a contractor for Fourthought Inc.
  </LargeEntryType>
  <List name="Age">
    <Option label="Juvenile">12 - 18</Option>
    <Option label="Young adult" select="1">19 - 35</Option>
    <Option label="Middle aged adult">36 - 50</Option>
    <Option label="Senior citizen">51 - up</Option>
  </List>
  <Boolean key="administrator" value="1"/>
</Object>

We define an "age" data range and specify that Chimezie Ogbuji's age range is 19-35 (Young Adult). Notice, other instances may have multiple Option elements with "select" attributes set to 1. This doesn't make sense in this situation, since the age ranges are mutually exclusive. We could have chosen to make this distinction explicit by defining a "multiple" attribute on the List element.

Transforming application data to HTML forms

The source document.

Now that a schema has been defined for arbitrary editable data, we can begin to look at transforming instances of this schema into HTML forms for editing the same data. First, we will assign specific form elements to data fields.

  • Entry data - Text INPUT elements
  • Large data - TEXTAREA elements
  • List data - SELECT and OPTION elements
  • Boolean data - Checkbox INPUT elements.

We will be using the instance of the schema that we developed through the earlier examples for the XML source. The schema can be retrieved here. You can also get the XML of the example instance here.

Pages: 1, 2

Next Pagearrow