xforms: an application platform · xforms: an application platform jaakko kangasharju xforms...

XForms: AnApplication

Platform

JaakkoKangasharju

XFormsStructuresModel-View-Controller

XForms Elements

Dynamism in XForms

An XFormsApplication

XForms: An Application PlatformApplications and Services in Internet 2009 (4 cr)

Jaakko [email protected]

Futurice Ltd.

Autumn 2009

Jaakko Kangasharju (Futurice Ltd.) XForms: An Application Platform Autumn 2009 1 / 44


Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Outline

1 XForms Structures

2 An XForms Application



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Outline

1 XForms StructuresModel-View-ControllerXForms ElementsDynamism in XForms




Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


XForms Structure

• An XForms application has two parts• Form controls provide user input capabilities• Instance data contains the actual input data

• Form controls linked to appropriate parts of instance



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Outline





Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Model-View-Controller (MVC) Architecture

• Requirement: Easy adaptation to different devices⇒ Separate user interface from logic

• Three components:• Model holds all state• View provides the user interface• Controller allows user actions to change model



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


MVC Components

Model

View

Controller

User



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


MVC in XForms

• In XForms, MVC components map as follows:• Model is a (hidden) template filled in with instance data• View consists of the form controls as presented to the user• Controller consists of the form controls bound to the

instance• Controls are specified abstractly to permit same document

to be used everywhere

• So what is the point of MVC here?



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


MVC in XForms

• In XForms, MVC components map as follows:• Model is a (hidden) template filled in with instance data• View consists of the form controls as presented to the user• Controller consists of the form controls bound to the

instance• Controls are specified abstractly to permit same document

to be used everywhere• So what is the point of MVC here?



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Model-View Separation

• Despite abstraction, sometimes different views are needed• Model should be separable from view

• Model often has pre-defined structure• Not always sensible to force UI to mirror structure



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Outline





Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Basics

• Model represented by element• Contains , , , possibly

and actions• Model referenced through model and ref or bind

attributes• XPath used to address items in the instance



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


XForms Example

ISBN

Book title

Author name

First

Last



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Example Rendering



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Controls

• XForms defines several types of controls• Common attributes: appearance, navigation attributes• Common child elements: , , ,



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Text Input Controls

• Basic text input: element• Multi-line text with element• element for passwords• Data typing: Element type used to style control (calendar,

checkbox, . . . )• Data typing: XML Schema patterns and facets to restrict

valid values



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Choice Input Controls

• element to make multiple choices (list withcheckboxes)

• to make a single choice (radio buttons)• to select from a sequential range (slider)• and can allow free-form entry or not



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Triggers and Submission

• element like a button: used to initiate actionsin response to user input

• Contains element and events that triggeractions

• Often responds to generic DOMActivate event• element basically a special-purpose trigger• Binds to element of



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Other Controls

• element shows values from instance data• Can use references or calculation• element allows uploading content• Binary content sent embedded in XML document,

encoded as text• Should support acquiring data from peripherals



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Grouping

• element used to enclose groups of controls• Semantic information intended for rendering



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Repetition

• Some instance data has repetitive structure (in XMLSchema, maxOccurs > 1)

• element allows showing this to user• Binds to a node set and repeats content for each item in

the set• Corresponding attributes when host language does not

permit XForms elements (e.g., XHTML )



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Step-by-Step Filling

• Sometimes complete form is large and consists ofindependent areas

• element defines multiple mutually exclusive elements

• element inside changes rendered case



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Outline





Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Event Handling

• Standard XML Events handling: capture, arrival, bubbling• Pre-defined elements for handling, no scripting• Pre-defined handlers picked based on experience with

scripted HTML forms• Certain user actions trigger event sequences



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Event Types

• Four kinds of XForms eventsInitialization When XForms processor initializedInteraction When user navigates through formNotification When user acts on form

Error When something wrong happens



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Modifying Instance Structure

• Controls only allow values to be changed, not structure• Especially repetitive items need structure changes• and elements provided for this• Not usable for generic modification, only homogeneous

lists• element can be used to set inserted element’s

content



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Binding

• The element can express properties dynamically,based on instance data

• Additional constraints: Presence, types, predicates• Relevancy: Whether part of the model is currently

applicable• Not the same as hidden cases: Non-relevant data not even

submitted• Can be used to replace some XML Schema processing



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Calculation

• The calculate attribute of allows computation• Can use any XPath expression + additional XForms

functions• Not replaceable with XML Schema (but is with

Schematron)• Drawbacks of scripting apply



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Outline

1 XForms Structures




Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Forms for Shopping Cart

• Let’s continue with the shopping cart. . .• Primary form: Cart itself• Another form: On each item page• Checkout process with forms too



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Embedding XForms in XHTML

• Use XHTML pages with embedded XForms• Note: Cannot use HTML!

• Model goes into document head• Controls go into document body, interspersed with regular

XHTML



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Model for Item

w013Fancy Widget16.751false



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Form for Item

How many?

Giftwrap?

Add to cart



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Item Page



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Model for Cart

ltc

w012Widget12.005

false

...



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Form for Cart: Table Skeleton

Shopping Cart

ItemPriceQuantityGiftwrap

...

Total price (in €)

Shipping costs (in €)

Checkout



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Form for Cart: Table Body

Remove



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Cart Page



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Model for Checkout

Finland

Visa

112008



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Form for Checkout: Skeleton

Address

...

Forward

Credit card

...

Back

Confirm



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Form for Checkout: Dispatch

Name

Address

Country

FinlandFinland

SwedenSweden

UKUK



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Checkout Page: Dispatch



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Form for Checkout: Payment

Card type

VisaVisa

MastercardMastercard

Cardholder name

Card number

Expiry

Month

Year



Platform

JaakkoKangasharju


XForms Elements

Dynamism in XForms


Checkout Page: Payment



Platform

JaakkoKangasharju

Lecture Over

Have a good week!


XForms StructuresModel-View-ControllerXForms ElementsDynamism in XForms

An XForms ApplicationFinal Slide

xforms: an application platform · xforms: an application platform jaakko kangasharju xforms...

Documents