Transcript XForms Building Quality Web Clients with XRX

XForms Basics
Building Rich
Web Clients with XRX
Dan McCreary
Sept. 2008
Version 0.4
M
D
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?
M
D
Copyright 2008 Dan McCreary & Associates
2
XRX – The No Shredding Architecture
• XRX Stands for:
– XForms on the client
– REST Interfaces
– XQuery on the server
• XML structure stays intact as they move between
the server to the client and back again
• XRX is a “clean and elegant” architecture
because XML documents are not decomposed into
RDBMS tables
M
D
Copyright 2008 Dan McCreary & Associates
3
To Approaches
• 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
M
D
Copyright 2008 Dan McCreary & Associates
4
XML Schema Sample
M
• Screen capture of Altova XML Spy
• 30 minutes to learn graphical notation
D
Copyright 2008 Dan McCreary & Associates
5
Parker Projection*
100%
Relative
Code
Base
M
* Jason Parker, November 2006
D
Copyright 2008 Dan McCreary & Associates
Time
6
Many Organizations…
• 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
• Want to leverage existing resources
–
–
–
–
Native XML databases
XML Schemas
Use a metadata registry (MDR)
Generate large portions of XForms directly from XML Schema
(model-driven architecture) and MDR
M
D
Copyright 2008 Dan McCreary & Associates
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
M
D
Copyright 2008 Dan McCreary & Associates
8
XForms Background
• HTML 1.0 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
M
D
Copyright 2008 Dan McCreary & Associates
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
M
D
Copyright 2008 Dan McCreary & Associates
10
Strong Typing
M
• 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
D
Copyright 2008 Dan McCreary & Associates
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
M
D
Copyright 2008 Dan McCreary & Associates
12
Direct XML Submission
M
• 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
D
Copyright 2008 Dan McCreary & Associates
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
M
D
Copyright 2008 Dan McCreary & Associates
14
XForms Input Control
<xf:instance xmlns=“">
<data>
<name>John Doe</name>
</data>
</xf:instance>
<xf:input ref=“name">
<xf:label>Name:</xf:label>
</xf:input>
M
D
Copyright 2008 Dan McCreary & Associates
15
XML Data is a Tree Structure
root
branch
leaf
branch
branch
leaf
leaf
leaf
branch
leaf
M
branch
leaf
leaf
leaf
• Both the model and the view are “trees” of data
elements
D
Copyright 2008 Dan McCreary & Associates
16
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
M
D
Copyright 2008 Dan McCreary & Associates
17
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)
M
D
Copyright 2008 Dan McCreary & Associates
18
XHTML Presentation is a Tree
HTML
body
head
title
meta
style
h1
form
p
form
fieldset
label
M
input
…
fieldset
label
input
• Both the model and the views are trees of data
elements
D
Copyright 2008 Dan McCreary & Associates
19
Model is Also A Tree
HTML
head
title
meta
xf:model
style
Person
Name
first
M
Organization
…
Address
last
street
city
state
zip
• Both the model and the views are trees of data
elements
D
Copyright 2008 Dan McCreary & Associates
20
Models and View Are Linked with "Bind"
HTML
head
body
xf:model
Person
form
Name
fieldset
label
first
M
last
<bind>
input
label
input
• Both the model and the views are trees of data
elements
D
Copyright 2008 Dan McCreary & Associates
21
Just “Do The Right Thing”
HTML
head
body
xf:model
Person
form
fieldset
PersonCurrentOnTaxes type="xs:boolean"
label
PersonBirthDate type="xs:date"
input
label
<bind>
M
•
•
•
D
input
Data types from the model just do the right thing
Boolean variables become checkboxes
Dates have date selectors
Copyright 2008 Dan McCreary & Associates
22
Example of Automatic UI Generation
M
• 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
D
Copyright 2008 Dan McCreary & Associates
23
Structure of a XForms File
Namespaces
CSS Imports (View)
Model
Constraints (Bindings)
UI (View)
Submit Controls
• 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
M
D
Copyright 2008 Dan McCreary & Associates
24
XForms Events
UI Elements
Event
Listeners
script #1
script #2
user
script #3
events
script #4
M
•
•
•
D
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
Copyright 2008 Dan McCreary & Associates
25
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
M
D
Copyright 2008 Dan McCreary & Associates
26
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
M
D
Copyright 2008 Dan McCreary & Associates
27
Displaying Repeating Data
Input
<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>
M
Output
• The <repeat> element allows you to iterate through any
repeating data
• Just indicate in the table the model and nodeset
D
Copyright 2008 Dan McCreary & Associates
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
M
D
Copyright 2008 Dan McCreary & Associates
29
Dynamic Forms
M
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
D
Copyright 2008 Dan McCreary & Associates
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
M
D
Copyright 2008 Dan McCreary & Associates
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
M
D
Copyright 2008 Dan McCreary & Associates
32
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 use JavaScript
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>
M
</html>
D
Copyright 2008 Dan McCreary & Associates
34
Forms Aligned with CSS
M
• 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
D
Copyright 2008 Dan McCreary & Associates
35
Required Fields In CSS
• Style sheet indicates what fields are
required
• XForm displays the background in red
M
D
Copyright 2008 Dan McCreary & Associates
36
Basic Controls
•
•
•
•
•
xf:Input (boolean, date)
xf:output – read only output
xf:select1 – select a single item from a list
xf:select – select multiple items from a list
xf:textarea – multi-line text areas
M
D
Copyright 2008 Dan McCreary & Associates
37
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
M
D
Copyright 2008 Dan McCreary & Associates
38
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
M
D
Copyright 2008 Dan McCreary & Associates
39
XForms Books
• XForms Essentials by Micah
Dubinko, O'Reilly, 2003
• XForms: XML Powered Web
Forms by T.V. Raman, AddisonWesley, 2004
M
D
Copyright 2008 Dan McCreary & Associates
40
Tutorial and Cookbook
• Wikibook with over
90 small example
programs
• Just need FireFox,
XForms extension
and Notepad
http://en.wikibooks.org/wiki/XForms
M
D
Copyright 2008 Dan McCreary & Associates
41
Resources
• Wikipedia: XForms
• Wikibook: XForms tutorial and cookbook
• W3C XForms web site:
– http://www.w3.org/MarkUp/Forms
• Oberon XForms server
– http://www.orbeon.com
• FormFaces
– http://www.fromfaces.com
• Picoforms
– http://www.picoforms.com
M
D
Copyright 2008 Dan McCreary & Associates
42
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
M
D
Copyright 2008 Dan McCreary & Associates
43
Questions?
M
D
Copyright 2008 Dan McCreary & Associates
44
Thank You!
Please contact me for more information:
•
•
•
•
•
•
Native XML Databases
Metadata Management
Metadata Registries
Service Oriented Architectures
Business Intelligence and Data Warehouse
Semantic Web
Dan McCreary, President
Dan McCreary & Associates
Metadata Strategy Development
[email protected]
(952) 931-9198
M
D
Copyright 2008 Dan McCreary & Associates
45