XML.com

Google Web Toolkit
by Bruce Perry | Pages: 1, 2, 3, 4, 5

Web Developer's Hard Knocks

applicationCreator also creates the HTML front end of your Ajax application, in this case called MyForm.html.

What if your application HTML has to meet a standard such as XHTML transitional or strict? In terms of XHTML transitional, I first added the required DOCTYPE to the top of MyForm.html, as well as the html tag's associated attributes:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

I then uploaded MyForm.html to the World Wide Web Consortium's HTML validator at http://validator.w3.org/.

After running the validator, I made a few simple changes to the HTML, such as properly closing the meta tags and adding a: type="text/javascript" to the script tag.

Strict: Tsk, Tsk

However, if you want to meet the XHTML Strict standard, then a few more complex changes may be required. For example, the W3C's validator flagged as an "undefined element" the iframe tag that is required for GWT's history support (providing the same functionality as a browser back button). XHTML Strict has removed the iframe element.

This may not represent a problem for you (and may be solved by the GWT's future releases, as well as any other apparent issues); however, you can implement alternate strategies such as extending the GWT's classes and creating your own compliant widgets.

Shimming Widgets Into Place

An issue that always arises in web development involves the visual design of the application. The project's designer wants the page to look exactly like their creation in Adobe Illustrator, right?

Although you may not be able to achieve this eye-candy utopia while working on a complex Ajax project, you can use Firefox's DOM Inspector to at least view the HTML that your Java classes ultimately generate. Then work from there.

Go to Firefox's Tools=>DOM Inspector menu item (see Figure 5.)

Figure 5: DOM Inspector provides a behind-the-scenes glimpse (Click image for full-size screen shot)

This shows that the com.google.gwt.user.client.ui.Grid object you are working with in the Java code is implemented as an HTML table tag. The TD tag in this table that contains the OK, Submit button is associated with a style attribute that has the value "verticle-align:top."

This lines the button up with the top of the textarea. Here is the associated Java code in the MyForm.java class that initiated the correct alignment:

 //set the vertical alignment for the OK button's cell
        grid.getCellFormatter().setVerticalAlignment(3,0,
                HasVerticalAlignment.ALIGN_TOP);

Without this call in the code, the button floated amateurishly down around the textarea's mid-section.

Now to get only that button to align flush left with the labels above it.