Advanced View-Plugin

Continue the development of the presentation level.

As an alternative to the Basic View-Plugin, an advanced view-plugin contains definition of methods that the dashboard view calls when preparing the presentation of the respective tile or when the presented resources are updated.

Data Processing

In a case you are going to display more data about your application and add more actions on the Home dashboard, use the mediator object declared in the home dashboard service and available for the embedded view-plugins as the input argument in the init(mediator) method.

The init method in the application view-plugin should define the following mediator methods that the home dashboard service will call:

• The mediator.getWidget() method must return a UI tile with the presentation of the application service.

• The mediator.watch() method must continuously watch for changes in customer resources to present the up-to-date information in the UI tile.

Continue Your Demo

This section continues the demo project from its previous step.

You will develop the file declared as the view-plugin source in meta using an advanced method.

Note

The section illustrates the methods not used at the basic step. However, for the sake of simplicity, it does not add too much visual controls that you would probably need in a real application.

When developing the view-plugin from scratch, follow these steps.

1. In the ui/plugins/ folder, create the required file. If you are going to test both approaches basic and advanced, assign a name different from the file name that you have used earlier, for example, vpsDashboardPluginAdv.js.

2. Start with building the JavaScript skeleton in the file:

   define([
   "dojo/_base/declare",
   "dojo/Deferred",
   "dojo/Stateful",
   "dojox/mvc/at",
   "aps/ResourceStore",
   "aps/Tile",
   "aps/Output",
   "aps/common",
   "aps/nav/ViewPlugin"
   ], function (declare, Deferred, Stateful, at, Store, Tile, Output, common, ViewPlugin) {
      return declare(ViewPlugin, {
         init: function (mediator) {
   
            /* Initialize variables and the widget */
   
            /* Define the function that returns the Tile widget */
   
            /* Arrange continuous monitoring of subscriptions.
               Update the widget respectively. */
   
         }
      });
   });
   

3. Initialize variables and the Tile widget:

   var self = this,
       vpsCount = new Stateful({ usage: 0, limit: 0 }),
       widget = new Tile({
         id: "vpsList",
         title: "VPSes",
         onClick: function () {
            aps.apsc.gotoView("http://aps-standard.org/samples/basic1pdash#servers");
         },
         buttons: [{
            title: "Create new VPS",
            iconClass: "fa-plus",
            autoBusy: false,
            type: "link",
            onClick: function () {
               aps.apsc.gotoView("http://aps-standard.org/samples/basic1pdash#vps-wizard");
            }
         }]
      });
   

4. Define the function that returns the Tile widget:

   mediator.getWidget = function () {
      return widget;
   };
   

5. Arrange continuous monitoring of subscriptions and update the widget respectively:

   mediator.watch("resourceUsage", function (name, oldvalue, newvalue) {
      if(newvalue !== undefined) {
         common.forEach(newvalue, function(subscriptionResources) { // All resources
                                                                    //of a subscription
            subscriptionResources.forEach(function(resource) {
               if(resource.apsType === "http://aps-standard.org/samples/basic1pdash/vps/1.0") {
                  vpsCount.set({
                     "usage": resource.usage,
                     "limit": resource.limit
                  });
               }
            });
         });
      }
      else {
         vpsCount.set({
            "usage": 0,
            "limit": 0
         });
      }
      var output = self.byId("dash_vps_plugin_out");
   
      if(!output) {
         output = new Output({
            id: "dash_vps_plugin_out",
            value: at(vpsCount, "usage"),
            limit: at(vpsCount, "limit"),
            content: "Total: ${value} servers out of ${limit}"
         });
         widget.addChild(output);
      }
      else {
         output.set({
            content: "Total: ${value} servers out of ${limit}"
         });
      }
   });
   

Conclusion

This completes development of a view-plugin using an advanced method. You can find a similar file in the sample package.

Your project is ready for deployment.

← Basic View-Plugin

Deployment →