java web programming on google cloud platform [3/3] : google web toolkit

55
Google Web Toolkit Assoc.Prof. Dr.Thanachart Numnonda Asst.Prof. Thanisa Kruawaisayawan www.imcinstitute.com July 2012

Upload: imc-institute

Post on 07-Dec-2014

562 views

Category:

Technology


2 download

DESCRIPTION

Java Web Programming on Google App Engine, July 2012

TRANSCRIPT

Page 1: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

Google Web Toolkit

Assoc.Prof. Dr.Thanachart NumnondaAsst.Prof. Thanisa Kruawaisayawan

www.imcinstitute.comJuly 2012

Page 2: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

Agenda

RIA and AJAXWhat is Google Web Toolkit?GWT ImplementationGWT ComponentsGWT RPC

Page 3: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

RIA and AJAX?

Page 4: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

Rich Internet ApplicationsWeb applications that have the features and functionality of

traditional desktop applicationsTypically transfer the processing necessary for the user

interface to the web client but keep the bulk of the data back on the application server.

Make asynchronous/synchronous calls to thebackend based on user actions/events

Thick Client Application.

Page 5: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

Technologies for Building RIAsKey Technologies

– Adobe Flex– Microsoft Silverlight– Java

Applets/WebStart– AJAX

Other Technologies and Frameworks

– Java FX– Open Laszlo

Page 6: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

What is AJAX?Asynchronous JavaScript And XML.DHTML plus Asynchronous communication capability through

XMLHttpRequest.Pros

Most viable RIA technology so farTremendous industry momentumSeveral toolkits and frameworks are emergingNo need to download code & no plug-in required

ConsStill browser incompatibilityJavaScript is hard to maintain and debug.

Page 7: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

Why AJAX?Intuitive and natural user interaction.

No clicking requiredMouse movement is a sufficient event trigger

Partial screen update replaces the "click, wait, and refresh" user interaction model

Asynchronous communication replaces "synchronous request/response model."

Page 8: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

Uninterrupteduser operationwhile data is being fetched

Interrupted useroperation whilethe data is beingfetched

Page 9: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit
Page 10: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

Building RIAs using Java EE and AJAXClient Side AJAX Development

Presentation using HTML/JSP pages using client side frameworks such as Scriptaculous, JQuery, Dojo client side components.Presentation logic using JavaScript.Server Side development using traditional Java EE Servlets/Services exposing backend services as REST, XML RPC Web Services.Call backend business logic in the background using the JavaScript language and XMLHttpRequest object built into the browser.

Page 11: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

Building RIAs using Java EE and AJAXServer Side AJAX Development

Presentation using component frameworks JSTL tag libraries such as Jboss RichFaces, Icesoft Icefaces built on on top of JSFPresentation logic done as event handlers in JSF component modelCall to backend business logic using JSF event Model

Page 12: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

Challenges with typical AJAX developmentJavaScript

Not a strongly typed languageStatic Type checking?Code completion?Runtime-only bugs

Browser compatibilities = “if/else soup”Juggling multiple languages (JavaScript, JSP tags, Java, XML, HTML etc.)Poor debugging

Window.alert(), Firebug

Page 13: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

Sample Javascript

Page 14: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

What is Google Web Toolkit?

Page 15: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

What is GWT?

GWT is an open source Java development framework.Provides set of tools for building AJAX apps in the

Java language.GWT converts your Java source into equivalent

JavaScript

Page 16: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

History of Web Frameworks

Source : COMPARING KICK-ASS WEB FRAMEWORKS, Matt Raible

Page 17: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

Advantages of GWTNo need to learn/use JavaScript languageNo need to handle browser incompatibilities and quirksNo need to learn/use DOM APIsNo need to handle forward/backward buttons browser-historyNo need to build commonly used WidgetsCan send complex Java types to/from the serverLeverage various tools of Java programming language forwriting/debugging/testing

Page 18: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

Disadvantages of GWTOnly for Java developers.Big learning curveCumbersome deploymentNonstandard approach to integrate JavaScriptUnusual approach

Page 19: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

GWT Implementation

Page 20: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

GWT FeaturesA Basic API for creating Graphical User Interfaces (GUI)

Similar to Swing.API for Manipulating the Web browser's Document Object

Model (DOM).Java to JavaScript Compiler.

Only required to know Java, XML and CSS. No JavaScript. No HTML. No PHP/ASP/CGI.

An environment for running and debugging GWT applications called the GWT shell (Hosted Mode).

Page 21: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

GWT Application LayoutModule descriptor : module is the name GWT uses for an

individual application configuration.Public resources : these are all files that will be served publicly

(e.g. HTML page, CSS and images)Client-side code : this is the Java code that the GWT compiler

translates into JavaScript, which will eventually run inside the browser.

Server-side code (optional)—this is the server part of your GWT application

Page 22: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

Module DescriptorInherited modules : these entries are comparable to import

statements in normal Java classes, but for GWT applications.Entry point class : details which classes serve as the entry

points (class implements the EntryPoint interface)Source path entries : the module descriptor allows you to

customize the location of the client-side code.Public path entries : these allow you to handle public path

items such as source path entries.Deferred binding rules : more advanced setting

Page 23: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

Module Descriptor : Sample (Main.gwt.xml)

<?xml version="1.0" encoding="UTF-8"?>

<module>

<inherits name="com.google.gwt.user.User"/>

<entry-point class="org.thaijavadev.client.MainEntryPoint"/>

</module>

<?xml version="1.0" encoding="UTF-8"?>

<module>

<inherits name="com.google.gwt.user.User"/>

<entry-point class="org.thaijavadev.client.MainEntryPoint"/>

</module>

Page 24: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

The Entry Point ClassBefore we start building our user interface, we need to

understand the Entry Point Class.Think of this class as the main class of your application with

the java main() method that the JVM invokes first.The Entry Point class contains onModuleLoad() method which

is the method that the GWT compiler calls first.The class implements com.google.gwt.core.client.EntryPoint

interface.

Page 25: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

UI Components & Event : Samplepublic class ButtonExample implements EntryPoint {

public void onModuleLoad() {

final ToggleButton messageToggleButton = new ToggleButton("UP", "DOWN");

RootPanel.get().add(messageToggleButton);

Hyperlink alertLink = new Hyperlink("Alert", "alert");

alertLink.addClickListener(new ClickListener() {

public void onClick(Widget widget) {

if (messageToggleButton.isDown()) {

Window.alert("HELLLLP!!!!");

} else {

Window.alert("Take it easy and relax");

}

}

});

RootPanel.get().add(alertLink);

}

}

public class ButtonExample implements EntryPoint {

public void onModuleLoad() {

final ToggleButton messageToggleButton = new ToggleButton("UP", "DOWN");

RootPanel.get().add(messageToggleButton);

Hyperlink alertLink = new Hyperlink("Alert", "alert");

alertLink.addClickListener(new ClickListener() {

public void onClick(Widget widget) {

if (messageToggleButton.isDown()) {

Window.alert("HELLLLP!!!!");

} else {

Window.alert("Take it easy and relax");

}

}

});

RootPanel.get().add(alertLink);

}

}

Page 26: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

Public Resource (welcomeGWT.html) : Sample

<html>

<head>

<meta name='gwt:module' content='org.thaijavadev.Main=org.thaijavadev.Main'>

<link rel="stylesheet" href="Main.css"/>

<title>Main</title>

</head>

<body>

<script language="javascript" src="org.thaijavadev.Main/org.thaijavadev.Main.nocache.js"></script>

</body>

</html>

<html>

<head>

<meta name='gwt:module' content='org.thaijavadev.Main=org.thaijavadev.Main'>

<link rel="stylesheet" href="Main.css"/>

<title>Main</title>

</head>

<body>

<script language="javascript" src="org.thaijavadev.Main/org.thaijavadev.Main.nocache.js"></script>

</body>

</html>

Page 27: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

Public Resource (Main.css) : Sample

root {

display: block;

}

.gwt-Label {

font-size: 9px;

}

.gwt-Button, .gwt-TextBox, .gwt-PasswordTextBox {

font-size: 9px;

height: 19px;

width: 75px;

}

root {

display: block;

}

.gwt-Label {

font-size: 9px;

}

.gwt-Button, .gwt-TextBox, .gwt-PasswordTextBox {

font-size: 9px;

height: 19px;

width: 75px;

}

Page 28: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

GWT Components

Page 29: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

GWT Components

Page 30: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

Available widgetsHTML primitives (Button, Radio Button, Checkbox, TextBox,

PasswordTextBox, TextArea, Hyperlink, ListBox, Table etc.)PushButton, ToggleButtonMenuBarTreeTabBarDialogBox

Page 31: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

Available widgetsPanels (PopupPanel, StackPanel, HorizontalPanel,

VerticalPanel, FlowPanel, VerticalSplitPanel, HorizontalSplitPanel, DockPanel, TabPanel, DisclosurePanel)

RichTextAreaSuggestBox (auto-complete)

Page 32: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

Available widgets

Page 33: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

Available widgets

Page 34: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

UI components & Event Programming ModelProgramming model similar UI frameworks such as SwingPrimary difference between Swing and GWT is here widgets are

dynamically transformed to HTML rather than pixel-oriented graphics

Using widgets makes it much easier to quickly build interfaces that will work correctly on all browsers.

Events in GWT use the "listener interface" model similar to other user interface frameworks (like Swing)

Page 35: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

Entry Point Class : Samplepublic class MainEntryPoint implements EntryPoint {

public void onModuleLoad() {

final Label label = new Label("Hello, GWT!!!");

final Button button = new Button("Click me!");

button.addClickHandler(new ClickHandler() {

public void onClick(ClickEvent event) {

label.setVisible(!label.isVisible());

}

});

RootPanel.get().add(button);

RootPanel.get().add(label);

}

}

public class MainEntryPoint implements EntryPoint {

public void onModuleLoad() {

final Label label = new Label("Hello, GWT!!!");

final Button button = new Button("Click me!");

button.addClickHandler(new ClickHandler() {

public void onClick(ClickEvent event) {

label.setVisible(!label.isVisible());

}

});

RootPanel.get().add(button);

RootPanel.get().add(label);

}

}

Page 36: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

Simple Layout PanelsPanels are used to organize the layout of the various widgets

we have covered so far.GWT has several layout widgets that provide this functionalityThe simple Layout Panels include:

FlowPanelVerticalPanelHorizontalPanel

Page 37: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

FlowPanelIt functions like the HTML layoutChild widgets of the FlowPanel are displayed horizontally and

then wrapped to the next row down when there is not enough horizontal room left:

FlowPanel flowPanel = new FlowPanel();

for( int i = 1; i <= 20; i++ ) {

flowPanel.add(new Button("Button " + String.valueOf(i)));

}

RootPanel.get().add(flowPanel);

FlowPanel flowPanel = new FlowPanel();

for( int i = 1; i <= 20; i++ ) {

flowPanel.add(new Button("Button " + String.valueOf(i)));

}

RootPanel.get().add(flowPanel);

Page 38: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

HorizontalPanel and VerticalPanel

HorizontalPanel is similar to FlowPanel but uses scrollbar to display its widgets if there is no enough room instead of displacing to the next row

VerticalPanel organizes its child widgets in a vertical orientation

Page 39: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

DockPanel : Samplepublic class GWTasks implements EntryPoint {

public void onModuleLoad() {

DockPanel mainPanel = new DockPanel();

mainPanel.setBorderWidth(5);

mainPanel.setSize("100%", "100%");

mainPanel.setVerticalAlignment(HasAlignment.ALIGN_MIDDLE);

mainPanel.setHorizontalAlignment(HasAlignment.ALIGN_CENTER);

Widget header = createHeaderWidget();

mainPanel.add(header, DockPanel.NORTH);

mainPanel.setCellHeight(header, "30px");

Widget footer = createFooterWidget();

mainPanel.add(footer, DockPanel.SOUTH);

mainPanel.setCellHeight(footer, "25px");

Widget categories = createCategoriesWidget();

mainPanel.add(categories, DockPanel.WEST);

mainPanel.setCellWidth(categories, "150px");

Widget tasks = createTasksWidget();

public class GWTasks implements EntryPoint {

public void onModuleLoad() {

DockPanel mainPanel = new DockPanel();

mainPanel.setBorderWidth(5);

mainPanel.setSize("100%", "100%");

mainPanel.setVerticalAlignment(HasAlignment.ALIGN_MIDDLE);

mainPanel.setHorizontalAlignment(HasAlignment.ALIGN_CENTER);

Widget header = createHeaderWidget();

mainPanel.add(header, DockPanel.NORTH);

mainPanel.setCellHeight(header, "30px");

Widget footer = createFooterWidget();

mainPanel.add(footer, DockPanel.SOUTH);

mainPanel.setCellHeight(footer, "25px");

Widget categories = createCategoriesWidget();

mainPanel.add(categories, DockPanel.WEST);

mainPanel.setCellWidth(categories, "150px");

Widget tasks = createTasksWidget();

Page 40: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

DockPanel : Sample (Cont.)mainPanel.add(tasks, DockPanel.EAST);

RootPanel.get().add(mainPanel);

}

protected Widget createHeaderWidget() {

return new Label("Header");

}

protected Widget createFooterWidget() {

return new Label("Footer");

}

protected Widget createCategoriesWidget() {

return new Label("Categories List");

}

protected Widget createTasksWidget() {

return new Label("Tasks List");

}

}

mainPanel.add(tasks, DockPanel.EAST);

RootPanel.get().add(mainPanel);

}

protected Widget createHeaderWidget() {

return new Label("Header");

}

protected Widget createFooterWidget() {

return new Label("Footer");

}

protected Widget createCategoriesWidget() {

return new Label("Categories List");

}

protected Widget createTasksWidget() {

return new Label("Tasks List");

}

}

Page 41: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

DockPanel : Sample Output

Page 42: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

GWT-RPC

Page 43: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

Communication with the Server

GWT support communication between the client-side browser and the server via GWT-RPC and Basic Ajax.

GWT use asynchronous communication to provide the rich UI experience expected from RIAs.

The details of communicating a message between client and server and vice versa can be abstracted away by frameworks

GWT RPC allows you to program your communication by calling a method on a Java interface.

Page 44: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

GWT-RPCGWT extends a browser’s capability to asynchronously

communicate with the server by providing a remote procedure call (RPC) library.

Calls to the server are simplified by providing you with an interface of methods that can be called similarly to regular method calls.

GWT marshal the calls (convert to a stream of data) and send to the remote server.

At the server side, the data, is un-marshalled the method on the server is invoked

Page 45: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

GWT-RPCGWT uses a pure Java implementation.In GWT, the RPC library is divided into two packages:

com.google.gwt.user.client.rpc package used for client-side RPC support .com.google.gwt.user.server.rpc package used for server-side RPC support . The client side provides interfaces that you can use to tag.

When the client code is compiled to Javascript using the GWT compiler, the code required to do the RPC marshaling will be generated .

Page 46: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

RPC Plumbing Diagram

Page 47: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

Implementing GWT-RPC Services

Define an interface for your service that extends RemoteService and lists all your RPC methods.

Define a class to implement the server-side code that extends RemoteServiceServlet and implements the interface you created above.

Define an asynchronous interface to your service to be called from the client-side code.

Page 48: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

A client-side Java interface

Create a client-side Java interface that extends the RemoteService tag interface.

import com.google.gwt.user.client.rpc.RemoteService;

public interface MyService extends RemoteService {

public String myMethod(String s);

}

import com.google.gwt.user.client.rpc.RemoteService;

public interface MyService extends RemoteService {

public String myMethod(String s);

}

Page 49: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

Implement the remote method

Implement the service on the server-side by a class that extend RemoteServiceServlet.

import com.google.gwt.user.server.rpc.RemoteServiceServlet;

import com.example.client.MyService;

public class MyServiceImpl extends RemoteServiceServlet implements

MyService {

public String myMethod(String s) {

// Do something interesting with 's' here on the server.

return s;

}

import com.google.gwt.user.server.rpc.RemoteServiceServlet;

import com.example.client.MyService;

public class MyServiceImpl extends RemoteServiceServlet implements

MyService {

public String myMethod(String s) {

// Do something interesting with 's' here on the server.

return s;

}

Page 50: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

Asynchronous Interfaces

This interface defines the callback method that will be called when the server generates a response.

interface MyServiceAsync {

public void myMethod(String s, AsyncCallback<String> callback);

}}

interface MyServiceAsync {

public void myMethod(String s, AsyncCallback<String> callback);

}}

Page 51: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

Making an RPC from the client

Instantiate the service interface using GWT.create().Create an asynchronous callback object to be notified when

the RPC has completed.Make the call .

Page 52: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

Making a Call: Samplepublic class MainEntryPoint implements EntryPoint {

public MainEntryPoint() {

}

public void onModuleLoad() {

getService().myMethod("Hello World", callback);

}

final AsyncCallback callback = new AsyncCallback() {

public void onSuccess(Object result) {

Window.alert((String)result);

}

public void onFailure(Throwable caught) {

Window.alert("Communication failed");

}

};

public class MainEntryPoint implements EntryPoint {

public MainEntryPoint() {

}

public void onModuleLoad() {

getService().myMethod("Hello World", callback);

}

final AsyncCallback callback = new AsyncCallback() {

public void onSuccess(Object result) {

Window.alert((String)result);

}

public void onFailure(Throwable caught) {

Window.alert("Communication failed");

}

};

Page 53: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

Making a Call: Sample (Cont.)

public static MyServiceAsync getService(){

MyServiceAsync service = (MyServiceAsync) GWT.create(MyService.class);

ServiceDefTarget endpoint = (ServiceDefTarget) service;

String moduleRelativeURL = GWT.getModuleBaseURL() + "myservice";

endpoint.setServiceEntryPoint(moduleRelativeURL);

return service;

}

}

public static MyServiceAsync getService(){

MyServiceAsync service = (MyServiceAsync) GWT.create(MyService.class);

ServiceDefTarget endpoint = (ServiceDefTarget) service;

String moduleRelativeURL = GWT.getModuleBaseURL() + "myservice";

endpoint.setServiceEntryPoint(moduleRelativeURL);

return service;

}

}

Page 54: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

ResourcesBuilding Rich Internet Applications Using Google Web Toolkit

(GWT), Karthik Shyamsunder, Oct 2008.Introduction to Google Web Toolkit, Muhammad Ghazali.Official Google Web Tool Kit Tutorial,

http://code.google.com/webtoolkit/doc/latest/tutorial/Beginning Google Web Toolkit from Novice to Professional,

Apress, 2009

Page 55: Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

Thank you

[email protected]/imcinstitute

www.imcinstitute.com