Searching...
Sunday, 23 September 2012

GWT Hello world Example

11:29

What is Google Web Toolkit

The Google Web Toolkit (GWT) is a open source toolkit to develop Ajax web application with Java. The programmer writes Java code and this code is translated into HTML and Javascript via the GWT compiler. 

GWT modes

Development Mode: allows to debug the Java code of your application directly via the standard Java debugger.
Web mode: the application is translated into HTML and Javascript code and can be deployed to a webserver. 

GWT Components

GWT has four major components: a Java-to-JavaScript compiler, a "hosted" web browser, and two Java class libraries
clip_image002 

GWT Entry points

All GWT applications are started with Entry points,Entry points are starting point of a GWT application and we have to implement com.google.gwt.core.client.EntryPoint interface to our Entry point class and should override onModuleLoad() method 

GWT Modules

GWT applications are described as modules. A module "modulename" is described by a configuration file "modulename.gwt.xml". Each module can define one or more Entry point classes. 

GWT Hello world example

1. Install Google tools plug-in in Eclipse (Help->Eclipse Market place)

clip_image004

2. Create a GWT Web application project

clip_image006

4. Project Structure

clip_image008

5 Create/Modify GWT entry point

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class PretechGWT implements EntryPoint {

@Override
public void onModuleLoad() {
Label label = new Label("Hello World");
Button button = new Button("Click on this");
button.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
Window.alert("Hello good morning.. this message from event");
}
});


RootPanel.get().add(label);
RootPanel.get().add(button);
}
}

6. Create/Modify html page (PretechGWT.html)

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title>Web Application Starter Project</title>
<script type="text/javascript" language="javascript"
src="pretechgwt/pretechgwt.nocache.js"></script>
</head>
<body>
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1'
style="position: absolute; width: 0; height: 0; border: 0"></iframe>
<noscript>
<div
style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled in order for this
application to display correctly.</div>
</noscript>
<h1>Pretech GWT Web Application Starter Project</h1>
</body>
</html>

7. Generated Web.xml

<?xmlversion="1.0"encoding="UTF-8"standalone="no"?><web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="2.5" xsi:schemaLocation="http://java.sun.com/xml/ns/javaeehttp://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

<!-- Servlets -->
<servlet>
<servlet-name>greetServlet</servlet-name>
<servlet-class>com.pretechgwt.server.GreetingServiceImpl</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>greetServlet</servlet-name>
<url-pattern>/pretechgwt/greet</url-pattern>
</servlet-mapping>

<!-- Default page to serve -->
<welcome-file-list>
<welcome-file>PretechGWT.html</welcome-file>
</welcome-file-list>

<servlet>
<servlet-name>SystemServiceServlet</servlet-name>
<servlet-class>com.google.api.server.spi.SystemServiceServlet</servlet-class>
<init-param>
<param-name>services</param-name>
<param-value/>
</init-param>
</servlet>

<servlet-mapping>
<servlet-name>SystemServiceServlet</servlet-name>
<url-pattern>/_ah/spi/*</url-pattern>
</servlet-mapping>

</web-app>
8. Run application and install this plug-in in browser if required
clip_image010clip_image012

9. Output

clip_image014

10. Reference

https://developers.google.com/web-toolkit/

0 comments: