Xforms Multumiri lui Dan McCreary. 2 Terminology Procedural (How) –Stepwise algorithms,...
27
Xforms Multumiri lui Dan McCreary
-
Upload
berenice-catherine-harris -
Category
Documents
-
view
214 -
download
0
Transcript of Xforms Multumiri lui Dan McCreary. 2 Terminology Procedural (How) –Stepwise algorithms,...
Xforms
Multumiri luiDan McCreary
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
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
4
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
5
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
6
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
7
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
8
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
9
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
10
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
11
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
12
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
…
13
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
14
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>
15
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"
16
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
17
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
18
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
19
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"
20
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
21
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
22
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
23
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
24
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
25
Required Fields In CSS
• Style sheet indicates what fields are required
• XForm displays the background in red
26
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
27
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
