Creating your first GWT app with Cypal Studio for GWT
| 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:
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
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 <body</body> tags. <table align=center> 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"); 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 <RemoteService>Impl and Cypal Studio for GWT enforces this. There is another interface called the Async interface. Async interface is based on the RemoteService interface. More details about this interface is available here. We don’t have to worry about this interface, because Cypal Studio for GWT create this Async interface for you and will maintain it. 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 { 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 onFailure(Throwable error) { public void onSuccess(Object retValue) { 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:
|
