RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Putting a YUI Face on a Java Web Application : Page 3

Learn how to use Yahoo User Interface (YUI) Web components to develop a real world application with just the right mix of JavaScript/AJAX.


Setup and Configuration

To set up and configure the application, download the accompanying source files. You will need to edit them in an IDE using JavaScript and HTML editors. For this example, I use Aptana, an Eclipse plug-in that supports numerous AJAX libraries including YUI. However, I have found that Aptana's autocomplete doesn’t always work for YUI.

Take the following steps to complete the setup and configuration for the demo application:

  1. Extract the accompanying source files to a folder and point to this folder while creating the Eclipse project. Remember to switch perspective to Aptana while opening the files. In order to enable autocompletion for a JavaScript class, you need to add the file in the References view (see Figure 3).
    Figure 3. Aptana IDE Configured to Work with the Source Files: The Aptana JavaScript and HTML editor is all you need to work with this application example.
  2. Create a folder js-lib/yui where the index.html file will be located. Download the YUI library and copy the build folder to js-lib/yui as well.
  3. Open the index.html file in FireFox. I did not test the demo application against IE, so you might experience some errors if you choose to use that browser.

You are better off retaining the folder structure of the YUI library. Otherwise, some features may not work as expected, especially those relating to look and feel. This is because the style definitions contain relative paths.

Debugging with Firefox and Firebug

Firebug is a very useful Firefox add-on for debugging rich client web applications. Firefox and Firebug together offer the following features:
  • Selecting a div in the HTML tab highlights the screen area in the loaded page.
  • The Console tab displays requests sent and responses received, including header information. Any error in the JavaScript execution is printed here as well.
  • Modification to CSS properties gets reflected instantly in the loaded page, greatly reducing the time you would spend getting the desired look and feel for the application.
  • You can set breakpoints for a JavaScript file and watch the values for variables.
  • You can further analyze a selected element in the HTML tab by opening DOM or Layout tabs. The Layout tab is especially useful for calculating pixels occupied by a UI element. This is important because pixels are allotted to margins and borders, in addition to the actual width and height of the element.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date