Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Google Web Toolkit (GWT)

Google Web Toolkit (GWT) is a web application development toolkit used in order to build the web based applications and the developers can develop the complex and high quality applications using GWT framework.

The applications of GWT can be executed and made to run on different modes including development and production. Some of the features available in GWT consists of the following including the reusable and dynamic user interface components, J-Unit integration, support in order to use Google APIs in the applications of GWT and the number of libraries available for GWT by the third parties used in order to extend the features of GWT applications respectively. GWT provides an event handler model that is very much similar to the user interface frameworks of java including Abstract Window Toolkit (AWT) and SWING.

Description:

The GWT Software Development Kit (SDK) contains different java API libraries and server for development and includes compiler as well. The client side applications can be written in java and can be deployed as JavaScript using this SDK. With the help of GWT SDK which provides a set of APIs and widgets, the applications of AJAX can be written in java and then the source is compiled to JavaScript and this optimized form has the ability to run over all different kinds of browsers respectively. An application that is based on GWT generally consists of the modules including client side and server side respectively.

The code of client side runs in the web browser and the code of server side runs in the web server respectively. The client side needs to make the request of HTTP in order to access the data of server side over the network. The mechanism used by GWT is known as the Remote Procedure Call (RPC) and by the use of this respective mechanism the client side gets the ability in order to execute the methods of server side directly.

The GWT RPC is based on servlet and the server side servlet is known as a service because the client basically get the services from the server when there is a need to access the required methods and calls respectively. In order to access the back end processing, the server side work is also required to be done. The components of GWT RPC include the remote service which is the servlet of server side and actually runs on the server, client code in order to invoke the required and respective service, data objects of java that can pass between client and server for the required work and the data objects have the ability to travel over HTTP.

There are many components in this GWT framework and it can be divided into different parts including GWT java to java-script compiler, Java Run-Time Environment (JRE) emulation library and GWT web User Interface (UI) class library. There is a module descriptor available in GWT and this is the configuration file in the form of xml document used in order to configure the application of GWT and its file extension is .gwt.xml respectively. As GWT is based on java therefore the java based Integrated Development Environment (IDE) can be used in order to develop the web based applications of GWT.

Overview:

The framework of GWT provides many ways to the tasks of web development including the management of browser history, bookmarking, support for internationalization and localization and many others as well. There are many widgets available in GWT and some of them include button, checkbox, date-picker, textbox, text-area, hyperlink, list-box, menu-bar, grid and dialog-box and many others respectively.

There are many panels available in the widgets of GWT and some of them include horizontal-panel, vertical-panel, tab-panel, flow-panel and popup-panel and many others respectively. By the use of J-Unit which is a testing framework the code of client side can be testing in an automatic manner and this support is provided by GWT. The user interface in an application consists of following important things including the elements of UI, the layouts and the behavior respectively.

The user after looking at the user interface interacts with the elements of UI available in it and there is a list of elements available in GWT which differentiate from simple to complex respectively. The layout presented in an application shows the way to organize the user interface elements in the output screen and provides an excellent graphical user interface (GUI). The behavior consists of the events that occur when the user starts to interact with the elements of user interface and the events are generated respectively depending on the functionality available behind the events and buttons. The widgets are of different types including basic, form and complex widgets.

The basic widgets include label, image, anchor and HTML. The form widgets allows user in order to input data and helps them to interact with the web application. Some of the form widgets include push-button, toggle-button, file-upload, hidden, list-box and many others. The complex widgets help the user in advanced interaction by the use of complexity and related concepts in the web application. Some of the complex widgets include date-picker, cell-list, cell-browser and many others. The layout panels control the widgets and the relevant way to be shown on the user interface.

Importance:

The GWT is used in order to build the rich user interface applications. The perfect user interface and internet application can be created by using the GWT framework. The code of JavaScript can be automatically generated by GWT that is suitable for respective browser. The browser based applications created by the developers using GWT can be maintained easily. The GWT can be integrated with other frameworks including hibernate, spring and many others respectively. The Google Web Toolkit applications have the ability to run on all browsers as well as the smart phones that are Android and IOS based phones and tablets respectively.

Screenshots:

Following are some of the screens from the running application:

 Packages, Classes, Configuration Files in GWT_Work Web Application

Figure 1: Packages, Classes, Configuration Files in GWT_Work Web Application

The Figure 1 shows the libraries used in GWT and all the related files in the project including the important configuration files are shown in the left side and inside the tab of projects.

The output of GWT Application in the web browser after some work addition

Figure 2: The output of GWT Application in the web browser after some work addition

This screen shows the work done in the class of Main-Entry-Point present inside the package named as org.yournamewhere.client and the related output respectively.

Text entered and response from server side

Figure 3: Text entered and response from server side

The Figure 3 shows the output in which the user enters the text and it goes to the server and at the same time it gives the response in the form of entered message.

Implementation & Codes:

The related codes from the running web application include the following:

Listing 1: gwt.properties

# The names of the modules to compile (separated by a space character)
gwt.module=org.yournamehere.Main
# Folder within the web app context path where the output
# of the GWT module compilation will be stored.
# This setting is only used for GWT 1.5. For newer versions please use
# the rename-to attribute in the GWT module file (.gwt.xml).
gwt.output.dir=/org.yournamehere.Main
# Script output style: OBF[USCATED], PRETTY, or DETAILED
gwt.compiler.output.style=OBF
# Additional JVM arguments for the GWT compiler
gwt.compiler.jvmargs=-Xmx256M
# Specifies the number of local workers to use whe compiling permutations and module(s)
gwt.compiler.local.workers=1
# The level of logging detail: ERROR, WARN, INFO, TRACE, DEBUG,
gwt.compiler.logLevel=INFO
# Script output style: OBF[USCATED], PRETTY, or DETAILED
gwt.shell.output.style=OBF

# The level of logging detail: ERROR, WARN, INFO, TRACE, DEBUG,
gwt.shell.logLevel=WARN

# Additional JVM arguments for the GWT shell/GWT hosted mode (GWT 1.6)
# Add -d32 here and use at least GWT 1.7.1 to debug on a Mac
# (32-bit JVM is required by GWT for debugging before GWT 2.0)
gwt.shell.jvmargs=-Xmx256M

# Java executable that should be used for the GWT Dev mode
# This can be used to choose a 32-bit JVM on a 64-bit OS
# (32-bit JVM is required by GWT for debugging before GWT 2.0)
# Leave the value empty if the default JVM should be used.
gwt.shell.java=

# GWT version: 1.5, 1.6, 1.7, 2.0 or 2.1
gwt.version=2.5

# since GWT 2.0
# Specifies the TCP port for the code server
gwt.shell.code.server.port=9997

# since GWT 2.0
# Specifies the TCP port for the embedded web server
gwt.shell.port=8888

# Additional GWT compiler arguments
# GWT 2.0/2.1 compiler supports these:
#  -workDir                The compiler's working directory for internal use (must be writeable; defaults to a system temp dir)
#  -gen                    Debugging: causes normally-transient generated types to be saved in the specified directory
#  -ea                     Debugging: causes the compiled output to check assert statements
#  -XdisableClassMetadata  EXPERIMENTAL: Disables some java.lang.Class methods (e.g. getName())
#  -XdisableCastChecking   EXPERIMENTAL: Disables run-time checking of cast operations
#  -validateOnly           Validate all source code, but do not compile
#  -draftCompile           Enable faster, but less-optimized, compilations
#  -compileReport          Create a compile report that tells the Story of Your Compile
#  -localWorkers           The number of local workers to use when compiling permutations
#  -extra                  The directory into which extra files, not intended for deployment, will be written
gwt.compiler.args=

# Additional JVM arguments for JUnit tests
gwt.test.jvmargs=-Xmx256M

# Additional arguments for the GWT shell
# e.g. -bindAddress 0.0.0.0 since GWT 2.0.1
gwt.shell.args=

This is the properties file off GWT application in which the version information and all related files information of this application is available respectively.

Package Name: org.yournamewhere.client

Listing 2: MainEntryPoint.java

package org.yournamehere.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import org.yournamehere.client.work.GWTServiceUsageExample;

/**
 * Main entry point.
 *
*/
public class MainEntryPoint implements EntryPoint {
    /**
     * Creates a new instance of MainEntryPoint
     */
    public MainEntryPoint() {
    }
    /**
     * The entry point method, called automatically by loading a module that
     * declares an implementing class as an entry-point
     */
    public void onModuleLoad() {
        final Label nl=new Label ("This is the Google Web Toolkit based web application");

        final Label label = new Label("Hello, GWT!!!");
        final Button button = new Button("Click me!");
        
        button.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                label.setVisible(!label.isVisible());
                nl.setVisible(true);
            }
        });        
        
        RootPanel.get().add(button);
        RootPanel.get().add(label);
        
        RootPanel.get().add(nl);
        
        RootPanel.get().add(new GWTServiceUsageExample());
    }
}

This is the main class of client side in which the information has been stored to call the application as the start in a respective manner.

Package NameL org.yournamewhere.client.work

Listing 3: GWTService.java

package org.yournamehere.client.work;
import com.google.gwt.user.client.rpc.RemoteService;
import com.google.gwt.user.client.rpc.RemoteServiceRelativePath;
@RemoteServiceRelativePath("work/gwtservice")
public interface GWTService extends RemoteService {
    public String myMethod(String s);
}

This is the service class in which an interface is available and it contains the definition of a method to be used in the required class respectively.

GWTServiceAsync.java

package org.yournamehere.client.work;
import com.google.gwt.user.client.rpc.AsyncCallback;
public interface GWTServiceAsync {
    public void myMethod(String s, AsyncCallback<String> callback);
}

This is also the service class present inside the same package as the above class in which an interface is available and it contains the definition of a method to be used in the required class respectively.

Listing 4: GWTServiceUsageExample.java

package org.yournamehere.client.work;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.rpc.ServiceDefTarget;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.Widget;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
public class GWTServiceUsageExample extends VerticalPanel {
    private Label lblServerReply = new Label();
    private TextBox txtUserInput = new TextBox();
    private Button btnSend = new Button("Send to server");
    public GWTServiceUsageExample() {
        add(new Label("Input your text: "));
        add(txtUserInput);
        add(btnSend);
        add(lblServerReply);

        // Create an asynchronous callback to handle the result.
        final AsyncCallback<String> callback = new AsyncCallback<String>() {
            public void onSuccess(String result) {
                lblServerReply.setText(result);
            }            
            public void onFailure(Throwable caught) {
                lblServerReply.setText("Communication failed");
            }
        };
        // Listen for the button clicks
        btnSend.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                // Make remote call. Control flow will continue immediately and later
                // 'callback' will be invoked when the RPC completes.
                getService().myMethod(txtUserInput.getText(), callback);
            }
        });
    } 
    public static GWTServiceAsync getService() {
        // Create the client proxy. Note that although you are creating the
        // service interface proper, you cast the result to the asynchronous
        // version of the interface. The cast is always safe because the
        // generated proxy implements the asynchronous interface automatically.

        return GWT.create(GWTService.class);
    }
}

This is a class in which the related functions and logic has been generated successfully and this class is accessed for performing the required work.

Package Name: org.yournamewhere.server.work

Listing 5: GWTServiceImpl.java

package org.yournamehere.server.work;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.server.rpc.RemoteServiceServlet;
import org.yournamehere.client.work.GWTService;
public class GWTServiceImpl extends RemoteServiceServlet implements GWTService {
    public String myMethod(String s) {
        // Do something interesting with 's' here on the server.
        return "Server says: " + s;
    }
}

This is the class created for the server side and the work of message generation at the same time is done respectively.

Package Name: org.yournamewhere

Listing 6: Main.gwt.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 1.7.0//EN" "http://google-web-toolkit.googlecode.com/svn/tags/1.7.0/distro-source/core/src/gwt-module.dtd">
<module>
    <inherits name="com.google.gwt.user.User"/>

    <!-- Inherit the default GWT style sheet. You can change -->
    <!-- the theme of your GWT application by uncommenting -->
    <!-- any one of the following lines. -->
    <!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/> -->
    <!-- <inherits name="com.google.gwt.user.theme.chrome.Chrome"/> -->
    <!-- <inherits name="com.google.gwt.user.theme.dark.Dark"/> -->

    <entry-point class="org.yournamehere.client.MainEntryPoint"/>

    <!-- Do not define servlets here, use web.xml -->
</module>

This is the xml file used in the web application and the entry point is decided by writing inside the information that is relevant in a respective manner.

Listing 7: welcomeGWT.html

<!doctype html>
<!--
The DOCTYPE declaration above will set the browser's rendering engine into
"Standards Mode". Replacing this declaration with a "Quirks Mode" doctype may
lead to some differences in layout.
-->
<html>
    <head>
        <meta name='gwt:module' content='org.yournamehere.Main=org.yournamehere.Main'>
        <title>Main</title>
        <script type="text/javascript"  src="org.yournamehere.Main/org.yournamehere.Main.nocache.js"></script>
    </head>
    <body>
        <iframe src="javascript:''" id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>
    </body>
</html>

This is the HTM webpage and contains all the related information to be displayed inside the browser in a respective manner.

Listing 8: web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
    <servlet>
        <servlet-name>GWTService</servlet-name>
        <servlet-class>org.yournamehere.server.work.GWTServiceImpl</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>GWTService</servlet-name>
        <url-pattern>/org.yournamehere.Main/work/gwtservice</url-pattern>
    </servlet-mapping>
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <welcome-file-list>
        <welcome-file>welcomeGWT.html</welcome-file>
    </welcome-file-list>
</web-app>

This web.xml file is the main and most important configuration file which contains the information of web application and it contains the full path related information including the calls to the required files in the desired sequence.

This is all for this article. Hope you liked it.



My main area of specialization is Java and J2EE. I have worked on many international projects like Recorders,Websites,Crawlers etc.Also i am an Oracle Certified java professional as well as DB2 certified

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login