Now that we are familiarized bit with terms and stuff we can move on to writing our own GWT application.
Step 1: Installing GWT plugin for eclipse
If you have already installed eclipse all you have to do is go to "Help" menu, under that "Install New Software" and give the URL as http://dl.google.com/eclipse/plugin/3.6 and click next and complete installation.
step 2: Creating a new project
Select File > New > Web Application Project. Enter the name "com.eviac.blog.helloworld" for the project name and package. By default it will select both "Use Google Web Toolkit" and "Use Google App Engine" as we only using Google Web Toolkit here you will have to deselect Google App Engine.
Now eclipse will create you a project with a package structure as shown below.
step 3: Creating the entry point
Inside the package com.eviac.blog.helloworld.client package create a java class named "HelloWorldGwt"
HelloWorldGwt.java
package com.eviac.blog.helloworld.client;
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;
public class HelloWorldGwt implements EntryPoint {
@Override
public void onModuleLoad() {
final Label label = new Label("Hello World GWT !!!");
final Button button = new Button("Click Here");
button.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
label.setVisible(false);
button.setText("welcome back again!");
Window.alert("Welcome to GWT");
}
});
RootPanel.get().add(label);
RootPanel.get().add(button);
}
}
Inside the package com.eviac.blog.helloworld create Com_eviac_blog_helloworld.gwt.xml file.
Com_eviac_blog_helloworld.gwt.xml
<?xml version="1.0" encoding="UTF-8"?> <module rename-to='com_eviac_blog_helloworld'> <!-- Inherits Web Toolkit utilities. --> <inherits name='com.google.gwt.user.User'/> <inherits name='com.google.gwt.user.theme.standard.Standard'/> <!-- Specify the app entry point class. --> <entry-point class='com.eviac.blog.helloworld.client.HelloWorldGwt'/> </module>
Step 3: Creating html page
Inside the folder war create Com_eviac_blog_helloworld.html file
Com_eviac_blog_helloworld.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="Com_eviac_blog_helloworld.css">
<title>Hello World GWT</title>
<script type="text/javascript" language="javascript" src="com_eviac_blog_helloworld/com_eviac_blog_helloworld.nocache.js"></script>
</head>
<body>
<!-- optional tag: add this if needs history support -->
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
<h1><center>Hello World GWT</center></h1>
</body>
</html>
Step 4: creating web.xml file
Inside the folder war/WEB-INF create a xml file called web.xml
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app
PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
<!-- Default page to serve -->
<welcome-file-list>
<welcome-file>Com_eviac_blog_helloworld.html</welcome-file>
</welcome-file-list>
</web-app>
Step 5: Creating css file
Inside war falder create a css file named Com_eviac_blog_helloworld.css
Com_eviac_blog_helloworld.css
h1 {
font-size: 2em;
font-weight: bold;
color: #6495ED;
}
.gwt-Label {
color: #0000FF;
font: normal 12px tahoma, arial, helvetica, sans-serif;
height:3.5em;
width: 10.7em;
}
.gwt-Button {
color: #0000FF;
height:3.5em;
width: 10.7em;
font-size: 12px;
font-family: arial, sans-serif;
}
Alright now we are done with coding steps but wait for it, one more step to go
Step 6: Running GWT Application
To run right click on the project select Run As->Web Application then it will bring up a new view "Development Mode" copy the url generated.
Install GWT plugin for your web browser using this link.
Now paste the url in the browser and you'll see something like following and that's it.
Now that you know how to build a basic GWT application you can improve it by adding more functionalities and changing the look and feel using css file.
Thank you. This is very enlightening.
ReplyDeleteAll that lines and files involved in a simple "hello world". Mmmmmmmm. I'll probably choose flex for my web apps.
kar9999, just a note : Flex needs a plug-in to run. GWT (and JavaScript) just a browser.
ReplyDeleteWhen Flash to HTML5 will be consolidated (http://blogs.adobe.com/conversations/2011/03/flash-to-html5-conversion-tool-on-adobe-labs.html) I may agree with your statement.
For sure GWT is not simple but really powerful if you are a Java programmer.
Did you try Spring-Roo (http://www.springsource.org/roo). With few lines of code you can create an "Hello World" application with GWT :)
Good article. We worked a lot with GWT, you can achieve impressive things, but often you have to get mad with little discrepancies between browsers.
ReplyDeleteThis is what we made with GWT : http://www.pornark.com (NSFW! it's it's a video porn web site, made as a single GWT app, the backend is written in Django/python).
Thanks a lot everyone for the comments :-)
ReplyDelete