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.
In this document:
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.
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.
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
.
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. */
}
});
});
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");
}
}]
});
Define the function that returns the Tile widget:
mediator.getWidget = function () {
return widget;
};
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}"
});
}
});
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.