Shiny New Thingos

Yeh I know what ya think: the title is lame right? It’s on GMM: Google Maps Mobile¹

For some reason it never occured to me to open google maps through my mobile when I was looking for direction until just recently. Probably since my luck was generally pretty good, I trusted it with the answer to where I should be going.

Well not anymore! I’ll be using this GMM from now on because it is so great! Not only that it presents you the map you need, it can also calculate the path from point A to point B. You can then go through each important point in the path such as intersection or roundabout, just like how a GPS would direct you to do. The interface is of course much simpler than a fully animated picture with a lady talking with soft, hushed voice, but nonetheless it satisfies me in terms of its ease-of-use.

If you want to have a look at a preview of it, this youtube video is not a bad place to start.

1. was very shiny around Jan 2008 [↩]

Been playing with GWT¹ lately - procrastinating from having to read journal papers. GWT seemed to be pretty good, I am mostly satisfied with the code I produced in terms of design. Much more satisfied than writing (and DEBUGGING) Java Script *eeek*. But I found the tutorial on GWT is very limited, especially around the actual widgets to create good UI. Maybe GWT users are assumed to be familiar with html/css/java script in general and therefore are proficient in creating UI.

GWT to me, brings a new level of creating UI. UI now can be created with OO concept, no more slabs of long and drowning html/javascript. A self-labeled button is a good example to showcase GWT ability.

What I usually see in the ‘Web 2.0′ app UI, is a radio button where the name of the button can be changed on the fly. See what I meant below, the state goes in order of (1) -> click ‘Unlabeled’ -> (2) -> type ‘Self-labeled’ -> (3)

When I click on the button label ‘Unlabeled’, a textarea will appear and allow me to change the label. Once I click outside the textarea, it will change back to the previous state, but with the new label.

Each of these self-labeled radio button can be created as a widget. The widget is a horizontal panel which consist of a nameless radio button, a label, and a text area. On (1), the radio button and the label are added to the panel. Clicking the label brings the state to (2) - the label is removed from the panel, and the textarea is added. When an onLostFocus event is triggered, the textarea is removed and the label is added back. Of course after the texts are matched between the two elements.

Here is some of the snippet of the code:

1. was very shiny in May 2006 [↩]

I listen to podcast pretty frequently, so I thought I will list some of them that are really good. The topic itself matters, but the speaker is the one that matters the most. Have a lookie here, and I will update it as I go from now on. The link to the page is also available from the menu on your right.

I was blown away by MyGWT¹ 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 Settings\Me\workspace\gwt-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:

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:

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

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:

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:

In MyGWT100.gwt.xml, add this line <inherits name=”net.mygwt.ui.MyGWT” /> underneath the line <inherits name=’com.google.gwt.user.User’/> that is already there.

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

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 “%~dp0\src;%~dp0\bin;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 “%~dp0\src;%~dp0\bin;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:

Yay!

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

1. was very shiny in Sept 2007 [↩]

Sorry. Based on the information you have submitted to us, you are ineligible to register for YouTube.com. That’s the only message come up whenever I tried to register. I tried using different email address, tried using different youtube ID, made sure that my age was +18. Still no luck.. *very sad*