Google App Engine and GWT

First there was GWT - Google Web Toolkit a very nice framework to develop Ajax applications in Java language which then translate to JavaScript, It worked with Tomcat Web Server. Then Google decide to release Google App Engine a service which provide the ability to develop applications in Python language and deploy them on their servers for free and provide datastore which is like DB to store data.

It seems like their is no syncrhonization at all with the two groups GWT and Google App Engine, once Google goes for Java and then for Python, Is there any direction to which Google wants to go to?

In their website they claim that they choosed Pyhton because it is secure language, There is no more secure lagnuage than Java, How would GWT developers would deploy their applications on Google App Engine, would they need now to convert their code to Python? I really confused

Debug Web Applications

Debuggubg Web Applications is not an easy task,
However this area is involving, and there several ways now to debug Web Applications.

1. The simplest way is to use remove tags inside your html/jsp/jsf files and check the result, or adding border="1" to tags and see the layout of your html.
2. in FireFox you can use tool which is called FireBug, This is a great plugin in FireFix which allows you to debug JavaScript code, It can also show you the border of each component in the HTML, you can also see the HTTP Get and Post requrest between the Client and the Server.
3. If you develop your Web Application using Google GWT you can debug your Web Application in Develop Mode as it is a pure java application.

GWT vs. Flex

This article would compare Google GWT (Google Web Toolkit) and Adobe Flex 2 and would describe the advantages and disadvantages of each of these technologies.
This two technologies are both Rich Internet Application (RIA) frameworks.

GWT Advantages:

• Doesn't require plug in installation on the client side
• GWT doesn't require the user to know JavaScript since the code is written in Java
• GWT doesn't cost money since it is Open Source.
• Changes in the Client side are immediately shown on the browser by using refresh, no need to restart the server.
• GWT can be easily debugged in hosted mode.
• There is compatible between different web browsers.

GWT Disadvantages:

• The html and JavaScript code which GWT generates is pretty heavy and not necessary fully optimized.
• GWT doesn't come out of the box with all the possible widgets, there is a need to use extra components

Flex Advantages:

• The UI looks nicer then plain HTML/JavaScript code, It contains huge amount of animations, widgets etc'
• Compatible between different web browsers
• Flex 2 SDK and Flex Builder 2 for Education are both free
• Google can index SWF files

Flex Disadvantages:

• It requires plug in installation on the client side , however this may not be disadvantage since Adobe claims that Flash is installed on more then 99% percent of users.
• Flex Builder 2 costs some money

GWT Proxy

Here is a nice way to write GWT Proxy to call the server services using the proxy design pattern:

The advantages of this proxy are:

• The client call the service as it's a local call
• The proxy hides the difference between calling the services in hosted and development modes.
• It improves performance since the end point is set only once
  

First write this Client util class:

public class ClientUtil {
private static final String PRODUCTION_URL = "http://www.koko.com";

/**
* Check if the code run in production or development mode
* @return true if we run in production mode (i.e. Ruler.html is called)
*/
public static boolean isProduction() {
return GWT.isScript();
}

/**
* Set endpoint for service which want to access the server
* @param service the service class
* @param name the name of the service
*/
public static void setEndpointForService(Object service, String name) {
ServiceDefTarget endpoint = (ServiceDefTarget) service;
String moduleRelativeURL = getRelativeURL() + name;
endpoint.setServiceEntryPoint(moduleRelativeURL);
}

public static String getRelativeURL() {
String moduleRelativeURL = null;

if (!isProduction) {
moduleRelativeURL = GWT.getModuleBaseURL();
} else {
moduleRelativeURL = PRODUCTION_URL;
}

return moduleRelativeURL;
}
}

Then write your proxy class, for example:

package com.mycompany.client.util;

import com.google.gwt.core.client.GWT;

public class MyProxy {

private static MyServiceAsync myService = (MyServiceAsync) GWT.create(MyService.class);

static {
// serviceName is the name which define in app.gwt.xml file
ClientUtil.setEndpointForService(myService, "serviceName");
}

public static void foo() {
MyCallback myCallback = new MyCallback();
myService.getServerLog(myCallback);
}
}

finally to call the server use:

MyProxy.foo();

You can read more at:

GWT Development or Production Mode

Here is a nice trick to know if your GWT application runs on hosted mode (development mode) or does it runs in production mode on a real web site.

Why do you need this? Because your access to the server side is different between development and production modes, and because you might your application behave differently between this two modes.

So to do this you would need to have two main html files one for development mode and another one for production mode, the two html are the same expect in the production mode you would put this following line:

‹iframe id="production" style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; WIDTH: 0px; BORDER-BOTTOM: 0px; HEIGHT: 0px"›‹/iframe›

and you can also put your advertisements like Google AdSense and Google analytics and other production stuff.

after you put this write this code in your main module class:

public void onModuleLoad() {
Object isProduction = RootPanel.get("production");

if (isProduction!=null) {
ClientUtil.setProduction(true);
}

Also create this ClientUtil class:


public class ClientUtil {
private static boolean isProduction = false;

public static boolean isProduction() { return isProduction; }

public static void setProduction(boolean isProduction) {
ClientUtil.isProduction = isProduction;
}
}

Now in every place in the code user ClientUtil.isProduction() to know if you are in production or not.

GWT Instnace Messaging 2

In the previous post I described a simple way to implement instant messaging using GWT, the technique was to use polling which every few seconds look for a new chat message.

However this technique is not efficient, I had found a better implementation which use "push" from the server to the client to implement the instant messaging.
You can read more about it at:

http://code.google.com/p/google-web-toolkit-incubator/wiki/ServerPushFAQ

Google Maps using GWT

There is a nice project which allow to use google maps in GWT,
You can download it from:

http://sourceforge.net/projects/gwt/

This project is really great, hoever The API allow you to convert Location to Lat/Lng coords, but it doesn't allow to convert Lat/Lng coords to Location.

So the solution here is to use SOA, there is a nice WebService which allow you to convert Lat/Lng to Location, it can be download from:

http://www.geonames.org/source-code/

After installing it you can write this code to convert Lat/Lng to Location/Country:

List places = WebService.findNearbyPlaceName(lat, lng);

if (!places.isEmpty()) {
Toponym toponym = (Toponym) places.iterator().next();
String countryName = toponym.getCountryName();
}

Free Chat Implementation in GWT

I want to share my chat implementation for GWT, this is a pretty simple code which demonstrate how to write an Instand Messaging system inside the browser using AJAX and GWT technology.

The idea is simple, we have a chat factory in which each client can subscribe, There is a Chat Panel in which the user can send messages to the sever in async way. In the server there is a List which holds all the messages which all the clients sent.

There is a polling mechanism which run every few seconds and check if there are new chat messages to display.

The implementation is not state of the art but it works and it can be improved to work better.

Enjoy the implementation:


public class MyChatFactory {

private static final MyChatFactory instance = new MyChatFactory();
private static final int DELAY = 10000;

private MyChatFactory() {
}

public static MyChatFactory getInstance() {
return instance;
}

public void subscribeToEvent(final String queueName, final ChatCallback callback) {
ClientUtil.log("start subscribeToEvent");

Timer eventsTimer = new Timer() {
public void run() {
ChatProxy.getEvents(queueName, callback);
schedule(DELAY);
}
};

eventsTimer.schedule(DELAY);
}

public void sendMessage(String queueName, ChatMessage message) {
ChatProxy.sendMessage(queueName, message);
}

public void sendMessageToAll(ChatMessage message) {
ChatProxy.sendMessage(null, message);
}
}

public class ChatCallback extends GeneralCallback {

public ChatCallback() {
}

public void onSuccess(Object result) {
//ClientUtil.log("start ChatCallback.onSuccess");
if (result!=null) {
ChatMessage chatMessage = (ChatMessage) result;

if (chatMessage.isLogin()) {
ChatPanel.getInstance().addUser(chatMessage.getMessage());
} else {
ChatPanel.getInstance().addText(chatMessage.getMessage());
}
}
//ClientUtil.log("finish ChatCallback.onSuccess");
}

public void onFailure(Throwable caught) {
ClientUtil.log(caught.getMessage());
}
}

public class ChatMessage implements IsSerializable{

private String message;
private boolean isLogin;

public ChatMessage() {
}

public ChatMessage(String message, boolean isLogin) {
this.message=message;
this.isLogin=isLogin;
}


public boolean isLogin() {
return isLogin;
}
public void setLogin(boolean isLogin) {
this.isLogin = isLogin;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
}

public class ChatProxy {

private static ChatServiceAsync chatService = (ChatServiceAsync) GWT.create(ChatService.class);

static {
ClientUtil.setEndpointForService(chatService, "chat");
}

public static void getEvents(String queueName, ChatCallback callback) {
chatService.getEvents(queueName, callback);

}

public static void sendMessage(String queueName, ChatMessage message) {
VoidCallback callback = new VoidCallback();
chatService.sendMessage(queueName, message, callback);
}

}

public interface ChatService extends RemoteService {

public ChatMessage getEvents(String queueName);

public void sendMessage(String queueName, ChatMessage chatMessage);
}

public class ChatServiceImpl extends RemoteServiceServlet implements ChatService {

private static final long serialVersionUID = 1L;

private static Map subscribers = new HashMap();
//private static final long INTERVAL = 200000-1000;

public ChatMessage getEvents(String queueName) {
List list = null;

if (!subscribers.containsKey(queueName)) {
list = new ArrayList();
subscribers.put(queueName, list);
} else {
list = (List) subscribers.get(queueName);
}

if (!list.isEmpty()) {
ChatMessage message = (ChatMessage) list.get(0);
list.remove(0);
return message;
}

return null;
}

public void sendMessage(String queueName, ChatMessage chatMessage) {

if (queueName!=null) {
if (subscribers.containsKey(queueName)) {
List list = (List) subscribers.get(queueName);
list.add(chatMessage);
}
} else { // If null then send to all
Iterator subscribeIter = subscribers.values().iterator();

while (subscribeIter.hasNext()) {
List list = (List) subscribeIter.next();
list.add(chatMessage);
// list.notify();
}
}
}

}