Monday Nov 26, 2007

Setting up NetBeans 5.5 for Dojo AJAX Development

Inserting the Dojo Toolkit into NetBeans 5.5

1. Download the latest version of Dojo Toolkit

At the time I'm writing this, the toolkit is currently on version 1.0.1

2. Unpack the Packaging.
This will create a directory called “dojo-release-1.0.1”. Save this directory in a location which you will
use it later.
Picture 2.png

In my case, I'm copying this directory into my Development folder.

3. Start up NetBeans 5.5

Picture 3.png

4. Create a new Project.

File->New Project->Web->Web Application

Picture 4.png

and press the Next button.

5. Define the New Project.

Project Name: HelloDojo

You can leave the rest unless you need to save the project in another location.

Picture 5.png

Click the Finish Button.

6. Examining the Web Project's Directory Structure

NetBeans should display the following..

Picture 6.png

The Directory Structure Represents the two important directories: (we will ignore the rest for now)

a. Web Pages - The HTML, JSP, CSS and Image files. Also this contains XML files used by the Server.
b. Source Packages - Server-side Java Implementations (Servlets and Enterprise Beans)

7. Copy Dojo Toolkit into the Web Pages Directory

Picture 7.png

NetBeans will reflect this change. (highlighted below)

Picture 8.png

Congrads.. You are now ready to start your Dojo Development!

Writing your first Dojo Application

1. Setting up Dojo in your Page

This example has been taken directly from the “The Book of Dojo” section entitled Hello World - Dojo for the Attention-Impaired. Full credit should be given to “lance” who is the author. I'm adding to this example the NetBeans work we did in the previous section.

The first thing we will do is:

a. Load a Cascading Style-Sheet (CSS). We will be using “Tundra” from the Dijit theme library.
b. Insert a script element into the head element. This loads the Dojo JavaScript to enable Dojo.
c. Place the “tundra” CSS class into the body tag
d. I changed the default “JSP Page” title to “HelloDojo Page”

Picture 10.png

2. Load the Required Widget/Modules

In this step, we will load the Button widget. (see “SECTION 2”)

Picture 11.png

3. Add the Widget to the HTML

Inside the BODY tag, place a new instance of the Button widget on the page.

Picture 12.png

At this time, you can actually try something out. Press the “Run Main Project” button to construct a WAR file to be installed on TomCat.

Picture 13.png

We now have a button. It doesn't do anything, but we have a button!

4. Add an Event to the Button

We are adding a specialized script tag in the above button to handle a mouse click event.

Picture 14.png

This mouse click will cause an Alert to Popup. If you run it, and click on the button, you should see the following..

Picture 15.png

This is it.. you have a very basic AJAX application working on NetBeans 5.5. Next week, I will show out the Server-side Java will provide more useful information than just a PopUp.

Final Thoughts..

I hope you found this information useful. I will be continuing this series further to include our new AJAX-based Web Client (code named Kendo). Please stay tuned..

Technorati Tags: , ,

Tuesday Sep 25, 2007

Sun Java Instant Messaging Server and J2EE

The ServerSide has a great article on how to integrate "Presence" into your J2EE environment. This paper is a pretty good overview. Presence provides a mechanism for business applications to communicate the availability of users. The most obvious example is Internet Chat. You can see if someone is "offline", "online", or "busy." You could also extend this to write a phone switch, an escalation business workflow, or many other applications.

I would add to this paper that the Sun Java Instant Messaging Server provides the same XMPP functionality. The Sun Java Message Queue also provides the JMS functionality.

ServerSide Article "Integrating Presence in J2EE" by John Georgiadis

Technorati Tags: , , , ,

Wednesday Jun 27, 2007

Viewing a Calendar with JScrollPane (Part 2)

In my blog yesterday, we created a basic JFrame application. In this frame we added a JScrollPane and a JPanel for our calendar data. Today, the Calendar client will start to look like a traditional calendar client. We will cover first JScrollPane Headers, working with date stamps, and also drawing text on a Swing component.

JScrollPane Headers

One of the issues with the JScrollPane's ViewPort is that you can quickly get lost. One way to keep your orientation on a sheet is to place a header for the column (top) and the row (left) that is always visible. The developers of the JScrollPane realized that this was an issue, so they added two headers into this class: the Column Header and the Row Header.


The above diagram (click to enlarge) shows the headers being added to the JScrollPane. I thought it would be good to have the header on top show the current date for this view. On the left side, I will put a list of hours from Midnight (0:00) to Midnight (0:00). As I scroll down, the hour will move, but the Date will remain on the top of the View Port. As I scroll left or right, both the Hour Header and the Date Header will remain in place.

You create these headers by first creating a JPanel for each, then calling either setColumnHeaderView(Component view) or setRowHeaderView(Component view). If you read the JavaDoc API for JScrollPane, you will notice that there is a setColumnHeader(JViewPort view) and setRowHeader(JViewPort view), but I chose to avoid these for now.

The following code will create a new Java file called We will be using this JPanel to create a Date label.

/\* \*/
import java.awt.\*;
import java.util.Date;

public class DateHeader extends javax.swing.JPanel {
    Date date;
    /\*\* Creates new form DateHeader \*/
    public DateHeader() {
      /\* Calls DateHeader(Date date) constructor \*/
        this(new Date());

    public DateHeader(Date date){

    public void setDate(Date date) { = date;
        repaint();         /\* we will talk about this later \*/

    public Date getDate() {
/\* \*/

We will now add this Column Header Panel into our Calendar Client.

/\* Replace the method customComponents() in \*/

    public void customCompoents() {
        this.setSize(450, 300);
        myDataPane = new JPanel();
        myDataPane.setSize(1200, 1200);
        scrollPane = new JScrollPane(myDataPane);
        scrollPane.setSize(300, 150);
        DateHeader dHeader = new DateHeader(new Date());    /\* Newly added Column Header Instance \*/
        scrollPane.setColumnHeaderView(dHeader);            /\* Adds Column Header to JScrollPane  \*/
        myDataPane.setBackground(new Color(255, 255, 204)); /\* Set the Data Pane to a nice yellow \*/
        this.add( scrollPane);
/\* end changes for \*/

Now add two lines in your existing which we worked on yesterday. In the above, we added an instance of the DateHeader class from We initialize the new instance with a new Date object. This will set the label to today's date. We then call setColumnHeaderView(Component view) to attach the JPanel to the JScrollPane. The final thing we add is to change the Data Pane to a nice yellow color.

That's it. The top header is now in the JScrollPane's View Port.

The next section, we will put more data on the Column Header and add a Row Header.

Writing Text on the DateHeader

In the previous section, we defined a new subclass called DateHeader. In this section, I'll add a date stamp to this header, and I'll add two buttons to allow us to navigate forward and back.

We added a new constructor in DateHeader to set the Date object. This object holds the current information for the Date. In itself, we cannot just print the Date object to a string. Instead, we need to use a new object SimpleDateFormat to format the date into a useful date format. This label will be added by overriding the paintComponent(Graphics g) method of the JPanel. You can modify the initialization of SimpleDateFormat to display the date in a manner you desire. For example, you may want to display the date like "dd-MMM-yyyy".

/\* Add paintComponent() to \*/ 

    public void paintComponent(Graphics g) {
        SimpleDateFormat dateStamp = new SimpleDateFormat("MMMM dd, yyyy"); 
        int x = getWidth() / 2 - 150;  // Center the Text by Width
        int y = getHeight() / 2;       // Center the Text by Height
        g.drawString(dateStamp.format(getDate()), x, y);

/\* \*/

At this point, you should see a header with a date. 

Tomorrow  lets add a Row header.

Technorati Tags:

Tuesday Jun 26, 2007

Viewing a Calendar with JScrollPane

I've been playing around with Swing on my free time. I wanted to update my skills from my previous Java Programming days. In those days (back in 1997), I used the the older AWT-based forms. Today, we have the Swing Toolkit which makes it a lot easier to develop applications.

In the next few days, I will be writing some basic notes and tips for creating a new client using Swing. The client will eventually be a Calendar Client for our Sun Java Calendar Server.

The first topic will be on using JScrollPane. At some point, you will need to present data that will be bigger than the allowable view space.

The following code sets up our example. It defines our application as one that is extending a Swing JFrame class.

import javax.swing.\*;

public class SampleFrame extends JFrame {

     \* Constructor for SampleFrame
    public SampleFrame() {

     \* Constructor for SampleFrame
    public main() {
         SampleFrame sFrame = new SampleFrame();

You could type the above and compile it from a console window. The easiest way to get started is to download NetBeans and simply create a new project using a JFrame.

One way to display data on a Java Application is to use a container. The container which I'll use for this demonstration is a JScrollPanel and a JPanel. These two Swing containers provide a very large canvas for data (the JPanel) and a view port navigation tool (the JScrollPanel).

The above figure demonstrates a JScrollPane. In my Calendar Client, I really won't be able to display all the information at once. It is useful to allow a user to navigate their view (view port) across a larger calendar. The navigation is done through the use of the scroll bars on the bottom or the right of the view port.

In the next code example, I'll define a JScrollPane and my Data Pane. I'll do this within the JFrame defined above by adding a method called customComponents(). If you are using NetBeans, a method called initializeComponents() will be created automatically.

private JScrollPane scrollPane;
private JPanel      myDataPane;

    public void customCompoents() {
        this.setSize(450, 300);
        myDataPane = new JPanel();
        scrollPane = new JScrollPane(myDataPane);
        scrollPane.setSize(300, 150);
        this.add( scrollPane);

If you write, compile and run the above, you will likely not see much. This is because the JPanel is pretty much empty. Once we had some interesting stuff into the Data Pane, the scroll bars will appear.

We first resize our JFrame application to a size that is manageable. The next few lines define the JPanel for our Data Pane. We then create our JScrollPane (scrollPane) with myDataPane in the constructor.

Tomorrow.. Part 2 will go into making this more "calendar-like" by adding header information.

Technorati Tags:

Monday Jun 19, 2006

Sun Joins the OpenAJAX Alliance and Dojo

Sunday Aug 28, 2005

J2ME Development on Sony Ericsson S710a Phone

I just wanted to point out a discussion on how I create J2ME applications on my S710a phone.

Monday Jun 13, 2005

Sony Ericsson's J2ME Strategy

Now that I have my nifty Sony Ericsson s710a.  I wanted to do some J2ME development work on the phone.  The first question that occured to me was "what version of J2ME and JSRs where on my phone??"  I'm sure this is  a question which plagued many developers.  I wonder how many developers have made a neat application which they found only ran on the smallest subset of phones on the market. 

It seems that Sony Ericsson is taking this problem head-on with their recent announcement of supported Java Platforms.  Sony Ericsson reveals Java Platform Strategy making Developer's life Easier

Friday May 27, 2005

JSR-120 : Push messages

This is a neat little feature that we worked on as part of JSR-120. I imagine this could be a very useful feature in the Communications Arena. Should you have a MIDP 2.0 + JSR-120 enabled phone, you can send SMS messages to that phone to launch a Java application. This may lead us to a RIM-like device which we can push e-mails and appointments to a Communication client. Phones which support JSR-120: Motorola RAZR v3 Sony Ericsson P900/P910 (wow a reason for me to finally upgrade my p800!) Panasonic x700 Nokia 6600, 7610, 9500/9300, 6630 Java Presentation from Symbian [click here] Snipet from Nokia's Developer Newsletter.. Developers can write Mobile Information Device Profile (MIDP) 2.0 applications that handle incoming Short Message Service (SMS) data, even if the MIDlet is not running when the data arrives. Just add two attributes in the Java™ Application Descriptor (JAD) file and use a couple of key methods in the Wireless Messaging API (JSR-120). Include the following attributes in your JAD file to associate an incoming SMS port with your MIDlet: MIDlet-Permissions: MIDlet-Push-1: sms://:7500, WMAExample, \* Then use the following methods to process the incoming message: public void messageReceivedHandler ( TextMessage receivedMessage) { String senderAddress = receivedMessage.getAddress(); String receivedMessageBody = receivedMessage.getPayloadText();

I'll be writing about topics that would interest users and developers of Sun Java Communication Suite.


« June 2016