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


Google Web Toolkit: AJAX Buzz Meets Real World Development : Page 3

With its Swing-like development framework and its awe-inspiring compiler/debugger, the Google Web Toolkit eases AJAX development.


GWT Component Breakdown

Now let's go behind the scenes to acquaint ourselves with the GWT components.

The HTML Host Page: Hello.html
In GWT AJAX, all the client's application logic is rendered by a single HTML page called the host page. The Hello.html file in the public folder is such a host page. It contains JavaScript that possesses user interaction logic and creates the user interface. Hello.html pulls this JavaScript via the <script language="javascript" src="gwt.js"></script> tag, while the <meta name='gwt:module' content='com.techyatra.awe.Hello'> tag links it to the GWT module.

The Module: Hello.gwt.xml
A module, defined in the Hello.gwt.xml file, is a logical unit of a GWT application. The Hello.gwt.xml file found in com.techyatra.awe represents a com.techyatra.awe.Hello GWT module. The folder containing Hello.gwt.xml is considered the root folder for the AJAX With Ease application. GWT requires the source Java and HTML files for the module be contained in the client and public folders under this com.techyatra.awe root folder.

The Hello.gwt.xml file for the Ajax With Ease application contains the base module the application inherits (com.google.gwt.user.User), the Servlet path and implementation class for RPC communication, and the starter class that implements an interface analogous to Java's public static main(String[] args) function—the EntryPoint. The following listing presents the Hello.gwt.xml module file:

<module> <!-- Inherit the core Web Toolkit--> <inherits name='com.google.gwt.user.User'/> <!-- Ajax with Ease app entrypoint class--> <entry-point class='com.techyatra.awe.client.Hello'/> <!-- GWT's RPC Servlet path--> <servlet path='/hello' class='com.techyatra.awe.server.HelloServiceImpl'/> </module>

The EntryPoint
Just as Java applications require a class with a public static main(String [] arg) function, GWT requires a class that implements the com.google.gwt.core.client.EntryPoint interface. This is a simple interface that contains a single function: public void onModuleLoad().

For the AJAX With Ease application, the com.techyatra.awe.client.Hello class implements the EntryPoint interface. The following listing shows an implementation with a Hello.java file:

package com.techyatra.awe.client; ... /** * Entry point classes define <code>onModuleLoad()</code>. */ public class Hello implements EntryPoint { private HelloRPC helloRPC = new HelloRPC(); private HelloCSS helloCSS = new HelloCSS(); private HelloHistory helloHistory = new HelloHistory(); ... /** * This is the entry point method. */ public void onModuleLoad() { button.addClickListener(new ClickListener() { ... }); tabs.add(helloCSS, "Styles"); ... RootPanel.get("slot1").add(label); RootPanel.get("slot2").add(button); RootPanel.get("slot3").add(tabs); } }

For GWT, onModuleLoad() serves not only as an entry point for the application but also as a de-facto constructor. It is the first function that is executed in the compiled JavaScript code. You typically would put the code that creates user interface components—the GWT Widgets, Panels, and Composites in onModuleLoad() function. Once created and furnished, these components are then added to the HTML page via the RootPanel.

The RootPanel
Com.google.user.client.ui.RootPanel is a conduit for your Java code to the HTML page and thus to browsers' 'window' objects. You add GWT components to a browser 'window' in the following two ways:
  1. Use the GWT-supplied, Java-based layout managers to design a complete user interface in your code and add the container instance to RootPanel by calling RootPanel.get().add(your container object). Your entire interface is in Java code and is completely generated by JavaScript at runtime.
  2. Combine HTML and dynamic code-based interface generation. In this approach, Web designers continue to create Web pages with complex layouts and graphics, but they specify placeholders for controls that should be created dynamically by Java code. These placeholders are then filled from within your GWT Java code as shown below.

Java-only UI construction such as approach 1 may work for applications with a few graphics, simpler layouts, and interfaces that are very Google-like, but for graphic- and layout-intensive interfaces, you should consider the second approach.

You can put placeholders or slots in HTML files. You then fill in these slots using RootPanel.get(slot name).add(your widget) in the Hello.java file:

... <table align=center> <tr> <td id="slot1"></td><td id="slot2"></td> </tr> </table> ... Hello.html ... RootPanel.get("slot1").add(label); RootPanel.get("slot2").add(button); ... Hello.java

This method of combining HTML and code frees Web designers to create jaunty layouts and graphics while allowing Java coders to create jauntier applications.

User Interface Components: Widgets and Panels
GWT, like Java Swing, comes bundled with layout managers and GUI controls, but it calls them panels and widgets. Widgets are user controls that users can interact with directly. Button, RadioButton, TextBox, TabBar, Tree, and MenuBar are examples of GWT widgets. These widgets are placed in Panels, which determine the widget's placement and layout. HorizontalPanel, VerticalPanel, and DockPanel are examples of GWT's panels. (Google's GWT documentation provides a complete list of panels and widgets.)

The usage and behavior of these panels and widgets are also similar to those of Java Swing GUI components. These components have methods to set and retrieve properties and support an event listener model for handling your regular key and mouse events. The following snippet is a portion of a Hello.java class that creates a simple GWT button and then overrides it and supplies a click listener:

... public class Hello implements EntryPoint { final Button button = new Button("Hello"); ... public void onModuleLoad() { button.addClickListener(new ClickListener() { public void onClick(Widget sender) { ... } }); } ... }

While widgets and panels are nice, creating complex user interfaces requires packaging and the ability to apply visual flourishes to these interfaces. Enter composites and integration with Cascading Style Sheets (CSS).

GWT allows you to combine groups of widgets and panels to create new freestanding widgets called composites. The following listing shows how you could combine a button and a panel to create a functional, free standing HelloCSS composite:

package com.techyatra.awe.client; ... public class HelloCSS extends Composite { final Button buttonCSS = new Button("Apply Style"); final VerticalPanel panel = new VerticalPanel(); public HelloCSS() { buttonCSS.addClickListener(new ClickListener() ... buttonCSS.addStyleName("awe-button"); ... ); panel.setHorizontalAlignment(panel.ALIGN_CENTER); panel.add(buttonCSS); setWidget(panel); } }

The HelloCSS widget is placed in Hello.java in the root panel. In fact, the AJAX With Ease application encapsulates logical functionality in HelloCSS, HelloRPC, and HelloHistory composites.

Cascading Style Sheet
A strong feature of GWT is that it really embraces Cascading Style Sheets. Every widget and panel has a default CSS style that you are free to modify (e.g., the Button widget uses gwt-Button{}, which you can embellish). You also can add and remove your own styles from within GWT Java code using the addStyleName(String) and removeStyleName(String) methods. You define these styles in .css files and thereafter refer to them in the HTML host page using the <link> HTML tag.

The following listing shows the ajaxwithease.css file, which contains the AJAX With Ease application's specific awe-button style that was applied to a button in the HelloCSS composite in the previous listing:

... .gwt-CheckBox { font-size: smaller; } ... .awe-button { color:#0000FF; font-family:'trebuchet ms',helvetica,sans-serif; font-size:84%; font-weight:bold; background-color:#fed; } ...

The ajaxwithease.css file includes both GWT's default styles as well, because oddly the applicationCreator.cmd file does not create a .css file containing the GWT default styles.

Now that you have the client (browser + HTML/JavaScript) sitting pretty, it needs to respond to user events by communicating with a Web server to retrieve data. In the bygone days of Servlet/JSP development, this would mean a roundtrip to the server with an entire page reload. The biggest benefit of AJAX is that such complete page reloads are not needed, and GWT's RPC plumbing makes such server communication a snap.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.