Home » Enterprise Java » gwt » GWT Calendar Example

About Mohammad Meraj Zia

Senior Java Developer

GWT Calendar Example

In this example we will learn how to use Calendar in GWT. The Google Web Toolkit is a development framework for creating Ajax-enabled web applications in Java.  Tools and technologies used in this example are Java 1.8, Eclipse Luna 4.4.2, Eclipse GWT Plugin 2.6
 
 
 
 
 
 
 
 

1. Creating GWT project

To create a new GWT project go to File->New->Other, then type ‘Web App’. Choose ‘Web Application Project’ under ‘Google’.

Figure 1. Create New Web Application

Figure 1. Create New Web Application

On the next window enter the Project name (‘GWTCalendar’) and the Package (com.javacodegeeks). Leave the other details as it is and click on ‘Finish’. Eclipse will generate some files automatically for you.

Figure 2. Create Project

Figure 2. Create Project

2. Setup

Add the gwt-cal.jar file to the project’s build path. You can download the jar file from http://search.maven.org/#search%7Cga%7C1%7Cgwt-cal. Right-click on the project node in the Package Explorer and select ‘Build Path > Configure Build Path > Add External JARs’. Specify the downloaded gwt-cal-<version>.jar. Modify GWTCalendar.gwt.xml to inherit the gwt-cal module and theme:

<inherits name='com.bradrydzewski.gwt.calendar.Calendar' />
<inherits name='com.bradrydzewski.gwt.calendar.theme.google.Google' />

Add the gwt-dnd jar as well.

<inherits name='com.allen_sauer.gwt.dnd.gwt-dnd'/>

Below is the GWT configuration file:

GWTCalendar.gwt.xml

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.6.0//EN"
"http://google-web-toolkit.googlecode.com/svn/tags/2.6.0/distro-source/core/src/gwt-module.dtd">
<module rename-to='gwtcalendar'>
  <inherits name='com.google.gwt.user.User'/>
  <inherits name='com.bradrydzewski.gwt.calendar.Calendar' />
  <inherits name='com.bradrydzewski.gwt.calendar.theme.google.Google' />
  <inherits name='com.allen_sauer.gwt.dnd.gwt-dnd'/>

  <set-property name="user.agent" value="safari"/>
  <inherits name='com.google.gwt.user.theme.clean.Clean'/>

  <!-- Specify the app entry point class. -->
  <entry-point class='com.javacodegeeks.client.GWTCalendar'/>

  <source path='client'/>
  <source path='shared'/>

  <!-- allow Super Dev Mode -->
  <add-linker name="xsiframe"/>
</module>

3. Add widget

To the the Calendar widget modify the GWTCalendar class to add the code below:

Calendar calendar = new Calendar();
calendar.setDate(new Date());
calendar.setDays(5); //number of days displayed at a time
calendar.setWidth("400px");
calendar.setHeight("400px");
RootPanel.get("calendarContainer").add(calendar);

Below is the Entry class:

GWTCalendar.java

package com.javacodegeeks.client;

import java.util.Date;

import com.bradrydzewski.gwt.calendar.client.Calendar;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

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

    /**
    * This is the entry point method.
    */
    public void onModuleLoad() {
        Calendar calendar = new Calendar();
        calendar.setDate(new Date());
        calendar.setDays(5); //number of days displayed at a time
        calendar.setWidth("400px");
        calendar.setHeight("400px");
        RootPanel.get("calendarContainer").add(calendar);
    }
}

4. Compile

To compile the application right click on the project and select ‘Google’ ==> ‘GWT Compile’. You will get a pop-up showing the project name. Click on the ‘Compile’ button. GWT will start compiling the project. To reduce the number of permutation you can add the below property in your GWTCalendar.gwt.xml:

<set-property name="user.agent" value="safari"/>

Your permutations will decrease from 55 to 11.

5. Running the application

To run the application right click on the project and select ‘Run As’ ==> ‘Web Application (Classic Dev Mode)’. Eclipse will display a URL in the ‘Development Mode’ tab. Copy this URL and paste it on Chrome browser. Remove the part after ‘.html’ and click enter.

Figure 3. Run

Figure 3. Run

6. Download the source file

This was an example of GWT Calendar.

Download
You can download the full source code of this example here: GWTCalendar. Please note that the jar files from the lib folder has been removed to save some space.

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. JPA Mini Book

2. JVM Troubleshooting Guide

3. JUnit Tutorial for Unit Testing

4. Java Annotations Tutorial

5. Java Interview Questions

6. Spring Interview Questions

7. Android UI Design

 

and many more ....

 

Receive Java & Developer job alerts in your Area

 

Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
andygiger
andygiger
8 months ago

thank you so much. i would like to conntinue with the gwt calendar