Junos Space SDK > Developer Guides > Junos Space Application Developer Guide > Programming with the Junos Space SDK > Developing Junos Space Applications > Creating the UI

Understanding the UI Configuration

This topic describes the use of JavaScript and HTML to implement the task UI. You can view the examples to understand the application and implement the tasks using the Module.xml editor.

Setting the UI Configuration

To implement a task, you have to develop the layout for the task by using the Ext-JS Designer. While developing the JS components of the layout ensure that you use the appropriate namespaces.

To set the UI configuration:

  1. In the Module.xml editor go to the all-tasks node in the Tree View pane and add a new task to the tree by using the task attribute section.

    The task attribute section contains the UI Configuration.

  2. Use the JS Config option to configure the JavaScript and CSS files to render the Task UI.
  3. Use the HTML Config option to upload the HTML file.

Using the JS Config Option

By default, the JS Config option is selected. This option allows you to configure the JavaScript and CSS files to render the Task UI.

To configure the JavaScript and CSS files:

  1. In the Top Level JS File field, specify the task-level JavaScript file that will automatically be loaded by the Junos Space UI framework when you launch the task from Main UI task ribbon.
  2. In the Ext.ns field, specify the namespace for the task.
  3. Click the Upload button in the JSList frame to upload the top level JavaScript component.

    For example, you can specify GUI-based form controls or "widgets" such as grid control, tree control, toolbars, and so on. You can also specify application support features, such as model dialog boxes or interactive user-input validation prompts to display the controls within the Task Panel on the MainUI.

  4. Ensure that the top level JavaScript component is the first file imported in the JS List. You can change the sequence of the component files by using the UP and DOWN buttons.

    The first JavaScript component is considered the top-level component, which is called by the generated task-level JavaScript. The Top level JavaScript file should have a constructor (a function with the same name as the file name) defined in it.

    Once you have saved the task, the task-level JavaScript file will automatically be created in the task-level JavaScript directory of the Junos Space Web project. This task-level JavaScript file will be automatically loaded by the Junos Space UI framework when you launch the task from Main UI task ribbon.

    The generated task-level JavaScript file manages the life cycle of the task using the Junos Space UI framework. Task level JavaScript will invoke the constructor of the top panel JavaScript file. For example:

    • Create a task with the name "ViewDeviceTask"
    • Create a top level js component file(devicedatagrid.js) that include GUI-based controls like Data Grid,Button to display the Devices on MainUI.
    • Define a constructor function in devicedatagrid.js ( function with name devicedatagrid() ), this function will be the entry point for UI rendering logic for the task.
    • Upload top level js component js file (devicedatagrid.js ).
    • Once "ViewDeviceTask" has been saved, Automatically task-level js file(ViewDeviceTask.js) is created in the task-level js directory of Junos Space Web project.

    You can define the parameters that are used to pass the static information in the form of name-value pairs to the task at the time of initialization.

  5. Click the Upload button in the CSS List frame to upload the .css file.
  6. Click the Clear Image button to remove the imported JavaScript and .css files.
  7. Click the Save button. All the uploaded *.js files are pushed into the top level [TASKNAME].js file.

    You can debug the JavaScript file by using the Debugging the UI link. If you are building the application for Build, Deploy and Package for Distribution you cannot debug the JavaScript files. For the production build SDK Plug-in:

    • It concatenates all the base file and dependent JavaScript files into a single JavaScript file.

    • You can obfuscate the concatenated JS file and then compress the file if you choose the Obfuscate Javascript option.

  8. To test an application layout in Junos Space, click Defining Space UI Icons in the Module.xml Editor.

  9. To redeploy and retest an application in Junos Space, click Uninstall Junos Space Application.

Using the HTML Config Option

To upload the HTML file:

  1. Select the HTML Config option in the UI Configuration.

  2. Click the Upload button to upload the HTML files.

  3. The selected + HTML file is placed in the WEB Application/web/html location.

To delete a HTML file:

Using the Destroy Method

The Destroy method is a life-cycle method that is invoked by the framework when:

The task application developer should use the Destroy method to perform the resource cleanup related to the task. The Destroy method closes the user task window, then calls the removeFiles utility function to remove the link and script tags corresponding to the CSS and JavaScript files loaded for this task.