Sample program for GWT

-
Hi everyone, in this blog post, I will be writing a sample program on GWT. Please go through my previous post, Introduction to GWT, which will give you a basic idea about GWT.

Here, I am creating a sample gwt application which displays an alert button. The name of the project is SampleGWT. To create a project, click on the google icon in eclipse and choose "New Web Application Project".

The main folders in a gwt application are as follows :-

1) src - src include the source folder, where the source code is written. In GWT src includes,

a) Client folder - Contains java classes for User Interface. The entry point of the application will be usually in client folder.
b) Server folder - Contains java classes for server side processing. Usually server folder includes servlets.
c) Shared folder - Contains java classes for transferring data from client to server.
d) Module descriptor file - This file will be named as our project_name.gwt.xml. This file is required for gwt compiler to compile the project. Here the file name is SampleGWT.gwt.xml.

2) test folder - this folder is mainly used for writing test cases.

3) war - This folder is used for deploying the web application. It includes :-

a) WEB-INF :- Contains the compiled classes, gwt libraries and servlet libraries.
b) css file :- The css file for creating the project style sheet. The css file is named as project_name.css. Here, the css file is named as SampleGWT.css
c) html file :- HTML file will invoke the GWT UI application. The html file is named as project_name.html.

For this sample project, we have to modify some of the files in the project as given below :-

1) The module descriptor of the class (SampleGWT.gwt.xml) is as follows :-

 <?xml version="1.0" encoding="UTF-8"?>  
 <!--  
  When updating your version of GWT, you should also update this DTD reference,  
  so that your app can take advantage of the latest GWT module capabilities.  
 -->  
 <!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.5.1//EN"  
  "http://google-web-toolkit.googlecode.com/svn/tags/2.5.1/distro-source/core/src/gwt-module.dtd">  
 <module rename-to='samplegwt'>  
  <!-- Inherit the core Web Toolkit stuff.            -->  
  <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.clean.Clean'/>  
  <!-- <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'/>   -->  
  <!-- Other module inherits                   -->  
  <!-- Specify the app entry point class.             -->  
  <entry-point class='com.techjourney.GWT.client.SampleGWT'/>  
  <!-- Specify the paths for translatable code          -->  
  <source path='client'/>  
  <source path='shared'/>  
 </module>

2) The stylesheet of the application (SampleGWT.css) is as follows :-

 /** Add css rules here for your application. */  
 /** Example rules used by the template application (remove for your app) */  
 body {   
      text-align: center;   
      font-family: verdana, sans-serif;   
      }  
 h1 {   
      font-size:2em;   
      font-weight: bold;  
      color:#777777;   
      margin:40px0px70px;   
      text-align: center;   
      }

3) The host file of the application (SampleGWT.html) is as follows :-

 <!doctype html>  
 <!-- The DOCTYPE declaration above will set the   -->  
 <!-- browser's rendering engine into        -->  
 <!-- "Standards Mode". Replacing this declaration  -->  
 <!-- with a "Quirks Mode" doctype is not supported. -->  
 <html>   
 <head>   
 <title>Sample GWT</title>   
 <link rel="stylesheet" href="SampleGWT.css"/>   
 <script language ="javascript" src="samplegwt/samplegwt.nocache.js"> </script>   
 </head>   
 <body>   
 <h1>Sample GWT</h1>   
 <p>Welcome to first GWT application</p>  
  </body>   
  </html>

4) The entry point of the application (SampleGWT.java) is as follows :-

package com.techjourney.GWT.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;


public class SampleGWT implements EntryPoint {
    
    
    public void onModuleLoad() {
        String msg = "Welcome to GWT. It is really cool";
        Window.alert(msg);
        
        }
}


The project have to be compiled before it is run. During compilation, it will ask for entry point of the application, which is by default the project name, in this case it is SampleGWT.java. After compiling, we can run the program. On running the program, it will produce a link in the console. The final compiled output of the sample gwt program, on clicking the link, is as shown below :-


I believe everyone understood the sample gwt program very well. Please comment below if you have any doubts. All doubts/comments will be responded soon.

Once again thank you for reading my post.

Comments

Post a Comment

Popular posts from this blog

Difference between "diff" and "sdiff" commands in Unix

-
Image
Hi everyone, in this blog post, I will be discussing about the difference between "diff" and "sdiff" commands in Unix. This is my first post about Unix. diff command diff command will compare two files and prints the difference between the 2 files. The format of diff command is diff file1 file2 . sdiff command sdiff command will compare two files side by side. The format of sdiff command is sdiff file1 file2. The contents of files are displayed side by side with a marker denoting the difference between each files. Some of the important markers used in sdiff are as follows: | - denotes the 2 files differ in the line completely. < - only the first file contains the line. > - only the second file contains the line. The better way to depict the difference is by showing examples. Here, I am comparing 2 files which are named as " ipl_teams_2008.txt " and " ipl_teams_2015.txt ". Let's see the contents of the files.
Read more

Anonymous classes in C++

-
Anonymous Classes in C++ Anonymous class is a class with no name. The main advantage of using an anonymous class is that it provides reusability of the class. Also anonymous class helps in encapsulation of data. Anonymous class is basically used when only one instance of the class is needed and it has only a short body. By defining an anonymous class, it does the same steps of defining a local class and instantiating it. The anonymous class is rightly used after it is defined. Following specifies an example of anonymous class in C++. class { int a; } c1; Here, c1 is an object of the anonymous class. Usually, anonymous classes in C++ are defined using "typedef" ( a keyword to assign alternative names to existing types). Typedef helps in giving another name to the class. It is shown as below: typedef class { int a; } newclass; newclass c2; Here newclass is the object of the anonymous class and c2 is its instance. Member variables can also be initialized in ano
Read more