Notice: This Wiki is now read only and edits are no longer possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.
Difference between revisions of "Stardust/Enhancing and Embedding Stardust/Browser Modeler/Javascript Extension Points"
Line 152: | Line 152: | ||
= Data Type Extension Point = | = Data Type Extension Point = | ||
− | The Extension Point <code> | + | The Extension Point <code>dataType</code> allows to specify additional Properties Pages with the Properties Panel for a Diagram Element in Lightdust Diagrams. |
== Properties == | == Properties == | ||
Line 166: | Line 166: | ||
| ID of the Properties Page, must be unique in the Properties Panel | | ID of the Properties Page, must be unique in the Properties Panel | ||
|- | |- | ||
− | | <code> | + | | <code>readableName</code> |
− | | | + | | Readable name of the Data Type |
|- | |- | ||
| <code>handlerMethod</code> | | <code>handlerMethod</code> | ||
Line 179: | Line 179: | ||
<source lang="javascript"> | <source lang="javascript"> | ||
− | + | dataType : [ ..., { | |
panelId: "activityPropertiesPanel", | panelId: "activityPropertiesPanel", | ||
pageId: "controllingPropertiesPage", | pageId: "controllingPropertiesPage", | ||
− | + | readableName: "activityControllingPropertiesPage.html" | |
− | + | ||
− | + | ||
}, ...] | }, ...] | ||
</source> | </source> | ||
Line 190: | Line 188: | ||
= Toolbar Palette Extension Point = | = Toolbar Palette Extension Point = | ||
− | The Extension Point <code> | + | The Extension Point <code>diagramToolbarPalette</code> allows to specify additional Properties Pages with the Properties Panel for a Diagram Element in Lightdust Diagrams. |
== Properties == | == Properties == | ||
Line 217: | Line 215: | ||
<source lang="javascript"> | <source lang="javascript"> | ||
− | + | diagramToolbarPalette : [ ..., { | |
panelId: "activityPropertiesPanel", | panelId: "activityPropertiesPanel", | ||
pageId: "controllingPropertiesPage", | pageId: "controllingPropertiesPage", | ||
Line 228: | Line 226: | ||
= Toolbar Palette Entry Extension Point = | = Toolbar Palette Entry Extension Point = | ||
− | The Extension Point <code> | + | The Extension Point <code>diagramToolbarPaletteEntry</code> allows to specify single entries in a palette in a diagram toolbar. |
== Properties == | == Properties == | ||
Line 258: | Line 256: | ||
<source lang="javascript"> | <source lang="javascript"> | ||
− | + | diagramToolbarPaletteEntry : [ ..., { | |
id: "selectModeButton", | id: "selectModeButton", | ||
paletteId: "drawingPalette", | paletteId: "drawingPalette", | ||
Line 271: | Line 269: | ||
= Diagram Decoration Extension Point = | = Diagram Decoration Extension Point = | ||
− | The Extension Point <code> | + | The Extension Point <code>modelDecoration</code> allows to specify additional Properties Pages with the Properties Panel for a Diagram Element in Lightdust Diagrams. |
== Properties == | == Properties == | ||
Line 296: | Line 294: | ||
<source lang="javascript"> | <source lang="javascript"> | ||
− | + | modelDecoration : [ ..., { | |
panelId: "activityPropertiesPanel", | panelId: "activityPropertiesPanel", | ||
pageId: "controllingPropertiesPage", | pageId: "controllingPropertiesPage", |
Revision as of 09:16, 17 November 2012
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.
Contents
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" }, ...]
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.