MashZone NextGen 10.2 | Appendix | Legacy Presto components | Apps and Workspaces | Custom Apps | Create Fully Custom Apps in the App Editor | Tightly Coupled Interaction for Custom Apps | Subscriber App for Tightly Coupled Interactions
 
Subscriber App for Tightly Coupled Interactions
For subscribers in a tightly-coupled interaction, the only requirement is to use the subscribe method to register the subscription to a topic. Typically, this is done in the constructor for the app. In addition to identifying the topic, the subscriber must also supply a handler function to receive messages for this topic. The handler then takes appropriate action for each message.
The example in this section receives data for an employee from published messages and uses this to invoke a mashup and retrieve employee history. The results are then displayed in a table.
The HTML and CSS for the Subscriber App
The HTML for this subscriber app contains a title, simple user instructions and elements where the employee name and job history will be rendered:
<div
>
<div
>Tightly Coupled Subscriber</div>
<p>To see an employee's job history, select a job category and employee from Tightly Coupled Publisher</p>
<div
>
<span id="fname"></span>&nbsp;<span id="lname"></span>
</div>
<table
>
<thead>
<tr>
<th>Dates</th>
<th>Job Title</th>
</tr>
</thead>
<tbody
></tbody>
</table>
</div>
The CSS styles are:
div.sampleTightSub { font-family: Arial, Helvetica, sans-serif;
font-size: 9pt; margin: 5px;}
div.title {font-size: 14pt; font-weight: bold; color: #555555;}
div.empName{ font-size: 12pt; font-weight: bold; color: #555555;}
table.subTable {border: 1px solid #999999; border-collapse: collapse; }
table.subTable thead {background-color: #ededed;}
table.subTable th, table.subTable td {padding: 5px; border: 1px solid #999999;
font-size: 9pt;}
The Subscriber App Specification
The App Specification for the subscriber is very basic, adding only the jQuery Templating library and updating the device compatibility <presto-meta> flags.
<?xml version="1.0" encoding="UTF-8"?>
<app id="Tight_Coupling_Subscriber" name="Tight Coupling Subscriber"
jsclass="Sample.TightCouplingSubscriber"
minimizable="false" draggable="false"
width="400" height="400">
<title>Suscriber in a Tight Coupling</title>
<description>This App is meant to always be used in conjunction with the Tight Coupling Publisher App. The two Tight Coupling Apps illustrate implicit wiring in a tight coupling where both publisher and subscriber know topic names and payloads. No wiring in Mashboard is required. App interaction happens automatically based on publish/subscribe methods within the Apps.</description>

<properties></properties>

<presto-meta name="presto.desktopCompatible" type="text">true</presto-meta>
<presto-meta name="presto.phoneCompatible" type="text">false</presto-meta>
<presto-meta name="presto.tabletCompatible" type="text">false</presto-meta>
<requires>
<require name="jquery-tmpl" type="library" version="1.0"/>
<require src="js/app.js" type="script"/>
<require src="css/app.css" type="css"/>
<require src="html/app.html" type="html"/>
</requires>
</app>
Construct the Subscriber App and Define a jQuery Template
The JavaScript library for the subscriber app, declares a namespace for the app and starts the constructor using the onLoad method to ensure that all libraries and DOM nodes are loaded.
Sample.TightCouplingSubscriber = function( app ) {
this.app = app;
var self = this;

//constructor called when DOM and all resources are loaded
this.onLoad = function(app) {
this.rootDiv = jQuery(app.getRootElement());
this.subTbl = this.rootDiv.find('.subTable');
this.subtitle = this.rootDiv.find('.empName');
//hide table and employee name until job category selected
this.subTbl.hide();
this.subtitle.hide();
this.connection = app.getConnection();
this.requestBody = '';

var rowMarkup = "<tr><td>${dates}</td><td>${job_title}</td></tr>";
jQuery.template("rowTemplate", rowMarkup);
As is common with app constructors, this gets a reference to the containing page node that wraps the app as well as nodes of interest within the app and a connection to the MashZone NextGen Server. For more information on basic requirement for app constructors, see Create the App Constructor Using onLoad.
Next the constructor defines a jQuery template that will be used to render the body rows of the table once job history data has been retrieved.
Register the Subscription
The last step for the constructor is to register a subscription using the subscribe method for the selectEmpl event that the tight-coupled publisher app publishes.
...
this.onLoad = function(app) {
this.rootDiv = jQuery(app.getRootElement());
this.subTbl = this.rootDiv.find('.subTable');
this.subtitle = this.rootDiv.find('.empName');
//hide table and employee name until job category selected
this.subTbl.hide();
this.subtitle.hide();
this.connection = app.getConnection();
this.requestBody = '';

var rowMarkup = "<tr><td>${dates}</td><td>${job_title}</td></tr>";
jQuery.template("rowTemplate", rowMarkup);

this.app.subscribe("selectEmpl", function(topic,msg){},
self);
The second parameter is the handler function that will receive asynchronous messages from the publisher app.
Subscription Handler
The subscription handler must receive messages with one row of data for an employee and use this to invoke a mashup to retrieve job history for this employee and then render the results in a table.
...
this.app.subscribe("selectEmpl", function(topic,msg){
jQuery("#fname").html(msg.fName);
jQuery("#lname").html(msg.lName);
this.subtitle.show();
var prestoUrl = "/mashzone/edge/api/rest/Job_History_for_Employee/runMashup?x-presto-resultFormat=json&inputparam_3=" + msg.jobId+ "&employeeId_5=" + msg.empId;
this.connection.request({
url: prestoUrl,
type: "get",
contentType: "application/x-www-form-urlencoded",
data: this.requestBody
},
{ onSuccess: function(response, responseHeaders) {
self.subTbl.show();
var result = response;
if (result.records.record) {
jQuery(".subBody").empty();
var jobs = result.records.record;
jQuery.tmpl("rowTemplate", jobs).appendTo(".subBody");
} else {
self.rootDiv.html("no results found");
}
},
onFailure: function(e) {
self.rootDiv.html(e.message);
}
});
}, self);
};

};
Because this is tightly-coupled, the handler function knows the names of all properties in the message. The handler uses the first and last name from the message to render the employee name and then builds a request to invoke the mashup using the default connection and the remaining properties in the message.
The request contains two callbacks: onSuccess and onFailure. The callback for successful responses uses the results to render the table with job history data. The callback for failure handles any errors.

Copyright © 2013-2018 | Software AG, Darmstadt, Germany and/or Software AG USA, Inc., Reston, VA, USA, and/or its subsidiaries and/or its affiliates and/or their licensors.
Innovation Release