33
XForms Von Matthias Keck

XForms Von Matthias Keck. Übersicht 1. Motivation 2. Aufbau von XForms model user interface 3. form controls und binden 4. data types und functions 5

Embed Size (px)

Citation preview

Page 1: XForms Von Matthias Keck. Übersicht 1. Motivation 2. Aufbau von XForms model user interface 3. form controls und binden 4. data types und functions 5

XForms

Von Matthias Keck

Page 2: XForms Von Matthias Keck. Übersicht 1. Motivation 2. Aufbau von XForms model user interface 3. form controls und binden 4. data types und functions 5

Übersicht

1. Motivation2. Aufbau von XForms

model user interface

3. form controls und binden4. data types und functions5. actions und events6. Ausblick

Page 3: XForms Von Matthias Keck. Übersicht 1. Motivation 2. Aufbau von XForms model user interface 3. form controls und binden 4. data types und functions 5

Was ist XForms?

XForms ermöglicht plattform- und geräteunabhängige Formulare

XForms ist kein eigener Dokumententyp

Einbindung in beliebige XML- Dokumente XForms ist der Nachfolger von HTML- form und wird

dieses in XHTML 2.0 ersetzen Aktuelle Version: XForms 1.0

(W3C Recommendation 14.10.2003)

Page 4: XForms Von Matthias Keck. Übersicht 1. Motivation 2. Aufbau von XForms model user interface 3. form controls und binden 4. data types und functions 5

Vorteile von XForms

Trennung der Darstellung von Daten und Logik

Daten werden in XML gesammelt und als XML- Dokument gesendet

Unterstützt Berechnungen und Validierung

man braucht weniger/keine Scripte

weniger Arbeit für Server

Page 5: XForms Von Matthias Keck. Übersicht 1. Motivation 2. Aufbau von XForms model user interface 3. form controls und binden 4. data types und functions 5

Aufbau von XForms

1. Deklariere Daten(-logik) und Übertragungsart in <model>

2. Benutze XForms Controls (<input>, <submit>,…)

3. Binde XForms Controls an in <model> deklarierte Elemente

Page 6: XForms Von Matthias Keck. Übersicht 1. Motivation 2. Aufbau von XForms model user interface 3. form controls und binden 4. data types und functions 5

Aufbau in XHTML<h:html xmlns:h="http://www.w3.org/1999/xhtml"

xmlns="http://www.w3.org/2002/xforms"> <h:head> <h:title>Search</h:title> <model> <submission action="http://example.com/search" method="get"

id="s"/> </model> </h:head> <h:body> <h:p> <input ref="q"> <label>Find</label> </input> <submit submission="s"> <label>Go</label> </submit> </h:p> </h:body> </h:html>

Page 7: XForms Von Matthias Keck. Übersicht 1. Motivation 2. Aufbau von XForms model user interface 3. form controls und binden 4. data types und functions 5

Ansicht in XSmiles

Page 8: XForms Von Matthias Keck. Übersicht 1. Motivation 2. Aufbau von XForms model user interface 3. form controls und binden 4. data types und functions 5

XForms Core Attribute

ID: Weist Element eine ID zu src: Fügt unter URI angegebene

Ressource ein

Page 9: XForms Von Matthias Keck. Übersicht 1. Motivation 2. Aufbau von XForms model user interface 3. form controls und binden 4. data types und functions 5

Wichtige Elemente - model

In <model> werden die zu sammelnden Daten beschrieben

Beliebig viele model- Elemente in einem Dokument Auswahl über Attribut ID

Page 10: XForms Von Matthias Keck. Übersicht 1. Motivation 2. Aufbau von XForms model user interface 3. form controls und binden 4. data types und functions 5

Wichtige Elemente - instance

Optionales Element Enthält vorgegebene Werte für bestimmte

Elemente (oder eine Referenz darauf)

Page 11: XForms Von Matthias Keck. Übersicht 1. Motivation 2. Aufbau von XForms model user interface 3. form controls und binden 4. data types und functions 5

Wichtige Elemente - submission

Gibt an wohin und wie die Daten gesendet werden sollen

Mindestens 2 Attribute notwendigaction: Ziel des Übertragungmethod: Übertragungsart (z.B. put, post,

get…)

Page 12: XForms Von Matthias Keck. Übersicht 1. Motivation 2. Aufbau von XForms model user interface 3. form controls und binden 4. data types und functions 5

Beispiel: model

<model> <instance>

<person> <fname>Ein_Vorname</fname> <lname/>

</person> </instance> <submission id="form1" action="submit.asp"

method="get"/> </model>

Page 13: XForms Von Matthias Keck. Übersicht 1. Motivation 2. Aufbau von XForms model user interface 3. form controls und binden 4. data types und functions 5

XForms Controls

input Eingabefeld textarea großes Eingabefeld secret Eingabefeld für Passwörter select1 Auswahl genau eines Elements select Auswahl von Elementen range Schieberegler upload Öffnet Auswahlfenster zum Upload trigger Startet eine Aktion submit Übertrage Daten output Zeige gesammelte Daten

Page 14: XForms Von Matthias Keck. Übersicht 1. Motivation 2. Aufbau von XForms model user interface 3. form controls und binden 4. data types und functions 5

Attribute für XForms Controls

Das Erscheinungsbild jedes XForms Controls lässt sich über das Attribut appearance in drei Stufen variieren. fullcompactminimal

Page 15: XForms Von Matthias Keck. Übersicht 1. Motivation 2. Aufbau von XForms model user interface 3. form controls und binden 4. data types und functions 5

Binden: XPath

<person>

<name>

<fname/>

<lname/>

</name>

</person>

/

/person

/person/name

/person/name/fname

name/lname

Mit „/“ absolut von root aus, ohne „/“ relativ

Page 16: XForms Von Matthias Keck. Übersicht 1. Motivation 2. Aufbau von XForms model user interface 3. form controls und binden 4. data types und functions 5

Binden mit ref

<instance>

<person>

<name>

<fname/>

<lname/>

</name>

</person>

</instance>

<input ref="name/fname">

<label>First Name </label>

</input>

<input ref="name/lname">

<label>Last Name </label>

</input>

In <model> Im user interface

Page 17: XForms Von Matthias Keck. Übersicht 1. Motivation 2. Aufbau von XForms model user interface 3. form controls und binden 4. data types und functions 5

Binden mit bind

<model> ……

<bind nodeset= "/person/name/fname"

id="firstname"/>

<bind nodeset= "/person/name/lname"

id="lastname"/></model>

<input bind="firstname"> <label> First Name </label> </input>

<input bind="lastname"> <label>Last Name </label>

</input>

In <model> Im user interface

Page 18: XForms Von Matthias Keck. Übersicht 1. Motivation 2. Aufbau von XForms model user interface 3. form controls und binden 4. data types und functions 5

Beispiel: user interface<model> ….</model>

<input ref="fname"> <label>First Name</label>

</input><br /> <input ref="lname">

<label>Last Name</label></input><br /><submit submission="form1">

<label>Submit</label></submit>

Page 19: XForms Von Matthias Keck. Übersicht 1. Motivation 2. Aufbau von XForms model user interface 3. form controls und binden 4. data types und functions 5

Beispiel: model

<model> <instance>

<person> <fname>Ein_Vorname</fname> <lname/>

</person> </instance> <submission id="form1" action="submit.asp"

method="get"/> </model>

Page 20: XForms Von Matthias Keck. Übersicht 1. Motivation 2. Aufbau von XForms model user interface 3. form controls und binden 4. data types und functions 5

XForms data types mit XML Schema

<html xmlns:xf= "http://www.w3.org/2002/xforms"

xmlns:xsd="http://www.w3.org/2001/XMLSchema"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">

<xf:instance>

<person xmlns=""> <fname xsi:type="xsd:string"/> <lname xsi:type="xsd:string"/> <born xsi:type="xsd:date>"/> <size xsi:type="xsd:integer"/></person>

</xf:instance>

Page 21: XForms Von Matthias Keck. Übersicht 1. Motivation 2. Aufbau von XForms model user interface 3. form controls und binden 4. data types und functions 5

Alternative Möglichkeit

Einem Element kann mit bind ein Typ

zugewiesen werden

<xf:bind nodeset="/person/size" type="xsd:integer"/>

Page 22: XForms Von Matthias Keck. Übersicht 1. Motivation 2. Aufbau von XForms model user interface 3. form controls und binden 4. data types und functions 5

XPath Funktionen

if(booleantest, string1, string2) avg(node-set) min(node-set) max(node-set) count-non-empty(node-set) now() starts-with() …

Page 23: XForms Von Matthias Keck. Übersicht 1. Motivation 2. Aufbau von XForms model user interface 3. form controls und binden 4. data types und functions 5

XPath Funktionen

Beispiel:

max(werte) = 10Oder auch:a+b, a-b, a/b, a*b, a or b, a div b….

<werte> <a>2</a> <b>1</b> <c>10</c> <d>5</d></werte>

Page 24: XForms Von Matthias Keck. Übersicht 1. Motivation 2. Aufbau von XForms model user interface 3. form controls und binden 4. data types und functions 5

actions and events

Aktionen (actions) werden durch Ereignisse (events) gestartet.

Beispiel:

<setvalue bind="frequency" ev:event="xforms-ready"> 0</setvalue>

Page 25: XForms Von Matthias Keck. Übersicht 1. Motivation 2. Aufbau von XForms model user interface 3. form controls und binden 4. data types und functions 5

XForms events

DOMActivate DOMFocusIn/DOMFocusOut xforms-ready xforms-model-construct-done xforms-model-destruct xforms-help/xforms-hint xforms-reset xforms-submit

Page 26: XForms Von Matthias Keck. Übersicht 1. Motivation 2. Aufbau von XForms model user interface 3. form controls und binden 4. data types und functions 5

XForms events

xforms-value-changed xforms-select / xforms-deselect xforms-valid / xforms-invalid xforms-readonly / xforms-readwrite xforms-required / xforms-optional xforms-enabled / xforms-disabled xforms-out-of-range / xforms-in-range xforms-submit-done

Page 27: XForms Von Matthias Keck. Übersicht 1. Motivation 2. Aufbau von XForms model user interface 3. form controls und binden 4. data types und functions 5

XForms actions

message: Zeigt eine Nachricht an

setvalue: Setzt ein Element auf einen Wert

setfocus: Fokussiert ein form control

send: Startet submission

reset: Löscht alle eingegebenen Daten

load: Lädt eine URL

Page 28: XForms Von Matthias Keck. Übersicht 1. Motivation 2. Aufbau von XForms model user interface 3. form controls und binden 4. data types und functions 5

XForms actions

toggle:Wechselt zu anderem case

insert: Fügt neues Element ein

delete:Löscht Element

setindex: Setzt den Index von repeat

dispatch: Leitet (veränderte) events weiter

action: Ruft (mehrere) andere actions auf

Page 29: XForms Von Matthias Keck. Übersicht 1. Motivation 2. Aufbau von XForms model user interface 3. form controls und binden 4. data types und functions 5

switch - case

<model>

<toggle ev:event="xforms-ready" case="go"> ...

</model>

<switch>

<case id="default_message">You are using a browser that doesn't support XForms</case>

<case id="go">...</case>

</switch>

Page 30: XForms Von Matthias Keck. Übersicht 1. Motivation 2. Aufbau von XForms model user interface 3. form controls und binden 4. data types und functions 5

switch - case

Page 31: XForms Von Matthias Keck. Übersicht 1. Motivation 2. Aufbau von XForms model user interface 3. form controls und binden 4. data types und functions 5

Implementierungen

X-Smiles, open source Java-basierter XML Browser der Helsinki University of Technology.

FormsPlayer, XForms processor plug-in für Internet Explorer 6 SP 1.

Novell XForms, Java Application. Für Mozilla in Bearbeitung

Page 32: XForms Von Matthias Keck. Übersicht 1. Motivation 2. Aufbau von XForms model user interface 3. form controls und binden 4. data types und functions 5

Quellen

XForms 1.0 Recommendation Errata

(http://www.w3.org/2003/10/REC-xforms-10-20031014-errata.html)

XForms Essentials

(http://xformsinstitute.com/essentials/

browse/book.php)

Page 33: XForms Von Matthias Keck. Übersicht 1. Motivation 2. Aufbau von XForms model user interface 3. form controls und binden 4. data types und functions 5

Vielen Dank