Implementing DHTML windows	445

CreateWindow( new NewWin(

'3',10,387,1220,300, 'http://radio.javaranch.com/pascarello','Ajax Blog!'

)

);

Since we are now logged in, we can remove the login textboxes and submit button by placing a welcome message in their place. After we put up the welcome message, we need to hide the content that’s on the screen by default. To do this, we set the defaultContent DOM element’s display property to none so it is removed from the user’s view.

The JavaScript statement that instantiates the window involves two parts for each window. The first part is a function call to CreateWindow(), which is part of the JavaScript library that we added. Inside the function call, we will call a new object constructor. The constructor creates a window class, to make it easier to reference the window properties. The JavaScript function that produces the window class needs to receive the id, width, height, xPos, yPos, url, and title of the window. When the servlet returns this string to the client, our JavaScript eval() method will execute it.

For the most part, we’re following good code-generation conventions in generating simple, repetitive code that calls out to our JavaScript library functions. Our initialization code could be wrapped up into a single client-tier call, but we leave that as an exercise for the reader.

The JavaScript library that we use creates JavaScript floating windows. Let’s now see how to make those window-building functions available on the client tier.

11.4.3Adding the JS external library

As mentioned earlier, we are using a DHTML library that you can download from Manning’s website. The file, called JSWindow.js, contains all of the JavaScript DOM methods to produce the window elements. The library also applies event handlers to the window objects so that we can use drag-and-drop functionality. It is convenient to use code libraries that are already developed since it cuts down on development time and the code is normally cross-browser compliant.

The first thing we need to do is rename the file so we can make changes to it. Rename the JavaScript file to AjaxWindow.js, and save it to the directory in which you are working.

To use the functions contained in AjaxWindow.js, we need to reference the external JavaScript file with a script tag. We use the src attribute of the JavaScript

446CHAPTER 11

The enhanced Ajax web portal

element tag. The script element that links to our .js file should be included within the head tags of our HTML page:

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

We also need to get the DHTML windows stylesheet, so we can style the window. To do this, download the file AjaxWindow.css from Manning’s website and link to it using the link tag and the href attribute:

<link rel="stylesheet" type="text/css" href="AjaxWindows.css"></link>

Now that we have the JavaScript and the CSS files attached to the HTML page, we can test to make sure that we have linked to them correctly. We are also verifying that our server-side code is calling our JavaScript library correctly. If the code is linked correctly and we have obtained the data from the server properly, we should see three windows created from the information contained in the database, as shown in figure 11.12, after logging in with a username and password from our database. Remember that the library function we created is building the windows and adding all of the functionality to them. In a sense it is magic, since we just call it and it works.

Figure 11.12 The Ajax portal with three windows open on the screen

Implementing DHTML windows	447

With the portal windows open, we can test the functionalities built into the DHTML library without the Ajax functionality we are going to add next. Here are some of the things we can do:

■Maximize and minimize the windows by clicking on the button labeled with an O.

■Hide the window by clicking the button labeled with an X.

■Open the DHTML window into its own pop-up window by clicking on the w.

■Drag the window by holding down the left mouse button on the title bar and moving the mouse around. Releasing the mouse button stops the drag operation.

■Resize the window by clicking on the green box on the lower-right corner and dragging it around the screen.

You can see that the windows in figure 11.13 are in different positions than in figure 11.12.

Now that we have the ability to position and resize the windows with the library, we need to make our changes to the external .js file. The changes will allow us to call a function that utilizes Ajax to send the new property values to our database.

Figure 11.13 Ajax portal showing windows with different positions