NetBeans IDE 6.1 - AJAX Programing

15 April 2008

The NetBeans IDE 6.1 release provides several new features and enhancements. Exciting new features include support for AJAX programming, mobile application programming and customizable code generation.

I will target the AJAX part and will introduce the newly added AJAX support. Those of you who think that AJAX programming is very difficult and takes a lot of time, I would say: THINK AGAIN

NetBeans IDE 6.1 makes AJAX programming simpler by providing JavaScript editor and jMaki Support. jMaki is an Ajax framework that provides a lightweight model for creating JavaScript centric Ajax-enabled web applications using Java, Ruby, PHP, and Phobos.

First you have to install the jMaki plugin which is very simple.

Tools > Plugins > (check jMaki Ajax support from the Available Plugins tab) > Install

I will create a simple AJAX application to demonstrate how easy AJAX programming is with NetBeans IDE 6.1.

I created a new web application with a JSP file (index.jsp). My aim is to add some AJAX controls in it. Normal practice is that we have to code the whole thing but not anymore. jMaki provides ready made controls which can simply be dragged and dropped on to the web page. To view the available controls, palette should be there:

Window > Pallete

You can see in the screen shot that we have a lot of ready made controls available. For my application, I will use jMaki yahoo controls.

Firstly, I created an HTML table (4 rows and 2 columns) by simple dragging the Table control from HTML palette.

I want to have some useful AJAX gadgets in the first column, and a yahoo map gadget in the second column.

For creating the map, I dragged map control from jMaki Yahoo palette on to the second column. The required code was pasted in the cell.

<a:widget  name="yahoo.map"
args="{ centerLat : 37.4041960114344, 
centerLon : -122.008194923401 }" />

We may change the latitude and longitude as required. And of course, we may place the widget code in a div and control as we like. You might be thinking about the java script file. It is created with name glue.js and the code is generated in it. You don’t need to worry about that part.

Now I want few gadgets in the first column.

I dragged ‘Weather control’ from the ‘jMaki Yahoo’ palette on to the required cell. The code generated is:

<a:widget name="yahoo.weather" />

Then I dragged ‘Calendar’ and ‘Editor’ controls as well. The code generated is:

<a:widget name="yahoo.calendar" />
<a:widget name="yahoo.editor" value="editorwindow" />

Note: for simplicity, I have removed the table row and table data tags.

All set. Click ‘Run main project’ button (play icon) form the menu bar and you can see the web page in the browser with all the controls.

Now let’s check if it really works. Type the ZIP code of your area and hit ‘Get Forecast’. You will get the temperature report without refreshing the whole page. That’s the power of AJAX. I tried this with the default ZIP and got the following response:

Play with the calendar and note that only the calendar control will be refreshed and not the whole page. Also try ‘Text Editing Tool’ which provides rich text facilities.

Let’s see if the map really works as want. You can drag the map in all directions, zoom in/zoom out and can also switch the map view (map/sat/hibird).

The screenshot below shows map view.

Now let’s talk about Java script editor. Open glue.js and you will see the generated java script code. You can edit is if needed. Netbeans uses java script editor for js files. It is very user friendly and makes writing java script very easy. See the following screen shots:

Shows all the available methods

Indicates the syntax errors

I have pasted the index.jsp code for those of you who want to take a look.

<%@ taglib prefix="a" uri="http://jmaki/v1.0/jsp" %>
<%-- 
    Document   : index
    Created on : 14.04.2008, 13:25:03
    Author     : webdynamics
--%>
 
<%@page contentType="text/html" 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>
    </head>
    <body>
        <h2>jMaki Test</h2>
        <table border="0" cellspacing="4" cellpadding="4" align="center">
            <thead>
                <tr>
                    <th>Gadgits</th>
                    <th>Map</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><a:widget name="yahoo.weather" /></td>
                    <td rowspan="2">
                        <div id="map">
                            <a:widget  name="yahoo.map"
                                       args="{ centerLat : 37.4041960114344, 
                                       centerLon : -122.008194923401 }" />
                        </div>
 
                    </td>
                </tr>
                <tr>
                    <td><a:widget name="yahoo.calendar" /></td>
                </tr>
 
                <tr>
                      <td>
        <a:widget name="yahoo.editor" value="editorwindow" />
        </td>
                </tr>
 
            </tbody>
        </table>
 
    </body>
</html>