Transcript XForms Presentation

XForms
The Next Generation Web Form
Processing Standard
Dan McCreary
President, Dan McCreary & Associates
11:15 AM - 12:15 PM, Thursday, December 14
2006 MN Government IT Symposium
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?
2
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
3
XML Schema Sample
• Screen capture of Altova XML Spy
• 30 minutes to learn graphical notation
4
Data Mapping : The “Frontline” of Data Exchange
Note “mnr” namespace prefix
•
•
Screen capture from Altova MapForce™
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.
5
Relative
Code Base
Parker Projection*
100%
* Jason Parker, November 2006
Time
6
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
7
Technology Goes in Spurts
1993:
1994–2001:
1997
2000
2002:
2006:
HTML forms
Few non-proprietary extensions
XML Schema and standard data types
CSS
XForms initial drafts
World Wide Web Consortium (W3C) XForms
“Recommendation” status
• 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
8
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
9
Model Driven
XForms
Application
XML
Schema
Meta
Data
Registry
• 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
10
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
11
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
12
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
13
Model-View-Controller
View (Presentation)
Control
Model
• 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
14
XML Data is a Tree Structure
root
branch
leaf
branch
branch
leaf
leaf
leaf
branch
branch
leaf
leaf
leaf
leaf
• Both the model and the view are “trees” of data
elements
15
View and Model are Trees
View (Presentation)
Control
Model
• 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
16
Separation of Concerns
<head>
<html>
</html>
XForms Model
</head>
<body>
Business Model
(non-visible)
Presentation
Form controls
</body>
• Model is in the header (non-visual section)
• Visual components are in the body (presentation)
17
XHTML Presentation is a Tree
HTML
body
head
title
meta
style
h1
form
p
fieldset
label
input
form
…
fieldset
label
input
• Both the model and the views are trees of data
elements
18
Model is Also A Tree
HTML
head
title
meta
xf:model
style
Person
Name
first
Organization
…
Address
last
street
city
state
zip
• Both the model and the views are trees of data
elements
19
Models and View Are Linked with "Bind"
HTML
head
body
xf:model
Person
form
Name
fieldset
label
first
last
<bind>
input
label
input
• Both the model and the views are trees of data
elements
20
Just Do The Right Thing
HTML
head
body
xf:model
Person
form
fieldset
PersonCurrentOnTaxes type="xs:boolean"
label
PersonBirthDate type="xs:date"
input
<bind>
•
•
•
label
input
Data types from the model just do the right thing
Boolean variables become checkboxes
Dates have date selectors
21
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
22
Structure of a XForms File
Namespaces
CSS Imports (View)
Model
Constraints (Bindings)
UI (View)
Submit
• 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
MyForm.xhtml
23
XForms Events
UI Elements
Event
Listeners
script #1
script #2
user
events
script #3
script #4
•
•
•
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
24
Customizing Appearance
<select1
appearance="full"
<label>Property Type:</label>
<item>…</item>
</select1>
appearance="compact"
appearance="minimal"
• You can decide how much screen area each data element takes by
changing the appearance attribute
– full
– compact
– minimal
25
Device Independence
• Abstract user interface
controls lead to intentbased authoring of the
user interface
• An XForms application
can target many different
devices
• XForms can be deployed
to a range of accessing
devices
26
Input
Displaying Repeating Data
<xf:model id="staffModel">
<xf:instance xmlns="">
<Staff>
<Person>
<PersonGivenName>John</PersonGivenName>
<PersonSurName>Doe</PersonSurName>
<Phone>123</Phone>
</Person>…
XForms
<xf:repeat model="staffModel"
nodeset="/Staff/Person">
<xf:output ref="PersonGivenName" />
<xf:output ref="PersonSurName" />
<xf:output ref="Phone" />
</xf:repeat>
Output
• The <repeat> element allows you to iterate through any
repeating data
• Just indicate in the table the model and nodeset
27
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
28
Dynamic Forms
group
• Group related controls to ease refactoring
• Enable structured navigation
• Factor common parts of binding expressions
switch/case/toggle
• Enable conditional user interfaces
• Enable interaction-based switching
• Create user interface wizards and multi-page tab dialogs
• Progressively reveal complex user interfaces
repeat
• Iterate over collections
• Create user interfaces that grow or shrink as needed
• Enable creation and maintenance of hierarchical content
29
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
30
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
31
HTML to XForms Conversions
HTML Form
XForms
<input type="text">
<input>
<input type="password">
<secret>
<input type="textarea">
<textarea>
Note
default – values displayed
only when controls are bound
<input type="hidden">
<input type="checkbox">
<input>
<input type="radio">
<select1>
<select>
<select>
<input type="submit">
<submit>
<input type="reset">
<trigger>
<input type="file">
<upload>
<input type="image">
<trigger>
<input type="button">
<trigger>
bound to xs:boolean
with handler <reset>
with image <label>
Note: Conversion programs are available if you don’t overuse JavaScripts
32
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="">
Model
<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>
33
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
34
Required Fields In CSS
• Style sheet indicates what fields are
required
• XForm displays the background in red
35
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
36
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
37
XForms Books
• XForms Essentials by Micah
Dubinko, O'Reilly, 2003
• XForms: XML Powered Web
Forms by T.V. Raman, AddisonWesley, 2004
38
Tutorial and Cookbook
• Wikibook with over
53 small example
programs
• Just need FireFox,
XForms extension
and Notepad
http://en.wikibooks.org/wiki/XForms
39
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
40
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 nonprogrammers
41
Questions?
42
Thank You!
Dan McCreary
President, Dan McCreary & Associates
[email protected]
www.danmccreary.com
43