Ajax and GWT

Ajax and GWT Niraj Juneja Blog : http://www.gandalf-lab.com

Your speaker

{

Niraj Juneja

Principal – Webscale Solutions

Focus on :

- Cloud Computing (Amazon EC2 , AppEngine , Project Caroline)

- Webscale (Big Table , Hadoop , Hbase)

- Collective Intelligence

Tools of the Trade :

- GWT , Spring , Hibernate , Map Reduce , python

}

What is AJAX

Asynchronous JavaScript + XML

XMLHttpRequest Object

Rich Internet Applications with JavaScript

Is it new?

Not Really

Hidden Frames

IE5+, Mozilla 1.0+, Safari 1.2+, and Opera 7.6+

Examples of AJAX

GMail

Google Maps

Most new Web2.0 applications

What is AJAX

Why is it popular?

Google helped popularize, and legitimize it in GMail

Increase Usability of Web Applications

Rich Internet Applications without Flash

Save Bandwidth

Download only data you need

Faster interfaces (sometimes)

Why is it bad?

Breaks back button support

URL's don't change as state changes

Cross Browser Issues can be a pain

JavaScript may tax older machines CPU

Can't access domains other than the calling domain

May be disabled (for security reasons) or not availiable on some

So what is XMLHttpRequest ?

XMLHttpRequest

A JavaScript Class that lets you make asynchronous HTTP requests from JavaScript

Make an HTTP request from a JavaScript event

A call back JavaScript function is invoked at each state of the HTTP request and response

XMLHttpRequest Properties

onreadystatechange - call back function for state changes

readyState - the current state of the HTTP call

responseText - the text result of the request

responseXML - DOM xml object from the request

status - HTTP status code of the response

statusText - HTTP status text

Comparing Ajax and Non-Ajax

Web1.0 UI

AJAX UI

The shift above has a big impact on the style of application development

In and 100% Ajax driven application you will end up implementing MVC but the Controller will be on the client and in Javascript

This has implications to the choice of Web Framework you use (Struts , JSF etc)

AJAX Marketplace

Javascript based libraries

Prototype

YUI

A whole lot of others

IDE’s with end to end solutions

Adobe

Tibco

GWT – googles web toolkit

Ajax Decisions

Usage Scenarios

Ground Up – The Entire Applications driven by Ajax

Incremental

Usage scenarios will drive the choice of Web-Ajax Framework to use

Please don’t build your own Ajax Framework

Things to be aware of

Browser has a max on the number of threads(3 ??)

You are shifting your processing and potentially a lot of logic to the client (Browser)

Don’t use the traditional web1.0 paradigms while designing applications (Actionforms , MVC type 2 , Use if httpsession)

Now the cool part - GWT

What is GWT?

GWT is Java Web development, literally.

...

helloButton.addClickListener(new ClickListener() {

public void onClick(Widget sender) {

label1.setText("Hello World!");

}

});

...

Your Java code is compiled into AJAX (HTML and JavaScript) Web

Using well designed AJAX application is a pleasure but coding and maintaining large projects in JavaScript isn’t

GWT helps to relief some pain out of AJAX application development.

GWT makes AJAX development simpler

Develop with java which is compiled to JavaScript

Use Rich Java Tool set – Eclipse , Netbeans , Junit , ant , maven

The Server Side is Servlet technology based – Embedded tomcat in the install

Easy to Test

Cross Browser issues are mostly resolved

You can still use your existing JavaScript codes – JSNI

Developer momentum – GXT , GWT EXT

IE / FireFox / Mozilla / Safari / Opera

GWT Programming Model

Exposes several Java packages including

java.util.*

Java.lang.*

Use MVC design pattern at the client side

Swing Like Programming Model

Ability to have listeners and Observer / Observables

Generally no html ( just 1 html page)

Javascript to Java compiler

GWT compiler converts Java code into JavaScript code, in much the same way the Java compiler compiles Java code into bytecode.

Compilation is done by running the Java program com.google.gwt.dev.GWTCompiler , passing it the location of the module definition file along with some other parameters.

GWT obfuscates the compiled output so that everything is compressed and impossible to decipher. Other (‘pretty/detailed’) options are also available for development purpose.

Java code which has to be > JDK1.4

JDK 1.5 features (Generics etc) currently not supported on the client side , but will shortly be supported

Getting Started with GWT

Where do we start?

1) Install the Java SDK

2) Download GWT

http://code.google.com/webtoolkit/download.html

3) Unzip the Package

4) Create Your Application

Lets Write Some Code

Coding By Convention

Your Package Structure

com/mysite/myapp/

Project root containing module XML files.

com/mysite/myapp/client/

Client-side source files and sub-packages. Compiled into JavaScript.

com/mysite/myapp/server/

Server-side code and sub-packages. Compiled to Java. (Servlets, Data Access Objects)

com/mysite/myapp/public/

Static resources that can be served publicly. (HTML, CSS, Images)

Package Structure

Lets Write Some Code

1) projectCreator

Used to make an Eclipse project for one of the samples that comes with GWT

projectCreator

[-ant projectName] – Ant build file to compile source.

[-eclipse projectName] – Generate an Eclipse project.

[-out dir] – Directory to write output files.

[-overwrite] – Overwrite any existing files.

[-ignore] – Ignore existing files, do not overwrite.

2) applicationCreator

Generates a starter application and scripts for launching hosted mode and

compiling to JavaScript

applicationCreator

[-eclipse projectName] – Debug launch configurations for Eclipse project.

[-out dir] – Directory to write output files.

[-overwrite] – Overwrite any existing files.

[-ignore] – Ignore existing files, do not overwrite.

className – Fully-qualified name of the application class to write.

The User Interface Think HTML in terms of Swing and SWT... ...this is where GWT uses Widgets and Panels to dynamically create HTML... ...Widgets and Panels can be found in the GWT user-interface library...more information can be found on the GWT site...these images are there too!

GWT events and Listeners

GWT Events and Listeners

Running your Application

GWT – RPC

GWT - RPC