Präsentation herunterladen
Die Präsentation wird geladen. Bitte warten
1
XForms Von Matthias Keck
2
Ü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
3
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 )
4
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
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
6
Aufbau in XHTML <model>
<h:html xmlns:h=" xmlns=" <h:head> <h:title>Search</h:title> <model> <submission action=" 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>
7
Ansicht in XSmiles
8
XForms Core Attribute ID: Weist Element eine ID zu
src: Fügt unter URI angegebene Ressource ein
9
Wichtige Elemente - model
In <model> werden die zu sammelnden Daten beschrieben Beliebig viele model- Elemente in einem Dokument Auswahl über Attribut ID
10
Wichtige Elemente - instance
Optionales Element Enthält vorgegebene Werte für bestimmte Elemente (oder eine Referenz darauf)
11
Wichtige Elemente - submission
Gibt an wohin und wie die Daten gesendet werden sollen Mindestens 2 Attribute notwendig action: Ziel des Übertragung method: Übertragungsart (z.B. put, post, get…)
12
Beispiel: model <model> <instance> <person>
<fname>Ein_Vorname</fname> <lname/> </person> </instance> <submission id="form1" action="submit.asp" method="get"/> </model>
13
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
14
Attribute für XForms Controls
Das Erscheinungsbild jedes XForms Controls lässt sich über das Attribut appearance in drei Stufen variieren. full compact minimal Beispiel in XSmile
15
Binden: XPath <person> <name> <fname/>
<lname/> </name> </person> / /person /person/name /person/name/fname name/lname Mit „/“ absolut von root aus, ohne „/“ relativ
16
<input ref="name/fname">
Binden mit ref In <model> Im user interface <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>
17
Binden mit bind In <model> Im user interface <model>
…… <bind nodeset= "/person/name/fname" id="firstname"/> "/person/name/lname" id="lastname"/> </model> <input bind="firstname"> <label> First Name </label> </input> <input bind="lastname"> <label>Last Name </label>
18
Beispiel: user interface
<model> ….</model> <input ref="fname"> <label>First Name</label> </input> <br /> <input ref="lname"> <label>Last Name</label> <submit submission="form1"> <label>Submit</label> </submit> model
19
Beispiel: model <model> <instance> <person>
<fname>Ein_Vorname</fname> <lname/> </person> </instance> <submission id="form1" action="submit.asp" method="get"/> </model>
20
XForms data types mit XML Schema
<html xmlns:xf= " xforms" xmlns:xsd= " XMLSchema" xmlns:xsi= 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>
21
Alternative Möglichkeit
Einem Element kann mit bind ein Typ zugewiesen werden <xf:bind nodeset="/person/size" type="xsd:integer"/> Beispiel in XSmile
22
XPath Funktionen if(booleantest, string1, string2) avg(node-set)
min(node-set) max(node-set) count-non-empty(node-set) now() starts-with() …
23
XPath Funktionen Beispiel in XSmile Beispiel: max(werte) = 10
Oder 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> Beispiel in XSmile
24
actions and events Aktionen (actions) werden durch Ereignisse (events) gestartet. Beispiel: <setvalue bind="frequency" ev:event="xforms-ready"> </setvalue>
25
XForms events DOMActivate DOMFocusIn/DOMFocusOut xforms-ready
xforms-model-construct-done xforms-model-destruct xforms-help/xforms-hint xforms-reset xforms-submit
26
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
27
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
28
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
29
switch - case Beispiel in XSmile <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> Beispiel in XSmile
30
switch - case
31
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
32
Quellen XForms 1.0 Recommendation Errata
( XForms Essentials ( browse/book.php)
33
Vielen Dank
Ähnliche Präsentationen
