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
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.
Execute the JDK installer. For windows, the installer filename is
jdk-6u18-windows-i586.exe, or something similar to this.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 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.
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.
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.
Note
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.
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:
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 Install and wait for the installation to complete. Skip Product Registration, which you can complete later.
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 mysql-essential-5.1.32-win32.msi.
After installing the MySQL server, we need to configure the server instance.
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.
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
Download the NetBeans IDE from http://netbeans.org/downloads/index.html.
Execute the installer
netbeans-6.8-ml-windows.exefor installation on Windows.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:
Right-click the Servers option, and then click on Add Server:
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.
Select Register Local Domain as the domain location, and domain1 for the Domain field.
Click on Finish. GlassFish is now added under Servers, as seen in the following screenshot:
GWT4NB is the only plugin so far for NetBeans IDE to develop web applications using the Google Web Toolkit.
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 org-netbeans-modules-gwt4nb.nbm.
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.
Wait for the installation to complete and then click on Finish.
Close the plugins dialog.
All the required tools and technologies are installed. Now, we will create the Java Web project using the Google Web Toolkit Framework in NetBeans.
Make sure that GWT and GlassFish are installed, the GlassFish server is added, and the GWT4NB plugin is installed in NetBeans.
Start 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 ascom.packtpub.Main:
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:
 |
The following events take place:
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
http://localhost:8080/Sales_Processing_System/.The output is a button labeled Click me!. If the button is clicked, a label, Hello, GWT!!!, is hidden and displayed alternately:
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
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.
Extract
gxt-2.1.1-gwt2.ziptoC:\Program Files\or any other desired location.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.jarfile fromC:\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:
The next step is to place the Ext GWT
resourcesfolder containing the CSS, images, and others into thewebfolder of theSales Processing Systemproject.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)
Paste it in the web folder by going to the Files tab, as shown in the following screenshot:
Now, we need to modify the GWT module:
Open
Main.gwt.xmlfrom Source Packages | com.packtpubExpand the General node:
Click on Add and write the module name
com.extjs.gxt.ui.GXT:
Modify
welcomeGWT.htmlto add a link to the CSS in the /web/resources/css folderOpen
welcomeGWT.htmlAdd 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
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.
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/