Architecture UI

Concepts

Model, View, Controllers

The user interface consists of multiple views, e.g., PackageExplorer, Menge, Legend, ... and the visualization. Controllers manipulate the views. Most views only have one controller, some views have several controllers. All controllers are located inside the scripts directory. Each subdirectory represents one controller.

Actions and Events

The controllers are linked by an event system. Every controller is subscribed to on or more events:

events.selected.on.subscribe(onEntitySelected);

In this case, the controller subscribed to the Event selected.on. Everytime the event is published, the method onEntitySelected is called. An Event can be published like this:

var applicationEvent = {			
  sender: packageExplorerController,
  entities: entities
};
events.selected.on.publish(applicationEvent);

In this case, the event filtered.on is published. Now all functions subscribed to this event will be called. applicationEvent is just a parameter that contains the actual payload. Events.js takes care of the internal event handlang, but in most cases it is not necessary to touch this file.

Visualization Platforms

Currently, we support x3dom and A-Frame as visualization platforms. A controller should be agnostic of the visualization platform. Everng platform specific functionality is encapsulated in the CanvasManipulator.js (for x3dom) and AframeCanvasManipulator.js (for A-Frame) in the scripts directory. Both implement the same functions. The index.php incldues the required manipulator accordingly.

Please be aware, that there exist several exceptions to this description. This applies to all files with A-frame in the name. However, these exceptions should be avoided where possible and eliminated in the future.

Files, folders and meaning (TODO)

• root
• data
• data-gen
• scripts
• setups