Junos Space JavaScript Classes

Junos Space applications provide JavaScript classes to interact with Junos Space REST services. These classes are also used in reference applications packaged with the Junos Space SDK:

A reference usage of these classes is available here.

Jx.JxHttpProxyRest

This class provides the framework for applications to interact with platform REST Web services. It overrides the doRequest method of Ext.data.HttpProxy to convert EXT JS style JsonData to JsonData, which can be sent over the wire to the REST service. For the source JavaScript, see Jx.JxHttpProxyRestt.

In the following code snippet, the path countries.country in the WorldCities reference application is converted to country in the PUT and POST methods. (For more information about the WorldCities reference application, see the Junos Space SDK Application Developer Guide



// The argument syntax is exactly the same as for the HttpProxy, but the behavior is slightly different.
// Use this proxy if your UI also needs to use the create, update, and destroy methods.
// This is the same as for HttpProxy:
//   GET ==> read
//   POST ==> create
//   PUT ==> update 
//   DELETE ==> destory

var proxy = new Jx.JxHttpProxyRest({

    url: '/api/jssdk/world-cities/countries',

    // #1 The URL can be specified at the top level. This is not supported by HttpProxy.
    // #2 Only the 'read' url for the collection needs to be provided, and the proxy will append the {id}
    // for the update and delete methods.

    api: {
        read: {
            headers: {
                'Accept': 'application/vnd.jssdk.world-cities.countries+json;version=1'
            }
        },
        create: {
            headers: {
                'Content-Type': 'application/vnd.jssdk.world-cities.country+json;version=1;charset=UTF-8',
                'Accept': 'application/vnd.jssdk.world-cities.country+json;version=1'
            }
        },
        update: {
            headers: {
                'Content-Type': 'application/vnd.jssdk.world-cities.country+json;version=1;charset=UTF-8',
                'Accept': 'application/vnd.jssdk.world-cities.country+json;version=1'
            }
        }

        // destroy method is not necessary because it has no headers, but the 'url' at the top still applies.

    }

});

Jx.JxJsonReaderRest

This class is used by the application to interact with the REST Web services provided by the platform. It overrides the readResponse method of Ext.data.JsonReader to convert JsonData received from the REST service to the data that can be interpreted by EXT JS. For the source JavaScript, see Jx.JxJsonReaderRest.

Jx.JxJsonWriterRest

This class is used by applications to interact with the platform's REST Web services. It overrides the toHash method of Ext.data.JsonWriter to convert JsonData sent from EXT JS to the data that is sent over the wire to a REST service. The overriding toHash method sends only those fields that have changed. For the source JavaScript, see Jx.JxJsonWriterRest.

Jx.task.TaskWindow

This class is used to implement the base TaskWindow widget for the Junos Space UI. This window uses a transparent background (as default) and can be used as a parent window that could contain other components used by the task. This can be overriden to implement a customized task window. For the source JavaScript, see Jx.task.TaskWindow.

The reference application uses this class to create its own customized task window.

Jx.SelectionModel

This class is a singleton class used to store the state of the selection made on the Junos Space UI for an application. This includes the currently selected task, workspace, earlier selected task, node, CSS, and JavaScript files in the ribbon. For the source JavaScript, see Jx.SelectionModel.

The reference application uses this class to get the selected node and then performs the task of constructing and showing the task window.

Jx.JxUtilities

This is a utility class and provides various utility functions to dynamically load and remove javascript and CSS files. For the source JavaScript, see Jx.JxUtilities .

The reference application uses this class to add and remove the dependent JS files which are required for the execution.

Jx.JxNativeJsUtils

This class is used to interact with other native JavaScript codes. Basically, this class is used to build the UI in the platform's main UI. It also contains the functions to provide JavaScript and other static resources to the page, adding callbacks, and so on. For the source JavaScript, see JxNativeJsUtils.

The reference application uses this class to add and remove the dependent JS files that are required for execution.

Usage of Junos Space JavaScript Classes

The following code shows how you can use the framework provided by the platform to achieve the desired functionality. "WorldCitiesSortCountryTask" uses these classes as follows:

  1. "Jx.JxTaskWindow" is used to create a top-level window for the task.
  2. "Jx.SelectionModel.getPreviousSelectedNode()" is used to get the handle to the previously selected node.
  3. "Jx.JxUtilities.require()" and "Jx.JxUtilities.removeFiles()" are used to add and remove the JavaScript files, respectively.

Note: The following code is for reference purposes only. To generate the following code automatically, you just need to follow the steps as explained in "Understanding the UI Configuration" section of the Junos Space SDK Application Developer Guide.


/**
 * Description - This file implements a task that creates the screen that demonstrates
 * the WorldCitiesSortCountryTask operations.
 */
var worldcitiessortcountrytask = Js.worldcitiessortcountrytask.WorldCitiesSortCountryTask.prototype;

var gConfig;

/**
 * Description - Initialize is one of the life cycle functions that is called by the
 * framework when a user clicks on the ribbon node corresponding to this task.
 **/
worldcitiessortcountrytask.initialize = function (config) {
    this.parentCt = config.parentCt;
    gConfig = config;
    this.node = config.node;
    this.taskParameters = config.taskParameters;
    this.loadDependencies(config);
};

/**
 * Description - This is a function that constructs the Task Window.
 */
worldcitiessortcountrytask.construct = function () {

    var displayPanel = this.build(gConfig);
    this.worldcitiessortcountrytaskTaskWindow = new Jx.JxTaskWindow({
        title: 'Sort Countries',
        maximized: true,
        layout: 'fit',
        items: [displayPanel]
    }); 

    this.worldcitiessortcountrytaskTaskWindow.render(this.parentCt.getEl());
    this.worldcitiessortcountrytaskTaskWindow.show();

};

/**
 * Description - Show is a life cycle function that is invoked by the framework
 * immediately after the initialize function completes execution.
 * In this particular case, the show function performs the
 * task of constructing and then showing the task window.
 * Method - show
 * Public
 */
worldcitiessortcountrytask.show = function () {

    //Maintain the state of last selected node.

    var node = Jx.SelectionModel.getPreviousSelectedNode();

    if (node == this.node) {

        // Here, users can call function that show the Window that contains their screen.

        this.construct();
    }
};

/**
 * Description - Destroy is a life cycle method that is invoked by the framework
 * in two cases:
 *
 *  1. When the user explicitly navigates away from this task by clicking
 *     on some other task or workspace node.
 *
 *  2. This particular task implicitly makes a switch to another task.
 *     A Task application developer should use this function to perform
 *     any resource cleanup related to this task.
 *
 * Method - destroy
 * Public
 */
worldcitiessortcountrytask.destroy = function () {

    if ((this.worldcitiessortcountrytaskTaskWindow !== undefined) && 
        (this.worldcitiessortcountrytaskTaskWindow !== null)) 
            this.worldcitiessortcountrytaskTaskWindow.close();

    this.removeDepedencies();
};

/**
 * Description - This is a function that push the dependent javascript files.
 * Parameters - config
 */
worldcitiessortcountrytask.loadDependencies = function (config) {

    this.jsFiles = [];

    if (config.debug) {
        this.jsFiles.push(['js', '/ui/jssdk/world-cities/js/RowEditor.js']);
        this.jsFiles.push(['js', '/ui/jssdk/world-cities/js/App.js']);
        this.jsFiles.push(['js', '/ui/jssdk/world-cities/js/pollUtil.js']);
        this.jsFiles.push(['js', '/ui/jssdk/world-cities/js/pollUtilModel.js']);
        this.jsFiles.push(['js', '/ui/jssdk/world-cities/js/WorldCitiesSortCountry.js']);
        Jx.JxUtilities.require(this.jsFiles, this.show.createDelegate(this));
    }
};

/**
 * Description - This is a function that removes the dependent JavaScript files.
 */
worldcitiessortcountrytask.removeDepedencies = function () {

    if (this.jsFiles.length > 0) {
        Jx.JxUtilities.removeFiles('js', this.jsFiles);
    }
};

}