Plugins können eigene Views definieren.
Hierzu sind zwei Dateien notwendig:
- eine html-Datei als View
- eine js-Datei als Controller
Der Controller versorgt die View mit entsprechenden Daten.
Views Hinzufügen
Dateien anlegen
Die Views sollten im einem Unterverzeichnis von "resources" abegelgt werden. Hier als sind bspw. zwei Views abegelegt:
View bekanntmachen
Die View muss in der smartmes.json bekannt gemacht werden, in dem diese als Properties unterhalb von "views" aufgezählt werden.
{ "name": "Smartmes Example Plugin", "url": "http://www.bluebiz.de", "vendor": "bluebiz OHG", "description": "This is an example plugin for SmartMES", "views": { "main": { "menu": { "label": "Example Plugin", "icon": "star" }, "view": "views/start.html", "controller": "views/start.controller.js" }, "second": { "view": "views/second.html", "controller": "views/second.controller.js" } } }
Hier gibt es zwei views, die jeweils einen Namen haben: "main" bzw. "second". Wie erwähnt muss jeweils die html-Datei als auch die js-Datei angegeben werden.
Einbinden ins Menü
Das Einbinden in das Hauptmenü vom SmartMES, erfolgt durch den Eintrag "menu" unterhalb der View:
"menu": { "label": "Example Plugin", "icon": "star" },
In diesem Fall wird also die "main"-View mit dem Titel "Example Plugin" und einem star-icon in das Hauptmenü gehängt, was so aussieht:
Es können Icons von http://fontawesome.io/icons/ genommen werden (entsprechend nur der name, wie "star" oder "image")
Zusätzlich kann der Menüpunkt auch unterhalb einiger anderer Menüpunkte - also Untermenüpunkt - eingehängt werden. Hierzu kann optional "parent" angegeben werden:
"menu": { "label": "Example Plugin", "icon": "star", "parent": "settings" },
Der Wert (hier "settings") gibt dann den Obermenüpunkt an.
Erlaubte Werte für parent sind: assets, dashboards, plugins, settings, system
Views verwenden
HTML-Layout
Das HTML-Layout basiert auf Bootstrap 3 und wird entsprechend durch CSS visuell aufbereitet.
// TODO: Beschreibung einiger GUI-Komponenten
Externe Views können z.B. mit einem iframe eingehängt werden.
JS-Controller
Die JS-Controller stellen eine Verbindung zwischen Javascript und HTML her. Das Grundkonzept basiert auf dem vom AngularJS (https://docs.angularjs.org/guide/controller). Das heißt, dass hier eine Zwei-Wege-Bindung zwischen Elementen im HTML und des JS-Controllers gegeben ist.
Ein JS-Controller muss dabei innerhalb der folgenden Funktion stehen:
smartmes.view(function (smartMES, $scope) { console.log("Hello World"); });
Wird die view mit diesem Controller geladen, so wird diese zugehörige Funktion aufgerufen. Dabei werden folgende Dinge übergeben:
- smartMES: erlaubt den Zugriff auf einige Funktionen, wie http-Request, oder auch das öffnen von views.
- $scope, erlaubt das Binden von Variablen zwischen HTML und Controller (vgl. Angular)
smartMES hat u.a. folgende Funktionen:
// Util-Funktionen smartMES.util.interval(fn, 1000); // führt die Funktion fn alle 1000 ms aus smartMES.util.timeout(fn, 1000); // führt die Funtkion fn nach 1000 ms aus // HTTP-Abfragen smartMES.http() // siehe https://docs.angularjs.org/api/ng/service/$http // HTTP-Abfragen an Plugin-Eigene Endpunkte smartMES.endpoint.get(url, config) // macht eine GET-Abfrage smartMES.endpoint.post(url, data, config) // macht eine POST-Abfrage smartMES.endpoint.put(url, data, config) // macht eine PUT-Abfrage smartMES.endpoint.delete(url, config) // macht eine DELETE-Abfrage // Notifications smartmes.notify.toast.success(title, text); // erstellt eine grüne Toast-Meldung mit dem Titel und dem Text smartmes.notify.toast.warning(title, text); // erstellt eine gelbe Toast-Meldung mit dem Titel und dem Text smartmes.notify.toast.error(title, text); // erstellt eine rote Toast-Meldung mit dem Titel und dem Text smartmes.notify.toast.info(title, text); // erstellt eine blaue Toast-Meldung mit dem Titel und dem Text // Views öffnen bzw. zu anderen Views navigieren smartMES.view.open(viewname) // öffnet die view mit Namen "viewname" von diesem Plugin auf smartMES.view.open(viewname, pluginId) // öffnet die view mit Namen "viewname" von dem Plugin mit ID "pluginId" auf
Verknüpfungen und Links
Der Link wird automatisch aus der Plugin-ID und dem Namen der View zusammengesetzt. Ist die Plugin-ID z.B. "smartmes-example", dann wird daraus der Link "plugin/smartmes-example/main"
Aufrufen von Links erfolgt dann entweder durch JavaScript, indem im HTML eine Methode aufgerufen wird:
<a ng-click="gotoSecond()">Go To Second</a>
und die Methode im entsprechenden Controller, die open-Funktion aufruft:
smartmes.view(function (smartMES, $scope) { $scope.gotoSecond = function(){ smartMES.view.open("second"); } });
Alternativ kann dies auch direkt über ein Attribut gemacht werden:
<a mes-href="second">Go To Second</a>
Dabei ist "second" wiederum der viewname.
Kommentare
0 Kommentare
Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.