XForms The Next Generation Web Form

Processing Standard

Dan McCrearyPresident, Dan McCreary & Associates

11:15 AM - 12:15 PM, Thursday, December 14 2006 MN Government IT Symposium

2

BHAG (Big Hairy Audacious Goal)

• What if creating web form applications could be 10 times easier than it is today?

• What if non-programmers could build fully working web applications?

• What programming languages/system would you need to use?

• What tools would you need?• How would this change your organization?• What if you had to think in a different way

to become 10 times more productive?

3

Terminology• Procedural (How)

– Stepwise algorithms, instructions– Written by programmers and software engineers– Examples:

• Java, C++, C#, C, Assembly Code

• Declarative (What)– Pattern matching languages and graphical tools– Created by Business Analysts (BA) or designers

using graphical notation and tools– Examples:

• HTML, Cascading Style Sheets (CSS), Apache Ant, XML Schemas, XML Transforms, XML Configuration Files, Workflows and XForms

4

XML Schema Sample

• Screen capture of Altova XML Spy• 30 minutes to learn graphical notation

5

Data Mapping : The “Frontline” of Data Exchange

• Left: A sample “flat file dump” of county reported sales from Altova’s FlexText™• Right: A mapping to a early draft of a ISO-11179 named and defined Statewide XML

schema for CRVs.

Screen capture from Altova MapForce™Note “mnr” namespace prefix

6

Parker Projection*

100%

RelativeCode Base

Time

Procedural code (Java, JavaScript, VB, C#, C++)

Declarative code (HTML, XML, XSLT, XForms)

* Jason Parker, November 2006

7

Many State Agencies…• Are investigating using electronic forms to replace paper

forms to cut down on data entry costs• Would like different organizations (counties) to just

supply a standard statewide form and allow customized style sheets to omit some fields and add custom graphics

• Wish to replace paper processes used today– Example in property taxation:

• Certificates of Real Estate Value, Deeds, Abstracts etc.

• Want to leverage existing resources– XML Schemas– Potentially use or create a metadata registry (MDR)– Generate large portions of XForms directly from XML Schema

(model-driven architecture) and MDR

8

Technology Goes in Spurts

• From 1994 to 2001 there were many miss-starts at trying to add functionality to HTML

• XForms did not become a W3C “Recommendation” until 2006

1993: HTML forms1994–2001: Few non-proprietary extensions1997 XML Schema and standard data types2000 CSS2002: XForms initial drafts2006: World Wide Web Consortium (W3C) XForms

“Recommendation” status

9

XForms Background• HTML Forms were never “designed” by

application architects• HTML Forms did not take advantage of XML and

CSS standards• Next generation of web forms processing

– Reached final “recommended” status in 2006• Leverage expanded use of CSS• Based on W3C XML standards

– XML Schemas– XML Schema datatypes– XPath

• Much less procedural JavaScript

10

Model Driven• XForms enables the developer

to reuse business rules encapsulated in XML Schemas (xsd) and XML Transforms (xslt)

• XForms reduces duplication and ensures that a change in the underlying business logic does not require rewriting in another language

XMLSchema

MetaData

Registry

XFormsApplication

11

Strong Typing• Submitted data is strongly typed and can be

checked using off-the-shelf XML Schema tools• Strong typing also enables automatic client-side

validation• A native XForms browser can use these types of

constraints for validating user input• When serving the same XForms document to an

non-compliant browser, these constraints can be used to generate client-side Javascript automatically

12

Beyond XML Schema• XForms authors can go beyond the basic

set of XML Schema constraints available from the underlying business application and add complex validation rules

• XForms provides additional constraints as part of the Model

• This enhances the overall manageability of the resulting Web applications

13

Direct XML Submission• XML Forms can send XML data directly

from the web client to the server• Data can be validated directly in the client

web browser• Complex multi-part forms can be broken

down into tabs but do not need re-fetching from the server

• There is no need for custom server-side logic to transform the submitted data to the business application if it already uses XML

14

Model-View-Controller• XForms uses a variation of

the model-view-controller (MVC) design pattern

• The model has no user interface concepts

• The control layer moves data to and from the model

View (Presentation)

Control

Model

15

XML Data is a Tree Structure

• Both the model and the view are “trees” of data elements

root

branch branch

leaf

leaf

branch

leaf

leaf branch

branch leaf leaf

leaf leaf

16

View and Model are Trees• The view is a tree of a

presentation data element• Models are comprised of one or

more trees• XForms supplies the control

layer that moves data elements to and from the model

• Users don’t have to worry about moving things to and from the screen

View (Presentation)

Control

Model

17

Separation of Concerns

• Model is in the header (non-visual section)• Visual components are in the body (presentation)

<html>

</html>

<head>

</head>XForms Model

Business Model(non-visible)

<body>

</body>

PresentationForm controls

18

XHTML Presentation is a Tree

• Both the model and the views are trees of data elements

HTML

head body

title style form

fieldset

h1

label input

meta

fieldset

label input

p form

…

19

Organization

Model is Also A Tree

• Both the model and the views are trees of data elements

HTML

head xf:model

title style Person

Name

first last

meta

Address

street city

…

state zip

20

Models and View Are Linked with "Bind"

• Both the model and the views are trees of data elements

HTML

xf:model

Person

Name

first last

headbody

form

fieldset

label

inputlabel

input<bind>

21

Just Do The Right Thing

• Data types from the model just do the right thing• Boolean variables become checkboxes• Dates have date selectors

HTML

xf:model

Person

PersonCurrentOnTaxes type="xs:boolean"

headbody

form

fieldset

label

inputlabel

input<bind>

PersonBirthDate type="xs:date"

22

Example of Automatic UI Generation

• All true/false data types (xs:boolean) automatically become a checkbox

• All dates (xs:date) have a date selector to the right of the date field

• All codes can be selected from lists

23

Structure of a XForms File• XForms tags are just XML

tags imbedded in a standard XHTML file with a different namespace

• Most HTML form tags are exactly the same but some attributes have been promoted to be full elements

Namespaces

CSS Imports (View)

Model

Constraints (Bindings)

UI (View)

MyForm.xhtml

Submit

24

XForms Events

• Users generate events (mouse clicks, keyboard events etc.)• Events each have a type (activation, submit etc)• Events of different types arrive at each user interface element and then are

dispatched to event listener scripts

user

presentation device

events

Event Listeners

script #1

script #2

script #3

script #4

UI Elements

25

Customizing Appearance

• You can decide how much screen area each data element takes by changing the appearance attribute– full– compact– minimal

<select1 appearance="full"

<label>Property Type:</label><item>…</item>

</select1>

appearance="compact"

appearance="minimal"

26

Device Independence• Abstract user interface

controls lead to intent-based authoring of the user interface

• An XForms application can target many different devices

• XForms can be deployed to a range of accessing devices

27

Displaying Repeating Data

• The <repeat> element allows you to iterate through any repeating data

• Just indicate in the table the model and nodeset

<xf:repeat model="staffModel"nodeset="/Staff/Person"><xf:output ref="PersonGivenName" /><xf:output ref="PersonSurName" /><xf:output ref="Phone" />

</xf:repeat>

<xf:model id="staffModel"><xf:instance xmlns="">

<Staff><Person>

<PersonGivenName>John</PersonGivenName><PersonSurName>Doe</PersonSurName><Phone>123</Phone>

</Person>…

Input

XFormsOutput

28

Multi-tab Form Layout

• Large forms can be subdivided into multiple sections

• Each section can be validated before the next section is enabled

• Tab formatting is done with standard CSS

29

Dynamic Formsgroup• Group related controls to ease refactoring• Enable structured navigation• Factor common parts of binding expressionsswitch/case/toggle• Enable conditional user interfaces• Enable interaction-based switching• Create user interface wizards and multi-page tab dialogs• Progressively reveal complex user interfacesrepeat• Iterate over collections• Create user interfaces that grow or shrink as needed• Enable creation and maintenance of hierarchical content

30

Accessibility and Section 508• User interface controls encapsulate

all relevant metadata such as:– Labels– Hints– Help

• This enhances accessibility of the application when using different reading devices (modalities)

• Example:– a non-visual client can speak relevant

information when navigating through an XForms user interface

– Voice tone is determined by CSS file

See http://en.wikipedia.org/wiki/Section_508

31

Message Level Attribute• level="ephemeral" defines the

message to be displayed as a "tool tip" or "hover message"

• level="modal" – a message that the user must acknowledge to proceed

• level="modeless" – no user response is needed to proceed through a form

32

HTML to XForms ConversionsHTML Form XForms Note<input type="text"> <input>

<input type="password"> <secret>

<input type="textarea"> <textarea>

<input type="hidden"> default – values displayed only when controls are bound

<input type="checkbox"> <input> bound to xs:boolean

<input type="radio"> <select1>

<select> <select>

<input type="submit"> <submit>

<input type="reset"> <trigger> with handler <reset>

<input type="file"> <upload>

<input type="image"> <trigger> with image <label>

<input type="button"> <trigger>

Note: Conversion programs are available if you don’t overuse JavaScripts

33

Hello World in XForms<?xml version="1.0" encoding="UTF-8"?><html xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms" xmlns:xs="http://www.w3.org/2001/XMLSchema" > <head> <title>Hello World XForms</title> <xf:model> <xf:instance xmlns=""> <first-name/> </xf:instance> </xf:model> </head> <body> <p> Please enter your first name: <xf:input ref="/first-name" incremental="true" type="xs:string"/> </p> <p> <xf:output value="concat('Hello ', /first-name, '!')"

type="xs:string"/> </p> </body></html>

Model

34

Forms Aligned with CSS

• XForms are designed to be “styled” using a CSS file• One CSS file is usually used for many forms to ensure

consistent look-and-feel

35

Required Fields In CSS

• Style sheet indicates what fields are required

• XForm displays the background in red

36

Being Productive with XForms• Many people that are not familiar with

HTML, CSS, XML and XPath have a longer learning curve

• Declarative programming is a different approach but is much easier to maintain

• You can reduce your JavaScript forms validation by over 95% if you use XForms

37

Is XForms Part of the Answer?• Short term

– Ideal if you have a controlled deployment environment– Not “built in” to most browsers (specifically IE)– Requires add-on functionality– Few drag-and-drop integrated development tools– Few people already familiar with CSS/XPath and XML

Schema

• Long term– Depends on adoption rates

38

XForms Books

• XForms Essentials by Micah Dubinko, O'Reilly, 2003

• XForms: XML Powered Web Forms by T.V. Raman, Addison-Wesley, 2004

39

Tutorial and Cookbook• Wikibook with over

53 small example programs

• Just need FireFox, XForms extension and Notepad

http://en.wikibooks.org/wiki/XForms

40

Resources• Wikipedia: XForms

• W3C XForms web site:– http://www.w3.org/MarkUp/Forms

• Oberon XForms server– http://www.orbeon.com

• FormFaces– http://www.fromfaces.com

41

Summary• XForms are truly the “Next Generation” of web

forms• XForms work well with existing W3C standards

such as CSS, XPath and XSL• XForms require a different approach (declarative

vs. procedural programming) which is not currently taught in most computer science programs

• XForms enables a broader “developer” community to include B.A.s and other non-programmers

42

Questions?

43

Thank You!

Dan McCrearyPresident, Dan McCreary & Associates

dan@danmccreary.comwww.danmccreary.com