4.3. Plugins - Views

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.