xforms the next generation web form processing standard dan mccreary president, dan mccreary &...
TRANSCRIPT
![Page 1: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/1.jpg)
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
![Page 2: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/2.jpg)
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?
![Page 3: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/3.jpg)
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
![Page 4: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/4.jpg)
4
XML Schema Sample
• Screen capture of Altova XML Spy• 30 minutes to learn graphical notation
![Page 5: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/5.jpg)
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
![Page 6: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/6.jpg)
6
Parker Projection*
100%
RelativeCode Base
Time
Procedural code (Java, JavaScript, VB, C#, C++)
Declarative code (HTML, XML, XSLT, XForms)
* Jason Parker, November 2006
![Page 7: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/7.jpg)
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
![Page 8: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/8.jpg)
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
![Page 9: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/9.jpg)
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
![Page 10: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/10.jpg)
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
![Page 11: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/11.jpg)
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
![Page 12: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/12.jpg)
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
![Page 13: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/13.jpg)
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
![Page 14: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/14.jpg)
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
![Page 15: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/15.jpg)
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
![Page 16: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/16.jpg)
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
![Page 17: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/17.jpg)
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
![Page 18: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/18.jpg)
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
…
![Page 19: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/19.jpg)
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
![Page 20: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/20.jpg)
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>
![Page 21: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/21.jpg)
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"
![Page 22: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/22.jpg)
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
![Page 23: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/23.jpg)
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
![Page 24: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/24.jpg)
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
![Page 25: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/25.jpg)
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"
![Page 26: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/26.jpg)
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
![Page 27: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/27.jpg)
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
![Page 28: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/28.jpg)
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
![Page 29: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/29.jpg)
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
![Page 30: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/30.jpg)
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
![Page 31: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/31.jpg)
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
![Page 32: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/32.jpg)
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
![Page 33: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/33.jpg)
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
![Page 34: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/34.jpg)
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
![Page 35: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/35.jpg)
35
Required Fields In CSS
• Style sheet indicates what fields are required
• XForm displays the background in red
![Page 36: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/36.jpg)
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
![Page 37: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/37.jpg)
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
![Page 38: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/38.jpg)
38
XForms Books
• XForms Essentials by Micah Dubinko, O'Reilly, 2003
• XForms: XML Powered Web Forms by T.V. Raman, Addison-Wesley, 2004
![Page 39: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/39.jpg)
39
Tutorial and Cookbook• Wikibook with over
53 small example programs
• Just need FireFox, XForms extension and Notepad
http://en.wikibooks.org/wiki/XForms
![Page 40: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/40.jpg)
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
![Page 41: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/41.jpg)
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
![Page 42: XForms The Next Generation Web Form Processing Standard Dan McCreary President, Dan McCreary & Associates 11:15 AM - 12:15 PM, Thursday, December 14 2006](https://reader030.vdocument.in/reader030/viewer/2022032806/56649f065503460f94c1b6ba/html5/thumbnails/42.jpg)
42
Questions?