xforms

33
XForms Von Matthias Keck

Upload: brandi

Post on 19-Mar-2016

43 views

Category:

Documents


2 download

DESCRIPTION

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 und events 6. Ausblick. Was ist XForms?. XForms ermöglicht plattform- und geräteunabhängige Formulare - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: XForms

XForms

Von Matthias Keck

Page 2: XForms

Übersicht1. Motivation2. Aufbau von XForms

model user interface

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

Page 3: XForms

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

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

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

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

Ansicht in XSmiles

Page 8: XForms

XForms Core Attribute

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

Ressource ein

Page 9: XForms

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

Wichtige Elemente - instance

Optionales Element Enthält vorgegebene Werte für bestimmte

Elemente (oder eine Referenz darauf)

Page 11: XForms

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

Beispiel: model

<model> <instance>

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

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

method="get"/> </model>

Page 13: XForms

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

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

Binden: XPath

<person> <name>

<fname/> <lname/>

</name> </person>

//person/person/name/person/name/fnamename/lname

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

Page 16: XForms

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

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

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

Beispiel: model<model> <instance>

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

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

method="get"/> </model>

Page 20: XForms

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

Alternative Möglichkeit

Einem Element kann mit bind ein Typzugewiesen werden

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

Page 22: XForms

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

XPath FunktionenBeispiel:

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

actions and events

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

Beispiel:

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

Page 25: XForms

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

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

XForms actions

message: Zeigt eine Nachricht ansetvalue: Setzt ein Element auf einen Wert setfocus: Fokussiert ein form controlsend: Startet submissionreset: Löscht alle eingegebenen Datenload: Lädt eine URL

Page 28: XForms

XForms actions

toggle:Wechselt zu anderem caseinsert: 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

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

switch - case

Page 31: XForms

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 33: XForms

Vielen Dank