Zurück zur Übersicht

XForms

von

Wassim Ben Hamadou



In diesem Dokument möchte ich die nächste Generation der Webformulare namens „XForms“ vorstellen.
Zuerst werde ich auf die üblichen HTML Webformulare eingehen die heutzutage verwendet werden. Dann möchte ich XForms und seine Vorteile gegenüber üblichen Webformularen nennen. Anhand eines praktischen Beispiels wird zum Schluss jeder Leser in der Lage sein können ein Formular der nächsten Generation zu erstellen und zu testen.

Wie alles begann...

Im Jahre 1993 wurde die HTML Formulare eingeführt. Mit Ihrer Hilfe kann man seitdem auf relativ einfache Art und Weise Daten, die ein Benutzer mittels eines Browsers eingegeben hat, an eine Email Adresse schicken. Alternativ kann man die Daten auch an ein Skript weiterschicken das die Daten dann weiterverarbeitet, formatiert, etc.

Status quo

Nun, 12 Jahre später sind diese HTML Formulare noch immer im Einsatz und erfüllen auch noch immer ihren Zweck. Jedoch ist der Anspruch der Nutzer jetzt höher geworden, sodass sich die Grenzen von HTML Formularen schnell zeigen. So muss man beispielsweise Komponenten zwischen <form></form> Tags einfügen um diese zu benutzen. Ein weiteres Problem ist der Plausibilitäts - check. Möchte man in einem selbst erstellten HTML Formular abfangen dass im Feld "Vorwahl" NUR Zahlen eingegeben werden, muss man entweder JavaScript verwenden oder das Formular komplett an ein Skript (z.B. check.php) schicken dass dann überprüft ob die Eingabe richtig war und abhängig davon den Nutzer an eine bestimmte Seite weiterleitet. Letzteres lastet die Server und die zur Verfügung stehende Bandbreite zusätzlich aus. Zudem möchte man nun auch Formulare auf Mobiltelefonen, PDAs und sonstigen Internetfähigen mobilen Endgeräten korrekt anzeigen können.

XForms

Am 14. Oktober 2003 hat das World Wide Web Consortium (W3C) die Freigabe der XForms 1.0 Recommendation angekündigt. "XForms 1.0 ist der Grundstein für eine neue Generation von Web-basierten Formularen, die die Fähigkeit besitzen, Zwecke, Präsentation und Ergebnisse mit Hilfe der Extensible Markup Language (XML) zu trennen." Während bei HTML Formularen funktionales und darstellendes Markup vereint sind, unterscheidet XForms die Beschreibung des Zwecks eines Formulars. Die Darstellung des Formulars sowie die Ergebnisse (sog. "instance data") sind in XML geschrieben. Die Unterteilung der traditionellen HTML Formulare in drei Teile - XForms model, "instance data" und das XForms Benutzerinterface - bewirkt die Trennung von Darstellung und Inhalt. Diese Trennung bringt neue Vorteile:

o XForms Module können unabhängig von den Informationen, die sie sammeln, unabhängig wiederverwendet werden.

o Benutzerinterfaces sind abstrakt, d.h. es werden nur ihre generischen Eigenschaften angezeigt, so dass sie einfach in verschiedenen Geräten mit unterschiedlichen Fähigkeiten eingesetzt werden können.

o Die Trennung von Inhalten und deren Darstellung macht die eigentliche Information für Nutzer mit assistiver Technologie lesbarer. Darüber hinaus kapseln die Benutzerinterfaces alle relevante Metadaten (z.B. Labels) und ermöglichen dadurch eine Zugänglichkeit zu Anwendungen, die verschiedene Modalitäten benutzen.

o Da die Darstellung des Formulars und die Ausgabe der Ergebnisse in XML geschrieben sind ist es einfacher die Daten zu strukturieren.

Ein weiterer Vorteil besteht darin, bereits bei der Definition des XForms festzulegen welche Felder ausgefüllt werden müssen. Ebenso könnte man definieren dass ein Eingabefeld die Summe aus den Werten in x anderen Eingabefeldern enthalten soll. Das macht den Einsatz einer Skriptsprache wie JavaScript oder PHP oft überflüssig. Da XForms ist kein eigenständiges Dokument darstellt betten es Webautoren XForms in XHTML oder SVG ein. Einen Nachteil das XForms jedoch noch. Weder der Internet Explorer noch Mozilla/Netscape oder Opera beherrschen bislang XML Sprachen wie XForms.

Praktisches Beispiel

Im folgenden wird eine Beispielanwendung von XForms vorgestellt. Es geht um ein Formular zum Versenden einer SMS. Hier gelten die üblichen Rahmenbedingungen: Der Nutzer darf maximal 160 Zeichen eingeben. Ebenso muss er eine Empfängernummer eingeben. Bisher müsste man beispielsweise mit JavaScript sicherstellen dass diese Bedingungen eingehalten werden. Hier wird gezeigt wie XForms das Problem löst. Im Kopf des Dokuments (<head> …. </head>) befindet sich der erste Teil von XForms: XForms Model:

<head>
<xforms:model id="form1">
       <xforms:instance xmlns="" id="instance1">
        <sms xmlns:my="http://www.ecos.de/XForms/SMS">
       <number>55555</number>
       <text/>
       <length>
         <current>0</current>
         <left/>
         <maximum>160</maximum>
       </length>
     </sms>
      </xforms:instance>
      <xforms:bind nodeset="/sms/number"
                   required="true()"
                   type="xsd:integer"/>
      <xforms:bind calculate="string-length(/sms/text)"
                   ref="/sms/length/current"/>
      <xforms:bind calculate="../maximum - ../current"
                   constraint="/sms/length/left &gt; -1"
                   ref="/sms/length/left"/>
      <xforms:submission id="submitsms" localfile="smsdata.xml"/>
   </xforms:model>
  </head>  

<xforms:model> beschreibt die Struktur der Daten (instance data), zusätzliche Informationen zu den Daten wie Typ Abhängigkeiten <xforms:bind> sowie wohin die Daten gesendet werden <xforms:submission>.
Wichtig ist, dass nicht alle Elemente auch wirklich im Formular vorkommen müssen. Das ist beabsichtigt, denn so kann man Daten über mehrere Formulare hinweg weiterschicken. Das löst quasi das Prinzip von <input type=“hidden“ ... > ab mit dem bisher oftmals Werte übergeben wurden.

Die Struktur innerhalb dieses Tags kann beliebig verschachtelt werden.
Gehen wir nun den Code ein wenig genauer durch:

1. Element: <number>55555</number>
So wird das Feld mit der Telefonnummer des Empfängers mit 55555 initialisiert.

2. Element: <current>0</current>
Hiermit legen wir fest wie viele Zeichen vom Nutzer bereits eingegeben wurden. Wenn das Formular aufgerufen wird hat der Nutzer natürlich noch kein Zeichen eingegeben, deshalb steht hier der Wert 0.

3. Element: <maximum>160</maximum>
Die maximale Anzahl an Zeichen die der Nutzer eingeben kann wird hier auf 160 begrenzt.

4. Element: <xforms:bind nodeset="/sms/number"  required="true()" type="xsd:integer"/>
Die Eingabe in dieses Feld ist erforderlich (required=”true()”) und zudem muss der Inhalt vom Typ Integer sein.
In diesem Fall geht es um die Telefonnummer des Empfängers.

5. Element: <xforms:bind calculate="string-length(/sms/text)"  ref="/sms/length/current"/>
Hier handelt es sich nicht um ein Eingabefeld, es wird lediglich die Länge des eingegebenen Textes in current gespeichert.

6. Element:  
<xforms:bind calculate="../maximum - ../current" constraint="/sms/length/left &gt; -1" ref="/sms/length/left"/>

Dieses „binding” berechnet dann wie viele Zeichen der Nutzer noch zur Verfügung hat. Sollte der Nutzer zu viele Zeichen eingegeben haben dann definiert „ref=…“ was mit den Daten geschehen soll.

7. Element: <xforms:submission id="submitsms" localfile="smsdata.xml"/>
Je nachdem wie viele Submit Buttons im Formular verteilt sind, kann dieses Element einmal oder öfter vorkommen.  Das bietet die Möglichkeit das Formular an verschiedene Ziele zu versenden. Es gibt also an wohin die Formulardaten geschickt werden sollen.

Die Struktur innerhalb der tags: <xforms:instance> kann man in der Ergebnis XML Datei wieder erkennen die dann generiert wird sobald die SMS versendet wird.
Aber dazu dann später mehr…

Der Inhalt des Dokuments wird folgendermaßen aufgebaut:

Zuerst benötigen wir ein Textfeld in das der Nutzer dann die Telefonnummer des Empfängers eintragen kann.

<body>
    <p>
      <xforms:input ref="/sms/number">
        <xforms:label>Telefonnummer</xforms:label>
      </xforms:input>
    </p>

   
Der Teil ref=”sms/number” definiert dass auf dieses Textfeld die Bedingungen vom Dokumentenkopf angewendet werden sollen: (Element: 1, 4). Demnach soll in dieses Feld nicht nur etwas eingegeben werden, der eingetragene Wert muss auch vom Typ Integer sein.
Der Tag <xforms:label> definiert die Beschriftung des Textfeldes. Diese wird links neben das Textfeld geschrieben.

<p>
      <xforms:output ref="/sms/length/left">
        <xforms:label>Verbleibende Zeichen</xforms:label>
      </xforms:output>
</p>

Dieser Abschnitt gibt die Anzahl an Zeichen an die der Nutzer noch zur Verfügung hat. Anfangs ist diese auf 160 eingestellt. Wie bei der Telefonnnummer wird auch hier eine Beschriftung angegeben (Verbleibende Zeichen).

<p>
      <xforms:textarea incremental="true" ref="/sms/text">
        <xforms:label>Nachricht</xforms:label>
      </xforms:textarea>
</p>

Nun wird ein mehrzeiliges Textfeld ausgegeben. Der interne Zähler wird hier aktiviert, so wird das Textfeld bei größer werdendem Text ebenfalls hochskaliert und die Berechnung kann durchgeführt werden (calculate).

<p>
      <xforms:submit submission="submitsms">
     <xforms:label>Absenden</xforms:label>
      </xforms:submit>
</p>

</body>

Zuletzt wird festgelegt wohin die Formulardaten geschickt werden sollen. „submitsms“ wurde im Dokumentenkopf definiert.

Die Daten die nach Versand der SMS generiert werden könnten so aussehen:

<?xml version="1.0" encoding="ISO-8859-1"?>
<sms xmlns:my="http://www.ecos.de/XForms/SMS">
     <number>55555</number>
     <text>XForms SMS Testformular</text>
     <length>
       <current>23</current>
       <left>137</left>
       <maximum>160</maximum>
     </length>
</sms>

Browser zum Testen

Wie bereits erwähnt kann man dieses XForms Beispiel nicht auf üblichen Browsern testen. Es gibt jedoch spezielle Browser die dazu in der Lage sind. Ich empfehle hierfür X-Smiles.

Kompletter Quelltext des Beispiels (test.xhtml):

<?xml version="1.0" encoding="ISO-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ev="http://www.w3.org/2001/xml-events"
      xmlns:xforms="http://www.w3.org/2002/xforms"
      xmlns:xsd="http://www.w3.org/2001/XMLSchema">
  <head>
    <style type="text/css">
      textarea {height: 140pt;width: 240pt;
      background-color: rgb(200,200,240);}
      input    {width: 240pt; background-color:
                 rgb(200,200,240);}
      submit   {background-color: rgb(200,200,200);}
      trigger  {background-color: rgb(200,200,200);}
    </style>

    <xforms:model id="form1">

       <xforms:instance xmlns="" id="instance1">
        <sms xmlns:my="http://www.ecos.de/XForms/SMS">
       <number>55555</number>
       <text/>
       <length>
         <current>0</current>
         <left/>
         <maximum>180</maximum>
       </length>
     </sms>
      </xforms:instance>

      <xforms:bind nodeset="/sms/number"
                   required="true()"
                   type="xsd:integer"/>
      <xforms:bind calculate="string-length(/sms/text)"
                   ref="/sms/length/current"/>
      <xforms:bind calculate="../maximum - ../current"
                   constraint="/sms/length/left &gt; -1"
                   ref="/sms/length/left"/>
      <xforms:submission id="submitsms" localfile="smsdata.xml"/>

   </xforms:model>
  </head>
  <body>
    <p>
      <xforms:input ref="/sms/number">
        <xforms:label>Telefonnummer</xforms:label>
      </xforms:input>
    </p>
    <p>
      <xforms:output ref="/sms/length/left">
        <xforms:label>Verbleibende Zeichen</xforms:label>
      </xforms:output>
    </p>
    <p>
      <xforms:textarea incremental="true" ref="/sms/text">
        <xforms:label>Nachricht</xforms:label>
      </xforms:textarea>
    </p>
    <p>
      <xforms:trigger>
        <xforms:label>Duplizieren</xforms:label>
        <xforms:setvalue ev:event="DOMActivate" ref="/sms/text" value="concat(.,.)"/>
      </xforms:trigger>
    </p>
    <p>
      <xforms:submit submission="submitsms">
     <xforms:label>Absenden</xforms:label>
      </xforms:submit>
    </p>
  </body>
</html>