11.4 Die Formularoberfläche 

Bevor wir uns an die Umsetzung unseres Skizzenformulars machen, wollen wir Ihnen noch einige grundsätzliche Informationen über die Formularerstellung in den Facile Forms geben.

Wenn Sie ein neues Formular erstellt haben, wird Ihnen eine leere Entwurfsfläche präsentiert, auf der Sie Ihre Elemente anordnen können (Abbildung 11.6). Über die Buttons Neue Seite davor und Neue Seite danach können Sie außerdem mehrere Seiten anlegen und diese dann über eingefügte Navigationsbuttons miteinander verbinden.

Die Entwurfsoberfläche entspricht zwar dem WYSIWYG-Prinzip, doch sie kennt keine Drag&Drop-Funktionalität. Größe und Position der Elemente können also nicht mit der Maus beeinflusst werden, sondern müssen über Einstellungsfenster konfiguriert bzw. mit Pfeilwerkzeugen verschoben werden (Abbildung 11.6).

Die Facile Forms stellen zur Realisierung des Formulars eine Reihe von Elementen zur Verfügung, die sich zum Teil stark an die HTML-Konventionen halten (Abbildung 11.7), zum Teil aber auch zusätzliche Optionen bieten, z.  B. den Tooltip.

In Tabelle 11.4 finden Sie alle Elemente mit einer Erläuterung und da, wo es sinnvoll ist, mit ihrer konkreten Umsetzung in einer Übersicht.

11.4.1 Anlegen eines neuen Formulars 

Lassen Sie uns mit unserem Beispielformular beginnen. Gehen Sie in Formularverwaltung, und legen Sie über Neu ein neues Formular an. Name und Titel des Formulars sind obligatorische Eingaben (Abbildung 11.8). Der Titel ist der Begriff, unter dem das erstellte Element z.  B. in Listen auftaucht, damit es besser für Menschen zu lesen ist. Über seinen Namen wird das Element programmiertechnisch z.  B. in Skripts, aber auch innerhalb der Joomla!-Konfiguration angesprochen. Achten Sie daher darauf, dass der Name keine Sonderzeichen oder Umlaute enthält. Die restlichen Einstellungen, wie z.  B. die Größe des Formulars, können vernünftigerweise auch nachträglich vorgenommen werden.

Der Punkt Paket bietet die Möglichkeit, Ihr Formular einem bereits bestehenden oder auch neuen Paket hinzuzufügen. Über das Konzept der Pakete können Sie später die Listenansicht filtern oder aber ein Paket bequem exportieren lassen. Wir tragen für unser Beispiel ein neues Paket »Anmeld_tanzkurs« ein.

Nachdem Sie das Formular gespeichert haben, erscheint es in der Liste des Formularmanagers (Abbildung 11.9).

Wie Sie sehen, wurde bereits eine Seite angelegt, die bisher allerdings noch völlig leer ist. Über die Dropdown-Liste Paket können Sie sich auch die Formulare in den anderen Paketen ansehen.

11.4.2 Texteingabefeld 

Wir werden das Formular nun mit einigen Elementen bestücken. Klicken Sie dazu auf dessen Titel. Sie befinden sich nun im Bearbeitungsmodus und können Eingabeelemente hinzufügen. Drücken Sie auf Neu. Im nun folgenden Dialog werden Sie aufgefordert, eine Auswahl aus vorgegebenen Eingabeoptionen zu treffen (Abbildung 11.7).

Wir benötigen als Erstes das Eingabefeld für den Nachnamen und klicken daher im Bereich Eingaben den Radiobutton Text an. Mit Weiter fahren Sie fort. Nun erscheint ein Formular, in dem die Angaben zu dem Textfeld detailliert eingestellt werden können (Abbildung 11.10). So können Sie hier z.  B. bestimmen, ob das Textfeld für Passwörter gedacht ist und dementsprechend bei der Eingabe nur Sternchen angezeigt werden.

Wenn Sie das Textfeld gespeichert haben, sehen Sie es links in der Liste der Formularelemente und rechts in der Entwurfsansicht des Formulars (Abbildung 11.11).

Einstellungen, die bis dahin nicht gespeichert wurden, werden nicht berücksichtigt.

11.4.3 Statisches Textfeld 

Wir wollen nun das Eingabefeld beschriften und fügen daher ein weiteres Element hinzu. Dazu gehen wir wieder auf Neu und wählen dann im Bereich Statische die Option Statischer Text/HTML. In den Einstellungen für dieses Element sollten Sie neben Titel und Namen natürlich auch ganz unten den Wortlaut der Beschriftung, in unserem Fall »Nachname« eingeben (Abbildung 11.12).

In der Entwurfsansicht des Formulars sehen Sie jetzt die Beschriftung und das Eingabefeld, die allerdings noch ein wenig anders angeordnet werden müssen. Leider kann man die Elemente nicht mit der Maus hin- und herbewegen. Markieren Sie stattdessen in der Liste ein Element, und verschieben Sie es mit den Pfeilen neben dem Formularentwurf (Abbildung 11.13).

Mit der Angabe der Pixel können Sie die Positionierung der Elemente verfeinern. Vergessen Sie nicht, die neue Anordnung mit Speichern zu sichern, sonst wird das Formular wieder zurückgesetzt.

Dieselbe Prozedur wiederholen wir für den Vornamen und die E-Mail-Adresse. Zwei Eingabefelder und zwei Beschriftungen werden hinzugefügt und positioniert. Unser Formular sieht nun so aus:

11.4.4 Radiobuttons 

Als Nächstes fügen wir zwei Radiobuttons für die Angabe des Geschlechts ein. Im Konfigurationsdialog können Sie die Beschriftung im Feld Beschriftung eingeben (Abbildung 11.15).

Die Radiobuttons sollten sich nun so präsentieren wie in Abbildung 11.16.

11.4.5 Dropdown-Liste 

Für die Angabe eines bestimmten Tanzkurses benötigen wir eine so genannte Dropdown-Liste. Sie wird im Auswahlfenster der Elemente als Auswahlliste bezeichnet. Die Konfiguration sehen Sie in Abbildung 11.17.

Über den Punkt Mehrfachauswahl können Sie einstellen, ob in der Liste mehrere Einträge ausgewählt werden dürfen. Dies hat in unserem Fall jedoch keinen Sinn. Die Auswahloptionen schreiben Sie untereinander in das Feld Optionen, und zwar in drei Abschnitten, die jeweils durch einen Strichpunkt getrennt werden:

1; Bitte Kurs auswählen; 0
0; Joomla!/Anfänger; 1
0; Joomla!/Fortgeschrittene; 2
0; Joomla!/Profi; 3

Im ersten Teil kann entweder eine 1 oder eine 0 angegeben werden. Die 1 bedeutet, dass dies die Standardeinstellung werden soll. Den zweiten Abschnitt bekommt der Nutzer als Listeneintrag zu sehen. Wenn im dritten Teil Werte verwendet werden, werden diese übermittelt. So können die Tanzkurse z.  B. intern durchnummeriert werden.

Das Ergebnis sehen Sie in der Entwurfsansicht und in Abbildung 11.18.

11.4.6 Tooltip 

Ein Element, das Sie schon von der Joomla!-Oberfläche kennen dürften, ist der Tooltip. Wir wollen unserer Kursauswahlliste einen Tooltip zur Seite stellen, der den User darüber informiert, an wen er sich bei eventuellen Fragen zu Kursinhalten wenden kann.

Dazu wählen wir im Bereich Statische den Hinweis aus und stellen ihn nach unseren Wünschen ein (Abbildung 11.19). Man könnte nun z.  B. über den Typ/ Spezial ein eigenes kleines Icon einbinden. Wir bleiben in unserem Beispiel jedoch bei dem blauen Informationssymbol.

Wenn Sie gespeichert haben, sehen Sie das eingefügte Symbol und können es neben der Kursliste positionieren. Was jetzt noch fehlt, ist der Submit-Button, der die Daten an den Server übermittelt.

11.4.7 Submit-Button 

Das Erstellen des Buttons folgt einer ähnlichen Prozedur wie das der bisherigen Elemente. Sie wählen im Bereich Knöpfe eine Schaltfläche mit dem gewünschten Layout und konfigurieren sie im Einstellungsdialog (Abbildung 11.20).

Die Schaltfläche vom Typ Normaler Knopf erscheint so wie in Abbildung 11.21.

Zuletzt soll unser Formular noch eine Überschrift erhalten. Dazu verschieben wir alle Bestandteile nach unten, indem wir in der Liste alle Elemente über die oberste Checkbox in der Titelleiste markieren und anhand der Pfeile nach unten setzen.

Danach fügen wir ein zusätzliches statisches Textfeld für den Titel ein. Um den Text als Überschrift formatieren zu können, sollten Sie über Components · Facile Forms · Configuration den WYSIWYG-Editor für Textfelder einschalten. Nun können Sie »Kursanmeldung« als Überschrift der Ebene 2 und kursiv formatieren.

Die Oberfläche unseres Formulars ist damit fertig (Abbildung 11.22).