Ajax and the GWT

Ajax  Asynchronous JavaScript And XML  Technology behind interactive web sites  Provide smoother experience than conventional web pages  No need to refresh the entire page  Snippets of information are updated as necessary

Ajax v. non-Ajax: which is which?

Single Page Web Apps  An Ajax app typically reloads and rearranges only the parts of a page that need to change  Hence: smoother, more interactive experience  Better use of network bandwidth: no need to resend entire page each time

Ajax disadvantages  Web app state is not reflected in address bar by default – compare with non-Ajax.  Though some Ajax apps DO support this And GWT platform does  Browsers support Ajax methods in different ways: hard to get apps that work the same across all main browsers  But: good Ajax tools support this E.g. GWT

Ajax Programming The only sure thing about the acronym is JavaScript Ajax calls are not necessarily Asynchronous, though they often are ▫(asynch calls happen in background) They don’t necessarily use XML: ▫The calls can retrieve text, HTML fragments, images, JSON coded data, or XML

Ajax Client and Server  JavaScript runs in the browser And makes calls to the server for fresh content This is often done using XMLHttpRequest().  The server side is more browser-independent It’s job is to serve up dynamic data on demand

GWT: Google Web Toolkit  A toolkit to develop Ajax web application with Java.  GWT: develop entire web applications in pure Java  With a simple HTML container page to indicate basic layout  GWT compiler translates the Java code into Javascript.

Modules, Entry Points and HTML pages  A module "modulename" is described by a configuration file "modulename.gwt.xml“  An entry point in GWT is the starting point for a GWT application similar to the main method in a standard Java program  Each module can define one or more Entry points classes  The module is connected with an HTML page, which is called in GWT the host page. The code for a GWT web application executes within this HTML document.

Hello World Example  Adds some content to the HTML page  And defines what should happen when the button is clicked Pop up a window alert  The Hello example implements EntryPoint  Hence defines onModuleLoad method

HelloWorld.java (Entry Point) public class HelloWorld implements EntryPoint { public void onModuleLoad() { // define a Label to add Label label = new Label("Hello GWT !!!"); RootPanel.get().add(label); // define a Button to add Button b = new Button( "Click me", new ClickListener() { public void onClick(Widget sender) { Window.alert("Hello, AJAX"); } }); // add the Button // get is a static method of class RootPanel RootPanel.get("hi").add(b); }

HelloWorld.gwt.xml (Module Descriptor)

HelloWorld.html Hello Button should be below this. Hello there! But above this.

Server And Client (RPC)  An interfaces which extends RemoteService which lists the service methods  An implementation what implements the interface and extends RemoteServiceServlet  Define an asynchronous interface to your service which will be used in the client code

MyService.java (Interface) public interface MyService extends RemoteService { List getUserList(); MyUser getUser(String id); }

MyServiceAsync.java (Asynchronous) public interface MyServiceAsync { void getUserList(AsyncCallback > callback); void getUser(String id, AsyncCallback callback); }

MyServiceImpl.java (Service Implementation) public class MyServiceImpl extends RemoteServiceServlet implements MyService { private static final long serialVersionUID = 1L; private List userList = new ArrayList (); public MyUserServiceImpl() { //Initialize the list } public MyUser getUser(String id) { for (Object object : userList) { if (((MyUser) object).getId().equals(id)) return ((MyUser) object); } return null; } public List getUserList() { return userList; }

Web.xml … myServlet {package}.MyServiceImpl myServlet /myservice.srv …

MyCallback.java (Callback) public class MyCallback implements AsyncCallback > { private MyTable table; public MyCallback(MyTable table) { this.table = table; } public void onFailure(Throwable caught) { Window.alert(caught.getMessage()); } public void onSuccess(List result) { List users = result; DataSource datasource = new DataSource(users); table.setInput(datasource); }

See also   