Loading...
 

ObjectBrowser

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.

ObjectBrowser
ObjectBrowser

Use

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

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:

  • type: A string from the set {'node', 'edge', 'collection'} that indicates what was clicked.
  • nodeID: the identifier of the node(node object) in case of a clicked node or the identifier of the corresponding main node in case of a clicked collection node.
  • name: the name of the collection object as string in case of a clicked collection node or the name of the edge in case of a clicked edge.
  • from, to in addition to name to identify a clicked edge. See the Edge object.
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:

to: A ---> B from: A < B both: A <>B none: A - B
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.