Stardust/Enhancing and Embedding Stardust/Browser Modeler/Javascript Extension Points

Extension Points and Extensions - analogous to the concepts in Eclipse - allow you to plug-in JavaScript logic and HTML UI into various parts of the Browser Modeler (Lightdust).

E.g. by defining

propertiesPage : [{
   panelId: "activityPropertiesPanel",
   pageId: "controllingPropertiesPage",
   pageHtmlUrl: "activityControllingPropertiesPage.html",
   provider: m_activityControllingPropertiesPage,
   visibility: "always"
}]

you add an additional Properties Page to the Properties Pages for Activities whose code is to be found in the file activityControllingPropertiesPage.html and whose JavaScript Controller is created by invoking

m_activityControllingPropertiesPage.create()

whereby m_activityControllingPropertiesPage is a JavaScript module in the file m_activityControllingPropertiesPage.js.

In other words: you only have to program JavaScript and HTML!

The Extension Point mechanism described here is very close to the Plug-In mechanism of Orion. It is intended to extend Lightdust's Extension Points towards the Orion Model.

Prerequisites

In order to understand the concepts in this document you need to familiarize yourself with

• JavaScript programming in general
• jQuery
• jQuery UI
• require for JavaScript
• the JavaScript Metamodel for Lightdust

Properties Page Extension Point

The Extension Point propertiesPage allows to specify additional Properties Pages with the Properties Panel for a Diagram Element in Lightdust Diagrams.

Properties

Property	Content
panelId	ID of the Panel containing the Page, e.g. activityPropertiesPanel.
pageId	ID of the Properties Page, must be unique in the Properties Panel
pageUrl	URL of the HTML content of the page
provider	Arbitrary extension elements

Example

propertiesPage : [ ..., {
   panelId: "activityPropertiesPanel",
   pageId: "controllingPropertiesPage",
   pageHtmlUrl: "activityControllingPropertiesPage.html",
   provider: m_activityControllingPropertiesPage,
   visibility: "always"
}, ...]

Toolbar Extension Points

The Extension Point propertiesPage allows to specify additional Properties Pages with the Properties Panel for a Diagram Element in Lightdust Diagrams.

Properties

Property	Content
panelId	ID of the Panel containing the Page, e.g. activityPropertiesPanel.
pageId	ID of the Properties Page, must be unique in the Properties Panel
pageUrl	URL of the HTML content of the page
provider	Arbitrary extension elements

Example

propertiesPage : [ ..., {
   panelId: "activityPropertiesPanel",
   pageId: "controllingPropertiesPage",
   pageHtmlUrl: "activityControllingPropertiesPage.html",
   provider: m_activityControllingPropertiesPage,
   visibility: "always"
}, ...]

Application Type Extension Point

The Extension Point propertiesPage allows to specify additional Properties Pages with the Properties Panel for a Diagram Element in Lightdust Diagrams.

Properties

Property	Content
panelId	ID of the Panel containing the Page, e.g. activityPropertiesPanel.
pageId	ID of the Properties Page, must be unique in the Properties Panel
pageUrl	URL of the HTML content of the page
provider	Arbitrary extension elements

Example

propertiesPage : [ ..., {
   panelId: "activityPropertiesPanel",
   pageId: "controllingPropertiesPage",
   pageHtmlUrl: "activityControllingPropertiesPage.html",
   provider: m_activityControllingPropertiesPage,
   visibility: "always"
}, ...]

Data Type Extension Point

The Extension Point propertiesPage allows to specify additional Properties Pages with the Properties Panel for a Diagram Element in Lightdust Diagrams.

Properties

Property	Content
panelId	ID of the Panel containing the Page, e.g. activityPropertiesPanel.
pageId	ID of the Properties Page, must be unique in the Properties Panel
pageUrl	URL of the HTML content of the page
provider	Arbitrary extension elements

Example

propertiesPage : [ ..., {
   panelId: "activityPropertiesPanel",
   pageId: "controllingPropertiesPage",
   pageHtmlUrl: "activityControllingPropertiesPage.html",
   provider: m_activityControllingPropertiesPage,
   visibility: "always"
}, ...]

Toolbar Palette Extension Point

The Extension Point toolbarPalette allows to specify additional Properties Pages with the Properties Panel for a Diagram Element in Lightdust Diagrams.

Properties

Property	Content
panelId	ID of the Panel containing the Page, e.g. activityPropertiesPanel.
pageId	ID of the Properties Page, must be unique in the Properties Panel
pageUrl	URL of the HTML content of the page
provider	Arbitrary extension elements

Example

propertiesPage : [ ..., {
   panelId: "activityPropertiesPanel",
   pageId: "controllingPropertiesPage",
   pageHtmlUrl: "activityControllingPropertiesPage.html",
   provider: m_activityControllingPropertiesPage,
   visibility: "always"
}, ...]

Diagram Decoration Extension Point

The Extension Point propertiesPage allows to specify additional Properties Pages with the Properties Panel for a Diagram Element in Lightdust Diagrams.

Properties

Property	Content
panelId	ID of the Panel containing the Page, e.g. activityPropertiesPanel.
pageId	ID of the Properties Page, must be unique in the Properties Panel
pageUrl	URL of the HTML content of the page
provider	Arbitrary extension elements

Example

propertiesPage : [ ..., {
   panelId: "activityPropertiesPanel",
   pageId: "controllingPropertiesPage",
   pageHtmlUrl: "activityControllingPropertiesPage.html",
   provider: m_activityControllingPropertiesPage,
   visibility: "always"
}, ...]

Diagram Decoration Extension Point

The Extension Point propertiesPage allows to specify additional Properties Pages with the Properties Panel for a Diagram Element in Lightdust Diagrams.

Properties

Property	Content
panelId	ID of the Panel containing the Page, e.g. activityPropertiesPanel.
pageId	ID of the Properties Page, must be unique in the Properties Panel
pageUrl	URL of the HTML content of the page
provider	Arbitrary extension elements

Example

propertiesPage : [ ..., {
   panelId: "activityPropertiesPanel",
   pageId: "controllingPropertiesPage",
   pageHtmlUrl: "activityControllingPropertiesPage.html",
   provider: m_activityControllingPropertiesPage,
   visibility: "always"
}, ...]

Define a New Extension Point

You may define your own extension points and evaluate those in the JavaScript code.

Extension Registration

Extensions need to be registered in JavaScript files underneath the /modelerExtensions/<Extension Point Id> folder.