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/Application Overlay"

(→‎Delivery)
 
(7 intermediate revisions by one other user not shown)
Line 1: Line 1:
 
= Purpose =
 
= Purpose =
  
−
The Application Overlay Extension Point allows you to create a pluggable user interface for arbitrary applications invoked from the Browser Modeler.
+
The Application Overlay Extension Point allows you to create a pluggable user interface for arbitrary applications invoked from the Browser Modeler. We will explain this with an example of a overlay to connect SQL datbases via Camel (although will not be fully implemented but just sketched - volunteers to complete this example are very welcome).
  
−
= Definition =
+
= Delivery =
  
−
The definition of Extensions to the Application Overlay (as well as those for the Event Overlay) need to reside in arbitrary JavaScript files '''integrationOverlay''' of your '''modelerExtensions''' folder. For convenience you may create one '''integrationOverlay.js''' file in that folder.
+
The easiest way to deliver the enhancements (although they are entirely JavaScript/client-based) is to create a Utility project and attach it to a RAD environment or deploy together with other Stardust artifacts in a WAR file.
  
 +
The Utility Project should contain the following folder structure
 +
 +
*resources/
 +
**META-INF/
 +
***webapp/
 +
****js/
 +
****sample.html
 +
***sql-overlay.portal-plugin
 +
 +
Hereby, '''webapp''' contains all web artifacts (HTML, JavaScript, CSS etc.). '''sql-overlay.portal-plugin''' is a file containing only one line
 +
 +
/META-INF/webapp/
 +
 +
that to specifies the path for the attached artifacts: They will be available under e.g.
 +
 +
http://localhost:9090/server/plugins/sql-overlay/sample.html
 +
 +
for the '''sample.html''' file above, assuming that the web application name for your deployment is '''server'''. The folder '''resources''' needs to be in the build path of your project.
 +
 +
= Overlay Definition =
 +
 +
The definition of Extensions to the Application Overlay (as well as those for the Event Overlay) need to reside in arbitrary JavaScript files '''integrationOverlay''' of your '''modelerExtensions''' folder under
 +
 +
*resources
 +
**META-INF
 +
***webapp
 +
****js
 +
*****modelerExtensions
 +
***sql.portal-plugin
 +
 +
For convenience you may create just one '''integrationOverlay.js''' file in that folder.
 +
 +
<source lang="javascript">
 
define(
 
define(
−
[ "bpm-modeler/js/GenericEndpointOverlay",
+
[ "sql-overlay/js/SqlOverlay"],
−
"bpm-modeler/js/MailIntegrationOverlay",
+
function(SqlOverlay) {
−
"bpm-modeler/js/RestServiceOverlay",
+
−
"bpm-modeler/js/RulesIntegrationOverlay",
+
−
"bpm-modeler/js/ScriptingIntegrationOverlay",
+
−
"bpm-modeler/js/m_manualTriggerIntegrationOverlay",
+
−
"bpm-modeler/js/m_timerEventIntegrationOverlay",
+
−
"bpm-modeler/js/m_fileEventIntegrationOverlay",
+
−
"bpm-modeler/js/m_emailEventIntegrationOverlay",
+
−
"bpm-modeler/js/m_messageEventIntegrationOverlay",
+
−
"bpm-modeler/js/m_scanEventIntegrationOverlay",
+
−
"bpm-modeler/js/m_genericCamelRouteEventIntegrationOverlay" ],
+
−
function(GenericEndpointOverlay, MailIntegrationOverlay, RestServiceOverlay, RulesIntegrationOverlay, ScriptingIntegrationOverlay, m_manualTriggerIntegrationOverlay,
+
−
m_timerEventIntegrationOverlay, m_fileEventIntegrationOverlay,
+
−
m_emailEventIntegrationOverlay,
+
−
m_messageEventIntegrationOverlay,
+
−
m_scanEventIntegrationOverlay,
+
−
m_genericCamelRouteEventIntegrationOverlay) {
+
 
return {
 
return {
 
applicationIntegrationOverlay : [ {
 
applicationIntegrationOverlay : [ {
−
id : "genericEndpointOverlay",
+
id : "sqlOverlay",
−
name : "Generic Camel Endpoint",
+
name : "SQL Database Access",
−
pageHtmlUrl : "genericEndpointOverlay.html",
+
pageHtmlUrl : "sqlOverlay.html",
−
provider : GenericEndpointOverlay
+
provider : SqlOverlay
−
}, {
+
−
id : "mailIntegrationOverlay",
+
−
name : "E-Mail Send/Receive",
+
−
pageHtmlUrl : "mailIntegrationOverlay.html",
+
−
provider : MailIntegrationOverlay,
+
−
visibility : "preview"
+
−
}, {
+
−
id : "restServiceOverlay",
+
−
name : "REST Service",
+
−
pageHtmlUrl : "restServiceOverlay.html",
+
−
provider : RestServiceOverlay
+
−
},
+
−
{
+
−
id : "rulesIntegrationOverlay",
+
−
name : "Rules Set Invocation",
+
−
pageHtmlUrl: "rulesIntegrationOverlay.html",
+
−
provider : RulesIntegrationOverlay,
+
−
},
+
−
{
+
−
id : "scriptingIntegrationOverlay",
+
−
name : "Script Invocation",
+
−
pageHtmlUrl: "scriptingIntegrationOverlay.html",
+
−
provider : ScriptingIntegrationOverlay,
+
−
visibility : "preview"
+
 
}],
 
}],
−
eventIntegrationOverlay : [
+
eventIntegrationOverlay : [ ... ]
−
{
+
−
id : "manualTrigger",
+
−
name : "Manual Start by User",
+
−
eventTypes : [ "startEvent" ],
+
−
eventClass : "none",
+
−
pageHtmlUrl : "manualTriggerIntegrationOverlay.html",
+
−
provider : m_manualTriggerIntegrationOverlay
+
−
},
+
−
{
+
−
id : "timerEvent",
+
−
name : "Timer Event",
+
−
eventTypes : [ "startEvent", "intermediateEvent" ],
+
−
eventClass : "timer",
+
−
pageHtmlUrl : "timerEventIntegrationOverlay.html",
+
−
provider : m_timerEventIntegrationOverlay
+
−
},
+
−
{
+
−
id : "fileEvent",
+
−
name : "File Event",
+
−
eventTypes : [ "startEvent", "intermediateEvent",
+
−
"endEvent" ],
+
−
eventClass : "message",
+
−
pageHtmlUrl : "fileEventIntegrationOverlay.html",
+
−
provider : m_fileEventIntegrationOverlay
+
−
},
+
−
{
+
−
id : "emailEvent",
+
−
name : "EMail Event",
+
−
eventTypes : [ "startEvent", "intermediateEvent",
+
−
"endEvent" ],
+
−
eventClass : "message",
+
−
pageHtmlUrl : "emailEventIntegrationOverlay.html",
+
−
provider : m_emailEventIntegrationOverlay
+
−
},
+
−
{
+
−
id : "messageEvent",
+
−
name : "Message Event",
+
−
eventTypes : [ "startEvent", "intermediateEvent",
+
−
"endEvent" ],
+
−
eventClass : "message",
+
−
pageHtmlUrl : "messageEventIntegrationOverlay.html",
+
−
provider : m_messageEventIntegrationOverlay
+
−
},
+
−
{
+
−
id : "scanEvent",
+
−
name : "Scan Event",
+
−
eventTypes : [ "startEvent" ],
+
−
eventClass : "message",
+
−
pageHtmlUrl : "scanEventIntegrationOverlay.html",
+
−
provider : m_scanEventIntegrationOverlay
+
−
},
+
−
{
+
−
id : "genericCamelRouteEvent",
+
−
name : "Generic Camel Route Event",
+
−
eventTypes : [ "startEvent" ],
+
−
eventClass : "message",
+
−
pageHtmlUrl : "genericCamelRouteEventIntegrationOverlay.html",
+
−
provider : m_genericCamelRouteEventIntegrationOverlay
+
−
} ]
+
 
};
 
};
 
});
 
});
 +
</source>
 +
 +
= Implementation =
 +
 +
The implementation of the Overlay requires an HTML file, e.g.
 +
 +
<source lang="html4strict">
 +
</source>
 +
 +
and a JavaScript controller
 +
 +
<source lang="javascript">
 +
define(
 +
[ ],
 +
function() {
 +
return {
 +
create : function(view) {
 +
var overlay = new SqlIntegrationOverlay();
 +
 +
overlay.initialize(view);
 +
 +
return overlay;
 +
}
 +
};
 +
 +
/**
 +
*
 +
*/
 +
function SqlIntegrationOverlay() {
 +
 +
/**
 +
*
 +
*/
 +
SqlIntegrationOverlay.prototype.initialize = function(view) {
 +
this.view = view;
 +
};
 +
 +
/**
 +
*
 +
*/
 +
SqlIntegrationOverlay.prototype.getModelElement = function() {
 +
return this.view.getModelElement();
 +
};
 +
 +
/**
 +
*
 +
*/
 +
SqlIntegrationOverlay.prototype.getApplication = function() {
 +
return this.view.application;
 +
};
 +
 +
/**
 +
*
 +
*/
 +
SqlIntegrationOverlay.prototype.getScopeModel = function() {
 +
return this.view.getModelElement().model;
 +
};
 +
 +
/**
 +
*
 +
*/
 +
SqlIntegrationOverlay.prototype.activate = function() {
 +
this.view
 +
.submitChanges({
 +
attributes : {
 +
"carnot:engine:camel::applicationIntegrationOverlay" : "SqlIntegrationOverlay",
 +
"sql:serviceConnector::query" : ""
 +
}
 +
});
 +
};
 +
 +
/**
 +
*
 +
*/
 +
SqlIntegrationOverlay.prototype.update = function() {
 +
this
 +
.setServiceType(this.getModelElement().attributes["carnot:engine:camel:SqlIntegrationOverlay::serviceType"]);
 +
};
 +
 +
/**
 +
*
 +
*/
 +
SqlIntegrationOverlay.prototype.submitQueryConfiguration = function() {
 +
this.view.submitChanges({
 +
attributes : {
 +
"sql:serviceConnector::queryString" : ""
 +
}
 +
});
 +
};
 +
}
 +
});
 +
</source>
  
 
= Runtime =
 
= Runtime =
 +
 +
You do not need to deploy additional runtime components as the Camel routes defined by your Overlay above will control the runtime behavior.

Latest revision as of 03:46, 5 July 2013

Purpose

The Application Overlay Extension Point allows you to create a pluggable user interface for arbitrary applications invoked from the Browser Modeler. We will explain this with an example of a overlay to connect SQL datbases via Camel (although will not be fully implemented but just sketched - volunteers to complete this example are very welcome).

Delivery

The easiest way to deliver the enhancements (although they are entirely JavaScript/client-based) is to create a Utility project and attach it to a RAD environment or deploy together with other Stardust artifacts in a WAR file.

The Utility Project should contain the following folder structure

  • resources/
    • META-INF/
      • webapp/
        • js/
        • sample.html
      • sql-overlay.portal-plugin

Hereby, webapp contains all web artifacts (HTML, JavaScript, CSS etc.). sql-overlay.portal-plugin is a file containing only one line

/META-INF/webapp/

that to specifies the path for the attached artifacts: They will be available under e.g.

http://localhost:9090/server/plugins/sql-overlay/sample.html

for the sample.html file above, assuming that the web application name for your deployment is server. The folder resources needs to be in the build path of your project.

Overlay Definition

The definition of Extensions to the Application Overlay (as well as those for the Event Overlay) need to reside in arbitrary JavaScript files integrationOverlay of your modelerExtensions folder under

  • resources
    • META-INF
      • webapp
        • js
          • modelerExtensions
      • sql.portal-plugin

For convenience you may create just one integrationOverlay.js file in that folder. 

define(
		[ "sql-overlay/js/SqlOverlay"],
		function(SqlOverlay) {
			return {
				applicationIntegrationOverlay : [ {
					id : "sqlOverlay",
					name : "SQL Database Access",
					pageHtmlUrl : "sqlOverlay.html",
					provider : SqlOverlay
				}],
				eventIntegrationOverlay : [ ... ]
			};
		});

Implementation

The implementation of the Overlay requires an HTML file, e.g. 

 

and a JavaScript controller 

define(
		[ ],
		function() {
			return {
				create : function(view) {
					var overlay = new SqlIntegrationOverlay();
 
					overlay.initialize(view);
 
					return overlay;
				}
			};
 
			/**
			 * 
			 */
			function SqlIntegrationOverlay() {
 
				/**
				 * 
				 */
				SqlIntegrationOverlay.prototype.initialize = function(view) {
					this.view = view;
				};
 
				/**
				 * 
				 */
				SqlIntegrationOverlay.prototype.getModelElement = function() {
					return this.view.getModelElement();
				};
 
				/**
				 * 
				 */
				SqlIntegrationOverlay.prototype.getApplication = function() {
					return this.view.application;
				};
 
				/**
				 * 
				 */
				SqlIntegrationOverlay.prototype.getScopeModel = function() {
					return this.view.getModelElement().model;
				};
 
				/**
				 * 
				 */
				SqlIntegrationOverlay.prototype.activate = function() {
					this.view
							.submitChanges({
								attributes : {
									"carnot:engine:camel::applicationIntegrationOverlay" : "SqlIntegrationOverlay",
									"sql:serviceConnector::query" : ""
								}
							});
				};
 
				/**
				 * 
				 */
				SqlIntegrationOverlay.prototype.update = function() {
					this
							.setServiceType(this.getModelElement().attributes["carnot:engine:camel:SqlIntegrationOverlay::serviceType"]);
				};
 
				/**
				 * 
				 */
				SqlIntegrationOverlay.prototype.submitQueryConfiguration = function() {
					this.view.submitChanges({
						attributes : {
							"sql:serviceConnector::queryString" : ""
						}
					});
				};
			}
		});

Runtime

You do not need to deploy additional runtime components as the Camel routes defined by your Overlay above will control the runtime behavior.

Retrieved from "https://wiki.eclipse.org/index.php?title=Stardust/Enhancing_and_Embedding_Stardust/Browser_Modeler/Application_Overlay&oldid=342710"

This page was last modified 03:46, 5 July 2013 by Marc Gille.

Back to the top