Skip to main content

Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.

Jump to: navigation, search

Difference between revisions of "Stardust/Enhancing and Embedding Stardust/Browser Modeler/Javascript Extension Points"

(Properties)
 
(16 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
=Overview=
 +
 
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).
 
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).
  
Line 13: Line 15:
 
</source>
 
</source>
  
you add an additional Properties Page to the Properties Pages for Activities whose code is tobe found in the file '''activityControllingPropertiesPage.html''' and whose JavaScript Controller is created by invoking '''m_activityControllingPropertiesPage.create()''', whereby '''m_activityControllingPropertiesPage''' is a JavaScript modulein the file ''''''m_activityControllingPropertiesPage.js'''.
+
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  
 +
 
 +
<source lang="javascript">
 +
m_activityControllingPropertiesPage.create()
 +
</source>
 +
 
 +
whereby <code>m_activityControllingPropertiesPage</code> 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.
 
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.
Line 19: Line 29:
 
= Prerequisites =
 
= Prerequisites =
  
In Order to understand the concepts in this document you need to familiarize yourself with  
+
In order to understand the concepts in this document you need to familiarize yourself with  
  
 
* JavaScript programming in general
 
* JavaScript programming in general
Line 28: Line 38:
  
 
= Properties Page Extension Point  =
 
= Properties Page Extension Point  =
 +
 +
The Extension Point <code>propertiesPage</code> allows to specify additional Properties Pages with the Properties Panel for a Diagram Element in Lightdust Diagrams.
 +
 +
== Properties ==
 +
 +
{| border="1" cellspacing="0" cellpadding="5"
 +
! Property
 +
! Content
 +
|-
 +
| <code>panelId</code>
 +
| ID of the Panel containing the Page, e.g. <code>activityPropertiesPanel</code>.
 +
|-
 +
| <code>pageId</code>
 +
| ID of the Properties Page, must be unique in the Properties Panel
 +
|-
 +
| <code>pageUrl</code>
 +
| URL of the HTML content of the page
 +
|-
 +
| <code>handlerMethod</code>
 +
| function of the JavaScript Controller to be invoked
 +
|-
 +
| <code>visibility</code>
 +
| Flag to indicate whether the Entry is always visible (<code>always</code>) or only for preview purposes (<code>preview</code>)
 +
|}
 +
 +
== Example ==
 +
 +
<source lang="javascript">
 +
propertiesPage : [ ..., {
 +
  panelId: "activityPropertiesPanel",
 +
  pageId: "controllingPropertiesPage",
 +
  pageHtmlUrl: "activityControllingPropertiesPage.html",
 +
  provider: m_activityControllingPropertiesPage,
 +
  visibility: "always"
 +
}, ...]
 +
</source>
 +
 
= Toolbar Extension Points  =
 
= Toolbar Extension Points  =
 +
 +
The Extension Point <code>propertiesPage</code> allows to specify additional Properties Pages with the Properties Panel for a Diagram Element in Lightdust Diagrams.
 +
 +
== Properties ==
 +
 +
{| border="1" cellspacing="0" cellpadding="5"
 +
! Property
 +
! Content
 +
|-
 +
| <code>panelId</code>
 +
| ID of the Panel containing the Page, e.g. <code>activityPropertiesPanel</code>.
 +
|-
 +
| <code>pageId</code>
 +
| ID of the Properties Page, must be unique in the Properties Panel
 +
|-
 +
| <code>pageUrl</code>
 +
| URL of the HTML content of the page
 +
|-
 +
| <code>handlerMethod</code>
 +
| function of the JavaScript Controller to be invoked
 +
|-
 +
| <code>visibility</code>
 +
| Flag to indicate whether the Entry is always visible (<code>always</code>) or only for preview purposes (<code>preview</code>)
 +
|}
 +
 +
== Example ==
 +
 +
<source lang="javascript">
 +
propertiesPage : [ ..., {
 +
  panelId: "activityPropertiesPanel",
 +
  pageId: "controllingPropertiesPage",
 +
  pageHtmlUrl: "activityControllingPropertiesPage.html",
 +
  provider: m_activityControllingPropertiesPage,
 +
  visibility: "always"
 +
}, ...]
 +
</source>
 +
 
= Application Type Extension Point  =
 
= Application Type Extension Point  =
 +
 +
The Extension Point <code>propertiesPage</code> allows to specify additional Properties Pages with the Properties Panel for a Diagram Element in Lightdust Diagrams.
 +
 +
== Properties ==
 +
 +
{| border="1" cellspacing="0" cellpadding="5"
 +
! Property
 +
! Content
 +
|-
 +
| <code>panelId</code>
 +
| ID of the Panel containing the Page, e.g. <code>activityPropertiesPanel</code>.
 +
|-
 +
| <code>pageId</code>
 +
| ID of the Properties Page, must be unique in the Properties Panel
 +
|-
 +
| <code>pageUrl</code>
 +
| URL of the HTML content of the page
 +
|-
 +
| <code>handlerMethod</code>
 +
| function of the JavaScript Controller to be invoked
 +
|-
 +
| <code>visibility</code>
 +
| Flag to indicate whether the Entry is always visible (<code>always</code>) or only for preview purposes (<code>preview</code>)
 +
|}
 +
 +
== Example ==
 +
 +
<source lang="javascript">
 +
propertiesPage : [ ..., {
 +
  panelId: "activityPropertiesPanel",
 +
  pageId: "controllingPropertiesPage",
 +
  pageHtmlUrl: "activityControllingPropertiesPage.html",
 +
  provider: m_activityControllingPropertiesPage,
 +
  visibility: "always"
 +
}, ...]
 +
</source>
 +
 +
= Application Overlay Extension Point ==
 +
 +
== Properties ==
 +
 +
== Example ==
 +
 +
== More Details ==
 +
 +
More details can be found [[Stardust/Enhancing and Embedding Stardust/Browser Modeler/Application Overlay|here]].
 +
 
= Data Type Extension Point  =
 
= Data Type Extension Point  =
 +
 +
The Extension Point <code>dataType</code> allows to specify additional Properties Pages with the Properties Panel for a Diagram Element in Lightdust Diagrams.
 +
 +
== Properties ==
 +
 +
{| border="1" cellspacing="0" cellpadding="5"
 +
! Property
 +
! Content
 +
|-
 +
| <code>panelId</code>
 +
| ID of the Panel containing the Page, e.g. <code>activityPropertiesPanel</code>.
 +
|-
 +
| <code>pageId</code>
 +
| ID of the Properties Page, must be unique in the Properties Panel
 +
|-
 +
| <code>readableName</code>
 +
| Readable name of the Data Type
 +
|-
 +
| <code>handlerMethod</code>
 +
| function of the JavaScript Controller to be invoked
 +
|-
 +
| <code>visibility</code>
 +
| Flag to indicate whether the Entry is always visible (<code>always</code>) or only for preview purposes (<code>preview</code>)
 +
|}
 +
 +
== Example ==
 +
 +
<source lang="javascript">
 +
dataType : [ ..., {
 +
  panelId: "activityPropertiesPanel",
 +
  pageId: "controllingPropertiesPage",
 +
  readableName: "activityControllingPropertiesPage.html"
 +
}, ...]
 +
</source>
 +
 +
= Toolbar Palette Extension Point  =
 +
 +
The Extension Point <code>diagramToolbarPalette</code> allows to specify additional Properties Pages with the Properties Panel for a Diagram Element in Lightdust Diagrams.
 +
 +
== Properties ==
 +
 +
{| border="1" cellspacing="0" cellpadding="5"
 +
! Property
 +
! Content
 +
|-
 +
| <code>panelId</code>
 +
| ID of the Panel containing the Page, e.g. <code>activityPropertiesPanel</code>.
 +
|-
 +
| <code>pageId</code>
 +
| ID of the Properties Page, must be unique in the Properties Panel
 +
|-
 +
| <code>pageUrl</code>
 +
| URL of the HTML content of the page
 +
|-
 +
| <code>handlerMethod</code>
 +
| function of the JavaScript Controller to be invoked
 +
|-
 +
| <code>visibility</code>
 +
| Flag to indicate whether the Entry is always visible (<code>always</code>) or only for preview purposes (<code>preview</code>)
 +
|}
 +
 +
== Example ==
 +
 +
<source lang="javascript">
 +
diagramToolbarPalette : [ ..., {
 +
  panelId: "activityPropertiesPanel",
 +
  pageId: "controllingPropertiesPage",
 +
  pageHtmlUrl: "activityControllingPropertiesPage.html",
 +
  provider: m_activityControllingPropertiesPage,
 +
  visibility: "always"
 +
}, ...]
 +
</source>
 +
 +
= Toolbar Palette Entry Extension Point  =
 +
 +
The Extension Point <code>diagramToolbarPaletteEntry</code> allows to specify single entries in a palette in a diagram toolbar.
 +
 +
== Properties ==
 +
 +
{| border="1" cellspacing="0" cellpadding="5"
 +
! Property
 +
! Content
 +
|-
 +
| <code>id</code>
 +
| ID of the toolbar entry
 +
|-
 +
| <code>paletteId</code>
 +
| ID of the Palette the Toolbar Palette Entry is added to.
 +
|-
 +
| <code>iconUrl</code>
 +
| URL of the icon for the Entry
 +
|-
 +
| <code>provider</code>
 +
| require module reference for the code module providing the <code>create()</code> function for the JavaScript Controller of the Entry
 +
|-
 +
| <code>handlerMethod</code>
 +
| function of the JavaScript Controller to be invoked
 +
|-
 +
| <code>visibility</code>
 +
| Flag to indicate whether the Entry is always visible (<code>always</code>) or only for preview purposes (<code>preview</code>)
 +
|}
 +
 +
== Example ==
 +
 +
<source lang="javascript">
 +
diagramToolbarPaletteEntry : [ ..., {
 +
  id: "selectModeButton",
 +
  paletteId: "drawingPalette",
 +
  title: m_i18nUtils.getProperty("modeler.diagram.toolbar.tool.selectMode.title"),
 +
  iconUrl: "../../images/icons/select.png",
 +
  provider: m_defaultPaletteHandler,
 +
  handlerMethod: "setSelectMode",
 +
  visibility: "always"
 +
}, ...]
 +
</source>
 +
 +
= Diagram Decoration Extension Point  =
 +
 +
The Extension Point <code>modelDecoration</code> allows to specify additional Properties Pages with the Properties Panel for a Diagram Element in Lightdust Diagrams.
 +
 +
== Properties ==
 +
 +
{| border="1" cellspacing="0" cellpadding="5"
 +
! Property
 +
! Content
 +
|-
 +
| <code>panelId</code>
 +
| ID of the Panel containing the Page, e.g. <code>activityPropertiesPanel</code>.
 +
|-
 +
| <code>pageId</code>
 +
| ID of the Properties Page, must be unique in the Properties Panel
 +
|-
 +
| <code>pageUrl</code>
 +
| URL of the HTML content of the page
 +
|-
 +
| <code>handlerMethod</code>
 +
| function of the JavaScript Controller to be invoked
 +
|-
 +
|}
 +
 +
== Example ==
 +
 +
<source lang="javascript">
 +
modelDecoration : [ ..., {
 +
  panelId: "activityPropertiesPanel",
 +
  pageId: "controllingPropertiesPage",
 +
  pageHtmlUrl: "activityControllingPropertiesPage.html",
 +
  provider: m_activityControllingPropertiesPage,
 +
  visibility: "always"
 +
}, ...]
 +
</source>
 +
 
= Define a New Extension Point  =
 
= Define a New Extension Point  =
 +
 
You may define your own extension points and evaluate those in the JavaScript code.  
 
You may define your own extension points and evaluate those in the JavaScript code.  
 +
 
==Extension Point Registration==
 
==Extension Point Registration==
 +
 
==Extension Registration==
 
==Extension Registration==
 +
 
Extensions need to be registered in JavaScript files underneath the /modelerExtensions/<Extension Point Id> folder.
 
Extensions need to be registered in JavaScript files underneath the /modelerExtensions/<Extension Point Id> folder.
===baseElement===
 

Latest revision as of 09:54, 25 June 2013

Overview

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
handlerMethod function of the JavaScript Controller to be invoked
visibility Flag to indicate whether the Entry is always visible (always) or only for preview purposes (preview)

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
handlerMethod function of the JavaScript Controller to be invoked
visibility Flag to indicate whether the Entry is always visible (always) or only for preview purposes (preview)

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
handlerMethod function of the JavaScript Controller to be invoked
visibility Flag to indicate whether the Entry is always visible (always) or only for preview purposes (preview)

Example

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

Application Overlay Extension Point =

Properties

Example

More Details

More details can be found here.

Data Type Extension Point

The Extension Point dataType 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
readableName Readable name of the Data Type
handlerMethod function of the JavaScript Controller to be invoked
visibility Flag to indicate whether the Entry is always visible (always) or only for preview purposes (preview)

Example

dataType : [ ..., {
   panelId: "activityPropertiesPanel",
   pageId: "controllingPropertiesPage",
   readableName: "activityControllingPropertiesPage.html"
}, ...]

Toolbar Palette Extension Point

The Extension Point diagramToolbarPalette 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
handlerMethod function of the JavaScript Controller to be invoked
visibility Flag to indicate whether the Entry is always visible (always) or only for preview purposes (preview)

Example

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

Toolbar Palette Entry Extension Point

The Extension Point diagramToolbarPaletteEntry allows to specify single entries in a palette in a diagram toolbar.

Properties

Property Content
id ID of the toolbar entry
paletteId ID of the Palette the Toolbar Palette Entry is added to.
iconUrl URL of the icon for the Entry
provider require module reference for the code module providing the create() function for the JavaScript Controller of the Entry
handlerMethod function of the JavaScript Controller to be invoked
visibility Flag to indicate whether the Entry is always visible (always) or only for preview purposes (preview)

Example

diagramToolbarPaletteEntry : [ ..., {
   id: "selectModeButton",
   paletteId: "drawingPalette",
   title: m_i18nUtils.getProperty("modeler.diagram.toolbar.tool.selectMode.title"),
   iconUrl: "../../images/icons/select.png",
   provider: m_defaultPaletteHandler,
   handlerMethod: "setSelectMode",
   visibility: "always"
}, ...]

Diagram Decoration Extension Point

The Extension Point modelDecoration 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
handlerMethod function of the JavaScript Controller to be invoked

Example

modelDecoration : [ ..., {
   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 Point Registration

Extension Registration

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

Back to the top