Das Modul FirstSpirit™ FormEdit besteht aus einer redaktionellen Komponente zur Erstellung von Web-Formularen über den FirstSpirit SiteArchitect bzw. ContentCreator und einer Web-Komponente in Form eines Servlets, das die vom Nutzer eingegebenen Daten entgegennimmt und weiterverarbeitet.
Folgende Formen der Weiterverarbeitung von Formulardaten werden unterstützt:
Weiterhin ist es möglich, die Formulare über eigene Implementierungen auszuwerten. Die oben genannten Weiterverarbeitungsmethoden können darüber hinaus miteinander kombiniert werden.
Die folgende Grafik zeigt den Aufbau und die Funktionsweise des Moduls am Beispiel des Live-Servers. Bei der Nutzung innerhalb der Preview oder des Stagings werden die in FirstSpirit verwendeten Web- und Applikationsserver benutzt.
Für den FormEdit-Einsatz müssen die folgenden technischen Voraussetzungen erfüllt sein:
Die Installation des Moduls FirstSpirit™ FormEdit erfolgt in drei Schritten:
Das Modul muss mithilfe der mitgelieferten fsm-Datei auf dem FirstSpirit-Server hinzugefügt werden.
Öffnen Sie dafür den ServerManager
und wählen Sie den Bereich →
.
Im Hauptchannel ist eine Liste aller auf dem FirstSpirit-Server installierten Module zu sehen.
Wählen Sie nach dem Klicken auf Alle Rechte
erhalten (vgl. Abbildung Installation des Moduls auf dem FirstSpirit-Server).
Bestandteile des Moduls FirstSpirit™ FormEdit sind die Projekt-Applikation FS FormEdit ProjectConfiguration
, die Webanwendung FS FormEdit
und die Bibliothek FS FormEdit Scripts
.
Die Projekt-Applikation stellt Medien, Seiten-, Absatz-, Skript- und Tabellenvorlagen zur Verfügung, die zum Gestalten von Formularen verwendet werden können.
Die Komponente ist Sichtbar für den Bereich Projekt
.
Damit handelt es sich um eine projekt-lokale Komponente.
Diese kann nach der Installation den Projekt-Komponenten innerhalb der gewünschten Projekte zugefügt werden.
Die Webanwendung stellt Servlets zur Verfügung, die innerhalb des Projekts verwendet und aufgerufen werden können.
Die Komponente ist Sichtbar für die Bereiche →
.
Damit handelt es sich um eine web-lokale Komponente.
Diese kann nach der Installation den unterschiedlichen Web-Bereichen (preview
, staging
, live
, ContentCreator
) innerhalb der gewünschten Projekte zugefügt werden.
Die Bibliothek stellt die für die Skripte benötitgen Klassen zur Verfügung.
Nach jeder Installation oder Aktualisierung eines Moduls ist ein Neustart des FirstSpirit-Servers notwendig. |
Für den Einsatz des FirstSpirit™ FormEdit-Moduls ist eine projektspezifische Konfiguration notwendig.
Diese wird über die Projekt-Komponente vorgenommen, die dem verwendeten Projekt hinzuzufügen ist.
Öffnen Sie dafür den ServerManager
und wählen Sie den Bereich →
.
Im Hauptpanel ist eine Liste aller bereits vorhandenen Projekt-Komponenten zu sehen.
Wählen Sie nach dem Klicken auf FS FormEdit ProjectConfiguration
und bestätigen Sie die Auswahl mit .
Die Projekt-Komponente wird der Liste im Hauptpanel hinzugefügt und muss anschließend noch konfiguriert werden (vgl. Abbildung Installation der Projekt-Komponente).
Selektieren Sie dafür den Eintrag in der Liste und öffnen Sie den zugehörigen Konfigurationsdialog über (vgl. Abbildung Konfiguration der Projekt-Komponente).
Wählen Sie aus der Combobox Schema einen Datenbank-Layer und klicken Sie auf Neuer Layer
.
Ist diese Option gewählt, wird ein neuer Layer erzeugt, der auf die FirstSpirit-interne Derby-Datenbank zeigt.
Weitere Informationen zu Datenbank-Layern finden Sie im FirstSpirit Dokumentation für Administratoren.
Nachdem Sie den Button angeklickt haben und den Dialog schließen, ist keine Änderung der Konfiguration mehr möglich. Ein erneutes Importieren ist nur mittels und erneutem der Projekt-Komponente möglich. |
Zusätzlich zur Projekt-Komponente muss eine Web-Komponente hinzugefügt werden.
Öffnen Sie hierfür den ServerManager
und wählen Sie den Bereich →
.
Innerhalb des Hauptpanels sind vier Registerkarten zu sehen, die jeweils eine Liste der bereits vorhandenen Web-Komponenten enthalten.
Selektieren Sie nach dem Klicken auf FS FormEdit
-Komponente und bestätigen Sie die Auswahl jeweils mit .
Installieren Sie die Web-Komponente anschließend auf einem aktiven Webserver. Dieser kann über die Auswahlbox gewählt werden.
Die Liste im Hauptpanel ist anschließend für alle vier Registerkarten um die Web-Komponente ergänzt.
Nach dem Hinzufügen zu einem Webbereich besteht die Möglichkeit, die Komponenten zu konfigurieren, entweder mit einer von der Komponente erzeugten web.xml oder einer generischen GUI (vgl. Abbildung Konfiguration der Webanwendung).
Für die Konfiguration stehen unterschiedliche Parameter zur Verfügung:
redirect:
bzw. forward:
kann das Weiterleitungsverhalten beeinflusst werden.
Der Wert forward:ok.jsp
würde z.B. eine Weiterleitung mit allen Parametern auf die Seite ok.jsp erzeugen.
Ist weder forward:
noch redirect:
angegeben, erfolgt immer ein Redirect.
redirect:
bzw. forward:
kann das Weiterleitungsverhalten beeinflusst werden.
Der Wert forward:error.jsp
würde z.B. eine Weiterleitung mit allen Parametern auf die Seite error.jsp erzeugen.
Ist weder forward:
noch redirect:
angegeben, erfolgt immer ein Redirect.
UTF-8
oder ISO-8859-1
.
Achten Sie immer drauf, dass das gewählte Encoding mit dem verwendeten Encoding der generierten Seiten übereinstimmt (MetaTags bzw. Encoding der Sprache im |
In diesem Feld muss der Pfad zur Konfigurationsdatei fs-formlogger.ini angegeben werden. Ist dieses Feld leer oder kann die Datei nicht gefunden werden, wird auf eine leere Konfigurationsdatei zurückgegriffen.
Beispiel Staging
2708/de/conf/fs-formlogger.ini
Dem Pfad für die Staging-Umgebung ist die Auftrags-ID – hier 2708
– vorangestellt.
Beispiel Live
de/conf/fs-formlogger.ini
Der hier anzugebende Pfad kann auch absolut angegeben werden.
Dieses Beispiel sucht die Datei relativ zum WebAppRoot.
100
.
100
.
6
.
Das Modul FirstSpirit™ FormEdit kann zur einfacheren Fehleranalyse Logausgaben in eine entsprechende Logdatei ausgeben.
Dazu wird auf das log4j2-Framework zurückgegriffen, weshalb dieses für die Webanwendung zunächst entsprechend eingerichtet werden muss, falls dies noch nicht der Fall ist.
Dies geschieht durch Ablegen der log4j2-Konfigurationsdatei log4j2.properties ins Verzeichnis →
.
Falls dieses Verzeichnis noch nicht existiert, kann dies einfach manuell angelegt werden.
Eine beispielhafte log4j2-Konfigurationsdatei könnte folgendermaßen aussehen:
status = error dest = err name = PropertiesConfig property.filename = target/rolling/rollingtest.log filter.threshold.type = ThresholdFilter filter.threshold.level = debug appender.console.type = Console appender.console.name = STDOUT appender.console.layout.type = PatternLayout appender.console.layout.pattern = %m%n appender.console.filter.threshold.type = ThresholdFilter appender.console.filter.threshold.level = error appender.rolling.type = RollingFile appender.rolling.name = RollingFile appender.rolling.fileName = ${filename} appender.rolling.filePattern = target/rolling2/test1-%d{MM-dd-yy-HH-mm-ss}-%i.log.gz appender.rolling.layout.type = PatternLayout appender.rolling.layout.pattern = %d %p %C{1.} [%t] %m%n appender.rolling.policies.type = Policies appender.rolling.policies.time.type = TimeBasedTriggeringPolicy appender.rolling.policies.time.interval = 2 appender.rolling.policies.time.modulate = true appender.rolling.policies.size.type = SizeBasedTriggeringPolicy appender.rolling.policies.size.size=100MB appender.rolling.strategy.type = DefaultRolloverStrategy appender.rolling.strategy.max = 5 logger.rolling.name = de.espirit.firstspirit.opt.formedit logger.rolling.level = debug logger.rolling.additivity = false logger.rolling.appenderRef.rolling.ref = RollingFile rootLogger.level = info rootLogger.appenderRef.stdout.ref = STDOUT
Es ist zu beachten, dass abhängig von der Konfiguration auch Logausgaben aus anderen Modulen in der Logdatei auftauchen können. |
Für diesen Abschnitt werden Kenntnisse im Umgang mit FirstSpirit im Bereich Datenquellen
vorausgesetzt.
Die verschiedenen Weiterverarbeitungsmöglichkeiten der Formulardaten werden durch sogenannte Logger im Projekt konfiguriert.
Jedem Logger wird ein bestimmter Weiterverarbeitungstyp (z.B. MailLogger
) zugeordnet und mit entsprechenden Parametern versehen.
Die verschiedenen Logger werden als Datensätze in einer Datenquelle gepflegt.
Anhand der Logger-Konfiguration wird bei der Generierung die Logger-Konfigurationsdatei fs-formlogger.ini erzeugt.
Das dazu notwendige Datenbankschema und die nötigen Tabellenvorlagen werden bei Installation der Projektkomponente erzeugt.
Um Logger anlegen zu können, muss nur noch eine Datenquelle für die Tabellenvorlage form_edit.formLogger erstellt werden.
Informationen zu den Logger-Typen und deren Konfigurationsmöglichkeiten finden Sie im Kapitel Logger-Konfiguration der Weiterverarbeitung.
Bitte beachten Sie, dass Sie das Mapping innerhalb der Tabellenvorlage form_edit.formLogger noch für die fehlenden Sprachen setzen. (Im Auslieferungszustand ist nur die Sprache Deutsch gemapped.) Für die sprachabhängige Spalte formLogger_description sollten weitere Spalten mit _<Sprachkürzel> angelegt werden. |
Öffnen Sie das Projekt im SiteArchitect. Nun gibt es zum Anlegen oder Bearbeiten der Logger zwei Möglichkeiten:
direkt über die Datenquellen (Datenquelle: FormLogger) in der Datenquellen-Verwaltung
aus dem Absatz form-start heraus
Nach einem Klick auf den Button formstart-Absatzes wird folgendes Formular geöffnet:
in der Datenquellenansicht oder in der Eingabekomponente innerhalb desIn diesem Formular werden alle logger-spezifischen Daten erfasst:
Der Logger Typ wird für die Erstellung der Logger-Konfigurationsdatei fs-formlogger.ini benötigt. Folgende Logger-Typen stehen zur Verfügung:
Hier können die logger-spezifischen Konfigurationsparameter festgelegt werden. Bei einem Eintrag ist zwischen drei Vorlagen zu wählen:
logger-template-ref
Diese Vorlage wird ausgewählt, wenn eine Mail-Vorlage für den MailLogger bzw. MailUploadLogger aus der Struktur gewählt werden soll.
Die Parameter, die hier verwendet werden können, werden im nachfolgenden Kapitel erläutert.
Jedem Logger wird ein bestimmter Weiterverarbeitungstyp (z.B. MailLogger
) zugeordnet und mit entsprechenden Parametern versehen.
Die verschiedenen Logger werden als Datensätze in einer Datenquelle gepflegt.
Anhand der Logger-Konfiguration wird bei der Generierung die Logger-Konfigurationsdatei fs-formlogger.ini erzeugt.
Konfiguration der Log-File-Weiterverarbeitung
de.espirit.firstspirit.opt.formedit.ConsoleLogger
Konfiguration der CSV-Weiterverarbeitung
de.espirit.firstspirit.opt.formedit.CSVLogger
Konfiguration der Datenbank-Weiterverarbeitung
de.espirit.firstspirit.opt.formedit.JdbcLogger
org.gjt.mm.mysql.Driver
jdbc:mysql://localhost:3306/logging
Für jeden Formular-Parameter kann definiert werden, in welche Tabellen-Spalte dieser eingefügt werden soll.
Erfolgt keine explizite Zuweisung, so wird versucht, den Parameternamen als Spaltennamen zu verwenden.
Schlägt auch dies fehl, so erfolgt nur ein Eintrag in unmappedColumn
(siehe unten, Punkt Weitere Parameter).
Hier gilt folgendes Schema:
spaltenname: Der Name der Spalte, in die der Wert geschrieben werden soll.
Der Wert des Formularelements anschrift1 soll in der Datenbank in das Feld strasse geschrieben werden.
Zusätzlich zu den Mapping-Regeln können folgende Sonderregeln angegeben werden:
Konfiguration der E-Mail-Weiterverarbeitung
Ausgabe der Formulardaten in Form einer (per Datei konfigurierbaren) E-Mail (optional auch mit Dateianhang)
Der E-Mail-Logger dient zum Versand der Formulardaten per E-Mail. Für jedes Formular wird eine separate E-Mail versandt. Das Format bzw. der Text der E-Mail kann in einer (separaten) Datei konfiguriert werden. Aufgrund der formularspezifischen Logger-Konfiguration kann bei Bedarf jedem Formular eine eigene E-Mail-Konfigurationsdatei zugeordnet werden.
de.espirit.firstspirit.opt.formedit.MailLogger
oder de.espirit.firstspirit.opt.formedit.MailUploadLogger
true
, wenn der smtp-Server eine Authentifizierung (smtpAuth) benötigt
logger-template-ref
gewählt werden.
Mit dieser kann die Vorlage aus der Struktur gewählt werden.
smtpAuth
mit dem Wert true
gesetzt, sind diese Parameter Pflichtparameter und müssen angegeben werden.
Als Vorlage kann hier logger-text-password
gewählt werden, um die Daten verdeckt anzuzeigen.
Konfiguration der URL-Weiterverarbeitung
URL-Aufruf mit Parameterübergabe an eine andere Seite
Der URL-Logger dient zum Aufrufen einer anderen Seite (URL) mit der Möglichkeit, definierte Parameter des Formulars zu übergeben. Der Anwender ruft diese Seite allerdings nicht in seinem Browser auf. Ein klassischer Anwendungsfall ist z.B. Tracking.
de.espirit.firstspirit.opt.formedit.URLLogger
true
/false
)
http://myserver.com/tracking.jsp
)
url.param.<bezeichner>: eindeutiger Bezeichner der Formular-Komponente
Ähnlich wie bei dem JdbcLogger ist es nötig, die Parameter des Formulars auf neue Parameter zu mappen. Beim URLLogger werden nur die Parameter an das UrlPrefix angehängt, die auch in der Konfiguration angegeben wurden. Werden keine URL-Parameter konfiguriert, so werden alle Parameter des Formulars an die URL angehängt. |
<param>
definiert den Parameternamen, wie er an die URL angehängt werden soll.
Über die Seitenvorlage mailtemplate wird die zu versendende E-Mail konfiguriert. Die Oberfläche ähnelt der eines E-Mail-Programms.
;
) zu trennen.
%parameter%
(hier: %email%
) auf ein Formularelement zurückgegriffen werden, das eine gültige E-Mail-Adresse enthält.
Wird hier ein Wert angegeben, wird der in der Logger-Konfiguration angegebene Wert sender
überschrieben.
Hier können die Dateianhänge konfiguriert werden. Dies kann zum einen über %parameter%
geschehen oder über %all%
.
parameter
übertragen wurden.
Mehrere Dateien müssen mit Komma (,
) getrennt werden.%lebenslauf%
,%foto%
Nach den für den E-Mail-Header benötigten Angaben folgt dann der Text der E-Mail.
Dieser Text kann Platzhalter der Form %name%
enthalten, mit deren Hilfe auf Werte aus dem Formular zugegriffen werden kann.
Folgende Parameter stehen zur Verfügung:
%unmapped%
Liste aller nicht bearbeiteten Formularparameter als CSV (s.u.)
Zusätzlich zu diesen Parametern kann auf jeden Formular-Parameter zugegriffen werden.
Dazu wird die %-Notation und der Parameter-Name verwendet: %parameter%
Formulardaten, die zwar gesendet wurden, allerdings nicht in der Mail-Vorlage über %-Notation ausgegeben wurden, können über den Parameter %unmapped%
ausgegeben werden.
Bei der Angabe von E-Mail-Adressen ist darauf zu achten, dass diese im Benutzernamen keine Umlaute enthalten dürfen. Umlaute im Domainnamen hingegen sind erlaubt. |
Über einen FS_CATALOG in einer Seite vom Typ mailtemplate
kann der Redakteur Dateien auswählen, die automatisch mit einer Mail versendet werden.
Ein Szenario wäre beispielsweise eine Anmeldung, die über ein Formular erfolgt.
Als Antwort könnte dann eine Bestätigungs-Mail versendet werden, die beispielsweise AGBs enthält oder ähnliches.
Diese ABGs könnten vorher in den FS_CATALOG eingepflegt werden.
Zur Auswahl der Dateiordner muss das Linktemplate der FS_CATALOG-Elemente angepasst werden. Hierbei muss für die FS_REFERENCE-Komponente der Ordner angegeben werden, aus dem gewählt werden soll, z.B. würde <FOLDER name=“root“ …> eine Auswahl aller Medien in der Medienverwaltung erlauben.
Weiter müssen unter →
folgende Variablen als Textfelder (CMS_INPUT_TEXT) definiert werden.
Sie werden in der Linkvorlage im html-Kanal genutzt.
ps_webappContentPath
, in den deployt wird.
Bei dieser Seitenvorlage handelt es sich um eine funktionsfähige Beispiel-Vorlage. Es ist auch möglich, Daten gegen eine Datenbank oder ähnliches zu prüfen.
Diese Datei ist nicht allgemein gültig und muss projektspezifisch angepasst werden, sofern es sich bei der Quelle nicht um eine XML-Datei handelt. Weitere Informationen siehe Kapitel Konzept Autovervollständigung. |
Diese Seitenvorlage dient zur Verarbeitung einer Eingabequelle wie z.B. XML. Bei einer Eingabe des Benutzers in ein Autovervollständigen-Formularfeld wird die in dieser Seite angegebene Quelle durchsucht und die Ergebnisse dem Benutzer eingeblendet.
Diese Konfigurationsdatei beinhaltet alle Informationen ihrer Formulare bzw. die Zuordnung zu den Weiterverarbeitungskonfigurationen und diese selbst. Der Inhalt dieser Datei wird generisch von FirstSpirit bei der Generierung erzeugt.
Damit diese Datei richtig erzeugt werden kann, muss in der Inhalte-Verwaltung eine Seite auf Basis der Vorlage logger-ini-file erstellt werden.
In diese Seite muss die UID der form start-Vorlage bzw. den von Ihnen erzeugten Vorlagen, die die Funktion der form start-Vorlage erfüllen, eingetragen werden.
Die UID wird mit dem Tastaturkürzel ALT + P
bei selektierter Absatzvorlage angezeigt.
Außerdem ist ebenfalls die UID der Datenquelle anzugeben, die die Logger-Konfiguration enthält.
Bei der Referenzierung in der Struktur ist zu beachten, dass die Datei an der Stelle abgelegt ist, die bei der Konfiguration der Webkomponente angegeben wurde.
Weiterhin ist der Dateiname der Seite in der Strukturverwaltung richtig zu setzen.
Innerhalb dieses Dokuments wird der Name fs-formlogger
verwendet:
Darüber hinaus werden in der fs-formlogger.ini die Konfigurationen der im Projekt erstellten FormEdit-Formulare persistiert, so dass diese auf dem Live-Server ausgelesen werden können. Dies hat zur Folge, dass nach Änderungen an der Formularkonfiguration (form_start-Absatz) und anschließendem Deployment, die Webapplikation neu gestartet werden muss, damit das Servlet die neue Konfiguration einlesen kann.
Um die Funktionalität eines Formulars zu gewährleisten, muss eine bestimmte Reihenfolge der Absatzvorlagen bei der Erstellung des Formulars eingehalten werden. Die Absatzvorlage form-start markiert immer den Anfang und die Absatzvorlage form-end immer das Ende eines Formulars. Innerhalb dieser beiden Absätze können beliebig viele Absätze der Typen form-block und form-divider auftreten.
Innerhalb eines form-block-Elements können beliebig viele Formular-Elemente enthalten sein.
Die Absatzvorlagen des Formular-Editors stellen alle in HTML vorhandenen Formular-Elemente zur Verfügung und geben außerdem ausreichende Möglichkeiten, die Komponenten zu konfigurieren. Für die Verwendung der Komponenten muss zuvor eine Anpassung an spezifische Designvorgaben erfolgen. Dies kann einerseits durch die direkte Anpassung des HTML-Codes in den Absatzvorlagen und/oder durch die Definition von Cascading Style Sheets in der eingebundenen Stylesheet-Datei geschehen. Jeder Formular-Komponente kann individuell eine Stylesheet-Klasse zugewiesen werden.
Die Absatzvorlage form-start leitet ein neues Formular ein. Hier können grundlegende Konfigurationen vorgenommen werden, die ausschließlich dieses Formular betreffen.
Eindeutiger Bezeichner für das Formular (name
-Attribut des form
-Elementes)
Dieser Bezeichner darf weder Leerzeichen noch Sonderzeichen enthalten, da der Formularname als Teil des Servletaufrufs verwendet wird. |
POST
Innerhalb eines form-block-Elements können beliebig viele Formular-Elemente angelegt werden. Dabei ist die Reihenfolge der Komponenten unerheblich für die Funktionalität des Formulars. Jede Komponente kann individuell konfiguriert werden. So können beispielsweise Stylesheet-Klassen verwendet und die Anzeige-Breite und Anzeige-Höhe des Formulars definiert werden. Genaue Informationen und Konfigurationsanleitungen finden sich im Kapitel Verfügbare Formular-Elemente.
Das Element form-divider erzeugt eine grafische Trennung innerhalb des Formulars und bietet ansonsten keine Funktionalität.
Die Absatzvorlage form-end definiert das Ende des Formulars.
Der Formular-Editor ermöglicht es dem Redakteur, das komplette Set an HTML-Formular-Elementen zu verwenden. Wie bereits erwähnt, empfiehlt es sich vor der Verwendung der Komponenten, eine Anpassung im HTML-Quellcode im Zusammenspiel mit der Stylesheet-Datei vorzunehmen. So können individuelle Designvorlagen eingehalten werden und stehen an jeder Stelle der Webseite zur Verfügung. Die HTML-Tags der Formular-Elemente sollten aber von Änderungen unberührt bleiben, um die korrekte Funktionalität des JavaScript-Checks zu gewährleisten.
Die Formular-Komponenten können nur in der Absatzvorlage form-block verwendet werden! |
Um ein neues Formular-Element hinzuzufügen, wählen Sie einen bereits erstellten Absatz des Typs form-block aus und fügen der Content-Area-List ein neues Formular-Element hinzu:
Im Folgenden finden Sie eine Übersicht über die verfügbaren Standard-Elemente und deren Konfigurationsmöglichkeiten und Funktionen.
Über den eindeutigen Bezeichner bzw. den eindeutigen Gruppenbezeichner kann später auf den Inhalt des Formularfelds zugegriffen werden.
Wenn z.B. ein Mail- / MailUploadLogger benutzt wird, geschieht das über |
Diese Komponente stellt dem Benutzer ein Formular-Textfeld zur Verfügung.
Damit die Auswertung des Formulars und auch die Inhaltsüberprüfung ordnungsgemäß funktionieren kann, muss der Komponente ein in diesem Formular eindeutiger Bezeichner (name
-Attribut) zugewiesen werden.
name
-Attribut)value
-Attribut)readonly
-Attribut)maxlength
-Attribut)class
-Attribut)Die Formular-Komponente Textarea stellt dem Benutzer ein mehrzeiliges Texteingabefeld zur Verfügung.
Damit die Auswertung des Formulars und auch die Inhaltsüberprüfung ordnungsgemäß funktionieren kann, muss der Komponente ein in diesem Formular eindeutiger Bezeichner (name
-Attribut) zugewiesen werden.
name
-Attribut)value
-Attribut)readonly
-Attribut)class
-Attribut)Mit dieser Formular-Komponente können HTML-Radiobuttons erzeugt werden.
Beim Hinzufügen der Radiobuttons im Bereich Optionen
sollte darauf geachtet werden, dass für jeden Radiobutton eine aussagekräftige Vorbelegung angegeben wird.
Die Radiobuttons werden nacheinander mit der entsprechenden Bezeichnung (Beschriftung) auf der rechten Seite der Komponente dargestellt.
Teilkomponente RadioButtons
Diese Komponente kann innerhalb eines form-block-Absatzes eingefügt werden. In diesem Absatz werden die für alle Radiobuttons gleichen Werte gesetzt. Das Hinzufügen der eigentlichen RadioButtons erfolgt innerhalb einer ContentAreaList in diesem Absatz.
name
-Attribut)class
-Attribut)Teilkomponente RadioButton
Diese Komponente kann ausschließlich innerhalb der Formular-Komponente RadioButtons verwendet werden. Sie dient dazu, die eigentlichen RadioButtons innerhalb der o.g. Komponente hinzuzufügen.
value
-Attribut)checked
-Attribut)class
-Attribut)Mit dieser Formular-Komponente können HTML-Checkboxen erzeugt werden.
Beim Hinzufügen der Checkboxen im Bereich Optionen
sollte darauf geachtet werden, dass für jede Checkbox ein aussagekräftiger Wert angegeben wird.
Die Checkboxen werden nacheinander mit der entsprechenden Bezeichnung (Beschriftung) auf der rechten Seite der Komponente dargestellt.
Teilkomponente Checkboxes
Diese Komponente kann innerhalb eines form-block-Absatzes eingefügt werden. In diesem Absatz werden die für alle Checkboxes gleichen Werte gesetzt. Das Hinzufügen der eigentlichen Checkboxen erfolgt innerhalb einer ContentAreaList in diesem Absatz.
name
-Attribut)class
-Attribut)Teilkomponente Checkbox
Diese Komponente kann ausschließlich innerhalb der Formularkomponente Checkboxes verwendet werden. Sie dient dazu, die eigentlichen Checkboxen innerhalb der o.g. Komponente hinzuzufügen.
value
-Attribut)checked
-Attribut)class
-Attribut)Mit dieser Komponente kann dem Benutzer ein Passwortfeld zur Verfügung gestellt werden.
Auch hier muss der Redakteur einen eindeutigen Bezeichner für die Komponente vergeben.
Die Eingabe von Zeichen wird in der Komponente als *
dargestellt.
name
-Attribut)value
-Attribut)readonly
-Attribut)maxlength
-Attribut)class
-Attribut)Mit dieser Formular-Komponente kann dem Benutzer die Komfortabilität geboten werden, dass ihm während seiner Eingabe Vorschläge zur Vervollständigung gemacht werden. Auch hier muss der Redakteur einen eindeutigen Bezeichner für die Komponente vergeben.
name
-Attribut)value
-Attribut)maxlength
-Attribut)class
-Attribut)Die Formular-Komponente combobox standard bietet dem Redakteur eine komfortable Möglichkeit, dem Formular-Benutzer eine Auswahlliste zur Verfügung zu stellen. Die Inhalte der Liste sowie die Anzahl und das Layout sind frei formatierbar. Hier muss der Redakteur einen eindeutigen Gruppenbezeichner angeben.
name
-Attribut)size
-Attribut)multiple
-Attribut)class
-Attribut)Die Formular-Komponente combobox query bietet dem Redakteur eine komfortable Möglichkeit, dem Formular-Benutzer eine Auswahlliste zur Verfügung zu stellen. Die Inhalte der Liste sowie die Anzahl und das Layout sind frei formatierbar. Bei dieser speziellen SelectBox werden die Auswahloptionen aus der Datenbank über eine Query gefiltert und ausgegeben. Hier muss der Redakteur einen eindeutigen Gruppenbezeichner angeben.
name
-Attribut)size
-Attribut)multiple
-Attribut)selected
-Attribut),
) voneinander zu trennen.
class
-Attribut)Die Formular-Komponente combobox date bietet dem Redakteur eine komfortable Möglichkeit, dem Formular-Benutzer eine Auswahlliste zur Verfügung zu stellen. Die Inhalte der Liste sowie die Anzahl der Einträge und das Layout sind frei formatierbar. In dieser speziellen SelectBox werden automatisch drei Boxen erzeugt, über die komfortable ein Datum ausgewählt werden kann. Hier muss der Redakteur einen eindeutigen Gruppenbezeichner angeben.
Zur Umwandlung in ein richtiges Datumsformat innerhalb des Servlets wird dem eindeutigen Bezeichner ein |
name
-Attribut)size
-Attribut)class
-Attribut)Mit dieser Formular-Komponente ist es dem Benutzer möglich, Dateien über das Formular mitzusenden. Zudem ist es möglich, die Dateiformate einzuschränken. Auch hier muss der Redakteur einen eindeutigen Bezeichner für die Komponente vergeben.
name
-Attribut)gültiger Dateityp
aktiviert ist.
Mehrere Datei-Endungen sind durch ein |
von einander zutrennen.
class
-Attribut)Mit dieser Formular-Komponente wird in dem Formular eine Captcha-Grafik, ein Link, der eine neue Grafik erzeugt, und ein Textfeld zur Eingabe des Captcha-Codes erzeugt. Diese Komponente soll dazu dienen, nicht menschlichen Anwendern die Nutzung des Formulars zu verweigern.
Aktivieren Sie im Absatz form-start die Checkbox Captcha Validation, damit die Eingabe vom Servlet überprüft wird. |
maxlength
-Attribut)class
-Attribut)Die Überlappung der Zeichen wird durch die Höhe, Breite und die Anzahl der zu rendernden Zeichen beeinflusst (siehe Kapitel Installation und Konfiguration der Web-Komponente). Es sollte immer darauf geachtet werden, dass die Zeichen nicht zu einfach lesbar sind, da diese sonst von Spam-Robotern gelesen werden können. Bei der Standardkonfiguration von 100 x 100 Pixel mit 6 Zeichen kann ein Captcha so aussehen:
Um die Formular-Komponenten schnell und einfach anzupassen, sind für nahezu jede Komponente Konfigurationsfelder für Stylesheet-Klassen vorgesehen. Durch Angabe einer Stylesheet-Klasse kann somit jedes Feld einen individuellen Style erhalten. Eine beispielhafte Stylesheet-Datei formedit_css wird dem Projekt mit der Installation der Projektkomponente hinzugefügt. Die Klassennamen sollten in den Konfigurationsfeldern der Komponenten entsprechend angegeben werden. Die Anpassung der Stylesheet-Datei an individuelle Designvorgaben wird dringend empfohlen.
<script type="text/javascript" src="$CMS_REF(media:"formedit_js")$"></script>
Um eigene Stylesheet-Klassen verwenden zu können, müssen diese entweder im HTML-Header der (Seiten-)Vorlagen mittels <style>
-Tag deklariert werden, oder einer bestehenden bzw. neuen Stylesheet-Datei im Projekt hinzugefügt werden.
Innerhalb der mitgelieferten Vorlagen werden Javascript-Funktionen verwendet, um z.B. das Ein- und Ausblenden von einzelnen Formularblöcken zu realisieren. Diese Funktionen sind in dem Medium formedit_js hinterlegt. Das Medium muss in allen (Seiten-)Vorlagen, in denen Javascript-Funktionen benutzt werden können, innerhalb des HTML-Headers referenziert werden:
<script type="text/javascript" src="$CMS_REF(media:"formedit_js")$"></script>
Dieses freie Javascript-Framework stellt verschiedene Funktion zur Verfügung, die von den mitgelieferten Vorlagen verwendet werden. Außerdem ist diese Library Voraussetzung für die Nutzung der Formular-Komponente Autocompleter und die Formularfeld-Validierung.
Die mitgelieferte Version ist kompatibel zu den mitgelieferten Plugins. Sollte ein Update notwendig sein, ist darauf zu achten, dass dieses zu den Plugins kompatibel ist. |
jQuery kann parallel zu anderen Frameworks, z.B. MooTools, eingesetzt werden. Das Framework muss in allen Vorlagen, die die Funktionen von jQuery oder dessen Plugins nutzen, innerhalb des HTML-Headers referenziert werden:
<script type="text/javascript" src="$CMS_REF(media:"jquery")$"></script>
Weitere Informationen und Updates: https://www.jquery.com
Das jQuery-Plugin validate bietet eine komfortable Möglichkeit, die verwendeten Formularfelder bei Eingabe auf inhaltliche Korrektheit zu überprüfen. In den Formular-Komponenten wird auf die Basisfunktionalitäten dieses Plugins zurückgegriffen. Mithilfe dieses Plugins können aber auch Abhängigkeiten zwischen Formularfeldern und weitere Einschränkungen geprüft werden. Um diese Funktionalität im Projekt nutzen zu können, muss die Datei jquery_validate.js in allen (Seiten-)Vorlagen, in denen Formular-Komponenten benutzt werden können, innerhalb des HTML-Headers referenziert werden:
<script type="text/javascript" src="$CMS_REF(media:"jquery_validate")$"></script>
Alternativ ist es möglich, die Funktion in eine bereits bestehende Javascript-Datei einzufügen.
Von diesem Plugin werden auch die (Fehler-)Meldungen, die bei fehlender oder falscher Eingabekomponente – inline – erscheinen, in 19 Sprachen mitgeliefert. Diese Fehlermeldungen sind in dem sprachabhängigen Medium jquery_validate_messages hinterlegt und können bei Bedarf geändert und erweitert werden. Damit diese (Fehler-)Meldungen erscheinen, muss das Medium in allen (Seiten-)Vorlagen, in denen Formular-Komponenten benutzt werden können, innerhalb des HTML-Headers referenziert werden:
<script type="text/javascript" src="$CMS_REF(media:"jquery_validate_messages")$"></script>
Weitere Informationen und Updates: https://jqueryvalidation.org/documentation
Für die Komponente Autocompleter wird ebenfalls ein jQuery-Plugin eingesetzt. Dieses stellt allerdings nur die Funktionalität bereit, eine Anfrage (Request) mit dem eingegebenen Zeichen an eine andere Seite abzusetzen und die Antwort (Response) dem Benutzer anzuzeigen. Die Datei jquery_autocomplete muss in allen (Seiten-)Vorlagen, in denen die Formular-Komponente Autocompleter benutzt werden kann, innerhalb des HTML-Headers referenziert werden:
<script type="text/javascript" src="$CMS_REF(media:"jquery_autocomplete")$"></script>
Weitere Informationen und Updates: https://github.com/agarzola/jQueryAutocompletePlugin
Die Formular-Komponente Autocompleter stellt im eigentlichen Sinne nur eine ganz normale Texteingabe-Komponente zur Verfügung. Die Logik, die dieser Komponente die Funktionalität der Autovervollständigung bietet, besteht aus zwei Teilen:
Dieses Konzept wird in den mitgelieferten Vorlagen anhand einer Beispiel-XML-Datei umgesetzt. Die Logik ist jsp-seitig implementiert und erfordert zusätzlich die Java-Bibliothek jdom.
Die Java Bibliothek jdom ist kein Bestandteil des Moduls FirstSpirit™ FormEdit, sondern muss separat auf dem ApplicationServer bzw. FirstSpirit-Server kopiert bzw. als Modul installiert werden.
Weitere Informationen: |
Beispiel
Diesem Beispiel liegt folgende XML-Datei (Seitenvorlage xmlDataBase) zugrunde:
<?xml version="1.0" encoding="UTF-8"?> <jobs> <job jobnr="Projektleiter/in (jb-1742-a01)" jobdescription="Projektleiter/in"/> <job jobnr="Azubi (jb-1743-a02)" jobdescription="Azubi"/> <job jobnr="Template-Entwickler/in (jb-1744-a03)" jobdescription="Template-Entwickler/in"/> <job jobnr="Entwicklungsleiter/in (jb-1745-a04)" jobdescription="Entwicklungsleiter/in"/> </jobs>
Bei Verwendung des Formularfeldes Autocompleter wird bei einer Eingabe nach z.B. 3 Zeichen eine Anfrage (Request) auf die in der Formular-Komponente referenzierten Seite abgesetzt. Diese Seite beruht auf der Seitenvorlage autocompleterequest. In dieser Seitenvorlage ist eine Logik implementiert, die diese Anfrage und die übermittelte Zeichenkette entgegennimmt.
incomingValue = (String) request.getParameter("q");
Innerhalb der referenzierten XML-Quelle wird in dem Vergleichsattribut nach Vorkommen der angefragten Zeichenkette gesucht.
for (Element child : children) { if (incomingValue == null || child.getAttribute(compareAttr).getValue().toLowerCase().contains(incomingValue.toLowerCase())) { buffer.append(child.getAttribute(resultAttr).getValue() + "\n"); } }
Wenn ein zutreffender Eintrag gefunden wurde, wird eine Antwort (Response) an die Formular-Eingabekomponente gesendet:
Projektleiter/in Entwicklungsleiter/in
Dem Formular-Anwender werden nun die gefundenen Daten angezeigt, hier z.B. der Wert des Attributs jobdescription
(Rückgabetext).
Wählt der Anwender jetzt eine Möglichkeit aus, wird dieser als Wert des Formularfelds gespeichert.
In diesem Beispiel werden alle vom Redakteur durchzuführenden Aktionen beschrieben, die erforderlich sind, um ein Formular zu erstellen, mit dem sich ein Benutzer zu einem Gewinnspiel anmelden kann.
Die vom Benutzer eingegebenen Daten sollen zum einen einer personalisierten Teilnahmebestätigung dienen und zum anderen in einer Datenbank gespeichert werden, die alle Teilnehmer enthält.
Um dieses Beispiel durchführen zu können, muss das Modul FirstSpirit™ FormEdit wie im Kapitel Installation und Konfiguration beschrieben für ein FirstSpirit-Projekt installiert werden. Des Weiteren werden eine Datenbank und ein zur Verfügung stehender E-Mail-Server vorausgesetzt.
Legen Sie eine neue Seite in der Inhalte-Verwaltung an und wählen Sie als Vorlage formular. Fügen Sie der Seite in einem Absatzbereich nacheinander die Absätze form start, form block und form end hinzu:
Geben Sie nun im form start-Absatz eine Überschrift und einen Formularnamen an.
Als Sendemethode wählen Sie Post
und aktivieren die clientseitige Inhaltsprüfung.
Sollten Sie bereits eine Bestätigungsseite und eine Fehlerseite in Ihrer Struktur zur Verfügung haben, können Sie diese hier referenzieren.
Wechseln Sie nun in den Absatz form block und legen Sie je ein Textfeld für Name, Vorname, Straße, Hausnummer, PLZ, Ort und E-Mail an.
Verwenden Sie jeweils die Inhaltsprüfung Feld gefüllt
.
Um die Daten einfach in der Datenbank ablegen zu können, ist es ratsam, als eindeutigen Bezeichner den Spaltennamen in der Datenbank zu wählen.
Für dieses Beispiel verwenden wir nachname
, vorname
, strasse
, hausnummer
, plz
, ort
und email
als eindeutige Bezeichner:
Im Absatz form end sind alle erforderlichen Felder bereits vorausgefüllt, Sie können diese aber auch nach Ihren Vorstellungen anpassen.
Erstellen Sie in der Inhalte-Verwaltung eine neue Seite auf Basis der Vorlage mailtemplate.
Als Empfänger verwenden wir das Feld aus dem Formular, da die E-Mail an den Formularanwender versendet werden soll.
In diesem Beispiel also %email%
.
Den Betreff können Sie ebenso wie den Nachrichtentext und die Absender-Adresse selbst definieren.
Im Nachrichtentext können Sie mittels %eindeutigerBezeichner%
auf alle Formularfelder zugreifen:
Ziehen Sie nun Ihre erstellte Mail-Vorlage per Drag&Drop in die Struktur-Verwaltung oder referenzieren sie über das Kontextmenü aus der Struktur-Verwaltung.
Wechseln Sie nun wieder in Ihren form start-Absatz und fügen Sie in der Komponente Weiterverarbeitung einen neuen Datensatz ein.
Im folgenden Dialog geben Sie einen Namen für die E-Mail-Weiterverarbeitung an und wählen den LoggerTyp MailLogger
.
Eine Beschreibung können Sie optional hinzufügen.
Fügen Sie nun in der Komponente Logger Parameter einen neuen Datensatz mit einem Klick auf Absatz hinzufügen
hinzu und wählen Sie den Eintrag logger-text-value
und klicken Sie .
Im folgenden Dialog geben Sie als Parameter-Name smtpHost
an und als Parameter-Wert die Adresse Ihres Postausgangs-Servers, z.B. smtp.mustermann.de
.
Selbiges wiederholen Sie für den Parameter encoding
mit dem Namen des von Ihnen gewünschten Encodings (hier: UTF-8).
Nun legen Sie noch einen neuen Absatz an, diesmal allerdings mit der Vorlage logger-template-ref.
Als Parameter-Name geben Sie nun mailTemplatePath
ein und wählen in der Komponente Mailtemplate die von Ihnen erstellte Mail-Vorlage.
Weitere Parameter sind im Abschnitt Konfiguration der E-Mail-Weiterverarbeitung erläutert.
Abschließend wählen Sie in der Komponente den Status Aktiviert
(siehe Kapitel Anlegen der Logger) und klicken in der linken oberen Ecke auf das Speichern-Symbol.
Der von Ihnen angelegte Logger wird nun automatisch in der Komponente Weiterverarbeitung in Ihrem form start-Absatz aufgelistet.
Das Anlegen der zweiten Konfiguration erfolgt genauso wie im Kapitel Anlegen der Logger-Konfiguration (E-Mail) beschrieben.
Hier wählen Sie allerdings den LoggerTyp JdbcLogger
und legen alle Parameter auf Basis der logger-text-value Vorlage an.
Legen Sie bitte als erstes den Parameter driver
mit dem Namen Ihres Datenbanktreibers an, z.B. com.mysql.jdbc.Driver
für eine MySQL-Datenbank.
Bitte beachten Sie, dass der Datenbank-Treiber bereits dem FirstSpirit-Server hinzugefügt wurde. |
Mit dem Parameter url
übergeben Sie die Adresse zu Ihrer Datenbank, z.B. jdbc:mysql://muster:3306/formlogger
und mit dem Parameter table
den Namen Ihrer Tabelle (hier: demo
).
Nun legen Sie die Parameter user
und password
an und befüllen diese mit den Anmeldedaten für die Datenbank, die Ihnen üblicherweise Ihr Datenbank-Administrator zur Verfügung stellt.
Weitere Parameter sind im Abschnitt Konfiguration der Datenbank-Weiterverarbeitung erläutert.
Bitte lesen Sie hierzu das Kapitel Konfigurationsdatei fs-formlogger.ini.
Abschließend referenzieren Sie alle erstellten Seiten in der Struktur und geben diese ggf. frei.
Sollten Sie bzw. der Projektadministrator das Modul FirstSpirit™ FormEdit für das Staging eingerichtet haben,
sollte Ihr Formular nach der Generierung im generierten Stand
(http://www.ihrredaktionsserver.de:8000/fs4staging_<project_id>/…
) sichtbar sein und verwendet werden können.
Das FirstSpirit™ FormEdit-Modul ist ein Produkt der e-Spirit AG, Dortmund, Germany.
Für die Verwendung des Modules gilt gegenüber dem Anwender nur die mit der e-Spirit AG vereinbarte Lizenz.
Details zu möglicherweise fremden, nicht von der e-Spirit AG hergestellten, eingesetzten Software-Produkten, deren eigenen Lizenzen und gegebenenfalls Aktualisierungs-Informationen, finden Sie in der Datei THIRD-PARTY.txt
, die mit dem Modul ausgeliefert wird.