Life @ NCP

not everyone needs to go outside to have fun

Tutorial MyGWT 100 – Creating your FIRST MyGWT application

I was blown away by MyGWT ((was very shiny in Sept 2007)) after seeing what it can do on its demo. I quickly jumped on my squirtle and started to read the tutorial madly. But sadly the tutorial wasn’t really made for a dumb-ass like myself, so it took me painfully long hours just to run my mygwt hello world! If you look through the tutorial, it firstly doesn’t look like a ‘Creating your first MyGWT application’ type of thing. It was too ambitious trying to explain some concepts instead of focusing on getting something to work.

GWT hasn’t been there for a long time, so I think it will be good to have some reference to at least how to get GWT working (point them out to gwt site perhaps?). What about connecting your project to eclipse? There is a page on ‘Configuring Eclipse’, but again, wasn’t even referenced in 101.

So here it goes, hopefully you can follow this steps to make something work. I will assume that you are new to gwt and you are using eclipse, so I will start from Installing GWT and then MyGWT.

Download the source for this tutorial here. This is only for viewing purpose, don’t expect it to unzip it and work (because it is downloaded straight from my local directory). You will need to follow the tutorial.

Installing GWT

Download GWT from gwt site.

Unzip the folder in your workspace folder and treat it as an individual java project.

Add the unzipped folder to your environment variable PATH, so add something like ‘C:Documents and SettingsMeworkspacegwt-windows-1.4.61’ if you are using Windows. Other OS shouldn’t be too different.

Lets call our application MyGWT100. Create another folder using that name in your workspace (case sensitive). From inside the folder, run ‘projectCreator -eclipse MyGWT100’ from the command line. You should be getting messages such as this:

Created directory C:Documents and SettingsMartyworkspaceMyGWT100src <br /> Created directory C:Documents and SettingsMartyworkspaceMyGWT100test <br /> Created file C:Documents and SettingsMartyworkspaceMyGWT100.project <br /> Created file C:Documents and SettingsMartyworkspaceMyGWT100.classpath

The projectCreator that comes with the gwt version I am using is not smart enough to create the folder ‘MyGWT100’ on its own, therefore if you didn’t create the folder first before you run the projectCreator, you will end up with those 4 items scattered around.

Once that’s done, run ‘applicationCreator -eclipse MyGWT101 com.mycompany.client.MyGWT101’. Make sure that the final package is ‘client’, gwt should then spit out something like this:
Created directory C:Documents and SettingsMartyworkspaceMyGWT100srccommycompany <br /> Created directory C:Documents and SettingsMartyworkspaceMyGWT100srccommycompanyclient <br /> Created directory C:Documents and SettingsMartyworkspaceMyGWT100srccommycompanypublic <br /> Created file C:Documents and SettingsMartyworkspaceMyGWT100srccommycompanyMyGWT100.gwt.xml <br /> Created file C:Documents and SettingsMartyworkspaceMyGWT100srccommycompanypublicMyGWT100.html <br /> Created file C:Documents and SettingsMartyworkspaceMyGWT100srccommycompanyclientMyGWT100.java <br /> Created file C:Documents and SettingsMartyworkspaceMyGWT100MyGWT101.launch <br /> Created file C:Documents and SettingsMartyworkspaceMyGWT100MyGWT101-shell.cmd <br /> Created file C:Documents and SettingsMartyworkspaceMyGWT100MyGWT101-compile.cmd

When you run ‘MyGWT100-shell’, it should come up with gwt wrapper html

gwthelloworld.PNG

If you can see that, it is a good thing 🙂

Installing MyGWT

Download the zip file from here, and unzip them in your workspace folder just like you did with gwt.

Add your MyGWT100 as a java project in eclipse. Your package explorer view should look like this:

mygwt100peb.PNG

Right click on the project and choose ‘Build Path -> Configure Build Path’. Go to ‘Libraries’ tab and click on ‘Add External JARs’. Look for the unzipped folder of MyGWT that you previously downloaded. Directly in the folder, you should be able to find ‘mygwt.jar’. Your view should look like this now:

mygwt100lib.PNG

In MyGWT100.gwt.xml, add this line underneath the line that is already there.

In MyGWT100.html, empty the area by removing the default example text from gwt. Your body area should just be .

Now to the last utmost essential part, edit your ‘MyGWT100-shell.cmd’ and ‘MyGWT100-compile.cmd’ files. In both files, you should be able to see something like this: @java -cp “%~dp0src;%~dp0bin;C:/Documents and Settings/Marty/workspace/gwt-windows-1.4.61/gwt-user.jar;C:/Documents and Settings/Marty/workspace/gwt-windows-1.4.61/gwt-dev-windows.jar”

You will need to include mygwt.jar to it, so it becomes:

@java -cp “%~dp0src;%~dp0bin;C:/Documents and Settings/Marty/workspace/gwt-windows-1.4.61/gwt-user.jar;C:/Documents and Settings/Marty/workspace/gwt-windows-1.4.61/gwt-dev-windows.jar;C:/Documents and Settings/Marty/workspace/mygwt-0.4.44/mygwt.jar

Double click on ‘MyGWT100-shell.cmd’ on the Package Explorer to run your code. This is what you should be able to see:

mygwt100end.PNG

Yay!

Note: I am using gwt-windows-1.4.61 and MyGWT0.4.44 for this tutorial.