[RSS]

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.


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:

  • JDK 1.6
  • Latest NetBeans 6.1 final bits - http://download.netbeans.org/netbeans/6.1/final/ (If you choose Full install, then GF gets installed also)
  • GlassFish V2 - http://download.netbeans.org/netbeans/6.1/final/ or GF website

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'.

CustomerDB.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.
TestClient.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.


ClientStubs.png


ClientStubsWizard.png

  • File Structure of CustomerApp:

CustomerApp.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.zip(info), CustomerApp.zip(info), unzip and deploy to GlassFish AppServer to test the REST Remoting capability.

Rich Internet Applications using NB 6.0 RESTful Web Services

Attachments

ClientApp.PNG Info on ClientApp.PNG 23838 bytes
ClientApp.png Info on ClientApp.png 23838 bytes
ClientApp.zip Info on ClientApp.zip 113249 bytes
ClientAppTest.PNG Info on ClientAppTest.PNG 68224 bytes
ClientAppTest.png Info on ClientAppTest.png 41229 bytes
ClientStubs.png Info on ClientStubs.png 98818 bytes
ClientStubsWizard.png Info on ClientStubsWizard.png 119004 bytes
CustomerApp.png Info on CustomerApp.png 36985 bytes
CustomerApp.zip Info on CustomerApp.zip 25599 bytes
CustomerDB.png Info on CustomerDB.png 94741 bytes
CustomerDB.zip Info on CustomerDB.zip 131747 bytes
MusicDB.zip Info on MusicDB.zip 35581 bytes
RESTRemoting.png Info on RESTRemoting.png 48442 bytes
TestClient.png Info on TestClient.png 85030 bytes
music.zip Info on music.zip 30185 bytes
musicPlayingSong.PNG Info on musicPlayingSong.PNG 41864 bytes
musicPlayingSong.png Info on musicPlayingSong.png 41864 bytes
musicPlaylists.PNG Info on musicPlaylists.PNG 33693 bytes
musicPlaylists.png Info on musicPlaylists.png 33693 bytes
musicdb.sql Info on musicdb.sql 3331 bytes
remotingWizard.PNG Info on remotingWizard.PNG 67438 bytes
remotingWizard.png Info on remotingWizard.png 67438 bytes