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 GWT SDK
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
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.
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.
Download the JDK, which is freely available from Sun Developer Networks (SDN) Downloads at http://www.oracle.com/technetwork/indexes/downloads/index.html.
Accept the License Agreement.
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.
Click on Next and follow the instructions.
The following are some important features of GWT:
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
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.
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).
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.
Please note that the other lightweight application servers, such as Tomcat or Jetty are also sufficient to run on it.
Download the GlassFish server installer from http://developers.sun.com/appserver/downloads/index.jsp.
Accept the terms, and then click on Next.
Specify the installation directory as
C:\Program Files\glassfishv3, and then click on Next.
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.
Uncheck Install Update Tool and Enable Update Tool to set the Update Configuration.
Click on Next.
Select a Java(TM) SDK from the list. As we have already installed it, the list will automatically include JDK 1.6.0_18.
Click on Next.
Click on Next. It will show the installation summary, as shown in the following screenshot:
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.
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.
Download the MySQL Community Server from http://dev.mysql.com/downloads/. For Windows, the installer to be used is
Go to Start Menu | All Programs | MySQL | MySQL Server 5.1 | MySQL Server Instance Configuration Wizard.
Select Standard Configuration as the configuration type.
Check Install as Windows Service, select MySQL501 from the Service Name field, and check Launch the MySQL Server automatically.
Check Include Bin Directory in Windows PATH.
Set the root password.
Click on Execute to start the configuration.
After the configuration is processed, click on Finish to close the wizard.
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.
Web projects with Java EE 6
EJBs support in web applications
Java Persistence API deployment, debugging, and profiling with GlassFish v3 application server
Profiler support for monitoring Java applications to find memory leaks and for optimizing performance
GUI design tools (not applicable for GWT yet)
Download the NetBeans IDE from http://netbeans.org/downloads/index.html.
Click on Customize.
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.
Accept the terms, click on Next, and follow the instructions on the screen.
Click on Finish to complete the installation.
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.
Start the NetBeans IDE.
Go to Window | Services to open the Services window:
Choose GlassFish v3 from the list:
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.
Click on Next.
Click on Finish. GlassFish is now added under Servers, as seen in the following screenshot:
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
Download the latest version of GWT4NB from
https://gwt4nb.dev.java.net. The filename is
Go to Tools | Plugins and click on the Downloaded tab.
Click on the Add Plugins... button and open the org-netbeans-modules-gwt4nb.nbm file.
Click on Next.
Accept the License Agreement.
Click on Continue when the Validation Warning window is displayed.
Close the plugins dialog.
Make sure that GWT and GlassFish are installed, the GlassFish server is added, and the GWT4NB plugin is installed in NetBeans.
Go to File | New Project.
Select Java Web from the Categories field, and Web Application from the Projects field, as shown in the following screenshot:
Click on Next.
Give Sales Processing System as the Project Name, browse the Project Location, and check Set as Main Project:
Select GlassFish v3 from the Server list, and Java EE 6 Web from the Java EE Version.
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.
Click on Next.
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
After following the aforementioned steps, a NetBeans project structure with some sections containing the following files has been created:
A directory and file structure is created, as shown in the following screenshot:
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:
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).
The project is compiled by GWT Compiler.
The project is deployed to the
\Sales Processing System\build\web directory.
The default browser is called with the URL
The output is a button labeled Click me!. If the button is clicked, a label, Hello, GWT!!!, is hidden and displayed alternately:
High performance, customizable UI components, panels, windows, menus, and so on
Standard CSS support
Well-documented source code
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
Download Ext GWT SDK from http://www.sencha.com/products/gwt/download.php.
gxt-2.1.1-gwt2.zip is the EXT GWT 2.1.1 PUBLIC RELEASE for GWT 2.
C:\Program Files\or any other desired location.
Right-click on Libraries under the Project tab, and click on Add Jar/Folder
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:
Copy the folder resources from
C:\Program Files\gxt-2.1.1-gwt2\gxt-2.1.1(orfrom the location to which the file was extracted)
Main.gwt.xmlfrom Source Packages | com.packtpub
Expand the General node:
Click on Add and write the module name
welcomeGWT.htmlto add a link to the CSS in the /web/resources/css folder
Add the following line just above the
<link rel="stylesheet" type="text/css" href="resources/css/gxt-all.css" />
Now, we are ready to start developing the GWT application
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.
Google Web Toolkit Overview, available at http://code.google.com/webtoolkit/overview.html
Google Web Toolkit (GWT), by Mark Volkmann, available at http://java.ociweb.com/mark/other-presentations/GWT.pdf
Google Web Toolkit, available at http://en.wikipedia.org/wiki/Google_Web_Toolkit
GlassFish Wiki, available at http://wiki.glassfish.java.net
About MySQL, available at http://www.mysql.com/about
NetBeans IDE 6.8 Release Information, available at http://netbeans.org/community/releases/68
GWT4NB, available at https://gwt4nb.dev.java.net
Ext GWT, available at http://www.sencha.com/products/gwt/