Presentation Logic

The application UI must demonstrate the integration with the backend event processing.

Presentation Overview

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 Your Demo Project

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.

Conclusion

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.

← Provisioning Logic

Deployment →