JavaScript-Bereich

Inhalt [ Verbergen ]

Im JavaScript-Bereich kann nutzerspezifische Logik für das Formular umgesetzt werden. Hier in der Abbildung werden für ein E-Mail-Eingabefeld nur E-Mail-Adressen mit einem bestimmten Host zugelassen. Zudem wird das Zahlenformat für ein Eingabefelder einer Währung so angepasst, dass die Währungseinheit sichtbar ist und immer 2 Stellen nach dem Komma eingegeben werden.

JavaScript

JavaScript, welches im JavaScript-Bereich geschrieben wurde, wird beim Öffnen des Formulars automatisch geladen. Es wird zudem sofort ausgeführt, sobald das Formular fertigen geladen ist (document.ready). Es kann also sofort auf alle Formularelemente per jQuery zugegriffen werden.

Dies gilt nicht für JavaScript, welches als Mandant- oder Formulardatei angelegt wurde. Wenn erforderlich, sollte hier manuell gewartet werden:

$(function(){
 /* code goes here */
});

Viele Funktionalitäten im Formular sind direkt über die grafische Oberfläche des Xima® Formcycle-Designers einstellbar. Etwa können Felder als Mussfelder markiert werden oder in Abhängigkeit einer Bedingung ein- oder ausgeblendet werden. Bei komplexen Formularen kann es vorkommen, dass es spezielle Anforderungen gibt, die eine gesonderte Programmierung erfordern. Im JavaScript-Bereich ist es möglich, eigene Logik für das Formular zu erstellen. Hier wird, wie der Name es sagt, die Programmiersprache JavaScript verwendet.

JavaScript funktioniert in allen modernen Browsern. Es ist allerdings zu beachten, dass die Sprache JavaScript sich aktiv in Entwicklung befindet und es daher mehrere Versionen gibt. Bei der Programmierung ist unbedingt darauf zu achten, welche Browser und welche Versionen dieser Browser unterstützt werden sollen. 

Speziell ist mit Vorsicht vorzugehen, falls der Browser Internet Explorer unterstützt werden soll. Dieser wird nicht mehr weiterentwickelt und unterstützt viele moderne Funktionen nicht. Dazu gehören etwa

  • Fetch-API, eine native Methode ähnlich zu jQuery.ajax
  • Promise-API, zum Handhaben von asynchronen Aktivitäten wie Netzwerkanfragen
  • Neue Syntax wie Arrow-Funktionen, async-Funktionen, Objekt-Destrukturierung oder Klassen
  • etc.

In dieser Hilfe werden Beispiele für JavaScript (wenn unterschiedlich) in zwei Varianten angegeben. Einmal für modernes JavaScript, und einmal für Unterstützung des Internet Explorers. Dies sieht dann etwa wie folgt aus:

const sayHello = ({firstName = "Max", lastName = "Mustermann"}) => console.log(`Hello, ${firstName} ${lastName}!`);
sayHello({lastName: "Müller"});
function sayHello(options) {
 var firstName = typeof options.firstName === "undefined" ? "Max" : options.firstName;
 var lastName = typeof options.lastName === "undefined" ? "Mustermann" : options.lastName;
 var greeting = "Hello, " + firstname + " " + lastName + "!";
  console.log(greeting);
}
sayHello({lastName: "Müller"});

In Formularen von Xima® Formcycle wird weiterhin die JavaScript-Bibliothek jQuery verwendet. Dies ist eine bewährte Bibliothek, welche neben einigen Hilfsfunktionen die Arbeit mit HTML (dem DOM) vereinfacht und zudem Unterschiede zwischen verschiedenen Browsern abstrahiert. Wird eine Methode von jQuery verwendet, funktioniert diese Methode in allen unterstützten Browsern gleich. In Formularen wird die derzeit neuste Version jQuery 3 verwendet:

Hilfeseiten und Tutorials zu jQuery:

Selektieren von Elementen

Es sollte nicht direkt die id zum Selektieren von Elementen verwendet werden. Diese wird von Xima® Formcycle dynamisch erzeugt wird und kann sich jederzeit ändern. Aus diesem Grund sollte auch nicht das Attribut xi verwendet werden, auch hier handelt es sich um eine interne ID von Xima® Formcycle.

Der erste Schritt beim Arbeiten mit Formularen besteht darin, mittels JavaScript auf ein Formularelement zuzugreifen. jQuery nutzt CSS-Selektoren zur Selektierung von HTML-Elementen. Im Folgenden sei ein kurzer Überblick gegeben, wie sich Formularelemente von Xima® Formcycle mittels jQuery selektieren lassen. Weitere Information sind im Abschnitt Selektoren zu finden.

Elemente per Name selektieren
Zum Auswählen eines Formularfeld wird sein Name genutzt. Also der Name, der im Xima® Formcycle-Designer einem Formularelement unter Grundeigenschaften gegeben wird. Dieser Name wird auch im HTML dem Element als Wert des Attributs name mitgegeben. Um also ein Textfeld mit dem Namen tfMail zu selektieren, wird mittels jQuery selektiert: $("[name='tfName']").
Elemente mit nuzterdefinierten Attributen selektieren
Unter Attribute lassen sich im Xima® Formcycle-Designer einem Element nutzerspezifische HTML-Attribute vergeben. Auf diese wird mittels Attributselektoren zugegriffen: $("[data-attribute='value']"). Da diese Selektoren allerdings langsam sein können, sollten diese sparsam eingesetzt werden.
Container-Element selektieren
Einige Formularelemente bestehen aus dem eigentlichen HTML-Element und einem HTML-Element für das Label. Um das Container-Element zu selektieren, kann das Attribut xn verwendet werden. $("[xn='tf1']").
Formularfeldtypen selektieren
Jede Art von Formularelement (z.B. Seite, Textarea, Schaltfläche, Checkbox) verfügt über eine bestimmte CSS-Klasse. Falls man etwa alle Eingabefelder selektieren möchte, die sich in einem Fieldset befinden, kann man folgendes schreiben: $('.XFieldSet .XTextField').
Variablen selektieren
Werden Variablen erstellt, wird im Formular ein verstecktes Eingabefeld (input) erzeugt. Auch auf dieses kann mit dem Attribut name zugegriffen werden: $("[name='tfVariable']")

Editor

Im JavaScript-Bereich steht ein intelligenter Editor bereit, der beim Schreiben von JavaScript unterstützt. Der Editor, welcher hier verwendet wird, nennt sich Monaco Editor. Im Folgenden seien kurz einige wesentliche Funktionalitäten erwähnt:

Code-Schnipsel sind kleine Programmteile, die oft verwendet werden. Für häufige Funktionalitäten gibt es im Editor bereits fertige solche Code-Schnipsel. In der Abbildung wird das Code-Schnipsel Datenbankabfrage eingefügt. Nach der Bestätigung mit Enter wird dann automatisch der notwendige JavaScript-Code eingefügt, um eine Datenbankabfrage zu starten. Selber braucht man nur noch den wirklich relevanten Teil des Codes ändern, also den Namen der Datenbankquelle und was mit den abgefragten Daten passieren soll. Code-Schnipsel erscheinen automatisch als Vorschläge, wenn man deren Namen eintippt. Einige Code-Schnipsel, die zur Verfügung stehen, sind etwa die Datenabfragen Datenbankabfrage, CSV-Datenabfrage, JSON-Datenabfrage, XML-Datenabfrage und LDAP-Datenabfrage; sowie die Event Handlers click, blur und change.

Die Autovervollständigung macht es auch einfacher, Formularfelder zu selektieren. Beim Tippen wird eine Liste mit passenden Namen von Formularfeldern vorgeschlagen. Wird ein Vorschlag ausgewählt und mit Enter bestätigt, fügt der Editor automatisch einen jQuery-Selektor für das Formularfeld ein, zum Beispiel $("[name='tfMail']").

Wird eine JavaScript-Datei länger, kann es schwierig werden, bestimmte Stellen wiederzufinden. Abhilfe schafft hier die Suche. Die Suchleiste erscheint rechts oben im Editor durch Drücken von Strg + F. Hier kann ein Text eingegeben werden, nachdem in der CSS-Datei gesucht werden soll. Optional kann die Suche über die Icons rechts in der Suchleiste auch die Groß- und Kleinschreibung berücksichtigen. Schließlich ist auch ein Suchen und Ersetzen von Textpassagen möglich, indem entweder Strg + H oder in der Suchleiste links auf den Pfeil gedrückt wird.

Bei Funktionen kann ihr Inhalt ein- und ausgeklappt werden. Hierzu wird links in der Leiste auf das + und - geklickt. Dies kann längeren Code übersichtlicher machen.

Ist Code schlecht formatiert, wird es schwieriger, diesen schnell zu lesen und zu verstehen. Abhilfe schafft hier die automatische Code-Formatierung. Nach einem Rechtsklick in den Editor öffnent sich ein Menü. Hier kann die Option zum Formatieren des Dokuments ausgewählt werden. Es kann auch ein Teil des Codes markiert werden, dann gibt es im Rechtsklick-Menü auch die Möglichkeit, nur den ausgewählten Teil zu formatieren.

Einige Arten von Fehlern werden vom Editor erkannt und angezeigt. Grün unterstrichene Stellen sind Hinweise und mögliche Fehler. Rot unterstrichene Stellen sind meist Syntaxfehler und sollten unbedingt behoben werden. Beim Fahren mit der Maus über die Stelle wird eine detaillierte Fehler- oder Warnungsmeldung angezeigt. Hier in der Abbildung gibt es einen Fehler, da das Komma nach minSize fehlt.

Die Autovervollständigung hilft auch mit jQuery und anderen Funktionen. Der Editor schlägt beim Tippen selbständig mögliche Eigenschaften und Methoden vor, die ein JavaScript-Objekt besitzt. Durch Drücken von Strg und Leertaste kann auch die Autovervollständigung angestoßen werden. Weiterhin gibt es für viele Eigenschaften und Methoden auch eine kurze Beschreibung. Hier wird (a) eine kurze Erklärung dazu gegeben und (b) der Datentyp der Eigenschaften oder Methode angezeigt. Diese Typen sind für fortgeschrittene Nutzer gedacht und helfen, die richtigen Argumente zu übergeben. Die Syntax dieser Typendefinition ist typescript. Wurde der Designer neu geladen, werden die Beschreibungen ausgeblendet. Sie können angezeigt werden, in dem in der Liste der Vorschläge rechts auf das blaue   geklickt wird.

In der Abbildung sollen Geldbeträge in einem Textfeld mit dem Währungszeichen am Ende dargestellt werden. Es wurde bereits folgender Code geschrieben: $("[name='tfWaehrung']").autoNumeric({}). Der Cursor ist innerhalb der beiden geschweiften Klammern, dem Objekt mit Optionen für autoNumeric. Hier müssen nun die Optionen für die Bibliothek autoNumeric übergeben werden. Durch Drücken von Strg + Leertaste wird die Autovervollständigung aktiviert. Der Editor erkennt, dass die Methode autoNumeric aufgerufen wird und schlägt für das Optionsobjekt die verfügbaren Eigenschaften vor, zusammen mit einer kurzen Beschreibung hierzu.

Damit die intelligente Autovervollständigung funktionieren kann, muss der Editor wissen, welchen Datentyp die im Code verwendeten Symbole und Ausdrücke haben. Sonst könnten nicht nur die in Frage kommenden Eigenschaften und Methoden vorgeschlagen werden. Auch muss er wissen, welchen Rückgabewert etwa Funktionen haben. Wenn möglich, versucht der Editor dies ohne Zutun von außen herauszufinden. Ab und zu kann es erforderlich sein, besonders bei Funktionen, den Datentyp der Argumente und der Rückgabewerte manuell anzugeben. Erreicht wird dies durch ein entsprechendes Kommentar wie in der Abbildung. Über @return {<datentyp>} <beschreibung> wird der Rückgabewert angegeben, über @param {<datentyp>} <parametername> <beschreibung> ein Funktionsargument. Für den Datentyp muss die Syntax von typescript genutzt werden. In der Abbildung wurde eine Funktion erstellt, die das Ergebnis von jQuery.fn.val zurückliefert. Diese jQuery-Methode kann eine Zeichenkette, eine Zahl oder auch undefined zurückgeben. Da sie bei existierenden Textfeldern immer eine Zeichenkette zurück gibt, wurde dieser Fakt dem Editor manuell über einen Kommentar mitgeteilt. So kann der Editor später die entsprechenden Methoden für Zeichenketten anbieten.