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.
Dritte Aufgabe
Ich entwickle die Funktionalität der mit der Webix-Bibliothek erstellten Anwendung weiter. In früheren Artikeln habe ich herausgefunden, wie
man eine Anwendungsschnittstelle erstellt und wie man
mit dem Formular interagiert . In diesem Artikel betrachte ich die folgenden Aufgaben:
Die Funktionsweise von Listen- und
Layout- Widgets wurde in früheren Artikeln beschrieben.
Sie können den Quelllink herunterladen.
Die fertige Bewerbung finden Sie
hier .
Schritt 1. Teilen Sie das Projekt in Module
Um Verwechslungen im Code zu vermeiden, ist es zuverlässiger, das Projekt in Module zu unterteilen. Dazu erstelle ich die folgenden Dateien und übertrage den Widget-Code in sie:
- header.js - Symbolleisten-Widget;
- aside.js - Listen- Widget;
- table.js - Widget Datatable ;
- form.js - Formular-Widget;
- footer.js - ein Element mit dem Text: "Die Software ist ...".
In neuen Dateien erfolgt die Beschreibung der Widget-Konfigurationen in einer Variablen ...
const footer = { height: 30, template:"The software is provided by <a href='#'>webix.com</a>. All rights reserved (c)", css:"bottom-link" }
Die erstellten Dateien sind in der Datei index.html in der folgenden Reihenfolge enthalten:
<body> <script src="functions.js"></script> <script src="users_module.js"></script> <script src="products_module.js"></script> <script src="data.js"></script> <script src="header.js"></script> <script src="table.js"></script> <script src="form.js"></script> <script src="aside.js"></script> <script src="footer.js"></script> <script src="script.js"></script> </body>
Die resultierenden Module werden in einer script.js-Datei zusammengefasst, die jetzt einen einfachen und übersichtlichen Anwendungsinitialisierungscode enthält.
webix.ui({ rows:[ header, { cols:[ aside, {view: "resizer"}, table, form ] }, footer ] });
Schritt 2. Registerkarten und zwischen ihnen wechseln
In Fällen, in denen nicht genügend freier Speicherplatz auf der Seite vorhanden ist oder wenn Sie den Inhalt der Anwendung thematisch trennen müssen, ist es logisch, Registerkarten zu verwenden.
Das Umschalten zwischen den Registerkarten erfolgt über die
Multiview- Komponente. Mit dieser Komponente können Sie die erforderliche Anzahl von Registerkarten in der Anwendung erstellen und zu einem bestimmten Zeitpunkt nur eine anzeigen.
Wir erstellen eine Multiview in der Datei aside.js:
const multi = { view: "multiview", cells:[ { id:"dashboard", cols:[table, form ] }, { id:"users", template:"Users" }, { id:"products", template:"Products" } ] }
Das Zellenarray enthält den Code für die Registerkarten. Jede Registerkarte muss mit einer ID versehen werden, damit darauf zugegriffen und angezeigt werden kann. Jetzt enthält Multiview drei Registerkarten, von denen die erste verschoben und davor erstellt wurde, die Tabelle und das Formular.
In der Datei script.js ersetze ich die Widgets "Tabelle" und "Formular" durch das Modul "Multi".
webix.ui({ rows:[ header, { cols:[ aside, {view: "resizer"}, multi ] }, footer ] });
Die Rolle des Wechsels zwischen Registerkarten spielt das
Listen- Widget. Ich brauche den entsprechenden Reiter, um durch Anklicken seiner Elemente zu öffnen.
Der Einfachheit halber setze ich die Elemente des
Listen- Widgets auf dieselbe ID wie die Registerkarten für mehrere Ansichten.
const aside = { view: "list", id:"mylist", scroll:false, select:true, width:200, css:"list_color", data:[ {value:"Dashboard", id:"dashboard"}, {value:"Users", id:"users"}, {value:"Products", id:"products"} ], on:{ onAfterSelect:function(id){ $$(id).show(); } } }
Wenn Sie auf ein Element des
Listen- Widgets
klicken , wird
onAfterSelect ausgelöst, in dessen Handler wir die ID des ausgewählten Elements
abrufen und die gleichnamige Registerkarte
anzeigen und über die ID darauf zugreifen - sie sind, wie Sie sich erinnern, identisch.
Ein Beispiel:
Wichtig!
Weitere Datenaktionen werden ausgeführt, während der lokale Server ausgeführt wird.
Schritt 3. Registerkarte „Dashboard“ - Tabelleneinrichtung
Bisher verwendete das Projekt eine Tabelle, deren Felder automatisch generiert wurden. Wenn Sie eine Spalte löschen oder eine neue hinzufügen möchten, werden die Tabelleneinstellungen verwendet. Dazu muss im
Datatable- Widget die Eigenschaft
autoConfig : true durch das
Spaltenarray mit den Einstellungen für jede Spalte ersetzt werden.
const table = { view:"datatable", id:"film_list", scroll:"y", select:true, url:"data/data.js", hover:"myhover", columns:[ { id:"rank", header:"", width:50, css:"rank"}, { id:"title", header:"Film title", fillspace:true}, { id:"year", header:"Released", width:100}, { id:"votes", header:"Votes", width:100}, { id:"rating", header:"Rating", width:100} ] }
- Der id-Eigenschaftswert gibt das Feld des Datenelements an, das in dieser Spalte angezeigt wird.
- Die Headereigenschaft im Element ist die Spaltenüberschrift.
- Alle Spalten sind auf eine feste Breite festgelegt. In der zweiten Spalte wird jedoch die Eigenschaft fillspace verwendet, mit der die Titelspalte den gesamten freien Speicherplatz belegt.
In der Tabelle werden benutzerdefinierte CSS-Einstellungen verwendet: In der ersten Spalte wird der Mauszeiger für die Zeilen gesetzt und der Hintergrund geändert. Alle Einstellungen sind in der Datei style.css vordefiniert und Sie müssen nur den Klassennamen einfügen.
Außerdem benötige ich mehr Daten für die Tabelle. Daher lade ich sie aus data / data.js, indem ich mit der
url- Eigenschaft darauf zeige.
Ergebnis:
Schritt 4. Registerkarte "Benutzer" - Zeichnen einer Liste und eines Diagramms
In der zweiten Registerkarte erstelle ich eine Liste und ein Diagramm. Dazu gebe ich im zweiten Multiview-Element den Namen des Moduls an - „Benutzer“.
const multi = { view: "multiview", cells:[ { id:"dashboard", cols:[table, form ] }, { id:"users", rows:[users] }, { id:"products", template:"Products" } ] }
Für die Widgets selbst erstelle ich eine neue Datei
users_module.js .
Liste . Eine Liste wird als
Listen- Widget verstanden, früher wurde sie beim Erstellen des Menüs verwendet. Listenzeilen müssen aus Benutzernamen und Ländernamen bestehen.
Listen Widget Code:
const users = { rows:[ { view: "list", id:"user_list", select:true, url:"data/users.js", template:"#name# from #country#" }, { template:"Chart" } ] }
Das Zeilenarray wird verwendet, um den Arbeitsbereich in zwei Teile aufzuteilen. Der zweite Teil wird für das Diagramm verwendet.
In der template-Eigenschaft wird zwischen den # -Zeichen ein Feld angegeben, dessen Wert aus dem Datenelement stammt, das aus der Datei users.js geladen wird.
Ergebnis:
Diagramm . Die Bibliothek unterstützt die gängigen
Diagrammtypen : Linie, Kreis, Radar, Ring, Spalte usw. Alle werden vom
Diagramm- Widget erstellt. Das Aussehen des Diagramms definiert die
type- Eigenschaft.
Ich ersetze die Einstellung
template:”Chart” durch den Widget-Code:
const users = { rows:[ { view: "list", id:"user_list", select:true, url:"data/users.js", template:"#name# from #country#" }, { view:"chart", type:"bar", value:"#age#", url:"data/users.js", xAxis:{ template:"#age#", title:"Age" } } ] }
- Einstellungstyp
type: "bar" legt den Balkentyp des Diagramms fest. - Der Name des Feldes wird an value übergeben und muss in `# ... #` angegeben werden. Dies ist eine Funktion des Diagramm-Widgets.
- Die Einstellung xAxis bestimmt, welche Informationen unterhalb des Diagramms entlang der X-Achse angezeigt werden.
- Die Vorlage zeigt an, dass sich unter den Diagrammlinien Ziffern des Alters befinden.
- Titel enthält den Namen des Diagramms -
"Age" .
Das Ergebnis des Zeichnens der Liste und des Diagramms:
Schritt 5. Registerkarte "Produkte" - Baumstruktur
Um diese Komponente zu initialisieren, erstelle ich die Datei
products_module.js und gebe im dritten Element des Multiview-Widgets den Modulnamen "products" an.
const multi = { view: "multiview", cells:[ { id:"dashboard", cols:[table, form ] }, { id:"users", rows:[users] }, { id:"products", rows:[products] } ] }
Verwenden Sie das Widget "
Baumtabelle" , um eine
Baumtabelle zu erstellen . Eine der Widget-Spalten muss die erforderliche Vorlage enthalten -
{common.treetable ()} , sonst erhalten wir eine Standardtabelle anstelle einer Baumansicht. Mit der Vorlage können Sie sofort charakteristische Elemente zeichnen:
- aktives Symbol zum Ein- / Ausblenden verschachtelter Datensätze;
- Datei- / Ordnersymbole;
- Einrückung abhängig von der Ebene der Einträge.
const products = { view:"treetable", scrollX:false, columns:[ { id:"id", header:"", width:50 }, { id:"value", header:"Title", fillspace:true, template:"{common.treetable()} #title#" }, { id:"price", header:"Price", width:200 } ], select:"row", url:"data/products.js" }
Die Baumstruktur-Komponente ist mit hierarchischen Daten gefüllt, die ich aus der Datei products.js erhalten werde.
Ergebnis:
Die daraus resultierende Anwendung finden Sie
hier .
Verallgemeinerung
Schritt für Schritt wird die Anwendung durch neue Funktionen ergänzt. Ein wichtiger Schritt war die Aufteilung des Codes in Module. Die Trennung half, Verwechslungen im Code zu vermeiden und eine mehrseitige Oberfläche zu organisieren. Es war interessant, neue Webix-Widgets in Form von Diagrammen und frei editierbaren Tabellenlisten zu lernen. Alles war auch einfach, alles ist auch harmonisch.