Junos Space Platform - UI Development

In JUNOS Space platform, a user can develop a UI by using the Ext-JS library. Ext-JS is a cross-browser rich internet application Framework. With Ext Designer, a user can develop pixel-perfect, cross-platform web apps with ease. Whether a user is a single developer or a development team, the Ext Designer component model keeps your code well structured, so even the largest applications can be easily maintained. Other developers' components plug in seamlessly. Best of all, Ext Designer provides an encyclopedic-collection of user interface widgets with an elegant starting theme.

Ext Designer offers an extraordinary range of user interface widgets. High performance scalable grids, trees, menus, and more. If you need it, we've probably already built it.

Ext includes a set of GUI-based form controls (or "widgets") for use within web applications:

• Text field and text area input controls
• Date fields with a pop-up date-picker
• Numeric fields
• List box and combo boxes
• Radio and check box controls
• HTML editor control
• Grid control (with both read-only and edit modes, sortable data, lockable and draggable columns, and a variety of other features)
• Tree control
• Tab panels
• Toolbars
• Desktop application-style menus
• Region panels to allow a form to be divided into multiple subsections
• Sliders
• Flash charts

Integrating JS files using the IDE

JUNOS Space platform allows users to write their own JS and then integrate with platform using IDE. User can select/upload JS files as a starting point for a task. For integrating JS in space UI application follow the steps:

1. From the Eclipse top-level menu, select Junos Space > Edit Module.xml. For more information, see Using the Module.xml Editor.

2. Select tree view from the bottom tabs.

   
   

3. For the workspace landing page, select the particular work space from the left tree view where you want to add functionality.

   
   

   Note: In case of task just select particular task from the left tree view as shown below.

   
   

4. From Workspace Landing Page block (for Task it's Task Page URL block), select script from Script Name drop-down (this drop down lists all the scripts placed in XXXWeb\web\js directory) as shown below.

   
   

   OR upload a new JS file using upload button as shown below. The newly uploaded file appears in the dropdown.

   
    

5. Select the correct JS file.

   
   

6. Build and deploy the application to space UI. In UI view after selecting application use sees all the tasks defined in particular application.

   
   

7. Whenever user clicks on the particular task it starts executing the JS script specified in the earlier steps.

Note: For more information, see Using the Ext Designer with the Junos Space SDK.