E-Nature Tutorial for Google Web Toolkit. Dominik Erbsland

Transcription

1 E-Nature Tutorial for Google Web Toolkit Dominik Erbsland Version 0.1 November 2, 2006

2 Contents 1 Preface Why this tutorial Creating A Project How to create a GWT project Step-By-Step History Support How to use it JUnit Creating the JUnit les Internationalization How to use it Photo Gallery 8 7 Remote Procedure Calls with Servlets Installing Apache Tomcat Use RPC in the GWT Project Run The Project With Tomcat Appendix 14 i

3 List of Figures 4.1 Project le structure with the test folder Project le structure in the webapps folder of Tomcat The server delivered the current time to the client ii

4 1 Preface 1.1 Why this tutorial I have to say that I made this tutorial for egoistic reasons. The school I am attending will soon be nished and I have to work on my degree dissertation. The main focus of the school I visit is software development with Java. Since I didn't want to make a "`plain"' Java application I was looking for something extraordinary. It didn't take long and I heard of the GWT 1 which immediately drew my attention. This framework allows me to create Ajax web applications written in pure Java. I always wanted to learn Ajax but didn't have the time because school was eating up all my free time. To me GWT is the perfect solution. I can make Ajax applications programmed with Java only (at least almost) and don't have to learn in depth JavaScript. The real reason why I make this tutorial is to be quicker when I work on the defree dissertation (which I want to make with GWT). Since ocial help les of frameworks usually are dicult to understand and take much time to understand. I dediced to note everything I learn with GWT in this tutorial in a way everybody can understand. I go through all steps which are needed to include a element to a GWT project. Hopefully this tutoral will be as much as a helpful tool for you as it will be for me. I am always open for suggestions or additions. So feel free to contact me by . 1 Google Web Toolkit 1

5 2 Creating A Project Here you will nd a step-by-step tutorial how to create an empty GWT project to start working with. Actually it's quite simple and doesn't really need much knowledge. I assume that you have Eclipse 1 already installed and know how it works. Furthermore I assume that you are working with Windows XP. If you use any other OS I cannot guarantee that my tutorials will be working. Prerequisites Windows XP Eclipse IDE Java SDK (I am currently using JDK 1.5.0) 2.1 How to create a GWT project Step-By-Step Go to Accept the terms and conditions. Download the newest version (in my case it was Version (Beta)). Unzip the le and move everything to a developer directory. I moved the les to E:/Development/GWT/gwt-windows for example. Click on Start > Run... > Enter cmd and press enter. Change the directory to the directory where you moved all the les you just downloaded from the Google website. To create a new project with the name Examples you type in this: applicationcreator com.mycompany.client.myapplication After you pressed enter the applicationcreator script generated some les. Now enter this: projectcreator -eclipse Examples The script will create even more les. If you wonder where those les are located then just open the Explorer and go to the directory where you moved the GWT les to. (Again, in my case it is E:/Development/GWT/gwt-windows )

6 2 Creating A Project The script created all these les and folders: src (folder) Examples-compile.cmd Examples-shell.cmd test (folder).classpath.project Now create a new project directory in your Eclipse workspace direcotry. created a subdir called "`Examples"'. I Open Eclipse and create a new Java project. Enter the name "`Examples"' (if your project is called like this, too) Click on "`Finish"' to nally create the project. We have to add two GWT JAR les to the classpath before we can start working with the project. Right mouse click the project in Eclipse and select "`Properties"'. Go to "`Java Build Path"' and click the button "`Add External JARs"'. Select "`gwt-user.jar"' and "`gwt-dev-windows.jar"' and click the "`Open"' button. (We do not currently need "`gwt-dev-windows.jar"' - but it's needed if we want to do JUnit tests) The package structure in the project is a bit scrambled in the beginning. To x that right mouse click the project and select "`New"' > "`Source Folder"'. Create a new folder named "`src"' and click the "`Finish"' button. Well that's about it. Your empty GWT project is now prepared and ready to be modied! 3

7 3 History Support With GWT you can make hyperlinks as easily as you make them with HTML. If you click on a hyperlinks in a GWT application your browser cannot go back a page since you won't be changing the actual HTML site but just some parts of the same page. But with the "`Hyperlink"' class you can make it possible for the browser to go back to the last pages your visitors saw. 3.1 How to use it You can easily make hyperlinks with GWT by creating an object of the Hyperlink class. The hyperlink object behaves like a normal hyperlink you know from HTML. The only problem with a GWT hyperlink is that if you click it you simple create new widgets and remain on the very same HTML page you were before. Like this you will not be able to go back with the "`Back"' button of your web browser. If you want to make it possible for visitors to go back a page with the webbrowser you simply pass a second parameter when creating the hyperlink object. Creating such objects will look like this in your Java code: 1 final Hyperlink newslink = new Hyperlink("News", "news"); 2 final Hyperlink biolink = new Hyperlink("Biography", "bio"); 3 final Hyperlink picslink = new Hyperlink("Picture Gallery", "pics"); 4 final Hyperlink gblink = new Hyperlink("Guestbook", "gb"); 5 final Hyperlink contactlink = new Hyperlink("Contact Form", "contact"); As you can see I created dierent hyperlink objects. If you instantiate the Hyperlink object with just one parameter there will be no going back with the "`Back"' button in your browser. To enable this option all you have to do is to use a second parameter. The second parameter will be added behind the URL in the browser if you click on the link. For example: if you are on and click on the link "`Picture Gallery"' the URL in the browser will change like this: 1 4

8 4 JUnit JUnit is a framework which lets you test your Java classes and methods. You can easily check all the methods in your projects whether they are working or not. 4.1 Creating the JUnit les Thw GWT delivers a bunch of BAT les which automatically create all les you need to use JUnit. Follow the step-by-step instructions to create the JUnit les which are needed in order to actually use JUnit: Make sure your classpath includes: gwt-user.jar gwt-dev-windows.jar (or gwt-dev-linux.jar) junit.jar Open the command prompt (click Start, Run..., CMD) A black window opens. Now change the directory to where you have the GWT les installed (like applicationcreator.cmd, gwt-user.jar, junitcreator.cmd etc.) In my case it's: E:/Development/GWT/gwt-windows Enter following command: 1 junitcreator -junit /opt/eclipse/plugins/org.junit_3.8.1/junit.jar 2 -module ch.enature.examples 3 -eclipse Examples ch.enature.client.examplestest Of course you have to replace ch.enature.examples with the path and name of your own GWT project. Same goes with ch.enature.client.examplestest. ExamplesTest will be the JUnit class name which the bat le creates. junitcreator will now create a folder test, and these les: ExamplesTesthosted.cmd, ExamplesTest-hosted.launch, ExamplesTest-web.cmd, ExamplesTestweb.launch into the same directory where the bat le is located. 5

9 4 JUnit Move the test folder and the four les to your GWT project. The project structure will look like this afterwards: Figure 4.1: Project le structure with the test folder Open ExamplesText.java in the folder test in your project. You will nd an almost empty class. We now have to ll this class with tests. 6

10 5 Internationalization With GWT you can make your website multilingual. Allowing people from around the world to read your web page in their own language (as long as you are able to translate your website to their respective languages). GWT supports a variety of ways of internationalizing your code. In this tutorial you will learn how to use this feature with the use of the interface "`Messages"' 1. Google describes the interface as: 1 A tag interface that facilitates locale-sensitive, compile-time binding of messages supplied from properties files. This method is useful if you have static text-blocks on your website you wish to make multilingual. Those might be buttons, titles, subtitles or short static texts. Note: You will not be able to translate text from a database with this procedure. 5.1 How to use it 1 More information about "`Messages"' on the Google website: webtoolkit/documentation/com.google.gwt.i18n.client.messages.html 7

11 6 Photo Gallery a photo gallery tutorial is coming soon! 8

12 7 Remote Procedure Calls with Servlets A fundamental dierence between GWT applications and traditional HTML web applications is that GWT applications do not need to fetch new HTML pages while they execute. Because GWT-enhanced pages actually run more like applications within the browser, there is no need to request new HTML from the server to make user interface updates. However, like all client/server applications, GWT applications usually do need to fetch data from the server as they execute. The mechanism for interacting with a server across a network is called making a remote procedure call (RPC), also sometimes referred to as a server call. GWT RPC makes it easy for the client and server to pass Java objects back and forth over HTTP. When used properly, RPCs give you the opportunity to move all of your UI logic to the client, resulting in greatly improved performance, reduced bandwidth, reduced web server load, and a pleasantly uid user experience. 1 Unfortunately the Google documentation fails to explain how to actually use RPC on a webserver with Tomcat. Nevertheless it is quite easy I needed many weeks until I nally could make it work. Thanks to Andrew Zhang at this point who gave me the tip I needed to make it work. In this tutorial I will show how to make RPC work plus you also can see how to get data from a remote database on a server and display it in the browser. 7.1 Installing Apache Tomcat Before you can actually work with RPC you have to install a copy of Apache Tomcat 2 on your computer. Tomcat implements the servlet and the JavaServer Pages (JSP) specications from Sun Microsystems, providing an environment for Java code to run in cooperation with a web server. For your and my convenience I suggest you install XAMPP which is an all-in-one solution with a pre-congured webserver, mysql database and Tomcat as a plugin. I won't go into detail how to install this since it's pretty straight forward. Just visit and download the newest version of XAMPP plus the Tomcat plugin. 1 Source:

13 7 Remote Procedure Calls with Servlets 7.2 Use RPC in the GWT Project OK let's get started right away. I assume that you have already created a GWT project with Eclipse. In this example we will do a remote procedure call and let the server send us back the current time. Create an interface in the client package of your application named RPCService.java. Copy and paste the content of listing 7.1 into the interface. Listing 7.1: RPCService 1 public interface RPCService extends RemoteService { 2 String gettime(); 3 } We now have to create another interface which has the same le name like the rst interface. Just add Async at the end of the le name. The whole le name will be RPCServiceAsync.java. GWT will throw an exception if the async version of the rst interface hasn't been created. Add following code to the interface: Listing 7.2: RPCServiceAsync 1 public interface RPCServiceAsync { 2 void gettime(asynccallback callback); 3 } As you might have noticed the return type of the method is void. In the asyncinterface all methods always have to be void. You have to live with it, it's just like that. If you haven't already created the server package in your project then do this now. In my case it is called ch.enature.server. Now we need to implement the gettime service. The RPCService interface will be implemented as server-side code. Create a new le in the ch.enature.server package called RPCServiceImpl.java and add this code: Listing 7.3: RPCServiceImpl 1 public class RPCServiceImpl extends RemoteServiceServlet implements 2 RPCService { 3 public String gettime() { 4 DateFormat format = new java.text.simpledateformat("yyyy-mmdd hh:mm:ss"); 5 Date currenttime = new Date(); 6 return format.format(currenttime); 7 } 8 } So far so good, now we just have to make an actual call. For this we just modify the service entry point code in our project. Add the following code to your onmoduleload() method: 10

14 7 Remote Procedure Calls with Servlets Listing 7.4: onmoduleload 1 final RPCServiceAsync rpcservice = initiailizeserviceentrypoint(); 2 final Label label = new Label(); 3 final Button rpcbutton = new Button("RPC Button"); 4 5 rpcbutton.addclicklistener(new ClickListener() { 6 public void onclick(widget sender) { 7 rpcservice.getrpc(new AsyncCallback() { 8 public void onfailure(throwable caught) { 9 label.settext("failure:" + caught.getmessage()); 10 } public void onsuccess(object result) { 13 label.settext("current RPC = " + (String) result); 14 } 15 }); 16 } 17 }); Don't forget to map the rpcbutton element to an element in Examples.html. Listing 7.5: onmoduleload 1 RootPanel.get("slot3").add(rpcButton); In the same class we have to create a new method called initiailizeserviceentrypoint(). The code snippet looks like this: Listing 7.6: initiailizeserviceentrypoint 1 private final RPCServiceAsync initiailizeserviceentrypoint() { 2 RPCServiceAsync rpcservice = (RPCServiceAsync) GWT 3.create(RPCService.class); 4 ServiceDefTarget target = (ServiceDefTarget) rpcservice; 5 String staticresponseurl = GWT.getModuleBaseURL(); 6 staticresponseurl += "/rpcservice"; 7 target.setserviceentrypoint(staticresponseurl); 8 return rpcservice; 9 } For your better understanding I put the whole main class in the appendix in listing 8.1 of this document. Click Examples-compile.cmd to compile the whole project in web-mode. Note: If you want to execute RPCs in hosted mode, you have to replace this code: 1 staticresponseurl += "/rpcservice"; with this code: 1 staticresponseurl += "/"; EINSCHUB: TEIL MIT MYSQL NOCH SCHREIBEN (BRAUCHT EINTRAG VOM PFAD ZUM.JAR FILE IM EXAMPLES-SHELL.CMD UND...COMPILE.CMD) 11

15 7 Remote Procedure Calls with Servlets 7.3 Run The Project With Tomcat We have now added all the neccessary interfaces the implementation of it and created a button which executes a remote procedure call. In order to test if RPC really works we have to copy the project to the Tomcat webapps directory. In my case the webapps directory is here: C:/Program Files/xampp/tomcat/webapps In real life you will also need a Tomcat server to make your GWT application run. Tomcat has to be installed on the webserver and your project has to be in the subfolder webapps'. As mentioned above Tomcat can run server side Java classes. With it you can communicate between a client and the server. Create a folder Examples in the webapps directory. Create a subfolder WEB-INF in Examples. Create the folders classes and lib in WEB-INF. Create a new le web.xml in the folder WEB-INF which contains this body: Listing 7.7: web.xml 1 <?xml version="1.0" encoding="utf-8"?> 2 <!DOCTYPE web-app 3 PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" 4 " 5 <web-app> 6 <servlet> 7 <servlet-name>rpcserviceimpl</servlet-name> 8 <servlet-class>ch.enature.server.rpcserviceimpl</ servlet-class> 9 </servlet> <servlet-mapping> 12 <servlet-name>rpcserviceimpl</servlet-name> 13 <url-pattern>/rpcservice</url-pattern> 14 </servlet-mapping> </web-app> Copy gwt-servlet.jar to WEB-INF/lib. Copy 1:1 all les and folders in the bin folder of your GWT application to WEB-INF/classes. 12

16 7 Remote Procedure Calls with Servlets Copy all les and folders ind Examples/www/ch.enature.Examples to the Tomcat subdirectory webapps/examples/. The le structure has to look like this: Figure 7.1: Project le structure in the webapps folder of Tomcat Start the Tomcat server. Go to You will see a link Examples which leads you to the GWT project you just created in webapps. Click the hyperlink. Click on Examples.html. Et voilà, there it is! Click the button to check if the RPC call can be executed. If you did everything correctly your result will look similar like on this screenshot: Figure 7.2: The server delivered the current time to the client 13

17 8 Appendix Listing 8.1: Examples.java 1 /** 2 * Entry point classes define <code>onmoduleload()</code>. 3 */ 4 public class Examples implements EntryPoint { 5 6 /** 7 * This is the entry point method. 8 */ 9 public void onmoduleload() { 10 final RPCServiceAsync rpcservice = initiailizeserviceentrypoint() ; 11 final Label label = new Label(); 12 final Button rpcbutton = new Button("RPC Button"); rpcbutton.addclicklistener(new ClickListener() { 15 public void onclick(widget sender) { 16 rpcservice.getrpc(new AsyncCallback() { 17 public void onfailure(throwable caught) { 18 label.settext("failure:" + caught.getmessage()); 19 } public void onsuccess(object result) { 22 label.settext("current RPC = " + (String) result) ; 23 } 24 }); 25 } 26 }); RootPanel.get("slot2").add(label); 29 RootPanel.get("slot3").add(rpcButton); 30 } private final RPCServiceAsync initiailizeserviceentrypoint() { 33 RPCServiceAsync rpcservice = (RPCServiceAsync) GWT.create( RPCService.class); 34 ServiceDefTarget target = (ServiceDefTarget) rpcservice; 35 String staticresponseurl = GWT.getModuleBaseURL(); 36 staticresponseurl += "/rpcservice"; 37 target.setserviceentrypoint(staticresponseurl); 38 return rpcservice; 39 } 40 } 14

18 List of Figures 15

19 List of Tables 16

20 Bibliography 17