Ajax Programming with NetBeans

NetBeans is a free software provided by Sun for programming in multiple languages. It offers advantages for the realization of Ajax applications.

The creation of simple applications or web pages using Ajax is facilitated with features from the version 6.5 of NetBeans:

1. JavaScript editor with highlighting, code completion and popups for help.
2. CSS editor which allows you to instantly see results of changes.
3. Framework manager to install and choose an Ajax library among Yahoo UI, JQuery and many others.
4. Visual components to facilitate HTML page creation.

NetBeans also allows you to edit PHP code to make server side scripts.

It is best to configure NetBeans with Firefox for browser (Tools / Options / General). This will provides in addition the Firebug plugin for debugging.

Creating an Ajax project

A basic Web application is created with New Project / Java Web / Web application.
The index.jsp page will be created, and you can use it to develop the Ajax script, you can then rename it and add more pages if necessary.

If you want to add a framework, click the right mouse button on the project name (AjaxDemo in our example) and click at the bottom of the menu on Properties. Then click on JavaScript Libraries.

Then choose the framework, in our example JQuery:

You may need to know where the files are installed, in particular to include the framework in your page. The following tree gives you the file name:

For its physical location, click the right mouse button on the file name, in this case jQuery-1.2.6.js, and open the properties window.

By using a relative path, the JavaScript library will be included in the page with the following line:

 <script type="text/javascript" src="resources/jquery-1.2.6/jquery-1.2.6.js"></script>

JQuery experts will continue thanks to their experience with the framework. For my part, I had stopped here, failing to find a simple and clear example.

Use your own framework

You can also use a framework that is not in the built-in list of NetBeans, and your own scripts too.

Simply place them in the resources subdirectory. For example, to use the Anaa Ajax framework, unarchive it in resources and keep its directory. The file tree is automatically updated:

Then things become much easier for a first step...

Include the library:

<script type="text/javascript" src="resources/anaa/anaa.js"></script>

Then we add a minimalist script in the code of the Web page, which comes from the Anaa's archive.

function storing(data, element)
{
  element.innerHTML = data;
}
function demo(element)
{
  AARead("resources/anaa/demo-get.txt", storing, element);
}
</script>
<p> 
<span id="storage"> ***Must be stored here***. </span>
</p>  

Type F6 to display the page. Click on the button. The final result is this:

Our first Ajax program with NetBeans works!