June 25, 2011, 6:42 a.m.
posted by dew
A Simple Web Application
This section introduces a simple Web application developed using today's HTML forms and illustrates the various software modules that would be authored on the client and server to deploy a complete end-to-end solution. This sample application will be recast using XForms in the remaining sections of this chapter to illustrate the advantages inherent in the various components making up the XForms architecture.
1 Questionnaire Form
Consider a questionnaire application that collects the following items of user information:
Data collected by this questionnaire will be communicated to a survey application that imposes the following validity constraints on the data:
2 Developing the Web Application
The Web developer models the various items of data to be collected as simple name-value pairs; for example, age=21. Compound data items like address and name are made up of subfields, and in modeling these as simple string value pairs, the developer introduces additional field names such as name.first. Here is a list of the field names the developer might create for this application:
Next, the developer creates the server-side software component that will receive the submitted data as name-value pairs—this typically starts off as a stand-alone CGI script that evolves to encompass more and more functionality as the application gains in sophistication. Functions performed by this component include:
3 Developing the User Interface
The user interface is delivered to the connecting browser by producing appropriate HTML markup and transmitting this markup via HTTP to the user's browser. Interaction elements, for example, input fields, are contained in HTML element form that also specifies the URI where the data is to be submitted; the HTTP method to use, for example, GET or POST; and details on the encoding to use when transmitting the data. HTML markup for user interface controls, for example, input, is used to create input fields in the resulting user interface. This markup refers to the field names defined earlier, for example, name.first, to specify the association between the field names defined by the Web developer and the values provided by the end user. The markup also encodes default values, if any, for the various fields. Notice the tight binding between the HTML markup and the server-side logic developed earlier with respect to the following:
4 A More Sophisticated Implementation
The lack of separation of concerns that arises when incorporating presentational markup within executable CGI scripts is typically overcome by developing Web applications using more sophisticated server-side technologies such as Hypertext Preprocessor (PHP), Java Server Pages (JSP) or Active Server Pages (ASP). All of these technologies follow a Model, View, Controller (MVC) decomposition by factoring out the user interface markup from the program code that implements the server-side application logic. Thus, the user interface is created as an XML document with special tags that invoke the appropriate software components when processed by the server. As a result, the user interface designer can work with intuitive authoring tools that generate XML markup while the software developer builds software objects using traditional programming tools.
Thus, the simple Web application developed earlier would be created as a set of software objects that implements the validation and navigation logic and a set of markup pages used to generate the user interface at each stage of the interaction—see Figure for a high-level overview of the resulting components and their interdependencies.
1. A simple Web application made up of software components that together implement server-side validation and client-side user interaction.
Higher level Web application frameworks, such as struts based on JSP and servlets, provide further abstractions that allow the Web developer to create the application by defining the model as Java beans, defining the user interaction views as JSP pages, and wiring up the resulting model and views via a standard controller component that manages the navigation among the various views.
Finally, an interface where the user learns about invalid input only after submitting the data to the server can prove unsatisfactory. To achieve a rich interactive end-user experience, simple tests such as checking for valid values for age or birthday are better performed on the client during user interaction to provide immediate feedback. This is achieved by embedding client-side validation scripts in the HTML markup. Notice that such validation code duplicates the validation rules already authored as part of the server-side validation component, but this time in a client-specific scripting language. Variations in the scripting environment provided by Web browsers on various platforms make such scripts hard to develop, test, and maintain.