Google Web Toolkit: Advanced Topics

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

19 Ιουλ 2012 (πριν από 5 χρόνια και 3 μέρες)

268 εμφανίσεις

Copyright © Clarity Training, Inc. 2008-2009
Google Web Toolkit: Advanced Topics
David Geary
President
Clarity Training, Inc.
clarity.training@gmail.com
Copyright © Clarity Training, Inc. 2008-2009
JSF
David Geary
Copyright © Clarity Training, Inc. 2008-2009

How to implement custom widgets

How to implement drag and drop

How to implement a viewport class

How to integrate GWT widgets with legacy frameworks
In this session, you will learn
Copyright © Clarity Training, Inc. 2008-2009

Custom widgets

Drag and drop

Viewports and maps

Integrating GWT with legacy frameworks
Agenda
Copyright © Clarity Training, Inc. 2008-2009

Composite
widgets

Extend
Composite
(which extends
Widget
)

Compose widgets from existing widgets

Low-level
widgets

Extend
Widget

Create and manipulate DOM elements
Two kinds of custom widgets
Copyright © Clarity Training, Inc. 2008-2009
abstract public class AutoCompleteTextBox extends
Composite
{
private final
TextBox
textBox = new TextBox();
private final
ListBox
listBox = new ListBox();
private final
PopupPanel
popupPanel = new PopupPanel();
...
public AutoCompleteTextBox() {

initWidget
(textBox);
...
}
...
public String getText() { // A pass-through method
return textBox.getText();
}
...
}

A composite component
Copyright © Clarity Training, Inc. 2008-2009

Most GWT built-in widgets are low-level

When existing widgets aren’t sufficient

Better performance than composite widgets

Extend the
Widget
class

Use the
DOM
class
Low-level custom widgets
Copyright © Clarity Training, Inc. 2008-2009
public class Message extends
Widget
{
public Message() {
setElement(
DOM.createDiv()
);

setStyleName
("gwtsolutions-Message");
}
public void setText(String text) {

DOM.setInnerText
(getElement(), text);
}
public void
setVisible
(boolean visible) {

super.setVisible
(visible);
if (visible) {

applyEffect
(getElement(), effect, duration);
}
}
}

A low-level widget
Copyright © Clarity Training, Inc. 2008-2009

The
DOM
class has more than 80 methods

Three types of methods

HTML element creation, eg: createAnchor(), createDiv(), etc.

DOM manipulation, eg: appendChild(Element parent, Element child)

Event methods, eg: eventGetTarget(Event), eventGetType(Event)
The DOM class
Copyright © Clarity Training, Inc. 2008-2009
Demonstration
Copyright © Clarity Training, Inc. 2008-2009

Custom widgets

Drag and drop

Viewports and maps

Integrating GWT with legacy frameworks
Agenda
Copyright © Clarity Training, Inc. 2008-2009

GWT does not currently explicitly support drag and drop

You can implement drag and drop in under 50 LOPJC

The players

AbsolutePanel

FocusPanel

MouseListener
Drag and drop particulars
Copyright © Clarity Training, Inc. 2008-2009
public class DragPanel extends
AbsolutePanel
{
private static final MouseDragger
defaultDragger
=
new
FollowsMouseDragger
();
public void add(Widget widget) {
super.add(
wrapWidget
(widget)); //
wrap widget in focus panel
}
protected Panel wrapWidget(Widget widget) {

FocusPanel
fp = new FocusPanel();
fp.add(widget);
fp.addMouseListener(getMouseDragger());
return fp;
}
protected MouseListener getMouseDragger() {
return
defaultDragger
;
}
}

A drag panel
Copyright © Clarity Training, Inc. 2008-2009
public void
onMouseDown
(Widget draggable, int x, int y) {
xoffset = x;
yoffset = y;

DOM.setCapture(draggable.getElement());
dragging = true;
}
On mouse down
Copyright © Clarity Training, Inc. 2008-2009
public void
onMouseMove
(Widget draggable, int x, int y) {
if (dragging) {

AbsolutePanel
p = (AbsolutePanel)draggable.getParent();

p.setWidgetPosition(draggable,

x + p.getWidgetLeft(draggable) - xoffset,
y + p.getWidgetTop(draggable) - yoffset);
}
}
On mouse move
Copyright © Clarity Training, Inc. 2008-2009
public void
onMouseUp
(Widget draggable, int x, int y) {
dragging = false;

DOM.releaseCapture(draggable.getElement());
}
On mouse up
Copyright © Clarity Training, Inc. 2008-2009

Manipulate the browser’s DOM

setCapture(Element)

releaseCapture(Element)

scrollIntoView(Element)

addEventPreview(EventPreview)

removeEventPreview(EventPreview)
More DOM methods
Copyright © Clarity Training, Inc. 2008-2009
Demonstration
Copyright © Clarity Training, Inc. 2008-2009

Custom widgets

Drag and drop

Viewports and maps

Integrating GWT with legacy frameworks
Agenda
Copyright © Clarity Training, Inc. 2008-2009

Many uses for viewports:

Maps

Scrolling backgrounds for games

Apple’s iPhone

GWT does not have a Viewport class, but...

...you can implement one in ~100 LO
PJ
C!
Viewports
Copyright © Clarity Training, Inc. 2008-2009
public class
MousePanel
extends
SimplePanel

implements
SourcesMouseEvents
{
private
MouseListenerCollection
mouseListeners = null;

public MousePanel() {
super();

sinkEvents
(Event.MOUSEEVENTS);
}
public void onBrowserEvent(Event event) {
if (mouseListeners != null)

mouseListeners.fireMouseEvent
(this, event);
}
public void addMouseListener(MouseListener listener) {...}
public void removeMouseListener(MouseListener listener) {...}
The mouse panel
Copyright © Clarity Training, Inc. 2008-2009
public class Viewport extends
AbsolutePanel
{
private
MousePanel
mousePanel = new MousePanel();
public Viewport() {

add(mousePanel);
// Add the mouse panel to the absolute panel
...
mousePanel.addMouseListener(new MouseListenerAdapter() {
// A good deal of code to let the user drag the view, in addition
// to user gesture implementation
});
}
...
public void setView(Widget view) {
mousePanel.
setWidget(view);
}
}
The viewport
Copyright © Clarity Training, Inc. 2008-2009
Demonstration
Copyright © Clarity Training, Inc. 2008-2009

In about 350 LOPJC, the viewport widget can:

Specify any widget as the viewport's view

Drag the view with the mouse

Configure user gestures for animated scrolling, much like Apple’s iPhone:

Quick mouse drag (less than 1/2 second)

Animate scrolling in the direction of the drag

Scrolling speed is relative to drag speed
Viewport features
Copyright © Clarity Training, Inc. 2008-2009

Custom widgets

Drag and drop

Viewports and maps

Integrating GWT with legacy frameworks
Agenda
Copyright © Clarity Training, Inc. 2008-2009

There’s lots of legacy code out there

Struts, JSF, Tapestry, Grails, etc.

Incorporate GWT into legacy applications

Add GWT widgets to existing views

Replace existing views with GWT pages
GWT and legacy code
Copyright © Clarity Training, Inc. 2008-2009
http://www.cohomefinder.com
A real-world example
Copyright © Clarity Training, Inc. 2008-2009

In HTML or JSP pages:

Add a
script
tag that includes your application’s non-cached JavaScript file

Add HTML elements that act as
slots

In your GWT module’s entry point:

Create widget(s)

Insert widget(s) into
slots
Add GWT widgets to JSP or HTML
Copyright © Clarity Training, Inc. 2008-2009
...
<script language="javascript"

src='com.gwtsolutions.StrutsLogin.nocache.js'
></script>
...
<p>
<table>
<tr><td><div id="
showButton
"/></td></tr>
<tr><td><div id="
hideButton
"/></td></tr>
<tr><td><div id=”
calculator
”></td></tr>
</table>
</p>
...
A JSP page
Copyright © Clarity Training, Inc. 2008-2009
public class StrutsLogin implements EntryPoint {
public void onModuleLoad() {
// Create widgets
final MortgageCalculator mc = new MortgageCalculator();
final Button showButton = new Button("show calculator");
final Button hideButton = new Button(”hide calculator");
// Put widgets in slots
RootPanel.get("
showButton
").add(showButton);
RootPanel.get("
hideButton
").add(hideButton);
RootPanel.get("
calculator
").add(mc);
...
}
}
The GWT module
Copyright © Clarity Training, Inc. 2008-2009
Demonstration
Copyright © Clarity Training, Inc. 2008-2009
Questions