Publisher App for Tightly Coupled Interactions
The example app used in this section extends the example app created in the
Declare, Get and Set Properties in Custom Apps topic. This app uses the job category that a user selects to retrieve information on employees and display this data in a table.
To use this with another app that retrieves employee job history, this example adds a click event to the employee table to allow users to select an employee and then publishes this event to the tightly-coupled subscriber app.
Updates to HTML and CSS
This example adds a title to the HTML for the app:
And adds a CSS style for the title:
div.sampleTightPub { font-family: Arial, Helvetica, sans-serif;
font-size: 9pt; margin-top: 5px; margin-bottom: 5px; }
div.sampleTightPub select {margin-top: 5px; margin-bottom: 5px;}
div.title {font-size: 14pt; font-weight: bold; color: #555555;}
table.pubTable {border: 1px solid #999999; border-collapse: collapse; }
table.pubTable thead {background-color: #ededed;}
table.pubTable th, table.pubTable td {padding: 5px; border: 1px solid #999999;
font-size: 9pt;}
Update Constructor Properties
Both the subscriber and publisher apps in this example are extensions of the example app created in the
Declare, Get and Set Properties in Custom Apps. To ensure that properties in both app are unique within the Sample namespace, we need to update the property name for the table node from
myTbl to
pubTbl:
Presto.namespace("Sample");
Sample.TightCouplingPublisher = function( app ) {
this.app = app;
this.rootDiv = jQuery(app.getRootElement());
this.pubTbl = this.rootDiv.find('.pubTable');
var self = this;
//constructor called when DOM and all resources are loaded
this.onLoad = function(app) {
this.dept = this.rootDiv.find('.deptOptions');
var curPrefix = this.dept.val();
//hide table initially until job category selected
if (curPrefix = 'none') {
self.pubTbl.hide();
} else {
self.getEmployees();
}
...
};
};
Updating the Row Template to Support a Click Event
The table rows are generated in a jQuery template. To easily add a click event to each cell in these rows, this example adds a class to each table cell in the template HTML like this:
...
this.onLoad = function(app) {
...
var rowMarkup = "<tr
>" +
"<td class='empId'>${employee_id}</td>" +
"<td class='fname'>${first_name}</td>" +
"<td class='lname'>${last_name}</td>" +
"<td class='jobId'>${job_id}</td>" +
"</tr>";
jQuery.template("rowTemplate", rowMarkup);
....
};
...
Binding a Handler to the Table Cell Click Event
To publish which employee a user selects, this example binds a handler to the click event for each cell in the table body. The click event only occurs if the jobPrefix property is not set to its default value of none:
...
this.getEmployees = function(){
var jobs = this.app.getPropertyValue('jobPrefix');
if (jobs != 'none') {
//invoke mashable, render table, bind click event
} else {
self.pubTbl.hide();
}
};
};
The table rows that this handler must bind to are generated in the onSuccess callback when the mashable is invoked to retrieve employee data, so binding must occur after that:
...
this.getEmployees = function(){
var jobs = this.app.getPropertyValue('jobPrefix');
if (jobs != 'none') {
var prestoUrl = "/mashzone/edge/api/rest/Employees_by_Job_Prefix/runMashup?x-presto-resultFormat=json&inputparam_3=" + jobs;
this.connection.request({
url: prestoUrl,
type: "get",
contentType: "application/x-www-form-urlencoded",
data: this.requestBody
},
{ onSuccess: function(response, responseHeaders) {
self.pubTbl.show();
var result = response;
if (result.records.record) {
jQuery(".pubBody").empty();
var employees = result.records.record;
jQuery.tmpl("rowTemplate", employees).appendTo(".pubBody");
//bind handler to click event and publish topic
jQuery(".employee").click(function(eventObj){
var thisRow = jQuery(this);
var thisEmpId = thisRow.find(".empId").text();
var thisFname = thisRow.find(".fname").text();
var thisLname = thisRow.find(".lname").text();
var thisJobId = thisRow.find(".jobId").text();
self.app.publish("selectEmpl", {"empId": thisEmpId, "fName": thisFname, "lName": thisLname, "jobId": thisJobId});
});
} else {
self.rootDiv.html("no results found");
}
},
onFailure: function(e) {
self.rootDiv.html(e.message);
}
});
} else {
self.pubTbl.hide();
}
};
};
The handler uses the data from the row to build the topic payload and then publishes the message.