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:
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.
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.