The application UI must demonstrate the integration with the backend event processing.
In this document:
In this project, you will add a new tab in the custom UI for the UX1.
For simplicity, use a single view called Event Notifications
that must be implemented by the ui/events.js
file.
Continue the demo project from the previous step.
In APP-META.xml
, you have declared the new events
item on the top level, so it must appear as a new tab
in the application navigation panel.
The ui/events.js
file must print out the event notification log
contents. Custom JavaScript code looks as follows:
define([
"dojo/_base/declare",
"dojo/when",
"aps/xhr",
"aps/View",
"aps/Output",
"./displayError"
], function(declare, when, xhr, View, Output, displayError) {
var self;
var logContent = "";
return declare(View, {
init: function() {
self = this;
var refresh = function() {
when(
xhr(
"/aps/2/resources/" + aps.context.vars.events.aps.id +
"/readNotifications",
{ method: "GET", handleAs: "text" }
),
function(logContent) {
if (logContent.length > 0)
self.byId("events_general").addChild(new Output({
label: "", innerHTML: "<pre>"+logContent+"</pre>"
}));
aps.apsc.cancelProcessing();
self.byId("events_refresh").cancel();
},
function(err) {
displayError(err);
aps.apsc.cancelProcessing();
this.cancel();
self.byId("events_refresh").cancel();
});
};
return ["aps/Container", { id: this.genId("page") }, [
["aps/Toolbar", [
["aps/ToolbarButton", {
id: this.genId("events_refresh"),
iconClass: "sb-refresh",
label: "Refresh",
onClick: refresh
}]
]],
["aps/FieldSet", {
id: this.genId("events_general"),
title: "Event Notifications"
}, [
["aps/Output", {
id: this.genId("events_notifications"),
label: "Event Notifications",
value: logContent
}]
]]
]];
} // End of Init
}); // End of Declare
}); // End of Define
Keynotes:
The aps/Output
widget presents the event notification log.
The aps/xhr()
function reads the event notification log by calling the readNotifications()
custom method. The function extracts the subscribed event
resource ID
from the events
variable declared in metadata for this view.
In this project, the xhr()
function is activated by the Refresh button, but in other projects,
you can also use other ways, for example, using a periodic update process.
You have designed and developed a simple presentation logic for the demo application. In accordance with the scenario, the new UI view allows a customer to monitor the subscribed events.
The files you have created are similar to the respective files in the
sample package
.