Webformer:a Rapid Application DevelopmentToolkit for Writing Ajax Web Form Application

David W.L. Cheung Thomas Y.T. Lee Patrick K.C. Yee

Center for E-Commerce Infrastructure Development (CECID), Department ofComputer Science, University of Hong Kong

December 10, 2007

Motivation

I Web forms are commonly used to capture data on the web.

I With Asynchronous Javascript and XML (Ajax) programming,interactive web forms can be created.

I However, Ajax programming is complex in a way that themodel-view-controller (MVC) code is not clearly separated.

I We have developed a rapid application development toolkitcalled Webformer to simplify web form programming withAjax.

I Webformer provides a scripting language called Web FormApplication Language (WebFAL) for modeling web forms andgenerate Javascript/HTML code.

Webformer Architecture

I We have designed an XML-based scripting language calledWeb Form Application Language (WebFAL) for modeling webforms.

I A web form model written in WebFAL is complied by ourWebformer Complier (wfc) to generate the Javascript/HTMLsource to run on the browser.

I A JavaScript engine called webformer.js is provided asprovides a Javascript library to handle the MVC interactionson the browser, e.g. data validation and autocompletion,XML document object model (DOM) management, and Ajaxmessaging.

I A Java library called webformer.jar is provided for parsingand composing the messages in these formats to ease theprogramming the Java Servlet handlers on the server-side.

Web Form Application Development Lifecycle

Two-phase life-cycle facilitatessegregation of duties betweensoftware developers and webdesigners:

I Phase 1. The softwaredeveloper first specifiesthe model and controllerof a web form inWebFAL.

I Phase 2. The model isthen compiled into anHTML template for theweb designer to enhancethe UI view.

Gather application requirements

Specify web form in WebFAL

Compile WebFAL script

Develop server-side handlers Enhance HTML design

Deploy servlets and HTML file

WebFAL script

XSD+webformer.jarJavascript/

HTML+webformer.js

Sample Web Form Application1. The user enters his username.

The entered username isvalidated on-the-fly againstthe server database.

2. The user enters the albumname while the serversuggests the possible namesthat match what the usertypes.

3. The user can upload multiple photos. He can click on the[Add Photo] or the [Delete Photo] link to add or delete aupload entry.

4. In each upload entry, the user specifies the photo file name,whether he wants to share the photo, and the number ofprints of the photo he wants to order.

5. The user clicks on the Submit button to send the form datato the server.

Web Form Application Language (WebFAL)

A WebFAL document has a root element <WebForm/> and consistsof five kinds of child elements: <Model/>, <Validation/>,<Selection/>, <Event/>, and <SubmitUrl/>.

<WebForm name="PhotoUpload"><Model>...</Model><Validation>...</Validation>...<Selection>...</Selection>...<Event>...</Event>...<SubmitUrl>...</SubmitUrl>

</WebForm>

<Model/> ElementI Specifies the data model of the web form as a hierarchical

structure of data groups (<Group/>) and data fields(<Field/>).

I Each <Field/> is associated with a name and a data type.Possible data types include: String, Number, Date,DateTime, Time, File and Boolean.

I A <Group/> contains a list of <Field/>s or other<Group/>s. The minimum and maximum occurrence for a<Field/> or <Group/> on the web form can be specified.

<Model><Field name="Username">String</Field><Field name="Album">String</Field><Group name="Photo" minOccurs="1" maxOccurs="unbounded">

<Field name="File">File</Field><Field name="Share">String</Field><Field name="Prints">Number</Field>

</Group></Model>

<Validation/> Element

I Specifies a set of validation rules for a <Field/> or a<Group/>.

I There are two types of validation rules: browser validationrules and server validation rules.

I Browser validation rules are some static constraints for<Field/>s that can be checked by the browser withoutcontacting the server.

I Browser validation rules are some static constraints for<Field/>s that can be checked by the browser withoutcontacting the server. Available static validation constraintsare <RegExp/>, <Length/>, <MinLength/>, <MaxLength/>,<TotalDigits/>, <FractionDigits/>, <MinInclusive/>,<MaxInclusive/>, <MinExclusive/>, and<MaxExclusive/>.

I An error message may be specified so that that message isreported on the HTML page when the validation fails.

<Validation/> Element (Continued)

I A server validation is dynamically performed by the server.The <HandlerUrl/> specifies the URL of the server handlerthat performs the validation.

I At runtime, when the server validation event is triggered, anAjax request containing the data field content is sent to thespecified handler.

I The server validates the content dynamically and responses tothe browser with the validation result.

<Validation id="ValPrints">

<FractionDigits errorMsg="must be integer">0</FractionDigits>

<MinInclusive errorMsg="must be greater than 0">0</MinInclusive>

<MaxInclusive errorMsg="must be less than 10">10</MaxInclusive>

</Validation>

<Validation id="ValUser">

<MinLength errorMsg="must be longer than 6 characters">6</MinLength>

<MaxLength errorMsg="must be shorter than 20 characters">20</MaxLength>

<HandlerUrl>/ajax/userval</HandlerUrl>

</Validation>

<Selection/> Element

I Provides either a static set of coded values for a <Field/> orspecifies the URL of a server handler that provides somesuggested values.

I Coded values are a set of permissible values for a data field.

I A <Code/> can be optionally givena text attribute, which is adescription for presenting on theweb page.

I Suggested values are dynamicallygenerated by a server handlerthrough an XMLHttpRequest.

<Selection id="SelShare">

<Code text="Share">public</Code>

<Code text="Don’t share">

private

</Code>

</Selection>

<Selection id="SelAlbum">

<HandlerUrl>

/ajax/albumsuggest

</HandlerUrl>

</Selection>

I <HandlerUrl/> specifies the URL of the server handler.

<Event/> Element

I Specifies an event that can take place in a <Field/> in orderto trigger some validation or selection operations.

I Each <Event/> binds a <Field/> to one or more<Validation/>s or <Selection/>s.

I The reference to a<Field/> is the path of<Group/> and <Field/>names, delimited by a dot,from the root of the<Model/> to that<Field/>, e.g.Photo.Description.

<Event>

<FieldRef>Username</FieldRef>

<ValidationRef>ValUser</ValidationRef>

<Trigger>FocusOff</Trigger>

</Event>

<Event>

<FieldRef>Album</FieldRef>

<ValidationRef>SelAlbum</ValidationRef>

<Trigger>KeyUp</Trigger>

</Event>

I <Trigger/> specifies the event type of the data field thattriggers the specified validations/selections.

<SubmitUrl/> Element

I Specifies the URL of the server handler that processes thedata submission.

I When a user clicks on the submit button in the web form, theform data will be re-validated, packaged in an XMLdocument, and submitted to that URL.

<SubmitUrl>ajax/photoupload</SubmitUrl>

Compilation of WebFAL Scripts

I wfc compiles the WebFAL script into an JavaScript/HTMLfile and picks the HTML component that best represents a<Field/>.

I JavaScript code is embedded to handle the validation andselection events for the component.

I The web designer may modify this HTML file to enhance theview and content of the web page.

I wfc also generates an XSD file from the WebFAL script thatspecifies the XML format of the web form data for submissionto the server.

I <Model/> and <Validation/>s are converted into XSDtypes and elements.

I The structure of <Group/>s and <Field/>s in <Model/>determines the XML structure while the data type of a<Field/> determines its XSD data type.

Sample Generated Code Fragments

<html><head><title>PhotoUpload</title><script language="JavaScript" src="webformer.js"></script>...<input type="Album" id="Album_1.1" onkeyup="selfld(this) "/>...<input type="text" id="Photo.Prints_1.1" onblur="valfld(this)"/>...<a href="javascript:addgrp(Photo)" id="Photo">[Add Photo]</a>...</body></html>

Conclusion

Contributions:

I Rapid application development framework for web client andserver programming: WebFAL web form modeling languageand wfc compiler.

I Facilitation of two-phase web development life-cycle.

Future work:I Choice of HTML controls for data fields.

I The current version of webformer does not allow the user tochoose an HTML control (e.g. radio button or drop-down list)for a data field (e.g. coded value field).

I Inter-field data validation.

I GUI environment for specifying WebFAL.