RESTRemoting

RESTful Web Service Client Stub

This feature enables the user to generate JavaScript client stubs from RESTful Web Service Resources classes. This makes it easy for client applications to access the RESTful service. To generate client stubs, a user has to invoke the "RESTful Web Service Client" action on a web project. The wizard then allows users to select from a list of projects containing RESTful Web Services. See the high-level component diagram (of generated client stubs from a RESTful Web Service Web Project in Netbeans 6.1) below.


Image:RESTRemoting_RESTRemoting.png

Hightlights of Values:

  1. Instant REST web services client code from persistence entity classes.
  2. Clean and flexible client architecture that could be extended. Client code (JS) snippet generated for Customers table (from NB 6.1 sample DB)

Preparation:

0. Required Installations:

1. Create a 'CustomerDB' RESTful Web Service project:

  • Click on 'New Project' button to bring up the wizard, select 'Samples/RESTful Web Services' category and 'CustomerDB' project type. Click 'Next'.
  • Type 'CustomerDB' for project name; Click 'Finish'.


File:CustomerDB RESTRemoting RESTRemoting.png

2. Test 'CustomerDB':

  • Right click on the project and do 'Test RESTful Web Services'. The web application will be built, deployed and the default browser will be brought up with the javascript test client. In the test page, on the left side, click 'customers', then click 'Test'

on the right side of the page. You should see 10 customers displayed below the 'Test' button.
File:TestClient RESTRemoting RESTRemoting.png

3. Create a 'CustomerApp' Web Application (a RESTful Client project):

  • Click on 'New Project' button to bring up the wizard, select 'Web' category and 'Web Application' project type. Click 'Next'.
  • Type 'CustomerApp' for project name; select Sun Java System Application Server/GlassFish for target server and 'Java EE 5' for Java EE version. Click 'Finish'.

4. Create RESTful Web Service Client Stubs onto 'CustomerApp' project:

Select defaults, then add 'CustomerDB' project, then click 'Finish'

  • Right click on the project 'CustomerApp' and do 'RESTful Web Service Client Stubs'. Then select everything default. Finally select project "CustomerDB" project (you just created in step #1) On "Finish", the client stubs are generated under "CustomerApp/web/rest/CustomerDB". See below for illustration.


Image:ClientStubs_RESTRemoting.png


File:ClientStubsWizard RESTRemoting RESTRemoting.png


  • File Structure of CustomerApp:


File:CustomerApp RESTRemoting RESTRemoting.png

5. How to do CRUD using generated client stubs

Below you should see code snippets for CRUD operation onto Customer table in DB using the generated stubs.


  • Modify CustomerApp/web/index.jsp file as follows

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <!-- JS_DECLARE_START - DO NOT REMOVE-->
        <script type="text/javascript" src="./rest/Support.js"></script>
        <script type='text/javascript' src='./rest/customerdb/CustomerDB.js'></script>
        <script type='text/javascript' src='./rest/customerdb/Customers.js'></script>
        <script type='text/javascript' src='./rest/customerdb/Customer.js'></script>
        <script type='text/javascript' src='./rest/customerdb/DiscountCodes.js'></script>
        <script type='text/javascript' src='./rest/customerdb/DiscountCode.js'></script>
        <script type='text/javascript' src='./customerapp.js'></script>
        <!-- JS_DECLARE_END - DO NOT REMOVE-->
    </head>
    <body>
        <h1>JSP Page</h1>
        <script language="Javascript">

            //Create a new customer
            var newCustomer = newCustomer('1000'+getCustomersSize()+1, 'Scott');

            //Add this new customer to the customers. This will persist into the DB
            addCustomer(newCustomer);

            //Check the DB
            alert('New customer name: ' + newCustomer.getName());

            //Update this new customer
            newCustomer.setName('Tiger');
            updateCustomer(newCustomer);
            alert('Changed customer name: ' + newCustomer.getName());

            //Delete this customer
            deleteCustomer(newCustomer);
        </script>
    </body>
</html>
  • Create a javascript file under CustomerApp/web/customerapp.js with following content.
//Change this url value if necessary
var baseUrl = 'http://localhost:8080/CustomerDB/resources/';
var customersObj;
var discountCodesObj;

function getCustomers() {
    if(customersObj == null)
        customersObj = new Customers(baseUrl+'customers/');
    return customersObj;
}

function getDiscountCodes() {
    if(discountCodesObj == null)
        discountCodesObj = new DiscountCodes(baseUrl+'discountCodes/');
    return discountCodesObj;
}


//<!-- Sample Javascript code to get customer names -->
function getCustomersSize() {
    var customersObj = getCustomers();
    var customers = customersObj.getItems();
    return customers.length;
}

function getCustomerNames() {
    var customersObj = getCustomers();
    var customers = customersObj.getItems();
    var names = [];
    for(i=0;i<customers.length;i++) {
        var customer = customers[I];
        names.push(customer.getName());
    }
    return names;
}

//<!-- Sample Javascript code to get customer -->
function getCustomer(i) {
    var customersObj = getCustomers();
    var customer = customersObj.getItems()[I];
    return customer;
}

//<!-- Sample Javascript code to create and add a new customer-->
function addCustomer(customer) {
    var customersObj = getCustomers();
    customersObj.addItem(customer);//add locally
    var status = customersObj.flush(customer);//flush new customer to the server
    return status;
}

function newCustomer(id, name) {
    var customerObj = new Customer(getCustomers().getUri()+id+'/', true);
    customerObj.setCustomerId(id);
    customerObj.setName(name);
    customerObj.setEmail('');
    customerObj.setAddressline1('');
    customerObj.setAddressline2('');
    customerObj.setCity('');
    customerObj.setState('');
    customerObj.setZip('');
    customerObj.setPhone('');
    customerObj.setFax('');
    customerObj.setCreditLimit('1000');
    
    //var discountCodeObj = new DiscountCode(customerObj.getUri()+'L'+'/', true);
    customerObj.setDiscountCode(getDiscountCodes().getItems()[0]);

    return customerObj;
}

//<!-- Sample Javascript code to update ith customer-->
function updateCustomer(customer) {
    var status = customer.flush();//update changes to the Customer Resource on server
    return status;
}

//<!-- Sample Javascript code to update customer-->
function deleteCustomer(customer) {
    var customersObj = getCustomers();
    var status = customersObj.removeItem(customer);
    return status;
}
  • Now run CustomerApp/web/index.jsp. You should see Create/Retrieve/Update/Delete operation. If

you want to check the new customer created in the DB, please comment the deleteCustomer line in index.jsp


Try it!

Download the attached CustomerDB_RESTRemoting.zip, CustomerApp_RESTRemoting.zip, unzip and deploy to GlassFish AppServer to test the REST Remoting capability.

Rich Internet Applications using NB 6.0 RESTful Web Services Wadl Visual Designer

Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo