Colorado Software Summit: October 21 – 26, 2007 How I ... · Doug Tidwell – How I Learned to Stop Worrying and Love the Data Model Advantages of XForms XForms has an underlying

Slide 1

© Copyright 2007, IBM Corporation

Doug Tidwell – How I Learned to Stop Worrying and Love the Data Model

Colorado Software Summit: October 21 – 26, 2007

How I Learned to StopWorrying and Love theData Model

Doug Tidwell

IBM Corporation

[email protected]


Slide 2



Objectives

Introduce XForms, an open standardfor business forms

Discuss the advantages of declarativeprogramming

Illustrate the differences betweenXForms and more traditional AJAXapproaches

Examine ways to deploy XForms


Slide 3



The paradigm

If you need to do CRUD operationswith an XML document type, useXForms.

An XForms document is a customapplication built around your XMLdocument.

Slide 4




XForms

The next generation of formson the Web


Slide 5



XForms

A W3C effort to “bring HTML forms intothe 20th century”

Forms should be integrated with datamodels

One form should be renderable onmany types of devices

Use a declarative model as much aspossible


Slide 6



HTML forms - weaknesses

Based solely on appearance

Non-Western character support isspotty

Cross-device forms are very difficult towrite

Reliance on scripting

No real data model


Slide 7



XForms at the W3C

XForms Version 1.0 became an officialW3C Recommendation in October2003.

The latest revision to V1.0 was in March2006.

Version 1.1 is currently in Last Call atthe W3C.

The last draft was published in February2007.


Slide 8



Advantages of XForms

XForms has an underlying data modelthat can be generated from yourexisting business objects.




Slide 9



Why is XForms so important?

We’re creating more new XML datathan new relational data

Growing at 2X rate of total databasemarket [IDC]

All major relational database vendorshave some form of XML support

XML is now pervasive in manyorganizations

Almost every sector has XML basedstandards


Slide 10



Structure of an XForms file

XForms tags are justXML tags imbedded in astandard XHTML filewith a differentnamespace

Most HTML form tagsare exactly the same

Namespaces

CSS Imports (View)

Model

Constraints (Bindings)

UI (View)

Submit


Slide 11



Separation of concerns

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

<html>

<head>

</head>

<body>

</body>

</html>

XForms modelBusiness Model

(non-visible)

Content

Presentation

Form controls


Slide 12



XForms is model-driven

XForms enables thedeveloper to reuse businessrules encapsulated in XMLSchemas (XSD) and XMLTransformations (XSLT)

XForms reduces duplicationand ensures that a changein the underlying businesslogic does not requirerewriting in anotherlanguage

XML

Schema

Meta

Data

Registry

XForms

Application


Slide 13



Model-View-Controller

XForms uses a variationof the model-view-controller (MVC) designpattern

The model has no userinterface concepts

The control layer movesdata to and from themodel

View

(Presentation)

Control

Model


Slide 14



Strong typing

Submitted data can be strongly typedif necessary and can be checked on theclient

Strong typing enables automatic client-side validation

When serving the same XForms documentto an non-compliant browser, theseconstraints can be used to generate client-side JavaScript automatically


Slide 15



Beyond XML Schema

XForms authors can go beyond thebasic set of XML Schema constraintsand add complex validation rules

XForms provides additional constraintsas part of the Model

This enhances the overallmanageability of the resulting Webapplications


Slide 16



Direct XML submission

XML Forms can send XML data directly fromthe web client to the server

Data can be validated directly in the clientweb browser

Complex multi-part forms can be brokendown into tabs but do not need re-fetchingfrom the server


Slide 17



Direct XML submission

There is no need for custom server-side logic to transform the submitteddata to the business application if italready uses XML

XML submission is like AJAX++ - it has alot of configurability. You can submit afragment, prune elements, you can turnvalidation, etc. on or off in 1.1.

You can work with XML on the client side,but you can still submit to non-XMLsystems on the server side.


Slide 18



Device independence

Abstract user interfacecontrols lead to intent-based authoring of theuser interface

An XForms application cantarget many differentdevices

XForms can be deployed toa range of accessingdevices

Look at PicoForms, Satec


Slide 19



A brief tour of XForms

We’ll spend a few minutes looking atsome of the capabilities of XForms.

The Tax Form and other samples are atmozilla.org/projects/xforms/samples.html

To see the Orbeon samples, installOrbeon, start your servlet container andgo to http://localhost:8080/ops.

http://www.mozilla.org/projects/xforms/samples.html

http://www.orbeon.com/

Slide 20




Declarative programming


Slide 21




Declarative programming says what has tobe done; it doesn’t say how to do it.

Works in the context of a particular problem

We want to get the information about a customerliving in the United States, for example.

The requirements of that problem can beencoded in a specialized language

Define that language as XML; from there, you cangenerate an XML Schema, the XForms userinterface, test data, etc.


Slide 22



Problem contextIf we’re issuing an insurance policy to aperson living in the United States:

We know the format of the person’s name

We know the format of the person’s address

Maybe we need other details about thatperson

What organization they work for (we havediscounts for employees of certain companies)

Are US citizens?

We use datatypes to define the informationA person’s name is a string, their date of birth isa date, a yes or no question is a boolean, etc.


Slide 23



Defining business objects

Given our knowledge of the context,we can define business objects. Here’sa person in the U.S.:

Title (optional): Dr., Mr., Mrs., Ms., Rev.

First name

Middle name (optional)

Last name

Suffix (optional): Jr., Sr., II, III, IV

We can define all of these with XMLSchema.


Slide 24



Generating user interfaces

Given our business object, it’s easy togenerate a user interface with XForms.

Everything in the form is mapped directly tosomething in the XML schema.

Slide 25




XForms documentstructure


Slide 26



An XML document… is a tree

Both the model and theviews are trees of dataelements.

root

branch branch

leaf leaf branch

branch

leaf

leaf leaf

leaf

branch

leaf leaf

branch

…branch

leaf


Slide 27



The XHTML… is a tree

HTML

head body

title style form

fieldset

h1

label input

meta

fieldset

label input

p form

…xf:model

Both the model and theviews are trees of dataelements.


Slide 28



The model… is a tree

xf:model

OrganizationPerson

Name

FirstName

LastName

Address

Street City

…

State Zip

HTML

head

title stylemeta

…

body


Slide 29



Linking the model and view

xf:model

Person

Name

HTML

head

…

body

Person

Name

…

…form

fieldset

label

FirstName

LastName

input

label

input<bind> <bind>


Slide 30



Just do the right thing

xf:model

Person

HTML

head

…

body

Person…

…form

fieldset

label

BirthDate type="xs:date"

USCitizen type="xs:boolean"

input

label

input<bind> <bind>

…

Slide 31




XFormscompared to AJAX


Slide 32



XForms compared to AJAX

AJAX doesn’t have a built-in datamodel

AJAX uses JavaScript for everything

AJAX doesn’t automatically generateXML data


Slide 33



XForms has a data model

xf:model

OrganizationPerson

Name

FirstName

LastName

Address

Street City

…

State Zip

HTML

head

title stylemeta

…

body


Slide 34



AJAX doesn’t

HTML

head

title stylemeta

…

body


Slide 35



XForms doesn’t need JS

xf:model

Person

HTML

head

…

body

Person…

…form

fieldset

label



input

label

input<bind> <bind>

…


Slide 36



AJAX has to use JSHTML

head

…

body

form

fieldset

label

input

label

input

script

FirstName =

document.person.first;

LastName =

document.person.last;

CurrentOnTaxes =

document.person.cot.checked;

DateOfBirth =

new Date(document.person...)


Slide 37



label label

XForms generates XML

form

fieldset



input input<bind> <bind>

<Person>

<Name>. . .</Name>

<Organization>. . .</Organization>

<BirthDate>1995-04-21</BirthDate>

<USCitizen>true</USCitizen>

</Person>

…


Slide 38



AJAX has to use JSHTML

head

…

body

form

fieldset

label

input

label

input

script

// Build XML structure

// by hand; use JSON? DOM?

// Create element "Person"

// Create element "FirstName"

// Create text element "Bob"

// Add text element as child

// of "FirstName" . . .

Slide 39




Building and deployingXForms


Slide 40



Building and deploying

One of the challenges of deployingXForms is viewing them.

We’ll look at three approaches:

Requiring a browser plug-in

Generating JavaScript from the XFormsdocument

Using a standalone viewer


Slide 41



Forms Players

<html>

<head>

<xf:model>

<xf:/model>

<head>

<body>

<xf:input>

</xf:input>

</body>

</html>

Rendered

Form

XForms

Players

XForms

Extension

Mobile Client

Presentation Server

Netfront Mobile

See Wikipedia “XForms”


Slide 42



Using a browser plug-in

Typically useful in an intranet

For Internet Explorer, there are someoptions:

•FormsPlayer by Mark Birbeck

•MozzIE, written by Peter Nunnsourceforge.net/projects/mozzie

Mozilla has an XForms plug-in; it’savailable at:https://addons.mozilla.org/en-US/firefox/addon/824

http://sourceforge.net/projects/mozzie

https://addons.mozilla.org/en-US/firefox/addon/824


Slide 43



Using Ajax controls

The Chiba project provides an open-source XForms engine.

It uses XSLT to transform the XFormsdocument into Ajax-enabled HTML pagesand send them to the client.

The Orbeon Presentation Server (OPS)is based on Chiba and provides similarfunctions.

These are server-centric. They cangenerate some client-side validation.


Slide 44



Using a standalone viewer

A third option is to use a standaloneviewer that renders the XForms andmanages the data stored in the model.

FormsPlayer is a good example of thisapproach.

You can embed the FormsPlayer inside a.Net application.

Slide 45




A Web 2.0 UI


Slide 46



Data models

Lost in all the excitement of Web 2.0 isthe fact that our spiffy interfaces haveto do something useful.

You can build Web pages withJavaScript libraries to put a happy faceon a business process

Are these maintainable? Probably not.

We want these pages to be tied to ourdata model.


Slide 47



Our data models


Slide 48



The application


Slide 49



The application


Slide 50



The application

I wrote an article about using XSLT togenerate the bracket from the XMLdocument:ibm.com/developerworks/xml/library/x-xslt20xpath20/

An article about building the XFormsapplication will be published on dWsoon.

http://www.ibm.com/developerworks/xml/library/x-xslt20xpath20/


Slide 51



The new paradigm

An XForms documentis a custom editor

for your XMLdocument type.

Slide 52




Resources


Slide 53



Resources

The XForms 1.1 spec:w3.org/TR/xforms11/ [Last call draft]

XForms 1.0:w3.org/TR/xforms/

Steven Pemberton’s XFormspresentation on the W3C site:w3.org/2007/Talks/05-15-steven-xforms11/

http://www.w3.org/TR/xforms11/

http://www.w3.org/TR/xforms/

w3.org/2007/Talks/05-15-steven-xforms11/


Slide 54



Resources

XForms.org

XForms Institute:xformsinstitute.com/

O’Reilly’s XML.org

IBM developerWorks:ibm.com/developerworks/xml/xforms

http://xforms.org/portal/

http://xformsinstitute.com/

http://xml.org/

http://www.ibm.com/developerworks/xml/xforms


Slide 55



Resources

MozzIE:sourceforge.net/projects/mozzie

Embeds the Mozilla Gecko renderingengine into IE

Firefox XForms add-on:

Select Tools Add-ons, then click GetExtensions, search for “XForms”


http://sourceforge.net/projects/mozzie



Slide 56



Resources

FormFaces:formfaces.com

Chiba:chiba.sourceforge.net

Orbeon Presentation Server:

Available at orbeon.com, open-sourced

under the GPL

http://formfaces.com/

http://chiba.sourceforge.net/

http://www.orbeon.com/


Slide 57



Resources

FormsPlayer:formsplayer.com

Also see Mark Birbeck’s Introduction toXForms at:formsplayer.com/introduction-to-xforms

http://www.formsplayer.com/

http://www.formsplayer.com/introduction-to-xforms


Slide 58



Resources

Visual XForms Designer:ibm.com/alphaworks/tech/vxd

XML Forms Generator:ibm.com/alphaworks/tech/xfg

http://www.alphaworks.ibm.com/tech/vxd

http://www.alphaworks.ibm.com/tech/xfg


Slide 59



XForms Tutorial & Cookbook

An excellent tutorialon XForms

Includes dozens ofworking samples thatillustrate the fullpower of XForms.en.wikibooks.org/wiki/XForms

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


Slide 60



XForms Essentials

Micah Dubinko was oneof the editors of theXForms 1.0 spec.

You can get an onlinecopy of his book atxformsinstitute.com/essentials/

The DocBook source isavailable as well.

ISBN 978 0596003692.

http://xformsinstitute.com/essentials/

Slide 61




A brief ethics test


Slide 62



Is it ethical… No!

…to mention thesecond edition ofmy book is on itsway? (ISBN 0-596-51415-8)

Lists for $49.99, butit’s a bargain attwice the price.

Rough Cuts versionavailable today!

Slide 63




Summary


Slide 64



Summary

We’ve covered several importanttopics:

XForms, an open standard for forms


Differences between XForms and AJAX

How to deploy XForms

Slide 65




Thanks!

Doug Tidwell

IBM Corporation

[email protected]

Documents

Colorado Software Summit: October 21 – 26, 2007 How I ... · Doug Tidwell – How I Learned to Stop Worrying and Love the Data Model Advantages of XForms XForms has an underlying