GWT In-depth

AMInternet και Εφαρμογές Web

3 Δεκ 2011 (πριν από 5 χρόνια και 10 μήνες)

955 εμφανίσεις

Short Introduction to GWT Architectural Overview Simple Code Example MVC Code Example Server Communication using GWT – RPC Open source Libraries

GWT In
-
depth

Explained by Rohit Ghatol

(
rohitsghatol@gmail.com
)

http://pune
-
gtug.blogspot.com


Topics Covered


Short Introduction to GWT


Architectural Overview


Simple Code Example


MVC Code Example


Server Communication using GWT


RPC


Open source Libraries

Introduction to GWT

Read more on
GWT Overview Page

Key Features

Read more on
GWT Overview Page

Reusable UI
components

Really Simple
RPC

Cross browser
compatible

Javascript Native
Interface (JSNI)

Features

Key Features

Read more on
GWT Overview Page

Real Debugging

Internationalization

JUnit

Integration

Completely Open
source

Features

GWT Documentation Links


Developer's Guide


Fundamentals



User Interfaces



Remote Procedure Calls



Unit Testing



Internationalization



JavaScript Native Interface (JSNI)



JRE Emulation



GWT Class API



Install GWT

E:
\
Work
\
GWT
-
Demo>set PATH=e:
\
worksoft
\
gwt
-
windows
-
1.4.60;%PATH%


E:
\
Work
\
GWT
-
Demo>projectCreator
-
eclipse
SimpleDemo

Created directory E:
\
Work
\
GWT
-
Demo
\
src

Created directory E:
\
Work
\
GWT
-
Demo
\
test

Created file E:
\
Work
\
GWT
-
Demo
\
.project

Created file E:
\
Work
\
GWT
-
Demo
\
.classpath


E:
\
Work
\
GWT
-
Demo>applicationCreator
-
eclipse
SimpleDemo

com.gwt.demo.client.SimpleDemo

Created directory E:
\
Work
\
GWT
-
Demo
\
src
\
com
\
gwt
\
demo

Created directory E:
\
Work
\
GWT
-
Demo
\
src
\
com
\
gwt
\
demo
\
client

Created directory E:
\
Work
\
GWT
-
Demo
\
src
\
com
\
gwt
\
demo
\
public

Created file E:
\
Work
\
GWT
-
Demo
\
src
\
com
\
gwt
\
demo
\
SimpleDemo.gwt.xml

Created file E:
\
Work
\
GWT
-
Demo
\
src
\
com
\
gwt
\
demo
\
public
\
SimpleDemo.html

Created file E:
\
Work
\
GWT
-
Demo
\
src
\
com
\
gwt
\
demo
\
client
\
SimpleDemo.java

Created file E:
\
Work
\
GWT
-
Demo
\
SimpleDemo.launch

Created file E:
\
Work
\
GWT
-
Demo
\
SimpleDemo
-
shell.cmd

Created file E:
\
Work
\
GWT
-
Demo
\
SimpleDemo
-
compile.cmd



Demo GWT Project


Site
-

http://code.google.com/p/gwt
-
simple
-
demo/


Download demo project from
here

GWT Project Anatomy

GWT
-
Demo


+
src


+com/
gwt
/demo


SimpleDemo.gwt.xml


-

client



SimpleDemo.java


-

public



SimpleDemo.html

GWT Project Anatomy

SimpleDemo.gwt.xml


1.
Module XML Definition File

2.
Includes Project Dependencies

3.
Includes Entry Point

4.
Includes RPC
Servlet

Entry


SimpleDemo.java

1.
This is the Entry Point

2.
Entry Point is like Main Method

3.
Widgets are added to
RootPanel

SimpleDemo.html


1.
This is the final deliverable HTML/JSP/ASP/PHP

2.
Includes JS file for
SimpleDemo

3.
Includes
PlaceHolder

Elements


Shuffle Box Example

Shuffle Box Example

RootPanel

Shuffle Box Example

HorizontalPanel

Shuffle Box Example

VerticalPanel

Shuffle Box Example

Shuffle Box Example

Shuffle Box Example

new
ClickListener
(){


public void
onClick
(Widget sender) {


int

leftIndex
=
leftListBox.getSelectedIndex
();


if(
leftIndex
==
-
1){


Window.
alert
("Select an Item from Left List Box");


}


else{


String item=
leftListBox.getItemText
(
leftIndex
);


leftListBox.removeItem
(
leftIndex
);


rightListBox.addItem
(item);


}


}

}

Observable

# List observers

+
addObserver
(Observer
observer
)

+
removeObserver
(Observer
observer
)

+
notifyObservers
()

Observer

<<Interface>>

+ update(Observable model)





Notify

Register/Unregister

View Source for
Observable.java


View Source for
Observer.java

MVC Demo

MVC Demo

MVC Demo

# temperature

+
setTemp
(
int

temp)

+
int

getTemp
()

TempModel

# observers

+
addObserver
()

+
removeObserver
()

+
notifyObserver
()

Observerable

FahrView

CelsView

ThermoView

update(Observable mode)

Observer

MVC Demo

# temperature

+
setTemp
(
int

temp)

+
int

getTemp
()

TempModel

# observers

+
addObserver
()

+
removeObserver
()

+
notifyObserver
()

Observerable

FahrView

CelsView

ThermoView

update(Observable mode)

Observer

Renders

MVC Demo

# temperature

+
setTemp
(
int

temp)

+
int

getTemp
()

TempModel

# observers

+
addObserver
()

+
removeObserver
()

+
notifyObserver
()

Observerable

FahrView

CelsView

ThermoView

update(Observable mode)

Observer

Register

MVC Demo

# temperature

+
setTemp
(
int

temp)

+
int

getTemp
()

TempModel

# observers

+
addObserver
()

+
removeObserver
()

+
notifyObserver
()

Observerable

FahrView

CelsView

ThermoView

update(Observable mode)

Observer

User clicked
increment button

Changes

MVC Demo

# temperature

+
setTemp
(
int

temp)

+
int

getTemp
()

TempModel

# observers

+
addObserver
()

+
removeObserver
()

+
notifyObserver
()

Observerable

FahrView

CelsView

ThermoView

update(Observable mode)

Observer

Notifies

All the Views Update
themselves using
update() method

MVC Demo source files


FahrView.java


CelsView.java


ThermoView.java


TempModel.java

RPC Demo

RPC Demo

RPC Demo

RPC Classes Explained

LocationService

<<Interface>>

List
getStates
(String country)

LocationServiceImpl

List
getStates
(String country)

RemoteService

<<Interface>>

List
getStates
(String country)

RemoteServiceServlet

LocationServiceAsync

<<Interface>>

Void
getStates
(String country,
AsyncCallback

callback)

LocationServiceUtil

public static
LocationServiceAsync

getInstance
()

GWT

Magic

Glue

GWT Classes

RPC Classes Explained

AsyncCallback

<<Interface>>


void
onSuccess
(Object result);


void
onFailure
(
Throwable

caught);



LocationServiceUtil Code


Use GWT Glue to link
LocationService

and
LocationServiceAsync

classes



LocationServiceAsync

serviceAsync

= (
LocationServiceAsync
) GWT


.
create(
LocationService.
class
);



Set the Service’s Entry point (aka
url
)



((
ServiceDefTarget
)
serviceAsync
).
setServiceEntryPoint
(
GWT.
getModuleBaseURL
()
+


"/
LocationService
");



LocationServiceUtil Code

public class LocationServiceUtil {


public static LocationServiceAsync createService() {


LocationServiceAsync serviceAsync = (LocationServiceAsync) GWT


.
create(LocationService.
class);



((ServiceDefTarget) serviceAsync).setServiceEntryPoint(GWT.
getModuleBaseURL()
+


"/LocationService");


return serviceAsync;


}

}

RPC Client Code

LocationServiceAsync serviceAsync = LocationServiceUtil.
createService();

serviceAsync.getStates(country,
new AsyncCallback() {


public void onFailure(Throwable caught) {


Window.
alert("System Error!");

}


public void onSuccess(Object result) {

List list = (List) result;

statesListBoxModel.setEntries(list);

}

}

);

RPC related Links


Complete source code


LocationService.java


LocationServiceAsync.java


LocationServiceImpl.java


LocationServiceUtil.java


Client Code


RPC Tutorial


Extending Widgets for more events

onBrowserEvent
(Event
event
)

Widget

FocusWidget

ListBox

Extending Widgets for more events


Some Facts about ListBox widget


Following Listeners can be added


Change


Focus


Keyboard


Extends FocusWidget which extends Widget


ListBox does not receive a DoubleClick event as it
never sinks it.

Extending Widgets for more events


Some Facts about Widget class


A Widget needs to sink events in its constructor to
receive it


Widget class has an important method


void onBrowserEvent(Event event) which handles all
the events (eventually)



Extending Widgets for more events


Some Facts about Widget class


If a Widget needs to receive a DoubleClick event it
needs to call sinkEvents(Event.ONDBLCLICK)



If a Widget needs to handle this new DoubleClick
event it needs to override onBrowserEvent
method and handle this event



Extending Widgets for more events

#
dblClickListenerCollection

+
AdvListBox
()

#
onBrowserEvent
(Event
event
)

AdvListBox

ListBox

addDblClickListener
()

removeDblClickListener
()

fireDblClickEvent
(Widget sender)

DblClickListenerCollection

ArrayList

Void
onDoubleClick
(Widget sender)

DblClickListener

<<Interface>>

0..*

1

Extending Widgets for more events

public class AdvListBox extends ListBox {


private DoubleClickListenerCollection dblClickListeners = new DoubleClickListenerCollection();



public AdvListBox() {


this.sinkEvents(Event.
ONDBLCLICK);


}



public void onBrowserEvent(Event event) {


super.onBrowserEvent(event);


if(DOM.
eventGetType(event)==Event.ONDBLCLICK){


dblClickListeners.fireDoubleClickEvent(this);


}


}



public void add(DoubleClickListener listener) {


dblClickListeners.add(
listener);


}



public void remove(DoubleClickListener listener) {


dblClickListeners.remove(listener);


}

}

AdvListBox.java Source

Extending Widgets for more events

Source files



AdvListBox.java




AdvListBoxDemo.java




DoubleClickListener.java




DoubleClickListenerCollection.java

Open Source GWT Libraries Demos


MyGWT


Many Rich UI widgets


GWT
-
DND



Meant for drag and drop

MyGWT

GWT
-
DND