Google Web Toolkit 2 Application Development Cookbook

By Shamsuddin Ahammad
    Advance your knowledge in tech with a Packt subscription

  • Instant online access to over 7,500+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Setting up the GWT Environment in NetBeans

About 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.

Publication date:
November 2010
Publisher
Packt
Pages
244
ISBN
9781849512008

 

Chapter 1. Setting up the GWT Environment in NetBeans

In this chapter, we will set up the required tools and technologies for developing an information system using the Google Web Toolkit (GWT). After that, we will create the GWT project in NetBeans IDE. The following recipes will be presented:

  • Installing JDK

  • Installing GWT SDK

  • Installing GlassFish

  • Installing MySQL Server

  • Configuring the MySQL Server

  • Installing NetBeans IDE

  • Adding GlassFish Server in NetBeans

  • Installing GWT4NB plugins in NetBeans

  • Creating a GWT project in NetBeans

  • Adding Ext GWT

 

Introduction


The main topic of the book is the Google Web Toolkit (GWT). However, GWT SDK alone is not enough to develop complete information systems. Some other tools and techniques have to be combined together to work with GWT. In this chapter, we will be introduced to some technologies and tools, get an overview of each, and set up all the required tools, technologies, and libraries. Here, JDK and GWT SDK are compulsory; the other tools have alternatives — we will cover these in this book.

 

Installing JDK


Because GWT is a Java-based development toolkit, Java SE Development Kit (JDK) must be installed for the development of a GWT project. We will use the NetBeans IDE, which also requires JDK to be installed.

Getting ready

Download the JDK, which is freely available from Sun Developer Networks (SDN) Downloads at http://www.oracle.com/technetwork/indexes/downloads/index.html.

How to do it...

  1. Execute the JDK installer. For windows, the installer filename is jdk-6u18-windows-i586.exe, or something similar to this.

  2. Accept the License Agreement.

  3. Select the features to be installed from the given list. The available features are Development Tools, Demos and Samples, Source Code, Public JRE, and Java DB. Java DB is not required for our purpose.

  4. Set the installation directory.

  5. Click on Next and follow the instructions.

 

Installing GWT SDK


The Google Web Toolkit (GWT) is an open source Java-based development toolkit for creating browser-based applications with a JavaScript frontend. GWT has made some tasks easier for the developers, as they do not need to have expertise in browser quirks, JavaScript, and scriptlets. Just by writing Java code, web-based GUIs like Swing can be developed using the GWT UI class library. The GWT SDK enables the developer to write the AJAX frontend in Java programming language, which is then converted to optimized JavaScript files that works in all the major browsers.

Important features

The following are some important features of GWT:

  • The GWT can handle all of the client-server communications, whether it is JSON, XML, or GWT's Remote Procedure Call (RPC). Java objects can be passed between the client and the server

  • A GWT application can communicate back and forth without having Java on the server because it works with standard communication protocols

  • Pure object-oriented techniques can be used

  • Allows HTML and JavaScript code, if required

  • The GWT uses CSS for formatting

  • IDE support is available from Eclipse, NetBeans, and IntelliJ IDEA

  • It is free and open source

The GWT is used by many Google products, and thousands of other products around the world. Some real-world projects are Google Wave, Google Moderator, Google AdWords, Orkut, Gmail, Go Grid, Lombardi Blueprint, Scenechronize, Whirled, and so on.

GWT SDK contains the core libraries and a compiler that we need in order to develop GWT applications.

Getting ready

Go to http://code.google.com/webtoolkit/download.html and download the SDK. The SDK will be downloaded as a ZIP file named gwt-2.0.3.zip (or something similar to that).

How to do it...

Just extract the downloaded ZIP file to C:\Program Files or any desired directory of your choice.

 

Installing GlassFish


GlassFish is an open source Java EE-compatible application server. At the time of writing this book, the latest release of the server is version 3, which provides the fully-featured Java EE 6 and JPA reference implementation. GlassFish is based on the source code released by Sun and Oracle Corporation's TopLink persistence system. It is a fast, easy, and reliable application server.

The Java EE 6 platform significantly improves developer productivity, introduces the lightweight Web Profile for web-centric applications, and includes the latest versions of technologies, such as JavaServer Faces (JSF), Enterprise JavaBeans (EJB), Java Persistence API (JPA), Context and Dependency Injection (CDI), and many more.

Note

Please note that the other lightweight application servers, such as Tomcat or Jetty are also sufficient to run on it.

Getting ready

Download the GlassFish server installer from http://developers.sun.com/appserver/downloads/index.jsp.

How to do it...

  1. Execute the GlassFish server installer sges-v3-windows.exe (Sun GlassFish Enterprise Server for Windows). It will extract the installation files, and then display the welcome screen:

  2. Click on Next.

  3. Accept the terms, and then click on Next.

  4. Specify the installation directory as C:\Program Files\glassfishv3, and then click on Next.

  5. Configure the Administration Settings for Admin Port, Http Port, Username, and Password. The default values are 4848, 8080, and admin, respectively. Specify a password for the server.

  6. Click on Next.

  7. Uncheck Install Update Tool and Enable Update Tool to set the Update Configuration.

  8. Click on Next.

  9. Select a Java(TM) SDK from the list. As we have already installed it, the list will automatically include JDK 1.6.0_18.

  10. Click on Next.

  11. Click on Install and wait for the installation to complete. Skip Product Registration, which you can complete later.

  12. Click on Next. It will show the installation summary, as shown in the following screenshot:

  13. Click on Exit.

There's more...

We have seen here how to set up the GlassFish server from the standalone GlassFish installer. The GlassFish server is also bundled with the NetBeans installer. In that case, it is also possible to install the server during the installation of NetBeans IDE; a separate GlassFish installer will not be required.

See also

  • Refer to the Installing NetBeans IDE recipe, later in the chapter

 

Installing MySQL server


MySQL is a relational database management system which runs as a server. MySQL server has a community edition freely available. In the perspective of this book, MySQL Community Server is picked to reside on the backend of the GWT application because some recipes are database-driven. It is worth mentioning here that the GWT does not require a database in all applications.

Getting ready

Download the MySQL Community Server from http://dev.mysql.com/downloads/. For Windows, the installer to be used is mysql-essential-5.1.32-win32.msi.

How to do it...

  1. Execute the installer.

  2. Click on Next.

  3. Select Complete from the setup types.

  4. Click on Install and wait until it finishes work.

  5. Click on Next.

  6. Click on Next again.

  7. Uncheck Configure the MySQL Server now.

  8. Click on Finish to complete the installation.

 

Configuring the MySQL Server


After installing the MySQL server, we need to configure the server instance.

Getting ready

If the MySQL server is not installed yet, install it first.

How to do it...

  1. Go to Start Menu | All Programs | MySQL | MySQL Server 5.1 | MySQL Server Instance Configuration Wizard.

  2. Click on Next.

  3. Select Standard Configuration as the configuration type.

  4. Click on Next.

  5. Check Install as Windows Service, select MySQL501 from the Service Name field, and check Launch the MySQL Server automatically.

  6. Check Include Bin Directory in Windows PATH.

  7. Click on Next.

  8. Set the root password.

  9. Click on Next.

  10. Click on Execute to start the configuration.

  11. After the configuration is processed, click on Finish to close the wizard.

 

Installing NetBeans IDE


The NetBeans project consists of an open source Integrated Development Environment (IDE) and an application platform, which enables building applications for web, desktop, or mobile. Applications can be built using Java, PHP, Python, Ruby, Groovy, C, C++, and so on.

This IDE is developed using Java and requires JVM to run.

Its important features are as follows:

  • Web projects with Java EE 6

  • EJBs support in web applications

  • Java Persistence API deployment, debugging, and profiling with GlassFish v3 application server

  • Database integration

  • Java debugger

  • Profiler support for monitoring Java applications to find memory leaks and for optimizing performance

  • GUI design tools (not applicable for GWT yet)

  • Extended support for JavaScript, AJAX, and CSS through NetBeans JavaScript Editor modules

Getting ready

Download the NetBeans IDE from http://netbeans.org/downloads/index.html.

How to do it...

  1. Execute the installer netbeans-6.8-ml-windows.exe for installation on Windows.

  2. Click on Customize.

  3. Select Base IDE, Java SE, and Java Web and EE. Because we have already installed the GlassFish server separately, uncheck Sun GlassFish Enterprise Server and click on OK.

  4. Click on Next.

  5. Accept the terms, click on Next, and follow the instructions on the screen.

  6. Click on Finish to complete the installation.

 

Adding the GlassFish server in NetBeans


We have installed the GlassFish server and the NetBeans IDE separately. Actually, we will start, stop, and deploy to the GlassFish server from NetBeans; that's why, we need to add the GlassFish Server in NetBeans. If the bundled version of NetBeans is used for installation, we do not need to add the server manually.

Getting ready

Make sure that both GlassFish and NetBeans are installed.

How to do it...

  1. Start the NetBeans IDE.

  2. Go to Window | Services to open the Services window:

  3. Right-click the Servers option, and then click on Add Server:

  4. Choose GlassFish v3 from the list:

  5. Click on Next.

  6. Browse the installation directory of the GlassFish server. In our case, it is C:\Program Files\glassfishv3. Check the option I have read and accept the license agreement.

  7. Click on Next.

  8. Select Register Local Domain as the domain location, and domain1 for the Domain field.

  9. Click on Finish. GlassFish is now added under Servers, as seen in the following screenshot:

There's more...

Because we added the GlassFish server in NetBeans, the following server options are available, which can be accessed by right-clicking on GlassFish v3 under Servers. Some of the options are as follows:

  • Start

  • Restart

  • Stop

  • Refresh

  • Remove

  • View Admin Console

  • View Server Log

  • Properties

 

Installing the GWT4NB plugin in NetBeans


GWT4NB is the only plugin so far for NetBeans IDE to develop web applications using the Google Web Toolkit.

Its features are as follows:

  • Assistance in code editing for creating GWT EntryPoint, GWT RPC service, defining asynchronous methods, GWT modules, and so on

  • Deployment, running, and debugging GWT applications from inside NetBeans

Getting ready

Download the latest version of GWT4NB from https://gwt4nb.dev.java.net. The filename is org-netbeans-modules-gwt4nb.nbm.

How to do it...

  1. Start NetBeans.

  2. Go to Tools | Plugins and click on the Downloaded tab.

  3. Click on the Add Plugins... button and open the org-netbeans-modules-gwt4nb.nbm file.

  4. Click on Install.

  5. Click on Next.

  6. Accept the License Agreement.

  7. Click on Install.

  8. Click on Continue when the Validation Warning window is displayed.

  9. Wait for the installation to complete and then click on Finish.

  10. Close the plugins dialog.

 

Creating a GWT project in NetBeans


All the required tools and technologies are installed. Now, we will create the Java Web project using the Google Web Toolkit Framework in NetBeans.

Getting ready

Make sure that GWT and GlassFish are installed, the GlassFish server is added, and the GWT4NB plugin is installed in NetBeans.

How to do it...

  1. Start NetBeans.

  2. Go to File | New Project.

  3. Select Java Web from the Categories field, and Web Application from the Projects field, as shown in the following screenshot:

  4. Click on Next.

  5. Give Sales Processing System as the Project Name, browse the Project Location, and check Set as Main Project:

  6. Click on Next.

  7. Select GlassFish v3 from the Server list, and Java EE 6 Web from the Java EE Version.

  8. Set the Context Path, or leave it as suggested. It is the path to the "root directory" of a web application (called the context root), relative to the root of the web server namespace.

  9. Click on Next.

  10. Select Google Web Toolkit from the list of frameworks, browse for the GWT SDK Installation folder (such as C:\Program Files\gwt-2.0.3, or any other location where you have installed it), and name the GWT Module as com.packtpub.Main:

  11. Click on Finish on completion of the installation.

How it works...

After following the aforementioned steps, a NetBeans project structure with some sections containing the following files has been created:

  • Web Pages

    WEB-INF

    • sun-web.xml

    • web.xml

    welcomeGWT.html

  • Source Packages

    com.packtpub

    • Main.gwt.xml

    com.packtpub.client

    • MainEntryPoint

  • Libraries

    GWT2.0.3-gwt-user.jar

    gwt-dev.jar

    gwt-servlet.jar

    JDK1.6

    GlassFish v3

Directory and file structure

A directory and file structure is created, as shown in the following screenshot:

Running the project

A default code is given in the MainEntryPoint.java file. That's why, we can run the project to see a basic output. To run the project, right-click on Sales Processing System under Projects and then click on Run, as shown in the following screenshot:

The following events take place:

  1. GlassFish is started automatically, if it is not started yet. It will prompt the user for the username and password. Provide "admin" as the username and "adminadmin" as the password (or as we had set during the installation of GlassFish).

  2. The project is compiled by GWT Compiler.

  3. The project is deployed to the \Sales Processing System\build\web directory.

  4. The default browser is called with the URL http://localhost:8080/Sales_Processing_System/.

  5. The output is a button labeled Click me!. If the button is clicked, a label, Hello, GWT!!!, is hidden and displayed alternately:

 

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

About the Author

  • Shamsuddin Ahammad

    Shamsuddin Ahammad is a Senior Lecturer and the Course Coordinator at Daffodil Institute of IT, Bangladesh. He has been teaching Java, Programming Methods, and Database Systems since 2002. He has experience in supervising hundreds of academic projects. Shamsuddin has a Masters degree in Management Information Systems (MIS) from Daffodil International University, Dhaka. He obtained the BSc(Hons) degree in Computing & Information Systems (CIS) of NCC Education Ltd, UK and London Metropolitan University joint programme from Daffodil Institute of IT. Before that, he completed the IDCS & IADCS of NCC Education Ltd. He is an Additional Reviewer of Conference on Quality Engineering in Software Technology (CONQUEST) organized by International Software Quality Institute (iSQI) in Germany. He is the author of book titled iReport 3.7 published from PACKT Publishing in March 2010.

    Browse publications by this author
Book Title
Access this book and the full library for FREE
Access now