ObjectBrowser (WebWidget)
The ObjectBrowser WebWidget offers the possibility to graphically display and edit objects or classes of the ClassiX architecture and their relations as a network. Since the WebWidget was designed as general as possible, the InstantView developer can freely design its semantic functionality. The possibilities of the ObjectBrowser range from the visual modelling of the database to the graphical editing of individual business processes and are thus subject to almost no limits. |
Use
Dependencies
- 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
Message interface
When describing the direction, the WebWidget is divided into its two components. The WebWidget implemented in HTML, which implements the presentation logic and user interaction in the browser and the WebWidget implemented in InstantView, which supplies the other side with the data from ClassiX and controls it.
Name | Parameters | Description |
---|---|---|
Push News (IV→HTML) | ||
settings | Settings | This message should be sent as the first message to the ObjectBrowser widget to ensure a correct graphical display. It passes a Settings object to the Web widget as CX_JSON_OBJECT. Newer settings messages only overwrite the previous settings of older settings messages that exist in the message. All other properties from the older Settings messages are retained. |
data | Data | This message passes a data object to the Web widget as CX_JSON_OBJECT and contains all the data required to draw nodes and edges. This message can be sent as often as required to update the set of nodes and edges in the ObjectBrowser. |
fit_nodes | Array(String) | This message expects as parameter an array with IDs of nodes. The view is then moved and zoomed so that all these nodes are visible. If the array is empty, the view is adjusted so that all nodes are visible. |
Events (HTML→IV) | ||
INITIALIZE_SOCKET | - | The first message that the WebWidget sends once it has initialised. This indicates that the WebWidget is ready to receive and process push messages. |
MOUSE_CLICK_SOCKET | JSON string | Is fired when the user clicks on a node, collection node or edge. parameters: JSON string with the attributes:
|
DOUBLE_CLICK_SOCKET | JSON string | Is fired when the user double clicks on a node, collection node or edge. For the parameter specification, see the event MOUSE_CLICK_SOCKET. |
The Settings object
The Settings object is of type CX_JSON_OBJECT and contains general display options. Highlighted fields are mandatory.
Field | Type | Description |
---|---|---|
icons | ARRAY(Icon) | A CX_JSON_ARRAY that lists the relative paths of all icons to be displayed in the ObjectBrowser. The array contains elements of the type CX_JSON_OBJECT in form of an icon object. |
showInfoBar | Boolean | By default, an info bar is displayed at the top of the screen when a node is clicked that has a non-empty InfoBarText attribute. The content of this info bar is currently the node ID. If this info bar should be deactivated, you can set this option to false. |
contextMenus | Array(ContextMenu) | A list of definitions for context menus consisting of ContextMenu objects. |
layoutRandomSeed | Boolean | Integer | The initial value for the random number generator, which is responsible for the alignment of the node positioning. If set to false (default value), a random number is automatically selected. As a result, the orientation of the graph (the positions of the nodes relative to the screen) may differ each time the graph is reloaded. If you want to have a constant orientation, you should specify a number for this option, which you select by trying out different numbers depending on the graph. |
The Icon Object
The icon object is of type CX_JSON_OBJECT and describes the representation of a general node of a class. Highlighted fields are mandatory.
Field | Type | Description |
---|---|---|
id | String|Number | The identifier of an icon. All node objects with a matching iconID get their icon from this object. |
path | String | A path of the "/**/*.*" format, which is appended to the general "assets/images" path by the WebWidget and indicates where the icon's image file can be found. |
The ContextMenu object
The ContextMenu object is of type CX_JSON_OBJECT and describes the definition of a context menu. Highlighted fields are mandatory.
Field | Type | Description |
---|---|---|
id | String | A unique identifier for this context menu definition. The IDs"node","edge","collection" and"background" are reserved for general definitions. Nodes that do not want to use a special context menu definition automatically get the definition with the ID "node", if it exists. The same applies to edges or collection nodes with the ID "edge" or "collection". A special feature of the background context menu is that it consists of two parts, a fixed part that the InstantView developer cannot change and a part that corresponds to the context menu definition. The two parts are merged automatically. |
children | Array(ContextMenuItem) | The items in this menu. |
The ContextMenuItem object
The ContextMenuItem object is of type CX_JSON_OBJECT and describes the definition of a context menu item. Highlighted fields are mandatory.
Field | Type | Description |
---|---|---|
text | String | The text of the menu item. This property is only mandatory if the item is not a separator. |
icon | String | The icon symbol as a string (for example: "fa-edit") of the desired icon from FontAwesome 4.7 |
separator | Boolean | If set, this menu item appears as a separator. |
actionMsg | String | The name of any message that is sent to (the WebWidget) in ClassiX Core as a message. The return parameters depend on the type of the clicked object: knots: The ID of the node as string. edges: JSON string with the attributes from, to and name to identify the edge. See the Edge object for details. Collection node: JSON string with the attributes nodeID (the identifier of the main node (node object) as string or number) and name (the name of the collection object as string). Background: no parameter. |
disabled | Boolean | If set, the menu item is displayed disabled. |
children | Array(ContextMenuItem) | This allows you to define submenus of any level. |
The Data Object
The data object is of type CX_JSON_OBJECT and primarily contains the nodes and edges to be displayed and any display options. A data object must contain at least one of the attributes nodes or edges.
Field | Type | Default value | Description |
---|---|---|---|
nodes | ARRAY(Node) | - | An array of node objects representing the nodes to be added, updated or removed. |
edges | ARRAY(Edge) | - | An array of edge objects representing the edges to be added, updated or removed. |
highlightedNodes | ARRAY(String|Number) | - | An array of nodes, determined only by their identifiers, which should be highlighted as output nodes. |
redraw | Boolean | FALSE | If set, all existing nodes, edges and their positions in the graph are removed from the graph and replaced by the new nodes and edges. |
The Node Object
The node object is of type CX_JSON_OBJECT and describes a node. Highlighted fields are mandatory.
Field | Type | Description |
---|---|---|
id | String|Number | A unique identifier for this node. |
name | String | The name of a node. It is displayed as a title under the icon. |
iconID | String|Number | An identifier that defines the icon of this node. See the Icon object. |
description | String | The tooltip text for this node |
infoBarText | String | The text that should appear in the info bar when the node is clicked. If this text is not set, the info bar will not appear. |
collections | Array(Collection) | Since a node can represent an object that has collections with a large number of elements or has M1 or MN relations to many other nodes, there is a need for a small intermediate node that acts as an interface and filters and displays the large number of connections as required. In the picture above these interfaces are shown as small orange database symbols. This array describes such collections of a node by elements of the Collection object. |
contextMenu | String | The ID of the context menu definition to be applied to this node. If nothing is specified here, the node searches for the general definition with the ID "node". If it finds nothing, no context menu is displayed. |
borderColor | String | The colour of the node frame in any colour format accepted in HTML as a string. By default the node has no frame. If other properties, such as borderWidth, give the node a frame without a developer-defined colour, the frame will have the colour: rgb(43, 124, 233) |
borderWidth | Integer | The width of the node frame in pixels. By default the node has no frame. If other properties like borderColor or backgroundColor give the node a frame without a width defined by the developer, the node gets the border width 1. Highlighted nodes always have a node frame of 4px width. |
backgroundColor | String | The background colour of the node in any colour format accepted in HTML as a string. By default, the node has a transparent background colour without a frame. If other properties such as borderWidth or borderColor give the node a background without a developer-defined colour, the background will be the colour: rgb(210, 229, 255). |
weight | Integer | The size of a node on a scale from 1 to 10, with each level corresponding to 8px. The default size for normal nodes is 2, and for raised nodes the size is determined dynamically by adding 2 levels to the node size. Thus, nodes with size 10 can exceptionally get size 12 in the highlighted state. |
delete | Boolean | If set, this node is removed from the graph based on its attribute id. In this case the attributes name and iconID are no longer mandatory or relevant. |
The collection object
The collection object is of type CX_JSON_OBJECT and describes all collections, M1 and MN relations of a node. Highlighted fields are mandatory.
Field | Type | Description |
---|---|---|
name | String | A unique name for the collection. The uniqueness can only be maintained within the boundaries of a single node. This means that two nodes may each have a collection object with the same name attribute, while a node may not have two collection objects with the same name. |
icon | String | The icon symbol as Unicode string of the desired icon from FontAwesome 4.7. Note: The four-digit hexadecimal Unicode number of an icon can be found on his page right next to the icon name. |
color | String | The colour of the icon in any colour format accepted in HTML as a string. Default colour is: rgb(255, 102, 0) |
contextMenu | String | The ID of the context menu definition to be applied to this node. If nothing is specified here, the node searches for the general definition with the ID "collection". If it finds nothing, no context menu is displayed. |
description | String | The tooltip text for this collection node |
delete | Boolean | If set, this collection node is removed from the graph. |
The Edge Object
The class object is of type CX_JSON_OBJECT and describes an edge. Highlighted fields are mandatory.
Field | Type | Description | ||||
---|---|---|---|---|---|---|
from | String|Number | The identifier (id) of the node (node object) from which the edge originates. | ||||
to | String|Number | The identifier (id) of the node (node object) to which the edge points. | ||||
fromCollection | String|Number | The name of a collection symbol in the output node from which the edge should start. | ||||
toCollection | String|Number | The name of a collection symbol in the target node to which the edge should point. | ||||
name | String | A unique name for the edge. The uniqueness can only be maintained within the boundaries of the node from which the edge originates. I.e. two nodes may each have an outgoing edge with the same name attribute, while a node may not have two outgoing edges with the same name. Deprecated: If this attribute matches the name of a collection of the output node and fromCollection is not specified, the edge will start from the collection symbol of the output node. Please always use fromCollection, as this functionality will not be supported in the future. | ||||
label | String | The text that appears on a selected edge. | ||||
description | String | The tooltip text for this edge. | ||||
contextMenu | String | The ID of the context menu definition to be applied to this edge. If nothing is specified here, the edge will search for the general definition with the ID "edge". If it finds nothing, no context menu is displayed. | ||||
arrows | String | Determines at which ends of the connecting line between two nodes A (from) and B (to) arrows should be drawn. By default this property has the value "to" A->B. Possible variations are:
| ||||
style | String|Array(INTEGER) | The line style of the edge from the set: "solid", "dashed", "dotted", where "solid" is the default value. For more flexibility the developer can submit an array of numbers (in pixels) defining a pattern gap, line, gap, line ...etc. This pattern is repeated until the edge length is completely drawn. | ||||
weight | Integer | The width of an edge on a scale from 1 to 10, each step corresponding to 1px. By default an edge is size 1, but selected edges increase their width by 2 steps. | ||||
color | String | The colour of an edge in any colour format accepted in HTML as a string. The default colour is: rgb(43, 124, 233) | ||||
delete | Boolean | If set, this edge is removed from the graph. |