Stardust/Enhancing and Embedding Stardust/Browser Modeler/Application Overlay

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 specifies the the part 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.