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

Using the Ext Designer with Junos Space SDK

The Ext Designer is a desktop application that helps you create interfaces faster than ever in an easy-to-use, drag-and-drop environment. It is available to Junos Space SDK developers for creating user interfaces for Junos Space hosted applications. In addition, to the Ext Designer documentation, we recommend you to use the following information to prepare your Ext Designer created JavaScript for use in the Junos Space SDK plug-in for Eclipse.

This section of the documentation is illustrated in the sample application HelloSpace that is provided with, and installed by, the Junos Space SDK.

This Eclipse project can be imported to an Eclipse workspace from the following location:

<installation-folder>/Juniper Networks/Junos Space SDK/docs/samples/Sample Applications/HelloSpace.zip

Some items you need to consider in using JavaScript generated by Ext Designer in conjunction with the Junos Space SDK plug-in for Eclipse.

Components

When creating your UI within Ext Designer, it is recommended that you use namespaces for your JavaScript classes. For example, hellospace.DeviceMasterDetail. In addition, we recommend that you prefix your namespace with {appname}.{classname}.


Data Stores


Using the UI you created in Ext Designer within the Junos Space SDK plug-in for Eclipse

This section describes how to export your project for Ext Desinger and import it into your Junos Space project.

Exporting a Project from Ext Designer

Once your UI project is complete, you need to select "Export Project" and save the project files to a location on your file system. Exporting the project generates the JavaScript files for your application.

Note: For the HelloSpace program, the Ext Designer project is directly exported into the HelloSpaceWeb/web/js folder of your Junos Space project. This is the recommended practice, allowing the .js files to be "automatically" discoverable by Eclipse, every time the Ext Designer project is exported.

When you export, JavaScript files are created for each top-level component in your UI:

Note: DO NOT modify the ui.js. file generated by Designer, it will be overwritten whenever you modify and export your project. For more information, see "Designer-Getting-Started.PDF" at Sencha.com .

Importing a Project into your Junos Space project

To import the project file into the Junos Space SDK plug-in for Eclipse you need to have an active Junos Space SDK project within Eclipse. To complete the import of your JavaScript:

  1. Open the module.xml editor (File > Junos Space > Module.xml).
  2. Create a new task.
  3. Go to the UI Configuration section and upload the JavaScript (.js) files you generate in Ext Designer into this section. It is important to upload them in the correct order:
    1. .js
    2. .ui.js
    3. Store.js


    Note: Uploading in the correct order is essential because the top level (.js) components calls .ui.js, and .ui.js in-turn calls Store.js.

  4. CustomizeStore.js for use by Junos Space:

Passing static parameters to the top-level .js script:

Static parameters can be specified in the module.xml editor's Parameters pane in the editor:


These parameters can later be retrieved by the .js script using a config constructor function argument and forwarded to the top level .ui.js constructor, using the arguments parameter.

Note: For more information, see the Sencha Documentation.

Using Javascript and Ext Designer with REST Wizard Generated Hyphenated Names

When the EJB-REST Wizard creates RESTFul node names, it always uses hyphenation, instead of CamelCase (for example, managed-element). Hyphenated names are preferred for all Space REST nodes. They are also required by the REST Standards and Conventions.

When referencing such names in an EJB, always use key (or array-style) notation, rather than dot notation:

root: device["managed-element"]  (instead of device.managed-element)
or
root: device["managed-element"]["multilayer-subnetwork"] (instead of device.managed-element.multilayer-subnetwork)

In the general, where you want to access a property that contains non-standard characters, use array-style notation.

When using attributes in references, or when using the Ext Designer or Architect, use the mapping tag:

Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [{	
  name: 'managedElement',
mapping: 'managed-element'
 },{ name: 'id', mapping: '@key', type: 'int' }]});