Geekly articles weekly

Webix JavaScript-Bibliothek mit den Augen eines Anfängers



Ich bin ein Anfänger JS-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 ersten Erfahrungen teilen und eine Art Leitfaden für das Erlernen dieser eleganten und leistungsstarken Bibliothek entwerfen.

Erste Aufgabe


Erstellen Sie eine Webanwendungsschnittstelle mit der Webix-Bibliothek. Die Bibliothek selbst bietet uns integrierte CSS-Stile. Standardmäßig wird Material Design Skin verwendet , und die Bibliothek bietet insgesamt 5 verschiedene Skins , sodass ich praktisch nicht auf das Bearbeiten von CSS zurückgreifen kann.

Der Screenshot unten zeigt die Referenzschnittstelle - TK, die ich als praktische Übung „zusammenbauen“ muss.


1

Schritt 1. Arbeitsumgebung einrichten


Erstellen Sie eine Arbeitsumgebung. Ich brauche die Dateien:

  • index.html;
  • script.js;
  • data.js;
  • style.css;

Die style.css-Datei ist optional, und Sie könnten auch darauf verzichten, aber ich lerne, streng nach den Prozessen zu arbeiten, also nehmen wir es zur Arbeit.

Jetzt verbinde ich die Bibliothek. In der Dokumentation finden Sie ein Webix-Installationshandbuch, das drei Verbindungsmethoden veranschaulicht.

  • Download mit dem npm-Paketmanager;
  • Laden Sie das Paket direkt von der Website herunter.
  • über direkte Links zu Webix CDN GPL-Dateien.

Ich verwende die dritte Methode, da sie visueller ist und mit ein paar Codezeilen in der Datei index.html ausgeführt werden kann:

<link rel="stylesheet" type="text/css" href="http://cdn.webix.com/edge/webix.css"> <script type="text/javascript" src="http://cdn.webix.com/edge/webix.js"></script>

Hier verbinden wir die restlichen Dateien in der gleichen Reihenfolge wie im Beispiel angegeben. Dies liegt daran, dass die Datei script.js die Daten verwendet, die mit data.js verbunden sind.

 <!DOCTYPE html> <html lang="en"> <head> <script type="text/javascript" src="http://cdn.webix.com/edge/webix.js"></script> <link rel="stylesheet" type="text/css" href="http://cdn.webix.com/edge/webix.css"> <link rel="stylesheet" href="style.css"> <title>My first page</title> </head> <body> <script src="data.js"></script> <script src="script.js"></script> </body> </html>

Gemäß den technischen Spezifikationen (Abb. 1) muss ich eine Tabelle mit Daten erstellen. Ich werde diese Daten aus der Datei data.js erhalten, in die ich zuerst ein solches Array von Objekten schreibe:

 var small_film_set = [ { id:1, title:"The Shawshank Redemption", year:1994, votes:678790, rating:9.2, rank:1, category:"Thriller"}, { id:2, title:"The Godfather", year:1972, votes:511495, rating:9.2, rank:2, category:"Crime"}, { id:3, title:"The Godfather: Part II", year:1974, votes:319352, rating:9.0, rank:3, category:"Crime"}, { id:4, title:"The Good, the Bad and the Ugly", year:1966, votes:213030, rating:8.9, rank:4, category:"Western"}, { id:5, title:"Pulp fiction", year:1994, votes:533848, rating:8.9, rank:5, category:"Crime"}, { id:6, title:"12 Angry Men", year:1957, votes:164558, rating:8.9, rank:6, category:"Western"} ];

Schritt 2. Initialisierung. Projekt Drahtmodell


Die gesamte Webix-Oberfläche wird vom Konstruktor webix.ui () erstellt. Um zu überprüfen, ob alles richtig konfiguriert ist und funktioniert, zeige ich die Zeichenfolge „Hallo Welt!“ Auf dem Bildschirm an.

Ich benutze die eingebaute tempalte Template Engine, die eine fertige Komponente mit dem für uns notwendigen Datensatz erzeugt.

 webix.ui({ template: "Hello world!" });

Das Hauptmerkmal der Bibliothek ist die Layout-Komponente, mit der Sie die Seite in Zeilen und Spalten von anderen Komponenten unterteilen können. Damit definiere ich das Skelett unserer Seite, die aus drei Zeilen besteht:

  1. Header
  2. Fußzeile
  3. main (Hauptteil).

Ich werde hier auch das integrierte CSS-Thema verknüpfen.

Code:

 webix.ui({ rows:[ {template:"Header"}, {template:"Main"}, {template:"Footer"} ] });

Unten ist ein Screenshot von dem, was passiert ist. Mit dem Zeilen-Array haben wir drei Zeilen erstellt.


Abb.2

Der Hauptteil der Benutzeroberfläche besteht aus drei Spalten:
- Liste
- Tisch
- bilden.
Zum Zeichnen verwende ich das Array cols und erstelle die erforderlichen Spalten.

Code:

 webix.ui({ rows:[ {template:"Header"}, {cols:[ {template:"List"}, {template:"Table"}, {template:"Form"} ]}, {template:"Footer"} ] });

Ergebnis:

Abb.3

Schritt 3. Erstellen Sie einen Header


Der Seitenrahmen wird erstellt und muss noch mit dem gewünschten Inhalt gefüllt werden. In meiner TK enthält der Header verschiedene Steuerelemente. Daher verwende ich anstelle der Vorlage "Header" das Widget "Symbolleiste" . Damit werden die Elemente erstellt, in die ich den Titel und die Schaltfläche einfügen kann.

  view:"toolbar", css:"webix_dark", cols:[ { view:"label", label:"My app"}, {}, {height: 40, type:"icon", icon:"wxi-user", view:"button", label:"Profile", width:100, css:"webix_transparent"} ]

Anschließend werden mit dem Array cols drei Spalten erstellt. In der ersten Spalte erstellt die Komponente view: "label" statischen Text, und auf der Beschriftungstaste wird der Texttitel angezeigt.

Die zweite Spalte ist Spacer . Es füllt den gesamten freien Speicherplatz aus und drückt das erste und letzte Element an die Ränder der Seite.

Die dritte Spalte ist eine Schaltfläche, die mit der Komponente view: "button" erstellt wurde . Die Eigenschaften width und height legen die Höhe und Breite der Schaltfläche in Pixel fest. Die Einstellungen "icon" und " icon: wxi-user" zeigen das Symbol an, das ich aus der Liste in der Dokumentation benötige.

Ergebnis:


Abb. 4

Um die Schaltfläche transparent zu machen, verwende ich die integrierte CSS-Klasse "webix_transparent" .

Schritt 4. Erstellen Sie das Listen-Widget


Das Listen- Widget ist ein Standard-Webix-Widget und wird zum Erstellen von Menüs verwendet. Meine Aufgabe ist es, es mit der Eigenschaft select: true anklickbar zu machen. Auch in diesem Widget verwende ich meine Stiländerungen mit der Klasse - css: "list_color" .

Anstatt Vorlage: "Liste" zu schreiben , schreiben wir den folgenden Code:

 { view: "list", id:"mylist", scroll:false, select:true, width:200, css:"list_color", data:[ {value:"Dashboard",}, {value:"Users"}, {value:"Products"}, {value:"Location"} ] }, {view: "resizer"}, {template:"Table"}, {template:"Form"}

Im Listen- Widget wird standardmäßig der Scroll verwendet, den ich mit dem Befehl - scroll: false ausschalte.

Die Länge der Liste und ihre Werte werden über das Datenarray festgelegt.
Um die Standardstile zu überschreiben, müssen Sie Folgendes schreiben:

 .list_color{ background-color: #EEEEEE; font-weight: 500; } .list_color .webix_selected{ background-color: #dddfe2; }

Der Standard-Widget-Hintergrund ist weiß und wird durch Schreiben von .list_color {...} angezeigt . Wenn Sie jedoch einen Stil für seine Elemente festlegen müssen, müssen Sie nach dem Namen unserer Klasse die Standardklasse des Elements angeben.

Mit der letzten Berührung im Listen- Widget legen wir zwischen ihm und der Tabellenspalte den ziehbaren Rand fest - {view: "resizer"} . Das Ergebnis des vierten Schritts:


Abb.5

Schritt 5. Erstellen Sie eine Tabelle und extrahieren Sie Daten aus einer anderen Datei


Ich möchte Sie daran erinnern, dass die Daten aus der Datei data.js stammen. Um sie in Form einer Tabelle anstelle der Vorlage "Tabelle" anzuzeigen , schreibe ich den folgenden Code:

  view:"datatable", id:"film_list", scroll:"y", autoConfig: true, data:small_film_set

Der Code funktioniert wie folgt: view: "datatable" erstellt eine Tabelle und verwendet autoConfig: true, um die Spalten basierend auf den Daten zu konfigurieren, die ganz am Anfang des small_film_set- Arrays erstellt wurden. Der Pfad zu diesem Array wird durch die Zeilendaten angegeben : smal_film_set .

Vorratsrolle: „y“ entfernt die horizontale Rolle, wobei nur die vertikale übrig bleibt. Das Ergebnis ist eine Tabelle, die durch Klicken auf die Spaltenüberschrift sortiert werden kann.


Abb.6

Schritt 6. Formular


Eigenschaftenansicht : "Formular" - Erstellt ein Widget "Formular" . Laut Arbeitsbericht besteht es aus Eingabefeldern und Schaltflächen, die im Array elements platziert sind : [{...}, ...] .

Ersetzen Sie die Zeilenvorlage "Tabelle" durch den folgenden Code:

 view:"form", id:'film_form', width: 350, elements:[ { type:"section", template:"EDIT FILMS"}, { view:"text", name:"title", label:"Title" }, { view:"text", name:"year", label:"Year" }, { view:"text", name:"rating", label:"Rating" }, { view:"text", name:"votes", label:"Votes" }, { margin:10, cols:[ { view:"button", id:"btn_add", minWidth:65, value:"Add new", css:"webix_primary", click:addItem}, { view:"button", id:"btn_clear", minWidth:65, value:"Clear", click:clearForm} ] }, {} ]

Die Zeile mit der Eigenschaft type: "section" ist der Titel des Formulars. Eingabefelder werden von der Eigenschaftsansicht festgelegt : "text" , der Feldname wird in die Beschriftung geschrieben . Zukünftig sollte das Formular Werte übergeben, dazu wird in Verbindung mit der Eigenschaft view: "text" der Name: "..." festgelegt.

Das Widget ist eine Schaltfläche, die über die Eigenschaft view: "button" festgelegt wird . Die Schaltfläche ist kein integraler Bestandteil des Formulars und kann als eigenständiges Element verwendet werden. Wie im Standard-HTML-Eingabe-Tag wird der Schaltflächenname von der value- Eigenschaft zugewiesen. Die blaue Farbe wird durch den eingebauten CSS- Stil festgelegt : "webix_primary" .

Das letzte Element des Arrays ist ein Abstandhalter, der den freien Raum bis zur Fußzeile ausfüllt, die bis zum unteren Bildschirmrand gedrückt wird. Es wird aufgrund der Standardhöhe der Formularelemente verwendet, auf die alle nachfolgenden Elemente gedrückt werden. Code Ergebnis:


7

Letzter Schritt


Die Seite ist fast fertig, es bleibt nur noch eine Fußzeile zu erstellen. Ersetzen Sie die Zeilenvorlage "Footer" durch den folgenden Code:

 cols:[ {height: 30, template:"The software is provided by <a href='#'>webix.com</a>. All rights reserved (c)", css:"center_text"} ]

Der Code zeigt, dass Sie mit der Eigenschaft template neben Text auch HTML-Tags festlegen können. Um den Text zu zentrieren , habe ich eine benutzerdefinierte CSS-Klasse verwendet - "center_text" .

 .center_text{ text-align:center; }

Das Endergebnis der Seite sollte den Angaben in der Leistungsbeschreibung vollständig entsprechen (Abb. 1).

Verallgemeinerung


In diesem Beispiel wurde nur ein kleiner Teil der Funktionen von Webix verwendet. Das Ergebnis zeigt, dass Sie in nur 60 Codezeilen eine Seite mit vielen komplexen Elementen erstellen können. Mit vorgefertigten Bibliothekslösungen und der Benutzerfreundlichkeit der Komponenten können Sie ganz unterschiedliche Seitenlayouts frei gestalten, ohne Zeit mit Stilen zu verschwenden.

Source: https://habr.com/ru/post/de483558/

More articles:


All Articles