Simplified AJAX development with GWT (1)

Google Web Toolkit (GWT) is a Java development framework that strives to simplify the development of AJAX applications. GWT allows developers to use common Java development tools to develop and debug AJAX applications developed using Java, and deploy the same application as the client HTML, JavaScript, and server-side Java.

Google Web Toolkit is an application development platform that includes Java class libraries, window components (widgets) AJAX-style user interface components, RPC-based request/response communication framework, and integrated debugging environment. GWT provides a subset of java. lang and java. util packages, and a Java API that facilitates component-based GUI development. The developed program is translated into HTML and JavaScript and can be deployed on a browser.

GWT applications have two execution modes. The first is the host mode. This mode executes GWT applications as common Java applications and allows standard Java debugging. To support the host mode, GWT provides a proprietary Web browser that can interact with the Java Virtual Machine (JVM. Another is the Web mode, which allows GWT applications to be deployed and executed as native JavaScript and HTML, which is generated by GWT Java to the JavaScript compiler using Java source code.

GWT has four components/Libraries. GWT Java to JavaScript Compiler: this component can convert Java source code into Native JavaScript and HTML; GWT host Web browser: this component allows GWT applications to run as Java code in a JVM-supported Web browser. JRE simulation Library: This Library provides java. lang and java. A subset of util packages; GWT Web UI Class Library: This library is a proprietary set of interfaces and classes called window components that can be used to build browser-based GUI components.

GWT applications need to provide an "entry point" class and independent configuration data units, which are bundled to form an application "module ". Each module includes a configuration file named by the pattern module-name.gwt.xml and the implementation of com. google. gwt. core. client. A class of the EntryPoint interface-this interface acts as the main entry point of the application. The JavaScript Runtime Library of GWT depends on this module-based structure. The following code shows a typical module configuration file.

<Module> <! -- Inherit the core Web Toolkit stuff. --> <Inherits name = 'com. google. gwt. user. user'/> <! -- Specify the app entry point class. --> <Entry-point class = 'com. example. client. myapp'/> </Module>

The entry point class of the module must implement the com. google. gwt. core. client. EntryPoint interface and provide the no-arg constructor. After the module is loaded, create an instance for its entry point class. The GWT Framework calls its onModuleLoad () method.

Getting started with GWT

To get started with GWT, download and extract the gwt sdk for your specific operating system from Google (http://code.google.com/webtoolkit/download.html. The GWT library includes classes and interfaces, namely window components, which can be used to build user interface components for AJAX applications. The layout of window components is managed by the container window component named "pane". The Container window component can be nested in other pane components.

The following code creates an instance for a button window component and embeds it in the container pane named MyContanerPanel:

Finalcom. google. gwt. user. client. ui. Buttonbutton = newcom. google. gwt. user. client. ui. Button ("Clickme "); Button. addClickListener (newcom. google. gwt. user. client. ui. ClickListener () { PublicvoidonClick (com. google. gwt. user. client. ui. Widgetsender) {System. out. println ("The 'clickme' buttonwasclicked ");}} Com. google. gwt. user. client. ui. RootPanel. get ("MyContainerPanel"). add (button );

The GUI of the GWT application is composed of Java code similar to the previous example. The code can be debugged in host mode using standard Java debugging tools. Applications executed in Host Mode run in a private shell embodied in the com. google. gwt. dev. GWTShell class. This class can be executed independently or in IDE. When running in host mode, GWT executes Java bytecode in the window of the private browser.

Once the application is ready, the GWT compiler can be used to convert the Java source code to JavaScript, so that the Java application can be converted to a similar JavaScript Application. The com. google. gwt. dev. GWTCompiler class is used to compile the GWT application into JavaScript from the command line.

For GWT, all activities in a Web browser are called client processing. If the client code is ready to run in a Web browser, it will eventually become JavaScript. Therefore, it is important to use only the libraries and Java language components that are converted by the above GWT compiler.

Similarly, all activities performed on the server host are called server-side processing. When an application interacts with the server, it uses the Remote Procedure Call (RPC) Framework of GWT to send requests to the server code through a browser (client.

Build a GWT Application

GWT comes with a command line utility applicationCreator that automatically generates all the files required to run the most basic GWT application. These files constitute the basic framework of a project and can be used to build applications. The application demonstrated in this article can retrieve books from a remote site and display the results in the AJAX-based GUI in a Web browser. To build a framework for this BookSearch application, run the following command to start the applicationCreator utility:

ApplicationCreator-out./BookSearchcom. example. client. BookSearch

Be sure to replace the Directory Name of the installed GWT. The applicationCreator utility can generate many files under the BookSearch directory, including some basic client functions in the com/example/client/BookSearch. java class. The utility can also generate a Host Mode STARTUP script named BookSearch-shell and a compilation script named BookSearch-compile. To run the BookSearch framework application in host mode, run the BookSearch-shell script.

Create Homepage

The final BookSearch application uses a table with two td elements. A window component contains processing search words and a window component that displays the list of books-related data. Add this table to booksearch.html in the com/example/publicdirectory, as shown below:

Now, you can initialize the UI layout to add the UI window components. The following code initializes the UI layout of the BookSearch application:

PublicvoidonModuleLoad () { PrivatestaticfinalintVISIBLE_ROWS = 5; PublicvoidonModuleLoad () { RootPanelbooklistPanel = RootPanel. get ("booklist "); If (booklistPanel! = Null) {BookListWidgetbooklistWidget = newBookListWidget (VISIBLE_ROWS ); BooklistPanel. add (booklistWidget ); RootPanelsearchtermPanel = RootPanel. get ("searchterm "); If (searchtermPanel! = Null) { SearchTermWidgetsearchTermWidget = newSearchTermWidget (booklistWidget ); SearchtermPanel. add (searchTermWidget ); }}}}

All the initialization code is included in the onModuleLoad () method of the BookSearch class. The onModuleLoad () method is the only method defined by the com. google. gwt. core. client. EntryPoint interface. This method is called after the module is loaded. For more information, see com.google.gwt.user.client.ui.rootpanel. GWT uses naming conventions to find the window component class mapped to the HTML element ID.

Create client Behavior

The client behavior of our application is encapsulated in three main UI window component instances: examples of window components for word search processing, container window component instances with search service providers and paging lists, and a set of window component instances are integrated to form a paging List window for navigation bar and book paging list. component instance. The following code displays the window components that process the list of books and contain pagination lists:

PublicclassBookListWidgetextendscom. google. gwt. user. client. ui. Composite { PrivatefinalPageableListWidgetpageableListWidget; PrivateStringsearchTerm = ""; PublicBookListWidget (intvisibleRows) { String [] columns = newString [] {"Title", "ISBN", "Edition", "MSRP "}; String [] styles = newString [] {"title", "isbn", "edition", "msrp "}; PageableListWidget = newPageableListWidget (bookSearchProvider, columns, styles, visibleRows ); InitWidget (pageableListWidget ); } ProtectedvoidonLoad () {PageableListWidget. refresh ();} ProtectedvoidsetSearchTerm (StringsearchTerm) { If (this. searchTerm. equals (searchTerm )) {Return ;} This. searchTerm = searchTerm; PageableListWidget. refresh (); }}

The BookListWidget class extends the com. google. gwt. user. client. ui. Composite class to facilitate the combination of one or more window components. Here we only use a combined nested window component: PageableListWidget. The PageableListWidget class also extends the com. google. gwt. user. client. ui. composite class, and contains multiple subwindow components, including a custom navigation bar window component and a com. google. gwt. user. client. ui. grid window component. The navigation bar window component includes an instance of the com. google. gwt. user. client. ui. DockPanel window component and several instances of the com. google. gwt. user. client. ui. Button class.

SearchTermWidget extends the com. google. gwt. user. client. ui. Composite class, which contains a tag, a text box, and a button. The text box contains search words, and the button starts each search.