XForms

tacitmarigoldInternet και Εφαρμογές Web

25 Ιαν 2014 (πριν από 3 χρόνια και 6 μήνες)

258 εμφανίσεις

Xforms

Multumiri lui

Dan 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

XML

Schema

Meta

Data

Registry

XForms

Application

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>

Presentation

Form 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

head

body

form

fieldset

label

input

label

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"

head

body

form

fieldset

label

input

label

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

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

XForms

Output

22

HTML to XForms Conversions

HTML 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