Book Image

Google Web Toolkit 2 Application Development Cookbook

By : Shamsuddin Ahammad
Book Image

Google Web Toolkit 2 Application Development Cookbook

By: Shamsuddin Ahammad

Overview of this book

GWT 2 radically improves web experience for users by using existing Java tools to build no-compromise AJAX for any modern browser. It provides a solid platform so that other great libraries can be built on top of GWT. Creating web applications efficiently and making them impressive, however, is not as easy as it sounds. Writing web applications for multiple browsers can be quite tasking. In addition, building, reusing, and maintaining large JavaScript code bases and AJAX components can be difficult. GWT 2 Application Development Cookbook eases these burdens by allowing developers to quickly build and maintain complex yet highly efficient JavaScript front-end applications in the Java programming language . It tells you how to make web experience all the more thrilling and hassle free, using various tools along with GWT SDK.This book starts with developing an application from scratch. Right from creating the layout of the home page to home page elements including left and right sidebars, to placing tree like navigational menu, menu bars, tool bars, banners, footers are discussed with examples. You will see how to create forms using the Ext GWT library widgets and handle different types of events. Then you will move on to see how to design a database for sales processing systems and learn to create the database in MySQL with the help of easy–to-follow recipes. One of the interesting topics of this book is using JPA in GWT. Using the JPA object in GWT is a challenge. To use them perfectly, a mechanism to convert the JPA object into plain object and vice versa is required. You will see recipes to use entity classes, entity managers, and controller classes in GWT application. You will efficiently create reports with parameters, variables and subreports, and get the report output in both HTML and PDF format using real-world recipes. You will then learn to configure the GlassFish server to deploy a GWT application with database. Finally, learn how to trace speed and improve perfomance in web applications using tracing techniques.
Table of Contents (16 chapters)
Google Web Toolkit 2 Application Development Cookbook
Credits
About the Author
About the Reviewers
Preface
Index

Adding Ext GWT


Ext GWT is a Java UI component library developed by Ext JS, Inc. for building rich web applications with the Google Web Toolkit.

Its important features include the following:

  • High performance, customizable UI components, panels, windows, menus, and so on

  • Standard CSS support

  • Well-documented source code

  • Native GWT solution without any external JavaScript or third-party libraries

  • Full remote procedure support using GWT RPC, JSON, and XML

  • Support for Java 1.5 features, including generics, enums, and varargs

  • Commercial and open source licenses available

Getting ready

Download Ext GWT SDK from http://www.sencha.com/products/gwt/download.php.

The file gxt-2.1.1-gwt2.zip is the EXT GWT 2.1.1 PUBLIC RELEASE for GWT 2.

How to do it...

  1. Extract gxt-2.1.1-gwt2.zip to C:\Program Files\ or any other desired location.

  2. The next step is to add the Ext GWT library in the Sales Processing System project. To do this:

    • Right-click on Libraries under the Project tab, and click on Add Jar/Folder

    • Open the gxt.jar file from C:\Program Files\gxt-2.1.1-gwt2\gxt-2.1.1(or from the location to which the file was extracted), as shown in the following three screenshots:

  3. The next step is to place the Ext GWT resources folder containing the CSS, images, and others into the web folder of the Sales Processing System project.

    • Copy the folder resources from C:\Program Files\gxt-2.1.1-gwt2\gxt-2.1.1(or from the location to which the file was extracted)

  4. Paste it in the web folder by going to the Files tab, as shown in the following screenshot:

  5. Now, we need to modify the GWT module:

    • Open Main.gwt.xml from Source Packages | com.packtpub

    • Expand the General node:

    • Click on Add and write the module name com.extjs.gxt.ui.GXT:

    • Save and close Main.gwt.xml

    • Modify welcomeGWT.html to add a link to the CSS in the /web/resources/css folder

    • Open welcomeGWT.html

    • Add the following line just above the</head> tag:

      <link rel="stylesheet" type="text/css" href="resources/css/gxt-all.css" />
      

Now, we are ready to start developing the GWT application

How it works...

Let's explain how these steps allow us to complete the task or solve the problem.

Adding the GXT JAR file allows us to use the widget library to create the user interfaces. Some important widgets used in this book from this library are Grids, Panels, Tabs, Layouts, Forms, Toolbar, Menu bar, Fields, Buttons, and so on.

The resources folder in the GXT contains the required CSS used in the widget library, images, and so on. By placing this folder in our application, we are being able to create nice user interfaces even without using any new CSS or images, though we can do so if required.

See also