Ich bin ein Anfänger Front-End-Entwickler. Jetzt studiere und trainiere ich in einem Minsker IT-Unternehmen. Das Erlernen der Grundlagen von Web-UI erfolgt am Beispiel der
Webix JS-Bibliothek. Ich möchte meine bescheidenen Erfahrungen teilen und als kleines Tutorial für diese interessante UI-Bibliothek speichern.
Zweite Aufgabe
In der letzten
Aufgabe habe ich mithilfe der Webix-Bibliothek eine Seite erstellt. Und jetzt muss ich die folgende Logik für die Benutzerinteraktion mit dem Formular festlegen:
Das Hauptwidget, mit dem der Artikel arbeitet, ist das
Formular . Darüber hinaus kann es in der
Dokumentation gelesen werden.
Sie können den Quelllink herunterladen.
Die resultierende Demo-Anwendung finden Sie
hier .
Schritt 1. Hinzufügen neuer Daten zur Tabelle.
Zum bequemen Lesen des Codes und zum Aufteilen des Projekts in logische Blöcke erstelle ich die Datei functions.js und gebe den Pfad dazu in der Datei index.html an. Darin werde ich die Funktionen festlegen, die für das Verhalten der Anwendung verantwortlich sind.
<body> <script src="data.js"></script> <script src="functions.js"></script> <script src="script.js"></script> </body>
In der neuen Datei erstelle ich die Funktion
addItem , mit der der Tabelle neue Daten
hinzugefügt werden:
const addItem = () =>{ var item_data = $$("film_form").getValues(); $$("film_list").add(item_data); }
Verwenden Sie
die $$ -Methode , an die die Element-ID übergeben wird, um auf ein Element in der Webix-Bibliothek zuzugreifen. Im obigen Code wird mit dem Konstrukt
$$("film_form") das Formular zugegriffen.
Die Funktion addItem funktioniert folgendermaßen: Ich erhalte die aktuellen Daten aus dem Formular über die Methode getValues und schreibe sie in die Variable item_data . Mit diesen Daten erstelle ich mit der add-Methode einen neuen Datensatz im Blatt.
Um diese Funktion durch Anklicken des Widgets
"button" mit dem Wert
"Add new" aufzurufen, habe ich die
click- Eigenschaft gesetzt.
margin:10, cols:[ { view:"button", id:"btn_add", value:"Add new", css:"webix_primary", click:addItem}, { view:"button", id:"btn_clear", value:"Clear"} ]
Daher sollten Daten aus dem Formular zur Tabelle hinzugefügt werden:
Schritt 2. Validierung des Formulars. Popup-Nachricht
Vor dem Hinzufügen neuer Daten müssen die Informationen aus den Eingabefeldern überprüft (validiert) werden. Die Validierung wird
durch die validate () -Methode ausgelöst, die ich in der Funktion
addItem unmittelbar vor der Arbeit mit den Daten
aufrufe . Ich werde hier auch den Code für eine Popup-Nachricht über eine erfolgreiche Validierung einfügen.
Eine einfache Nachricht in Webix wird von der Funktion
webix.message () erstellt , die den Text der Nachricht als Parameter verwendet. In der oberen rechten Ecke wird eine Meldung angezeigt.
const addItem = () =>{ if($$("film_form").validate()){ var item_data = $$("film_form").getValues(); $$("film_list").add(item_data); webix.message("Validation is successful!"); } }
Die Funktion funktioniert so. Innerhalb der If- Bedingung greifen wir auf das Formular zu und rufen die validate () -Methode auf. Wenn der Test erfolgreich ist, gibt die Methode true zurück und der Code wird weiter ausgeführt. Nach dem Hinzufügen von Daten zur Tabelle wird eine Funktion mit der Meldung "Validation is successful!" .
Popup-Nachricht:
Jetzt muss ich ein
Regelobjekt im
Formular- Widget erstellen. Es ist erforderlich, dass die
validate () - Funktion Informationen aus allen Formularfeldern auf Übereinstimmung mit den angegebenen Kriterien überprüft.
Die Bedingungen für eine erfolgreiche Validierung lauten wie folgt:
- Das Titelfeld sollte nicht leer sein.
- Das Feldjahr sollte nicht weniger als 1970 und nicht mehr als das aktuelle Jahr sein.
- das Rating-Feld darf nicht Null sein;
- Das Abstimmungsfeld muss größer als 1 und kleiner als 1.000.000 sein.
Der Quellcode des
Formular- Widgets mit Validierungsregeln sieht dann folgendermaßen aus:
view:"form", id:"film_form", width: 350, elements:[ { type:"section", template:"EDIT FILMS"}, { view:"text", name:"title", label:"Title", invalidMessage:"Must be filled in"}, { view:"text", name:"year", label:"Year", invalidMessage:"Should be between 1970 and current" }, { view:"text", name:"rating", label:"Rating", invalidMessage:"Cannot be empty or 0" }, { view:"text", name:"votes", label:"Votes", invalidMessage:"Must be less than 100000" }, { margin:10, cols:[ { view:"button", id:"btn_add", value:"Add new", css:"webix_primary", click:addItem}, { view:"button", id:"btn_clear", value:"Clear", click:clearForm} ] }, {} ], rules:{ title: webix.rules.isNotEmpty, rating(value){ if(webix.rules.isNumber(value)){ return true; } }, votes(value){ return value < 1000000 && value >= 1; }, year(value){ return value>=1970 && value <= new Date().getFullYear(); } }
Die Eigenschaften des Regelobjekts müssen mit den Werten des
name: "…" übereinstimmen
name: "…" Eigenschaft der Formularelemente. Die
vordefinierten Regeln webix.rules.isNotEmpty und webix.rules.isNumber werden in den Eigenschaften title, rating und votes festgelegt. Im Jahr gibt es eine Funktion, die
Benutzerregeln definiert .
Regeln sollten bei Erfolg true und bei Fehlern false zurückgeben. Das Formular besteht die Validierung, wenn alle Eigenschaften des Regelobjekts true zurückgeben. Andernfalls werden Felder, die die Validierung nicht bestehen, rot hervorgehoben.
Testergebnis:
Schritt 3. Fehlermeldung
Die Regeln sind festgelegt, jetzt brauche ich einen Mechanismus zum Anzeigen einer Fehlermeldung, um den Benutzer zu benachrichtigen, dass die eingegebenen Daten die angegebenen Kriterien nicht erfüllen. Dazu können Sie das Feld rot markieren und eine Fehlermeldung hinzufügen.
In den Feldern kann die Eigenschaft
invalidMessage festgelegt sein , deren Wert der Text mit der Fehlermeldung ist. Diese Meldung wird unter dem Feld angezeigt, wenn die Validierung fehlschlägt.
Code:
elements:[ { type:"section", template:"EDIT FILMS"}, { view:"text", name:"title", label:"Title", invalidMessage:"Must be filled in"}, { view:"text", name:"year", label:"Year", invalidMessage:"Should be between 1970 and current" }, { view:"text", name:"rating", label:"Rating", invalidMessage:"Cannot be empty or 0" }, { view:"text", name:"votes", label:"Votes", invalidMessage:"Must be less than 100000" }, { margin:10, cols:[ { view:"button", id:"btn_add", value:"Add new", css:"webix_primary", click:addItem}, { view:"button", id:"btn_clear", value:"Clear", click:clearForm} ] }, {} ]
Ergebnis:
Schritt 4. Reinigen Sie das Formular
Um das Formular zu löschen, müssen Sie eine Funktion erstellen, die über die Schaltfläche
"Clear" aufgerufen wird. Sie ist auch für die Ausgabe einer Warnmeldung verantwortlich. Bei einer positiven Antwort löscht sie die eingegebenen Daten und setzt die Fehleranzeige zurück.
Warnmeldung:
Ich werde die Funktion
clearForm aufrufen und den folgenden Code darin schreiben:
function clearForm(){ webix.confirm({ title:"All data will be lost!", text:"Are you sure?" }).then( () => { $$("film_form").clear(); $$("film_form").clearValidation(); } )};
Die
Rückrufmethode webback.confirm ({...}) wird für das Bestätigungsfenster verwendet, das ein Objekt mit den folgenden Eigenschaften akzeptiert:
text und
title . Da die Methode
vielversprechend ist , kann ich den
.then- Handler verwenden. Wenn die Antwort Ja lautet, rufe ich im .then-Handler zwei Methoden auf: clear (), um Formularfelder zu löschen, und clearValidation (), um Überprüfungsfehlerkennungen zu entfernen.
Die letzte Aktion besteht darin, den Funktionsaufruf an die Schaltfläche
"Clear" zu binden.
margin:10, cols:[ { view:"button", id:"btn_add", value:"Add new", css:"webix_primary", click:addItem}, { view:"button", id:"btn_clear", value:"Clear", click:clearForm} ]
Der Code und die Demo können hier eingesehen werden -
snippet.webix.com/17w1dodb .
Verallgemeinerung
Aus der Quelle ging hervor, dass der Code des vorherigen Artikels recht einfach ist, aber mit der Entwicklung des Projekts wird es allmählich komplizierter und seine Anzahl nimmt zu. Um sich nicht in der Unendlichkeit von Codezeilen zu verlieren, ist es wichtig, die Lesbarkeit und die Struktur einfach zu halten. Ein Beispiel für die Interaktion mit einem Formular beschreibt nur grundlegende Methoden, aber es wird auch deutlich, dass webix einen kleinen, lesbaren und intuitiven Code bietet, um der Seite Dynamik zu verleihen. Im Vergleich zu reinem JavaScript würde sich sein Volumen bestenfalls verdoppeln.