TechieNET.org

Coooool GWT I've always dreamed of having an Object-Oriented framework for developing rich web applications without having to worry about Javascript coding differences between different browsers.Google Widget Toolkit seems like the closest thing that we dreamt. Google Web Toolkit unifies client and server code into a single application written in one language: Java. GWT lets you create a web application in much the same way as you would create a Swing application---creating visual components, setting up event handlers, debugging, and so forth---all within a familiar IDE. Installing Google Web Toolkit Download the Google Web Toolkit package for your operating system and extract to a location where you prefer. GWT doesn't have an installer application. All the files you need to work with GWT will be present in the extracted directory. Creating an Application from Scratch (without Eclipse) GWT ships with a command line utility called applicationCreator that automatically generates all the files you'll need in order to start a GWT project. It can also generate Eclipse project files and launch config files for easy hosted mode debugging. Based on the recommended GWT project structure, your main GWT application class should be in a subpackage named client. GWT applications can be run in two modes: • Hosted mode - In hosted mode, your application is run as Java bytecode within the Java Virtual Machine (JVM). You will typically spend most of your development time in hosted mode because running in the JVM means you can take advantage of Java's debugging facilities and remain within an IDE like Eclipse. • Web mode - In web mode, your application is run as pure JavaScript and HTML, compiled from your original Java source code with the GWT Java-to-JavaScript compiler. When you deploy your GWT applications to production, you deploy this JavaScript and HTML to your web servers, so end users will only see the web mode version of your application. To start with an example. use applicationCreater shell inside extracted directory execute the applicationCreator shell from Command prompt/Terminal applicationCreator com.techienet.client.MyGWTApplication The applicationCreator script will generate some files in src/com/techienet/ , including some basic "Hello, world" functionality in the class src/com/techienet/client/MyGWTApplication.java. The script also generates a hosted mode launch script called MyGWTApplication-shell and a compilation script called MyGWTApplication-compile To run your newly created application in hosted mode, run the MyGWTApplication-shell script in command prompt. Try editing the files src/com/techienet/client/MyGWTApplication.java and src/com/techienet/public/MyGWTApplication.html to see how it changes your application. No... NO wait a while we will do it using eclipse IDE….. GWT Application Using Eclipse To generate an Eclipse project for a new application, first use the projectCreator script to generate a shell Eclipse project for your application projectCreator -eclipse FirstGWTProject its will generate the following Structure |- - src |-- test |-- .classpath |-- .project src and test are just a dummy folder for later use .classpath file looks like <?xml version="1.0" encoding="utf-8" ?> And .project file <?xml version="1.0" encoding="utf-8" ?> FirstGWTProject FirstGWTProject project org.eclipse.jdt.core.javabuilder org.eclipse.jdt.core.javanature And now we need to create GWT module with the help of applicationCreator shell execute the following code .. applicationCreator -eclipse FirstGWTProject com.techienet.client.MyGWTApplication Its will also generate some file that required for GWT application MyGWTApplication.launch MyGWTApplication-compile.cmd MyGWTApplication-shell.cmd MyGWTApplication-shell.cmd is used to run our application in hostmode MyGWTApplication-compile.cmd is for compiling our application for a webmode, so it will translate our java code to proper websolution which contains JavaScript,Html, Ajax Request Cycles and so on. To open your project in Eclipse, launch Eclipse and click the File -> Import menu. Choose "Existing Projects into Workspace" in the first screen of the wizard, and enter the directory in which you generated the .project file in the next screen of the wizard. When you are completed, you should see your GWT project loaded into your Eclipse workspace The main Entry point that you made should be something like this. package com.techienet.client; import com.google.gwt.core.client.EntryPoint; /** * Entry point classes define onModuleLoad(). */ public class MyGWTApplication implements EntryPoint { /** * This is the entry point method. */ public void onModuleLoad() { final 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(""); } }); // Assume that the host HTML has elements defined whose // IDs are "slot1", "slot2". In a real app, you probably would not want // to hard-code IDs. Instead, you could, for example, search for all // elements with a particular CSS class and replace them with widgets. // RootPanel.get("slot1").add(button); RootPanel.get("slot2").add(label); } } src/com/techienet/public/MyGWTApplication.html Wrapper HTML for MyGWTApplication body,td,a,div,.p{font-family:arial,sans-serif} div,td{color:#000000} a:link,.w,.w a:link{color:#0000cc} a:visited{color:#551a8b} a:active{color:#ff0000} MyGWTApplication This is an example of a host page for the MyGWTApplication application. MyGWTApplication.gwt.xml where we set application Entry point And now Try editing the files src/com/techienet/client/MyGWTApplication.java and src/com/techienet/public/MyGWTApplication.html to see how it changes your application.