XForms - Cursuri Automatica si Calculatoare

Download Report

Transcript XForms - Cursuri Automatica si Calculatoare 

Xforms
Multumiri lui
Dan McCreary
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
2
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
3
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
4
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
5
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
6
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
7
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
8
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
9
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
10
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)
11
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
12
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
13
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
14
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
15
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
16
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
17
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
18
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
19
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
20
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
21
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
22
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>
23
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
24
Required Fields In CSS
• Style sheet indicates what fields are
required
• XForm displays the background in red
25
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
26
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
27