Lade...
 

ObjectBrowser

ObjectBrowser (WebWidget)

Das ObjectBrowser-WebWidget bietet die Möglichkeit an, Objekte oder Klassen der ClassiX Architektur und ihre Relationen als ein Netz graphisch darzustellen und zu bearbeiten. Da das WebWidget möglichst generell aufgebaut wurde,  kann der InstantView-Entwickler seine semantische Funktionalität frei gestalten. Von der visuellen Modellierung der Datenbank bis zur graphischen Bearbeitung einzelner Geschäftsprozesse reichen die Möglichkeiten des ObjectBrowsers und unterliegen somit kaum Grenzen.

ObjectBrowser
ObjectBrowser

Verwendung

Web(objectBrowser, APP("objectBrowser.html"), 0, 0, 800, 600)

Abhängigkeiten

  • objectBrowser.html
  • objectBrowser-directive.js
  • dependencies/
    • vis.min.js
    • vis.min.css
    • object-browser-settings-panel.js
    • object-browser-settings-panel.html
    • objectBrowser.css
    • templang.js

Nachrichtenschnittstelle

Bei der Richtungsbeschreibung wird das WebWidget in seine zwei Komponenten unterteilt. Das in HTML implementierte WebWidget, welches die Darstellungslogik und Nutzerinteraktion im Browser implementiert und das in InstantView implementierte WebWidget, welches die andere Seite mit den Daten aus ClassiX versorgt und es steuert.

Name Parameter Beschreibung
Push-Nachrichten (IV→HTML)
settings Settings

Diese Nachricht sollte als erste Nachricht an das ObjectBrowser-Widget geschickt werden, um eine korrekte graphische Darstellung zu gewährleisten. Sie übergibt ein Settings-Objekt als CX_JSON_OBJECT ans WebWidget.

Neuere Settings-Nachrichten überschreiben nur diejenigen bisherigen Einstellungen älterer Settings-Nachrichten, die in der Nachricht existieren. Alle anderen Eigenschaften aus den älteren Settings-Nachrichten werden beibehalten.

data Data Diese Nachricht übergibt ein Data-Objekt als CX_JSON_OBJECT ans WebWidget und enthält alle benötigten Daten zum Zeichnen von Knoten und Kanten. Diese Nachricht kann beliebig oft geschickt werden, um die Menge der Knoten und Kanten im ObjectBrowser zu aktualisieren.
fit_nodes Array(String) Diese Nachricht erwartet als Parameter ein Array mit IDs von Knoten. Die Ansicht wird daraufhin so verschoben und gezoomt, dass alle dieser Knoten sichtbar sind. Ist das Array leer, wird die Ansicht so angepasst, dass alle Knoten sichtbar sind.
Ereignisse (HTML→IV)
INITIALIZE_SOCKET - Die erste Nachricht, die das WebWidget schickt, sobald es sich initialisiert hat. Dies signalisiert die Bereitschaft des WebWidgets, Push-Nachrichten zu empfangen und zu verarbeiten.
MOUSE_CLICK_SOCKET JSON-String

Wird gefeuert, wenn der Benutzer auf einen Knoten, einen Collection-Knoten oder eine Kante klickt.

Parameter: JSON-String mit den Attributen: 

  • type: Ein String aus der Menge {'node', 'edge', 'collection'}, der angibt, was angeklickt wurde.
  • nodeID: der Identifikator des Knotens (Node-Objektes) im Falle eines angeklickten Knotens oder der Identifikator des zugehörigen Haupt-Knotens im Falle eines angeklickten Collection-Knotens.
  • name: der Name des Collection-Objekts als String im Falle eines angeklickten Collection-Knotens oder der Name der Kante im Falle einer angeklickten Kante.
  • from, to zusätzlich zu name zur Identifizierung einer angeklickten Kante. Siehe das Edge-Objekt.
DOUBLE_CLICK_SOCKET JSON-String Wird gefeuert, wenn der Benutzer auf einen Knoten, einen Collection-Knoten oder eine Kante doppelklickt. Für die Parameterspezifikation siehe das Ereignis MOUSE_CLICK_SOCKET.

 

Das Settings-Objekt

Das Settings-Objekt ist vom Typ CX_JSON_OBJECT und beinhaltet generelle Darstellungsoptionen. Hervorgehobene Felder sind obligatorisch.

Feld Typ Beschreibung
icons ARRAY(Icon)

Ein CX_JSON_ARRAY, das die relativen Pfade aller im ObjectBrowser anzuzeigenden Icons auflistet. Das Array enthält Elemente des Typs CX_JSON_OBJECT in Form eines Icon-Objekts.

showInfoBar Boolean Standardmäßig wird eine Infoleiste am oberen Rande angezeigt, wenn ein Knoten angeklickt wird, der ein nicht-leeres InfoBarText-Attribut hat. Der Inhalt dieser Infoleiste ist im Moment die Knoten-ID. Falls diese Infoleiste deaktiviert werden sollte, kann man diese Option auf false setzen.
contextMenus Array(ContextMenu) Eine Liste der Defintionen für Kontextmenüs bestehend aus ContextMenu-Objekten.
layoutRandomSeed Boolean | Integer

Der Anfangswert für den Zufallsgenerator, der für die Ausrichtung der Knotenpositionierung zuständig ist. Wenn auf false gesetzt (Standardwert), wird eine zufällige Zahl automatisch ausgewählt. Dies führt dazu, dass die Ausrichtung des Graphen (die Positionen der Knoten relativ zum Bildschirm) sich bei jedem Neuladen möglicherweise unterscheidet.

Möchte man eine gleichbleibende Ausrichtung haben, so sollte man für diese Option eine Nummer angeben, die man durch Ausprobieren verschiedener Nummern je nach Graphen auswählt.

 

Das Icon-Objekt

Das Icon-Objekt ist vom Typ CX_JSON_OBJECT und beschreibt die Darstellung eines allgemeinen Knotens einer Klasse. Hervorgehobene Felder sind obligatorisch.

Feld Typ Beschreibung
id String|Number Der Identifikator eines Icons. Alle Node-Objekte mit einem übereinstimmenden iconID beziehen ihr Icon aus diesem Objekt.
path String Ein Pfad des Formats "/**/*.*", der vom WebWidget an den allgemeinen Pfad "assets/images" angehängt wird und angibt, wo die Bilddatei des Icons zu finden ist.

 

Das ContextMenu-Objekt

Das ContextMenu-Objekt ist vom Typ CX_JSON_OBJECT und beschreibt die Definition eines Kontextmenüs. Hervorgehobene Felder sind obligatorisch.

Feld Typ Beschreibung
id String

Ein eindeutiger Identifikator für diese Kontextmenü-Definition. Die IDs "node", "edge", "collection" und "background" sind für allgemeine Definitionen reserviert. Knoten, die keine spezielle Kontextmenü-Definition verwenden möchten, bekommen automatisch die Defintion mit der ID "node", falls diese existiert. Analog gilt das für Kanten bzw. Collection-Knoten mit der ID "edge" bzw. "collection".

Eine Besonderheit hat das Hintergrund-Kontextmenü, dass es aus zwei Teilen besteht, einem fest definierten Teil, den der InstantView-Entwickler nicht ändern kann und einem Teil, der der Kontextmenüdefinition entspricht. Das Zusammenführen der beiden Teile geschieht automatisch.

children Array(ContextMenuItem) Die Einträge dieses Menüs.

 

Das ContextMenuItem-Objekt

Das ContextMenuItem-Objekt ist vom Typ CX_JSON_OBJECT und beschreibt die Definition eines Kontextmenü-Items. Hervorgehobene Felder sind obligatorisch.

Feld Typ Beschreibung
text String Der Text des Menü-Items. Diese Eigenschaft ist nur obligatorisch, wenn der Eintrag kein Separator ist.
icon String

Das Iconsymbol als String (zum Beispiel: "fa-edit") des gewünschten Icons aus FontAwesome 4.7.

separator Boolean Falls gesetzt, erscheint dieses Menü-Item als Separator.
actionMsg String

Der Name einer beliebigen Nachricht, dass an (das WebWidget) in ClassiX Core als Message gesendet wird. Die Rückgabeparameter hängen vom Typ des angelickten Objecktes:

Knoten: Die ID des Knotens als String.

Kanten: JSON-String mit den Attributen from, to und name zur Identifizierung der Kante. Für Details siehe das Edge-Objekt.

Collection-Knoten: JSON-String mit den Attributen nodeID (der Identifikator des Hauptknotens (Node-Objektes) als String oder Number) und name (der Name des Collection-Objekts als String).

Hintergrund: kein Parameter.

disabled  Boolean Falls gesetzt, wird das Menü-Item deaktiviert angezeigt.
children Array(ContextMenuItem) Dadurch kann man Untermenüs beliebiger Stufe definieren.


Das Data-Objekt

Das Data-Objekt ist vom Typ CX_JSON_OBJECT und beinhaltet in erster Linie die darzustellenden Knoten und Kanten und ggf. Darstellungsoptionen. Ein Data-Objekt muss mindestens eines der Attribute nodes oder edges enthalten.

Feld Typ Standardwert Beschreibung
nodes ARRAY(Node) - Ein Array von Node-Objekten, die die hinzuzufügenden, zu aktualisierenden oder zu entfernenden Knoten repräsentieren.
edges ARRAY(Edge) - Ein Array von Edge-Objekten, die die hinzuzufügenden, zu aktualisierenden oder zu entfernenden Kanten repräsentieren.
highlightedNodes ARRAY(String|Number) - Ein Array von Knoten, bestimmt lediglich durch ihre Identifikatoren, die als Ausgangsknoten hervorgehoben dargestellt werden sollen.
redraw Boolean FALSE Wenn gesetzt, werden alle vorhandenen Knoten, Kanten und deren Positionen im Graphen vom Graphen entfernt und durch die neuen Knoten und Kanten ersetzt.

 

Das Node-Objekt

Das Node-Objekt ist vom Typ CX_JSON_OBJECT und beschreibt einen Knoten. Hervorgehobene Felder sind obligatorisch.

Feld Typ Beschreibung
id String|Number Ein eindeutiger Identifikator für diesen Knoten.
name String Der Name eines Knotens. Er wird als Titel unter dem Icon angezeigt.
iconID String|Number Ein Identifikator, der das Icon dieses Knotens festlegt. Siehe das Icon-Objekt.
description String Der Tooltip-Text für diesen Knoten
infoBarText String Der Text, der in der Infoleiste angezeigt werden sollte, wenn auf den Knoten geklickt wird. Sollte dieser Text nicht gesetzt sein, dann erscheint die Infoleiste nicht.
collections Array(Collection)

Da ein Knoten ein Objekt repräsentieren kann, das Collections mit einer großen Anzahl an Elementen besitzt oder M1- bzw. MN-Relationen zu vielen anderen Knoten hat, entsteht die Notwendigkeit eines kleinen Zwischenknotens, der als Schnittstelle agiert und die große Anzahl an Verbindungen je nach Bedarf filtert und anzeigt. Im obigen Bild sind diese Schnittstellen als kleine orange Datenbank-Symbole zu sehen.

Dieses Array beschreibt solche Collections eines Knotens durch Elemente des Objekts Collection.

contextMenu String Die ID der Kontextmenü-Definition, die bei diesem Knoten angewendet werden soll. Wenn hier nichts angegeben ist, sucht der Knoten nach der allgemeinen Definition mit der ID "node". Falls er auch nichts findet, wird kein Kontextmenü angezeigt.
borderColor String Die Farbe des Knotenrahmens in irgendeinem in HTML akzeptierten Farbformat als String. Standardmäßig hat der Knoten keinen Rahmen. Sollte der Knoten durch andere Eigenschaften wie beispielsweise borderWidth einen Rahmen ohne eine vom Entwickler festgelegte Farbe bekommen, hat der Rahmen die Farbe: rgb(43, 124, 233)
borderWidth Integer

Die Breite des Knotenrahmens in Pixel. Standardmäßig hat der Knoten keinen Rahmen. Sollte der Knoten durch andere Eigenschaften wie beispielsweise borderColor oder backgroundColor einen Rahmen ohne eine vom Entwickler festgelegte Breite bekommen, so bekommt der Knoten die Randbreite 1.

Hervorgehobene Knoten haben immer einen Knotenrahmen von 4px Breite.

backgroundColor String

Die Hintergrundfarbe des Knotens in irgendeinem in HTML akzeptierten Farbformat als String. Standardmäßig hat der Knoten eine transparente Hintergrundfarbe ohne Rahmen. Sollte der Knoten durch andere Eigenschaften wie beispielsweise borderWidth oder borderColor einen Hintergrund ohne eine vom Entwickler festgelegte Farbe bekommen, hat der Hintergrund die Farbe: rgb(210, 229, 255).

weight Integer Die Größe eines Knotens auf einer Skala von 1 bis 10, wobei jede Stufe 8px entspricht. Die Standardgröße für normale Knoten beträgt 2. Bei hevorgehobenen Knoten wird die Größe dynamisch durch Addition von 2 Stufen zu der Knotengröße ermittelt. Somit können Knoten mit Größe 10 ausnahmsweise die Größe 12 im hervorgehobenen Zustand bekommen.
delete Boolean Wenn gesetzt, wird dieser Knoten anhand seines Attributs id vom Graphen entfernt. In diesem Fall sind die Attribute name und iconID nicht mehr obligatorisch oder relevant.

 

Das Collection-Objekt

Das Collection-Objekt ist vom Typ CX_JSON_OBJECT und beschreibt alle Collections, M1- und MN-Relationen eines Knotens. Hervorgehobene Felder sind obligatorisch.

Feld Typ Beschreibung
name String Ein eindeutiger Name für die Collection. Die Eindeutigkeit ist nur innerhalb der Grenzen eines einzigen Knotens zu bewahren. D.h. Zwei Knoten dürfen jeweils ein Collection-Objekt mit demselben name-Attribut besitzen, während ein Knoten keine zwei Collection-Objekte gleichen Namens besitzen darf.
icon String

Das Iconsymbol als Unicode-String des gewünschten Icons aus FontAwesome 4.7.

Hinweis: Die vierstellige hexadezemale Unicode-Zahl eines Icons findet man auf seiner Seite direkt neben dem Iconnamen.

color String Die Farbe des Icons in irgendeinem in HTML akzeptierten Farbformat als String. Standardfarbe ist: rgb(255, 102, 0)
contextMenu String Die ID der Kontextmenü-Definition, die bei diesem Knoten angewendet werden soll. Wenn hier nichts angegeben ist, sucht der Knoten nach der allgemeinen Definition mit der ID "collection". Falls er auch nichts findet, wird kein Kontextmenü angezeigt.
description String Der Tooltip-Text für diesen Collection-Knoten
delete Boolean Falls gesetzt, wird dieser Collection-Knoten vom Graphen entfernt.

 

Das Edge-Objekt

Das Class-Objekt ist vom Typ CX_JSON_OBJECT und beschreibt eine Kante. Hervorgehobene Felder sind obligatorisch.

Feld Typ Beschreibung
from String|Number Der Identifikator (id) des Knotens (Node-Objekts), von dem die Kante ausgeht.
to String|Number Der Identifikator (id) des Knotens (Node-Objekts), zu dem die Kante zeigt.
fromCollection String|Number Der Name eines Collection-Symbols im Ausgangsknoten, aus dem die Kante ausgehen sollte.
toCollection String|Number Der Name eines Collection-Symbols im Zielknoten, zu dem die Kante zeigen sollte.
name String

Ein eindeutiger Name für die Kante. Die Eindeutigkeit ist nur innerhalb der Grenzen desjenigen Knotens zu bewahren, von dem die Kante ausgeht. D.h. Zwei Knoten dürfen jeweils eine ausgehende Kante mit demselben name-Attribut besitzen, während ein Knoten keine zwei ausgehenden Kanten gleichen Namens besitzen darf. 

Deprecated: Falls dieses Attribut mit dem Namen einer Collection des Ausgangsknotens übereinstimmt und fromCollection nicht angegeben ist, geht die Kante von dem Collection-Symbol des Ausgangsknotens aus. Bitte benutzen Sie immer fromCollection, da diese Funktionalität in Zukunft nicht mehr unterstützt wird.

label String Der Text, der auf einer selektierten Kante erscheint.
description String Der Tooltip-Text für diese Kante.
contextMenu String Die ID der Kontextmenü-Definition, die bei dieser Kante angewendet werden soll. Wenn hier nichts angegeben ist, sucht die Kante nach der allgemeinen Definition mit der ID "edge". Falls sie auch nichts findet, wird kein Kontextmenü angezeigt.
arrows String

Bestimmt, an welchen Enden der Verbindungslinie zwischen zwei Knoten A (from) und B (to) Pfeile gezeichnet werden sollen. Standardmäßig hat diese Eigenschaft den Wert "to" A->B.

Mögliche Variationen sind:

to: A  ----->  B from: A  <--  B both: A <--> B none: A --- B
style String|Array(INTEGER) Die Linienart der Kante aus der Menge: "solid", "dashed", "dotted", wobei "solid" der Standardwert ist. Für mehr Flexibilität kann der Entwickler ein Array von Nummern (in Pixel) übermitteln, das ein Muster Lücke, Linie, Lücke, Linie ...etc definiert. Dieses Muster wird solange wiederholt, bis die Kantenlänge komplett gezeichnet ist.
weight Integer Die Breite einer Kante auf einer Skala von 1 bis 10, wobei jede Stufe 1px entspricht. Standardmäßig hat eine Kante die Größe 1. Ausgewählte Kanten vergrößern ihre Breite um 2 Stufen.
color String Die Farbe einer Kante in irgendeinem in HTML akzeptierten Farbformat als String. Die Standardfarbe ist: rgb(43, 124, 233)
delete Boolean Falls gesetzt, wird diese Kante vom Graphen entfernt.

InstantView Scriptsprache