Professionelle Bücher. Auch für Einsteiger.

Inhaltsverzeichnis
Vorwort
1 Einleitung
2 Installation
3 Frontend
4 Backend
5 Eine erste Webseite
6 Inhalte erstellen und verändern
7 Module, Mambots, Komponenten
8 Konfiguration von Joomla!
9 Eine Site aufbauen
10 Der Joomla!-Baukasten
11 Formulare: Facile Forms
12 Benutzer und Bereiche
13 Joomla! als Community-Treff
14 Forum: Simpleboard
15 Blog: WordPress
16 Wiki: MamboWiki
17 Noch mehr Kommunikation
18 Systemwartung
19 Weiterführende Themen
20 Eigene Erweiterungen schreiben
21 Mambots erstellen
22 Eine eigene Komponente
23 Troubleshooting
A Die Joomla!-API
B Glossar
C Inhalt der CD
Index
Index
Download: - ZIP, ca. 19,6 MB
Buch bestellen
Ihre Meinung?
<< zurück | Galileo Computing / <openbook> / Joomla! | vor >>
Joomla! von Anja Ebersbach, Markus Glaser, Radovan Kubani Das Handbuch für Einsteiger
Joomla! 496 S., mit CD, 29,90 Euro Galileo Computing ISBN 3-89842-632-7 |
| Kapitel 11 Formulare: Facile Forms
|  | 11.1 Installation und Konfiguration
|  | 11.2 Die Facile Forms in der Übersicht
|  | 11.3 Entwurf eines Beispielformulars
|  | 11.4 Die Formularoberfläche
|  |  | 11.4.1 Anlegen eines neuen Formulars
|  |  | 11.4.2 Texteingabefeld
|  |  | 11.4.3 Statisches Textfeld
|  |  | 11.4.4 Radiobuttons
|  |  | 11.4.5 Dropdown-Liste
|  |  | 11.4.6 Tooltip
|  |  | 11.4.7 Submit-Button
|  | 11.5 Funktionen für das Formular und die Elemente
|  |  | 11.5.1 Den Fokus auf ein Element setzen
|  |  | 11.5.2 Validierung der Eingaben
|  |  | 11.5.3 Über den Button abschicken
|  |  | 11.5.4 Rückmeldung an den Nutzer geben
|  | 11.6 Die Verwaltung der Daten
|  | 11.7 Formular im Frontend verankern
|  | 11.8 Formular im Backend-Menü verankern
|  | 11.9 Formular exportieren/importieren
## 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).
Hier klicken, um das Bild zu vergrößern Abbildung 11.6 Die leere Entwurfsansicht eines Formulars
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.
Hier klicken, um das Bild zu vergrößern Abbildung 11.7 Die Formularelemente, die Ihnen die Facile Forms zur Verfügung stellen
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.

Tabelle 11.4 Elemente der Facile Forms

Name | Bedeutung | Ausf ü hrung
Statischer Text/HTML | Einfacher (formatierter) Text, z. B. zur Beschriftung eines Feldes | ---
Rechteck | Viereck zur Dekoration, Umrahmung etc. | ---
Grafik | Statisches Bild zur Dekoration | ---
Hinweis | Kleines Symbol mit Informationstext, wenn man mit der Maus über das Element fährt | Hier klicken, um das Bild zu vergrößern
Ankreuzfeld | Mehrfachauswahlfeld | Hier klicken, um das Bild zu vergrößern
Radioknopf | Einfachauswahlfeld | Hier klicken, um das Bild zu vergrößern
Text | Einzeiliges Texteingabefeld | ---
Textbereich | Mehrzeiliges Texteingabefeld | ---
Auswahlliste | Dropdown-Liste | Hier klicken, um das Bild zu vergrößern
Abfrageliste | Abfrage der Datenbank | ---
Datei-Upload | Formularfeld zum Hochladen von Dateien | Hier klicken, um das Bild zu vergrößern
Versteckte Eingabe | Verstecktes Feld | ---
Normaler Button | Schaltfläche | Hier klicken, um das Bild zu vergrößern
Grafik-Buttom | Schaltfläche mit Bild als Hintergrund | Hier klicken, um das Bild zu vergrößern
Piktogramm | Bild, das als Schaltfläche fungiert | Hier klicken, um das Bild zu vergrößern
### 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.
Hier klicken, um das Bild zu vergrößern Abbildung 11.8 Ein neues Formular wird angelegt.
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).
Hier klicken, um das Bild zu vergrößern Abbildung 11.9 Das neue Formular im Formularmanager
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.
Hinweis: Wenn Sie hier nur eine leere Tabelle sehen, versuchen Sie, über eben diese Dropdown-Liste unser Package auszuwählen.
### 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.
Hier klicken, um das Bild zu vergrößern Abbildung 11.10 Auswahl der Formularelemente
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).
Hier klicken, um das Bild zu vergrößern Abbildung 11.11 Die Bearbeitungsansicht des Formulars mit einem Texteingabefeld
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).
Hier klicken, um das Bild zu vergrößern Abbildung 11.12 Konfiguration der Beschriftung
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).
Hier klicken, um das Bild zu vergrößern Abbildung 11.13 Das Werkzeug zum Verschieben der Formularteile
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.
Hinweis: Sie können auch mehrere Elemente gleichzeitig verschieben, indem Sie diese alle in der Liste auswählen.
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:
Hier klicken, um das Bild zu vergrößern Abbildung 11.14 Unser erstes Formular
### 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).
Hier klicken, um das Bild zu vergrößern Abbildung 11.15 Die Einstellung der Radiobuttons
Achtung: Der Sinn einer Gruppe von Radiobuttons besteht darin, dass jeweils immer nur ein Element angeklickt sein kann. Um dem Programm mitzuteilen, dass Radiobuttons zusammengehören, müssen Sie bei jedem Element im Feld Name denselben Wert eingeben.
Die Radiobuttons sollten sich nun so präsentieren wie in Abbildung 11.16.
Hier klicken, um das Bild zu vergrößern Abbildung 11.16 Ansicht der Radiobuttons
### 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.
Hier klicken, um das Bild zu vergrößern Abbildung 11.17 Die Konfiguration der Dropdown-Liste
Ü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.
Tipp: Wenn Sie in der ersten Zeile Informationen für den Nutzer formulieren, sparen Sie sich eine zusätzliche Beschriftung der Dropdown-Liste. Außerdem kann man so feststellen, ob der User überhaupt eine Auswahl getroffen hat.
Das Ergebnis sehen Sie in der Entwurfsansicht und in Abbildung 11.18.
Hier klicken, um das Bild zu vergrößern Abbildung 11.18 Unsere Dropdown-Liste
### 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.
Hier klicken, um das Bild zu vergrößern Abbildung 11.19 Die Einstellungen des Tooltips
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).
Hier klicken, um das Bild zu vergrößern Abbildung 11.20 Die Einstellung des Submit-Buttons
Die Schaltfläche vom Typ Normaler Knopf erscheint so wie in Abbildung 11.21.
Hier klicken, um das Bild zu vergrößern Abbildung 11.21 Der Submit (Abschicken)-Button
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).
Hier klicken, um das Bild zu vergrößern Abbildung 11.22 Das komplette Anmeldeformular
<< zurück | <top> | vor >>
Zum Katalog
Joomla! bestellen
Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen? Ihre Meinung
Buchtipps
| NEU: Joomla! 1.5 - für Einsteiger
| Einstieg in Joomla! - Das Video-Training
| CSS-Layouts
| Webseiten erstellen für Einsteiger
| Suchmaschinen-Optimierung für Webentwickler
| Professionelles Webdesign mit (X)HTML und CSS
| Einstieg in osCommerce/xt:Commerce
Shopping
Versandkostenfrei bestellen in Deutschland und Österreich Info

Copyright © Galileo Press 2006
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

[Galileo Computing]
Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de