In this section, you will develop custom UI views plugged into the customer control panel UX1.
In APP-META.xml
, you declared the navigation tree with the required views.
When designing the presentation level, it is necessary to take into account all UX (user experience) operations starting with creation of auxiliary files:
In this document:
Since the presentation logic is the most complicated part of this project, break the development of it into the following phases:
Auxiliary files - use them in the views
Server creation first step - a wizard to create a VPS
Servers list - a land page to display a list of servers and run custom operations
Server editor - an editor to update properties of a VPS
To have a well structured JavaScript code, add auxiliary files that other scripts can use. In this scenario, it makes sense to have two typical auxiliary files with the following content:
Definition of a function that displays an error message in the standard message list
Default JSON representation of a new VPS when a user starts creating a VPS
The demo project contains the definition of both files.
This section continues the demo project from its previous step.
Define the auxiliary files.
In the ui/
folder, create the displayError.js
file
containing the displayError
function that the other scripts can use to print out error messages
on the screen:
define([
"dijit/registry",
"aps/Message"
],
function (
registry,
Message
) {
return function(err) {
var errData = err.response ? JSON.parse(err.response.text) : { message: err };
aps.apsc.cancelProcessing();
var page = registry.byId("apsPageContainer");
if (!page) {
return;
}
var messages = page.get("messageList");
/* Remove all current messages from the screen */
messages.removeAll();
/* And display the new message */
messages.addChild(
new Message({
description: err + (errData.message || ""),
type: "error"
})
);
};
});
To propose default VPS properties, a view script will be able to import them from the
ui/wizard/newvps.json
file with the following content:
{
"aps": {
"type": "http://aps-standard.org/samples/vpsdemo/vps/1.0"
},
"state": "Stopped",
"platform": {
"OS": {
"name": "centos7"
}
},
"hardware": {
"CPU": {
"number": 4
},
"diskspace": 32,
"memory": 512
},
"name": "",
"description": ""
}
The project files you have created are similar to the respective files in the
sample package
.