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, we 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 logContent = "";
   return declare(View, {
      init: function() {
         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)
                     this.byId("events_general").addChild(new Output({
                        label: "", innerHTML: "<pre>"+logContent+"</pre>"
                     }));
                      aps.apsc.cancelProcessing();
                  },
                  function(err) {
                      displayError(err);
                      aps.apsc.cancelProcessing();
               });
         };

         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 Meta Declaration 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 periodical 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 →