First, download the Google Web Toolkit from their website. For me I downloaded the GWT for Linux, version 1.1. Installation is simple, just extract the archive.
Now that the archive is extracted (for me, in ~/gwt-linux-1.1.10), I can create my project and application skeleton. There are a few scripts that are provided with GWT for creating various things, such as projects, applications, Junit testing files, but I am only concerned with the project creator and the application creator. First thing I want to do is create my Project. I do so by changing into my GWT folder, and running the projectCreator script. I am going to create a project called InterfaceTest for Eclipse. So to create my project I run the following command:
./projectCreator -eclipse InterfaceTest -out InterfaceTest
What this does is it creates an Eclipse project called InterfaceTest in the output folder InterfaceTest. Next, I need to generate my application skeleton. I do so by running the following command:
./applicationCreator -eclipse InterfaceTest -out InterfaceTest com.digiassn.blogspot.client.InterfaceTest
It is very important to keep the project names consistent when using the Application Creator and Project Creator, otherwise Eclipse will not compile the project correctly.
Now that I have my project skeleton, I can import the project into Eclipse. From Eclipse, go to the File menu, select Import, under the General item, choose Existing Projects into Workspace, and navigate to the folder where the newly created project is stored. Once done, the new InterfaceTest project is in my workspace.
Now I want to go into my HTML file that was created using the Application Creator, and add a DIV tag to use as an “anchor” to find and insert a rollover text item. Using the Package Explorer, I navigate to the InterfaceTest/src/com.digiassn.blogspot/public/InterfaceTest.html file, open it up in an editor (make sure it is in the editor, otherwise it will try to open in a browser by default), and add a DIV tag anywhere in the BODY section. I do not change any of the HTML elements that were added by default, I only add the folowing tag:
Now, I open the InterfaceTest/src/com.digiassn.blogspot.client/InterfaceTest.java file for editing. The following code uses the import all the necessary UI libraries, and create a page that will add a rollover text item to the DIV tag, set up a response to a rollover event that will change the text and to the current date and add a table on Mouse Over, and change it to something else when the mouse is moved away. It will also create a menu with 1 drilldown item, and add a single item that will have an action that creates an alert message.
package com.digiassn.blogspot.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.MouseListener;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;
import com.google.gwt.user.client.ui.MenuBar;
import com.google.gwt.user.client.ui.MenuItem;
import com.google.gwt.user.client.Command;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Grid;
import java.util.Date;
public class InterfaceTest implements EntryPoint {
public void onModuleLoad() {
final Date d = new Date();
final Label roller = new Label("Default value");
final Grid g = new Grid(1,1);
final MenuBar m = new MenuBar();
final MenuBar m2 = new MenuBar();
final Command c = new Command() {
public void execute() {
Window.alert("Hello");
}
};
final MenuItem mi = new MenuItem("Test", c);
//Create a menu with 1 drilldown and 1 item that will make a popup
m2.addItem(mi);
m.addItem("Top", m2);
RootPanel.get().add(m);
//Setup the table to add when we do a rollover
g.setBorderWidth(2);
g.setText(0, 0, "This is a test");
//Add the text with the rollover to the DIV tag
RootPanel.get().add(roller);
//Add the mouse listener events.
roller.addMouseListener(
new MouseListener() {
public void onMouseEnter(Widget sender) {
//Set the text to the date from the date object
roller.setText(d.toString());
//Add the table to the DIV tag
RootPanel.get().add(g);
}
//Change the text whent he mouse leaves, and remove the
//table
public void onMouseLeave(Widget sender) {
roller.setText("Leaving element...");
RootPanel.get().remove(g);
}
// Do nothing
public void onMouseDown(Widget sender, int x, int y) {}
// Do nothing
public void onMouseMove(Widget sender, int x, int y) {}
// Do nothing
public void onMouseUp(Widget sender, int x, int y) {}
}
);
}
}
The onMouseUp, onMouseMove, and onMouseDown methods are blank, but they must be declared in order for the MouseListener event to work. I could have created the MouseListener outside of the add method, but I mixed up the declarations of that and the Menu to demonstrate the different methods that can used.
Once this program has been entered, I can run it from within Eclipse by going to the Project Explorer, right mouse clicking on the InterfaceTest project, and choosing Run As. Under the Java Application section, I choose the InterfaceTest configuration, and run the program. This will launch a mini-browser with the newly created application. Once I am through debugging (I will ignore that my menu overlaps my rollover when I drill down), I can compile my final program. I open up a terminal again, go to my Eclipse Workspace, and run the InterfaceTest-compile script. This will create a ./www/com.digiassn.blogspot.InterfaceTest directory, with my HTML files. All I need to do is copy these to a web server and run.
Not much to it. I did notice that the compiler was able to use the java.util.Date object without any fuss. I tried to use the com.google.gwt.emul.java.util package, but did not have any luck. Since the java.util packages seemed to work, I wonder what other internal packages can be used. Obviously the UI libraries won't work. I look forward to trying some other projects in the GWT.
Posts
No comments:
Post a Comment