RestJMakiUsecase
A mashup using REST jMaki Table Component
This tutorial outlines the steps to create a mashup using REST jMaki components build from NB RESTful Web services projects.
To see how to create REST jMaki components, go to "How to create Rest JMaki Table component"
In this tutorial, we are going to use publish/subscribe mechanism (See blog on publish/subscribe mechanism in jMaki) of jMaki to create the mashup with a 'CustomerDB' RESTful Web Service ('CustomerDB' is available as a sample web project in Sample->'RESTful Web Services' category in the Project wizard of NB 6.0 IDE.
Contents |
Preparation
0. Required Installations
- JDK 1.6.0_01
- Latest NetBeans 6.0 bits - http://download.netbeans.org/netbeans/6.0/final/ (If you choose Full install, then GlassFish AppServer gets installed also)
- GlassFish V2 - http://download.netbeans.org/netbeans/6.0/final/ or GF website (https://glassfish.dev.java.net/)
- After installing NB 6.0, get NB 6.0 'RESTful Web Services' plugin from the NB 6.0 IDE menu "Tools->Plugins->Available Plugins. After installing the plugin(s), IDE restarts.
http://wiki.netbeans.org/wiki/attach/RestJMakiComponents/InstallRestPlugin.png
- Also install the jMaki Ajax plugin (in IDE follow Tools->Plugins->Available Plugins,
then select 'jMaki Ajax support' and click 'Install' button), as shown below:
http://wiki.netbeans.org/wiki/attach/RestJMakiComponents/InstalljMakiPlugin.png
Note: You can also download org-netbeans-modules-sun-jmaki.nbm from jMaki Netbeans plugin area and install the plugin seperately.
Note: You could skip steps 1-2 and go to Create a mashup using REST jMaki widget if you have the CustomerDB RESTful Web Services running on an App Server. You just need to change the servceUrl attribute in the jsp tag for this service.
1. Create a 'CustomerDB' Web Project
First, you need to create a web project. In this case, we will use one of the samples that is included in the New Project wizard as our starting point.
- Choose File > New Project. Under Categories, select Samples and then RESTful Web Services. Under Projects, select Customer Database, as shown below:
http://wiki.netbeans.org/wiki/attach/RestJMakiComponents/CreateCustomerDB.png
- Click Next and click Finish.
The sample project opens in the IDE, with its project structure in the Projects window.
2. Testing the 'CustomerDB' RESTful Web Services
To test the application, do the following:
- In the Projects window, right click the project and choose Test RESTful Web Services. The server starts and the browser opens, displaying the RESTful web client, which you can use for testing the interaction with the RESTful web service.
http://wiki.netbeans.org/wiki/attach/RestJMakiComponents/TestCustomerDB.png
- Now, Select the '/customers' link and then click Test. Next, select a customer link (such as '/customers/1/') and then click Test again.
http://wiki.netbeans.org/wiki/attach/RestJMakiComponents/TestPage.png
Create a mashup using REST jMaki widget
Customers Table publish/subscribe topic used:
/dojo/rest/customerstable/onSelect
Customers Table has other topics besides onSelect (See end of this tutorial on how to use these)
/dojo/rest/customerstable/clear /dojo/rest/customerstable/addRow /dojo/rest/customerstable/addRows /dojo/rest/customerstable/updateRow /dojo/rest/customerstable/removeRow /dojo/rest/customerstable/select
Yahoo Geocoder publish/subscribe topic used:
/yahoo/geocoder
1. Creating a Web Project
- Create a Web project in NB 6.0
2. Drag-n-drop widgets
- Drag-n-drop CustomerDB->Customers Table widget to the index.jsp of the web app.
- Drag-n-drop jMaki Yahoo->Geocoder widget to the index.jsp of the web app.
- Drag-n-drop jMaki Google->Map widget to the index.jsp of the web app.
3. Add a listener
- Create a listener to update Geocoder location, when user selects a customer from the Customer Table.
<script>
function customersTableListener(item) {
var src = item.src;
var address = src.addressline1+', '+src.city+', '+src.state+'-'+src.zip;
var gcWidgetId;
var divs = document.getElementsByTagName('script');
for(var i=0;i<divs.length;i++) {
var txt = divs[I].innerHTML;
if(txt.indexOf('yahoo_geocoder') != -1) {
var st = txt.indexOf('yahoo_geocoder');
var en = txt.substring(st).indexOf('\'');
gcWidgetId = txt.substring(st, st+en);
break;
}
}
document.getElementById(gcWidgetId + "_location").value = address;
var coordinates = jmaki.attributes.get(gcWidgetId).getCoordinates();
jmaki.publish("/yahoo/geocoder", coordinates);
}
jmaki.subscribe("/dojo/rest/customerstable/onSelect", customersTableListener);
</script>
- Subscribe to /dojo/rest/customerstable/onSelect event (use the above listener).
4. Run the Web application
- Right-click inside the index.jsp file, then select 'Run File'
5. Test the Web application
- On the Customers table, select any row, a map is displayed at the bottom of the page with the address
from the selected row.
6. How to Add/Update/Delete row in Customers Table jMaki widget (from other jMaki widgets or javascripts)
- To Add a new row
var b = {};
b.id = newId;
b.value = {'Id': '200', 'name': 'Sun Microsystems', 'addressline1': 'Network Circle', 'city': 'Menlo Park', 'state': 'CA', 'zip': '94025'};
b.value.Id = newId;
jmaki.publish("/dojo/rest/customerstable/addRow", b);
- To Update a row
var targetId = '1';
var b = {};
b.targetId = targetId;
jmaki.publish("/dojo/rest/customerstable/updateRow", b);
- To Delete a row
var targetId = '1';
var b = {};
b.targetId = targetId;
jmaki.publish("/dojo/rest/customerstable/removeRow", b);
