Presentation Logic

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:

Development Phases

Since the presentation logic is the most complicated part of this project, break the development of it into the following phases:

1. Auxiliary files - use them in the views
2. Server creation first step - a wizard to create a VPS
3. Servers list - a land page to display a list of servers and run custom operations
4. Server editor - an editor to update properties of a VPS

Auxiliary Files

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.

Continue Your Demo Project

This section continues the demo project from its previous step.

Define the auxiliary files.

Error Display

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"
                })
        );
    };
});

Default VPS Properties

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": ""
}

Conclusion

The project files you have created are similar to the respective files in the sample package.

← Provisioning Logic

Create Resource →