Junos Space SDK > Getting Started

Tutorial: MyHelloWorld Application

Creating the Application

  1. Launch the Eclipse IDE.

  2. From the Eclipse menu, select Junos Space > Create New Application.

  3. In the dialog that opens, type MyNewHelloWorld in the Project Name field.

    Note that this also changes the UI Context and API Context Root fields.

    In the UI Context Root and API Context Root fields, add /hello.

  4. Click Next.

    The Project Structure page appears where you select the project reference for the type of SDK application you are creating.

  5. Select CompleteJunosEJB and CompleteJunosWebSvc.

    This page allows you to define the project dependency in the Junos Space application. By default, the EJB project is referenced by the Web service project, and the Web service project is referenced by the Web project in a complete Junos Space application.

  6. Click Finish.

    The Wizard will create your project.

  7. When the Project Created dialog displays, click OK.

    The Junos Space SDK plug-in opens, displaying the Eclipes project Explorere with the the projects for you MyNewHelloWorld application. These should be:

    • MyNewHelloWorld

    • MyNewHelloWorldEJB

    • MyNewHelloWorldWeb

    • MyNewHellowWorldWebSvc

Note: If you see an error that the resource is out of sync with the file system in the Error Log, do the following:

  1. Go to ../JunosSpaceSDK/doc/samples/SampleApplications

  2. In the HelloSpace.zip file find HelloSpace/EarContent/META-INF/app-info

  3. Copy the file schema2.xsd to the same folder in your Eclipse workspace. For example, ../MyNewHelloWorld/EarContent/META-INF/app-info.

Defining the Application

To define your application, do the following:
  1. From the Eclipse menu, select Junos Space > Edit AppInfo.xml.

    The Application Overview page opens. This page allows you to edit the app-info.xml file, which contains meta data about the application.

  2. In the Title field, type the name of your application.

  3. In the description field, enter a description for you application.

  4. Press CNTRL-S to save the file.

Creating the REST Service

Now that you have created you application, you are ready to start creating your REST service. First, you will need to define and implement a Java interface. However, the plug-in will have create the interface and implementation class for you when you define the application. You will only need to define the methods needed in your class. After defining your methods, you will use to the REST Services Wizard to create your service.

Note: Before you start creating your REST service, see Creating EJBs for the Junos Space Platform for an overview and introduction to Enterprise Java Beans (EJBs).

Implementing the Java Interface

To create the REST service, do the following:
  1. In the Project Explorer, select MyNewHellowWorldEJB > src > vnd.jssdk.mynewhelloworld, and open the file MyNewHellowWorld.java in the Eclipse editor.

    In this file, you will need to define a Java interface for your REST service. Notice that the plug-in has already defined any empty interface public interface MyNewHelloWorld for you.

  2. Add a method to the interface. For this tutorial, specify

    public String getGreeting();

  3. Save the file.

  4. To implement the interface, open the file MyNewHellowWorldImpl.java in the Eclipse editor.

    Notice that the plug-in has defined a class that implements the MyNewHelloWorld interface. You only need to define required method or methods. In the class MyNewHelloWorldImpl add the following method:

    public String getGreeting(){
    
          return "Hello World!";
          
    }
    
  5. Save the file.

Using the REST Wizard to Create a REST Service

After you have defined the getGreeting method in MyNewHelloWorld.java, you are ready to create a REST service with the REST Wizard.

To create a REST service, do the following:
  1. From the Eclipse menu, select Junos Space > Manage REST Services.

  2. On the Manage REST Services page, click New Service.

    The REST Interface Creation page opens.

  3. Click the Browse button next the EJB Source Interface field.

  4. On the Select EJB interface dialog, type the name of your EJB interface. You should see it displayed under Matching items.

  5. Click OK.

    The wizard fills in the fields on the REST Interface Creation page.

  6. Click Next.

  7. On the next page, you will see the method you defined in the interface under Methods of EJB Interface. Double-click on the method name.

  8. On the Configure REST Method page, click Edit.

  9. After the Single Object page opens, do the following:

    1. Select the first row under XML Tag and click Edit.

    2. On the next page, type greeting in the XML Tag Name field, then click OK.

  10. Click the Finish button on each page until you return to the Source Target Mappings page. You will see your service listed under Service UI.

  11. Click Close.

Deploying Your Application

After creating the REST service, you are now ready to deploy the appication. To deploy your applciation do the following.

  1. Deploy the MyNewHelloWorld application by selecting JunosSpace > Build/Deploy Junos Space Application.

  2. When the application details page opens, click Finish.

  3. You should see a dialog that indicates that your application deployed successfully. Click OK.

    Your application is now deployed to the server.

Testing Your Application with the REST Explorer

After you have finished creating and deploying your REST service with the REST Wizard, you can test it with the REST to see if it behaves as you expected.(See also Building and Deploying the Application.)

To test your REST service with the REST Explorer, do the following:

  1. Select Junos Space > Explore REST Services to open the REST Explorer.

  2. Under Junos Space Services, locate your application my-new-hello-world.

  3. Under my-new-hello-world, locate /hello/greetings. Notice that as you select the folders, the Explorer completes the URL.

  4. Under Response, click the XML tab and then select Source. You should see the response to your request.

Building the UI for You Application

After you have created the REST service. You are ready to create the UI. To create the UI, you need to define the UI tasks with the Module.xml Editor. You will also need to create JavaScript that define how your UI works.

Defining the UI

Before using the Module.xml Editor to define the tasks for your UI, you need to write the logic for the task. The Junos Space Platform uses the Ext JS library to create the controls for the UI that the task uses to present to the user the information retuned from your REST service. This section walks you through the creation of a simple JavaScript file that defines a UI and makes a request. section.

For more information about UI creation, see Creating the UI.

To create the JavaScript file, do the following:

  1. In Eclipse, create a file named HelloPanel.js and save it in the folder MyNewHelloWorldWeb/web/js.

    The HelloPanel.js file will define UI that a user will see when accessing the Junos Space application in a browser.

  2. In your HelloPanel.js file enter the JavaScript shown below. This script will create a button that makes a request when the user clicks a button and display the response.

    HelloPanel = Ext.extend(Ext.Panel, {
        height: 400,
        width: 400,
        layout: 'absolute',
        initComponent: function(){
        
        this.items = [
          {
        	xtype: 'button',
        	text: 'Say Hello',
        	y: 25,
            x: 25,
        	handler: function(){
        	    		
        	  Ext.Ajax.request({
        	    type: "GET",
        	    url: '/api/jssdk/my-hello-world/hello/greeting',
        	    //url: APP_URL_PREFIX+'/greeting',
        	    headers: {
        	      'Accept': 'application/vnd.jssdk.my-hello-world.hello.greeting-response+json;version=1'
        	      //'Accept' : APP_DATATYPE_PREFIX + '.greeting+json:version=1'
        	    },
        	    success:  function(response){
        	      var obj = Ext.decode(response.responseText);
        	      Ext.Msg.alert('Welcome', obj["greeting-response"].greeting);
        	    },
                  error: function(response){
                  alert("error");
                }
        	  });
        	}
          }, 
        ];
        HelloPanel.superclass.initComponent.call(this);
      }
    });
    
  3. Save HelloPanel.js.

    Next you will need to use the Module.xml editor to connect your UI to a task.

  4. Select Junos Space > Edit Module.xml.

  5. In the Project Explorer, open MyNewHelloWorldWeb > web > js > tasks

    Notice that under tasks the folder name is mynewhelloworldsmapletask and the file in this directory is named mynewhelloworldtask.js.

  6. In Tree View of the Module.xml editor,