Courtesy : http://grprakash.googlepages.com/gwttutorialwithgooglipse
GWT Tutorial
About:
This tutorial introduces you to GWT. You can do develop GWT apps without any IDE, but it is really helpful if you use one. I choose Eclipse with Cypal Studio for GWT (which was earlier known as Googlipse) to walk thru this tutorial.
If you like this tutorial, you may probably want to check out Using Cypal Studio for GWT in command line and GWT FAQ.
Requirements:
- You need the latest GWT. You can download it at here. Make sure you download the latest version.
- Download and install Eclipse 3.3 with WTP 2.0. You can get it here.
- You need a Java 1.5 VM to run Eclipse. You can get it here.
- Download Cypal Studio for GWT (Currently in RC5) from here and extract it to your eclipse directory.
Settings:
Before you start, you need to tell Cypal Studio for GWT where you have installed GWT. In Eclipse, select Window -> Preferences -> Cypal Studio -> Browse. Select the directory where you have installed GWT. Don't worry, if you skip this step, you will be asked tto set when you create a Module/Remote Service
Creating the App:
Create a new Dynamic Web Project. (File-> New -> Project -> Dynamic Web Project)
In the first Wizard page, type “Hello World App” for Project Name and select “Default Cypal Studio Project” in the Configurations drop down. Click Finish.
With GWT you organize your code as Modules. Modules are typically organized under a package. When you create a module, you will have
- A
.gwt.xml file, where you will have all your configurations of a module - A folder named “public”, where you will have all your html, css, images, etc
- A package named ”client”, where you will have all the client side code - which will be converted into JavaScript later
- A package named “server”, where you will have all the server side code - in form of Servlets
Select File-> New -> Cypal Studio -> Module
The wizard is very similar to the Java Class Wizard. You need to select the source folder, the package and give the name of the module.
In Package Explorer view, you can see that all the necessary code for a module is created by Cypal Studio for GWT.
With a little code, your application will be ready to run in the hosted mode.
Open the html file created and add the following code between the
This will create the placeholders, which will be filled by the following java code, which will be added in the onModuleLoad method of the MyModule.java file
fifinal Button button = new Button("Click me");
final Label label = new Label();
button.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
if (label.getText().equals(""))
label.setText("Hello World!");
else
label.setText("");
}
});
RootPanel.get("slot1").add(button);
RootPanel.get("slot2").add(label);
Running in Hosted Mode:
Cypal Studio for GWT integrates GWT's hosted mode into Eclipse in a nice way. Select Run -> Run -> GWT Hosted Mode Application. Click the “New Launch Configuration”. You can select the project and the module, which you want to run. In the parameters page, you can customize the options passed to GWTShell. Click Run. You should see two windows popping up. One is the GWT Shell and the other is the hosted browser. Click the ‘Click Me’ button in the browser window, and you can see the “Hello World!” message right next to the button.
Compiling the application to JavaScript:
You can compile the client code into JavaScript, so that you can deploy it on any standard WebServer. Click the “Compile/Browse” button in the hosted mode browser. This will compile create the javascript and other supporting files under the build\gwtOutput directory. Additionally Cypal Studio for GWT will automatically compile during a clean build and also while publishing to an external server.
Deploying to an external server:
Open the Servers view (Window -> Show View -> Other View -> Server -> Servers). Configure your favourite WebServer in the view (Right click on the view -> New -> Server) You can configure any server (Weblogic, JBoss, Tomcat, etc) and the configuration depends on the vendor and its not described here. Assuming you have configured a server, say Weblogic 9.0 server. Right click the configured server -> Add and Remove Projects. In the dialog box, move our Hello World App from Available Projects to Configured Projects and click Finish. Now you can start the server and see your application @ http://localhost:7001/Hello_World_App/MyModule.html (The URL varies depending on the server vendor and the server configuration)
Creating a WAR file:
Creating a WAR file for deployment is very simple. Select File -> Export -> WAR file and follow the wizard.
This can be done in command line as well. Look here for more details.
Adding RemoteServices:
What we have done so far is a simple static application. There is no RPC involved. GWT supports a properitary mecahnism thru which the client code and server code communicate. The heart of the RPC is a RemoteService interface. This lies in the client package of the module. The implementation of this interface should be available in the server package. By convention, the class is named as
Select File -> New -> Cypal Studio -> Remote Interface to create a RemoteInterface. You need to select the module where it will reside and then give the name and uri. Uri is typically where the client will be looking for the the server code. It should be unique within the given application.
Click Finish and you see the RemoteService and RemoteServiceAsync are created in the client package and the RemoteServiceImpl is created in the server package. The RemoteService interface also has an inner class Util with one method getInstance. This will be very handy for invoking the service from the client code. We will see this later. Now lets add a method in the interface:
String sayHello() throws Exception;
You can see Cypal Studio for GWT will update the Async interface with this method signature
void sayHello(AsyncCallback callback);
Basically it removes the return type and exceptions and adds the callback parameter at the end of the parameter list.
In the Impl class, implement this method
public String sayHello() throws Exception {
return “Hellooooooo”;
}
Invoking RemoteServices:
From the client code, you can use the getInstance method to invoke the RemoteService.
I’ve modified the MyModule.java to have an RPC call:
button.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
MyServiceAsync instance = MyService.Util.getInstance();
instance.sayHello(new AsyncCallback(){
public void onFailure(Throwable error) {
Window.alert(”Error occured:”+error.toString());
}
public void onSuccess(Object retValue) {
Window.alert(”Server returned:”+retValue.toString());
}
});
}
});
As you can see, the onFailure method is called whenever there was any problem with the RPC call. If everything goes fine, onSuccess method is called with the return value from the method.
Common problems:
- I installed Cypal Studio and nothing happened.
There are 3 possible reasons:
1) You have not properly unzipped it. Check whether the features & plugins directories under your eclipse has Cypal Studio for GWT feature and plugins.
2) You are running an Eclipse 3.2 or earlier.
3) You are running Eclipse on a Java 1.4 VM or earlier
- How do I change the URI of the application?
Right click the project -> Properties -> Web Project Settings. Change the Context Root value
- I added the Cypal Studio's GWT facet to an existing Dynamic Web App. Nothing works.
Follow these steps for adding the Cypal Studio's GWT facet to an existing app:
- First remove the gwt-user.jar from the application build path
- Remove gwt-servlet.jar from WEB-INF\lib directory
- Add the facet
- Open .settings\org.eclipse.wst.common.component file and for every module in your application, add the line
where com.example.testApp is the package and MyModule is Module name. - Refresh the application.
- I upgraded from previous version of Cypal Studio for GWT. I’m getting some errors.
You have to uninstall the Cypal Studio's GWT facet and then follow the above steps to install the facet again.
- Can I have both Googlipse and Cypal Studio's GWT facet installed on the same Project?
I don't see a need to do that! If you are using Googlipse, I strongly recommend you to uninstall it (delete the com.googlipse.gwt
.jar from your plugins directory) and start using Cypal Studio for GWT.
No comments:
Post a Comment