Wiki-Quellcode von JavaScript-Bereich

Zeige letzte Bearbeiter
1 {{content/}}
2
3 {{figure image="designer_advanced_js_example_de.png"}}
4 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.
5 {{/figure}}
6
7 == JavaScript ==
8
9 {{info}}
10 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>>url:https://api.jquery.com/ready||rel="noopener noreferrer" target="_blank"]]). Es kann also sofort auf alle Formularelemente per jQuery zugegriffen werden.
11
12 Dies gilt nicht für JavaScript, welches als Mandant- oder Formulardatei angelegt wurde. Wenn erforderlich, sollte hier manuell gewartet werden:
13
14 {{code language="javascript"}}
15 $(function(){
16 /* code goes here */
17 });
18 {{/code}}
19 {{/info}}
20
21
22 Viele Funktionalitäten im Formular sind direkt über die grafische Oberfläche des {{designer case="gen"/}} 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.
23
24 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.
25
26 * [[Can I Use... Support tables for HTML5, CSS3, etc.>>url:https://caniuse.com/||rel="noopener noreferrer" target="_blank"]] Durchsuchbare Liste für die Unterstützung verschiedenster Web-Technologien in den einzelnen Browsern.
27 * [[Mozilla JavaScript Reference>>url:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference||rel="noopener noreferrer" target="_blank"]] Dokumentation von Mozilla zu vielen JavaScript-Funktionalitäten. Für viele Funktionalitäten findet sich eine Auflistung der Unterstützung in den verschiedenen Browsern. Beispielsweise findet man [[hier zur Funktion String.prototype.startsWith>>url:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith||rel="noopener noreferrer" target="_blank"]] (prüfen, ob eine Zeichenkette ein bestimmtes Präfix hat), dass diese Funktion von allen Browser außer dem Internet Explorer unterstützt werde.
28
29 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>>url:https://caniuse.com/#compare=ie+11,firefox+66,chrome+74||rel="noopener noreferrer" target="_blank"]]. Dazu gehören etwa
30
31 * Fetch-API, eine native Methode ähnlich zu //jQuery.ajax//
32 * Promise-API, zum Handhaben von asynchronen Aktivitäten wie Netzwerkanfragen
33 * Neue Syntax wie Arrow-Funktionen, async-Funktionen, Objekt-Destrukturierung oder Klassen
34 * etc.
35
36 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:
37
38 {{js}}
39 const sayHello = ({firstName = "Max", lastName = "Mustermann"}) => console.log(`Hello, ${firstName} ${lastName}!`);
40 sayHello({lastName: "Müller"});
41 {{/js}}
42
43 {{jsIE}}
44 function sayHello(options) {
45 var firstName = typeof options.firstName === "undefined" ? "Max" : options.firstName;
46 var lastName = typeof options.lastName === "undefined" ? "Mustermann" : options.lastName;
47 var greeting = "Hello, " + firstname + " " + lastName + "!";
48 console.log(greeting);
49 }
50 sayHello({lastName: "Müller"});
51 {{/jsIE}}
52
53 In Formularen von {{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:
54
55 * Offizielle Webseite von jQuery: http://jquery.com/[[url:http://jquery.com||rel="noopener noreferrer" target="_blank"]]
56 * Offizielle Dokumentation von jQuery: http://api.jquery.com/[[url:http://api.jquery.com||rel="noopener noreferrer" target="_blank"]]
57
58 Hilfeseiten und Tutorials zu jQuery:
59
60 * [[url:http://www.jquery-board.de||rel="noopener noreferrer" target="_blank"]]
61 * [[http://matthiasschuetz.com/javascript-framework-matrix/de/jquery||rel="noopener noreferrer" target="_blank"]]
62 * [[url:https://forum.jquery.com/||rel="noopener noreferrer" target="_blank"]]
63 * [[url:https://learn.jquery.com/||rel="noopener noreferrer" target="_blank"]]
64 * [[url:https://www.w3schools.com/jquery/||rel="noopener noreferrer" target="_blank"]]
65
66 == Selektieren von Elementen ==
67
68 {{warning}}
69 Es sollte nicht direkt die //id// zum Selektieren von Elementen verwendet werden. Diese wird von {{formcycle case="dat"/}} 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 {{formcycle case="dat"/}}.
70 {{/warning}}
71
72 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 {{formcycle case="dat"/}} mittels jQuery selektieren lassen. Weitere Information sind im Abschnitt [[Selektoren>>doc:Formcycle.Designer.Form.CodingPanel.Selector]] zu finden.
73
74 ; Elemente per Name selektieren
75 : Zum Auswählen eines Formularfeld wird sein Name genutzt. Also der Name, der im {{designer case="dat"/}} einem Formularelement unter [[Grundeigenschaften>>doc:Formcycle.Designer.Form.ElementProperties.BaseProperties]] 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: {{code language="javascript"}}$("[name='tfName']"){{/code}}.
76 ; Elemente mit nuzterdefinierten Attributen selektieren
77 : Unter [[Attribute>>doc:Formcycle.Designer.Form.ElementProperties.Attributes]] lassen sich im {{designer case="dat"/}} einem Element nutzerspezifische HTML-Attribute vergeben. Auf diese wird mittels Attributselektoren zugegriffen: {{code language="javascript"}}$("[data-attribute='value']"){{/code}}. Da diese Selektoren allerdings langsam sein können, sollten diese sparsam eingesetzt werden.
78 ; Container-Element selektieren
79 : 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. {{code language="javascript"}}$("[xn='tf1']"){{/code}}.
80 ; Formularfeldtypen selektieren
81 : Jede Art von Formularelement (z.B. Seite, Textarea, Schaltfläche, Checkbox) verfügt über eine bestimmte CSS-Klasse. Falls man etwa alle [[Eingabefelder>>doc:Formcycle.Designer.Form.FormElements.Input]] selektieren möchte, die sich in einem [[Fieldset>>doc:Formcycle.Designer.Form.FormElements.Fieldset]] befinden, kann man folgendes schreiben: {{code language="javascript"}}$('.XFieldSet .XTextField'){{/code}}.
82 ; Variablen selektieren
83 : Werden [[Variablen>>doc:Formcycle.Designer.Form.CodingPanel.VariablesTab]] erstellt, wird im Formular ein verstecktes Eingabefeld (input) erzeugt. Auch auf dieses kann mit dem Attribut //name// zugegriffen werden: {{code language="javascript"}}$("[name='tfVariable']"){{/code}}
84
85 == Editor ==
86
87 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>>url:https://microsoft.github.io/monaco-editor/index.html||rel="noopener noreferrer" target="_blank"]]. Im Folgenden seien kurz einige wesentliche Funktionalitäten erwähnt:
88
89 {{figure image="designer_advanced_js_snippets_de.png" width="700" float="none"}}
90 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>>doc:Formcycle.UserInterface.Data.DBQueries]] 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//.
91 {{/figure}}
92
93 {{figure image="designer_advanced_js_editor_form_fields_de.png" width="700" float="none"}}
94 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 {{code language="javascript"}}$("[name='tfMail']"){{/code}}.
95 {{/figure}}
96
97 {{figure image="designer_advanced_js_editor_search_replace_de.png" width="700" float="none"}}
98 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.
99 {{/figure}}
100
101 {{figure image="designer_advanced_js_editor_expand_collapse_de.png" width="700" float="none"}}
102 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.
103 {{/figure}}
104
105 {{figure image="designer_advanced_js_editor_format_de.png" width="700" float="none"}}
106 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.
107 {{/figure}}
108
109 {{figure image="designer_advanced_js_hints.png" width="700" float="none"}}
110 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.
111 {{/figure}}
112
113 {{figure image="designer_advanced_js_editor_methods_de.png" width="700" float="none"}}
114 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>>url:https://www.typescriptlang.org/docs/home.html||target="_blank"]]. 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 {{icon name="info-circle"/}} geklickt wird.
115 {{/figure}}
116
117 {{figure image="designer_advanced_js_editor_inline_help_de.png" width="700" float="none"}}
118 In der Abbildung sollen Geldbeträge in einem Textfeld mit dem Währungszeichen am Ende dargestellt werden. Es wurde bereits folgender Code geschrieben: {{code language="javascript"}}$("[name='tfWaehrung']").autoNumeric({}){{/code}}. 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.
119 {{/figure}}
120
121 {{figure image="designer_advanced_js_editor_intellisense_de.png" width="700" float="none"}}
122 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 {{code language="none"}}@return {<datentyp>} <beschreibung>{{/code}} wird der Rückgabewert angegeben, über {{code language="none"}}@param {<datentyp>} <parametername> <beschreibung>{{/code}} ein Funktionsargument. Für den Datentyp muss die Syntax von [[typescript>>url:https://www.typescriptlang.org/docs/home.html||target="_blank"]] 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.
123 {{/figure}}