papick g. taboada - OIO€¦ · p.g.taboada | pgt technology scouting GmbH Google Web Toolkit...

p.g.taboada | pgt technology scouting GmbH

Google Web Toolkit Einführung

Dienstag, 7. Dezember 2010

© 2010 P. G. Taboada | pgt technology scouting GmbH | http://pgt.de

papick g. taboadaDienstag, 7. Dezember 2010


hackerDienstag, 7. Dezember 2010


hackerDienstag, 7. Dezember 2010


dipl. w.-ing. (TH)hacker









more magic developerDienstag, 7. Dezember 2010


technology scoutDienstag, 7. Dezember 2010





Session

Topics

�Why GWT?

�Development Cycle

�Components and events

�Client Bundles

�UIBinder

�Communicating with the server

� I18N



Web 2.0 ?!?Dienstag, 7. Dezember 2010


Web 2.0 by apps?Dienstag, 7. Dezember 2010


Web 2.0 by buzzwords?Dienstag, 7. Dezember 2010


Web 2.0 by technologies?Dienstag, 7. Dezember 2010


Web 2.0 by what we seeDienstag, 7. Dezember 2010


MashupsDienstag, 7. Dezember 2010


But how?!?Dienstag, 7. Dezember 2010


Dynamic HTML

JavaScript

DOM/ DOM-Scripting

XMLHttpRequest

HTML

XML

JSON



Native DHTML speakers

co

pyrig

ht 2

00

6, L

ela

nd

Sco

tt, M

usin

gs fro

m M

ars


The Ajax slippery slope� Try “a little bit of script”

� Every body loves it!

�More!!!

� Errr - Do we know Javascript?

� Does it work with…

�Wait – this is hard!


Fear browsers with all of mind, body and spirit

When in danger, when in doubt, run in circles cry and shout



HTML 5 here and now

Vic GundotraGoogle IO Keynote

HTML5 Chrome Firefox Safari Opera

canvas

video

geolocation

appcache

database

workers


The web THENand now

� Browsers where dumb html terminals

� High server side resource consumption



Browser Server

event

event

event

full html response

full html response

full html response



Browser Server

event

event

event

full html response

full html response

full html response



Browser Server

event

event

event

full html response

full html response

full html response



Browser Server

event

event

event

full html response

full html response

full html response


something to remember

web performance problems

are

latency problems



Ajaxifying Webapps

http://breganzane.com/blog/snfl.php



Ajaxifying Webapps

http://breganzane.com/blog/snfl.php



The „ajax“ architectural shift


The web then and NOW

� Rich user interfaces in the Browser

� Server resource consumption reduced to a minimum



Browser Server

event

first request

full html response

data

data request

data

data request

event

event

event



honour the A in AJAX

JAX




JAX

AJAX stands for Asynchronous

JavaScript and XML




JAX


JavaScript and XML




JAX


JavaScript and XML

or JSON...



Google Web Toolkit

Google Web Toolkit (GWT) is an open source Java development framework that lets you escape the matrix of technologies that make writing AJAX applications so difficult and error prone.

With GWT, you can develop and debug AJAX applications in the Java language using the Java development tools of your choice. When you deploy your application to production, the GWT compiler translates your Java application to browser-compliant JavaScript and HTML.



GWT

Google Web Toolkit (GWT) is an open source Java development framework that lets you escape the matrix of technologies that make writing AJAX applications so difficult and error prone.

With GWT, you can develop and debug AJAXapplications in the Java language using the Java development tools of your choice. When you deploy your application to production, the GWT compilertranslates your Java application to browser-compliant JavaScript and HTML.



google is „dogfooding“Dienstag, 7. Dezember 2010


Standalone JS appsDienstag, 7. Dezember 2010


JS app can be anythingDienstag, 7. Dezember 2010

GWT does more than just

compile.� Much more.

� The sky is the limit?



Helping where help is neededDienstag, 7. Dezember 2010


Performance twirksDienstag, 7. Dezember 2010


compress / obfuscateDienstag, 7. Dezember 2010


connection bottleneckDienstag, 7. Dezember 2010


SpritesDienstag, 7. Dezember 2010


project layout vs. deployment layout

!=



Developer guided splitsDienstag, 7. Dezember 2010


Splitting the appDienstag, 7. Dezember 2010


Generated deferred JSDienstag, 7. Dezember 2010


GWT is extensible

� Module concept� Extensible GUI model� Code Generator� JSNI


Session

Topics

�Why GWT?



�Client Bundles

�UIBinder


� I18N



unboxing

SDK

GWT designer Plugin for Eclipse

Speed Tracer



GWT SDKDienstag, 7. Dezember 2010


development cycleDienstag, 7. Dezember 2010


Develop in JavaDienstag, 7. Dezember 2010


Develop in JavaDienstag, 7. Dezember 2010


Develop in Java

Checkstyle



Develop in Java

Checkstyle

Findbugs, PMD



Develop in Java

Checkstyle

Findbugs, PMD

Patterns



Develop in Java

Checkstyle

Findbugs, PMD

Patterns

Unit testing



Develop in Java

Refactoring!

Checkstyle

Findbugs, PMD

Patterns

Unit testing



it‘s about engineeringDienstag, 7. Dezember 2010


One click startDienstag, 7. Dezember 2010


Use the webappDienstag, 7. Dezember 2010


Debug in JavaDienstag, 7. Dezember 2010


Cross compile to JSDienstag, 7. Dezember 2010


DistributeDienstag, 7. Dezember 2010


enabling short roundtrips

GWT Can Do What?!?! A Preview of Google Web Toolkit 2.0



Hello WorldDienstag, 7. Dezember 2010

Session

Topics

�Why GWT?



�Client Bundles

�UIBinder


� I18N



GUI component model

UIObject

Widget

FocusWidget Label Panel Tree Composite

ListBox

Button

TextBox/ Area

Checkbox

RadioButton

HTML DecoratorPanel

FlowPanel

DockPanel

VerticalPanel

HorizontalPanel

MenuBar

DatePicker

DateBox

DisclosurePanel

SuggestBox

TabPanel

MenuItem TreeItem

CaptionPanelAbsolutePanel

DeckPanel

StackPanel

HTMLPanel

SimplePanel

FocusPanelFormPanel

PopupPanel

ScrollPanel

InlineLabel



No-Eye-Candy-ShowcaseDienstag, 7. Dezember 2010


Facing the layout problemDienstag, 7. Dezember 2010


Layout PanelsDienstag, 7. Dezember 2010






Composite component

public class HandlerExample extends Composite implements ClickHandler {

private FlowPanel fp = new FlowPanel();

private Button b1 = new Button("Button 1");


public HandlerExample() {

� initWidget(fp);

� fp.add(b1);

� fp.add(b2);

� b1.addClickHandler(this);


}

public void onClick(ClickEvent event) {

� // note that in general, events can have sources that are not Widgets.

� Widget sender = (Widget) event.getSource();

� if (sender == b1) {

� � // handle b1 being clicked

� } else if (sender == b2) {


� }

}

}


// note that in general, events can have sources that are not Widgets.

Widget sender = (Widget) event.getSource();

if (sender == b1) {

// handle b1 being clicked

} else if (sender == b2) {

// handle b2 being clicked

}

}

b1.addClickHandler(this);

b2.addClickHandler(this);

implements ClickHandler



Eventhandling

public class HandlerExample extends Composite implements ClickHandler {

private FlowPanel fp = new FlowPanel();



public HandlerExample() {

� initWidget(fp);

� fp.add(b1);

� fp.add(b2);



}


� // note that in general, events can have sources that are not Widgets.

� Widget sender = (Widget) event.getSource();

� if (sender == b1) {


� } else if (sender == b2) {


� }

}

}

extends Composite

initWidget(fp);

fp.add(b1);

fp.add(b2);

private FlowPanel fp = new FlowPanel();l l()



Custom event

public class HelloWorldMessageSentEvent

� � extends com.google.gwt.event.shared.GwtEvent<HelloWorldMessageSentEvent.Handler> {

public static interface Handler extends

� � � com.google.gwt.event.shared.EventHandler {

� � void someHelloMessageDidArrive(HelloWorldMessageSentEvent event);

}

public static final Type<Handler> TYPE = new Type<Handler>();

public final String messageToTheWorld;

public HelloWorldMessageSentEvent(String messageToTheWorld) {

� � this.messageToTheWorld = messageToTheWorld;

}

@Override

protected void dispatch(Handler handler) {

� � handler.someHelloMessageDidArrive(this);

}

@Override

public Type<Handler> getAssociatedType() {

� � return TYPE;

}

}

p g

extends com.google.gwt.event.shared.GwtEvent<HelloWorldMessageSentEvent.Handler>


com.google.gwt.event.shared.EventHandler {

void someHelloMessageDidArrive(HelloWorldMessageSentEvent event);

}

public static final Type<Handler> TYPE = new Type<Handler>();w

@Override


handler.someHelloMessageDidArrive(this);

}

@Override


return TYPE;

}



Custom handler






}





}

@Override



}

@Override



}

}

public static final Type<Handler> TYPE = new Type<Handler>();w



this.messageToTheWorld = messageToTheWorld;

}

@Override


handler.someHelloMessageDidArrive(this);

}

@Override


return TYPE;

}

}


extends com.google.gwt.event.shared.GwtEvent<HelloWorldMessageSentEvent.Handler> {

p

com.google.gwt.event.shared.EventHandler

r extendsstatic



Putting it together






}





}

@Override



}

@Override



}

}


Session

Topics

�Why GWT?



�Client Bundles

�UIBinder


� I18N



Client bundlesImage,Text,Data,CSS

Resources



Resources in the classpath!



Defining the interface

public interface MyAppResources extends ClientBundle {

@Source("style.css")

MyCss myStyle();

@Source("despair.json")

TextResource despairQuotes();

@Source("BestPracticesForArchitectingYourGWTApp.pdf")

DataResource bestPracticesForArchitectingYourGWTApp();

@Source("GWTCanDoWhat.pdf")

DataResource gwtCanDoWhat();

@Source("European_Union_32.png")

ImageResource European_Union_32();



Using the resources

public class ImageBundlePanel extends SimplePanel {

� public static final ImageBundlePanel INSTANCE = new ImageBundlePanel();

� private final MyAppResources BUNDLE = GWT.create(MyAppResources.class);

� private final FlexTable table = new FlexTable();

� public ImageBundlePanel() {

� � table.setCellSpacing(5);

� � table.setCellPadding(5);

� � int row = 0;

� � ImageResource europeanUnion_64 = BUNDLE.European_Union_64();

� � addRow(row++, new Image(europeanUnion_64), new Label("European Union"));

� � addRow(row++, new Image(BUNDLE.Portugal_64()), new Label("Portugal"));

� � addRow(row++, new Image(BUNDLE.Germany_64()), new Label(

� � � � "European Union"));

� � this.setWidget(table);

� }

� private void addRow(int row, Image image, Label label) {

� � table.setWidget(row, 0, label);

� � table.setWidget(row, 1, image);

� }

}

public static final ImageBundlePanel INSTANCE = new ImageBundlePanel();w

private final FlexTable table = new FlexTable();w

table.setCellSpacing(5);

table.setCellPadding(5);

int row = 0;

ImageResource europeanUnion_64 = BUNDLE.European_Union_64();

addRow(row++, new Image(europeanUnion_64),w new Label(w "European Union"));

addRow(row++, new Image(w BUNDLE.Germany_64()), new Label(w

"European Union"));

this.setWidget(table);

addRow(row++,

(

ddR ( ++

, new Label(w "Portugal"));

( p

" "

L b l(

private void addRow(int row, Image image, Label label) {

table.setWidget(row, 0, label);

table.setWidget(row, 1, image);

}


Session

Topics

�Why GWT?



�Client Bundles

�UIBinder


� I18N



Declarative user interfacesDienstag, 7. Dezember 2010


UI BindingDienstag, 7. Dezember 2010


CSS with conditionalsDienstag, 7. Dezember 2010





Session

Topics

�Why GWT?



�Client Bundles

�UIBinder


� I18N



One RequestBuilder to call them all



Load data from server

String url = "/data/colors.json";

RequestBuilder builder = new RequestBuilder(RequestBuilder.GET, url);

RequestCallback callback = new RequestCallback() {

public void onError(Request request, Throwable exception) {// ...

}

public void onResponseReceived(Request request, Response response) {if (200 == response.getStatusCode()) {

String payload = response.getText();}

}};

try {

Request request = builder.sendRequest(null, callback);

} catch (RequestException e) {

// ...}



Connecting to the enterpriseDienstag, 7. Dezember 2010


RPC Plumbing DiagramDienstag, 7. Dezember 2010


sync interface

@RemoteServiceRelativePath("echo")

public interface EchoService extends RemoteService {

String echo(String name);

}



async interface

public interface EchoServiceAsync {

void echo(String name, AsyncCallback<String> callback);

}



implementation

public class EchoServiceImpl extends RemoteServiceServlet implements EchoService {

@Override

public void init(ServletConfig config) throws ServletException {super.init(config);

// Eigene Initialisierung hier einbinden

}

public String echo(String name) {

System.out.println("Got message from: " + name);

return name.toUpperCase();}

}

@Override


// Eigene Initialisierung hier einbinden

}



it‘s a servlet!

public class EchoServiceImpl extends RemoteServiceServlet implements EchoService {

@Override


}

public String echo(String name) {

System.out.println("Got message from: " + name);

return name.toUpperCase();}

}



using the service

EchoServiceAsync echoService = GWT.create(EchoService.class);

// (...)

echoService.echo("Hello!", new AsyncCallback<String>() {

public void onFailure(Throwable caught) {

� � GWT.log("echo service failed", caught);

}

public void onSuccess(String result) {

� � GWT.log("Got echo: " + result);

� � �

}

});


Session

Topics

�Why GWT?



�Client Bundles

�UIBinder


� I18N



permutationsDienstag, 7. Dezember 2010


using i18n messages

public class HelloI18N implements EntryPoint {

private AppConstants appConstants = GWT.create(AppConstants.class);private ErrorMessages errorMessages = GWT.create(ErrorMessages.class);

/**

* This is the entry point method. */

public void onModuleLoad() {VerticalPanel panel = new VerticalPanel();

panel.add(new Label("" + appConstants.hello()));

panel.add(new Label(appConstants.goodbye()));

panel.add(new Label(errorMessages.serverFailed("hello", 13)));

RootPanel.get().add(panel);

GWT.log(Dictionary.getDictionary("runtimeSettings").get("version"));

}

}



defining the interface

@DefaultLocale("us")

@Generate(format = "com.google.gwt.i18n.rebind.format.PropertiesFormat")

public interface AppConstants extends Constants /* ...WithLookup */{

@Description("Hello message.")

@Meaning("Funny simple hello message needed on the hello i18n sample.")

@DefaultStringValue("Hello i18n World-xxxxxxxxx")

String hello();

@DefaultStringValue("Goodbye!")

String goodbye();

@DefaultIntValue(42)

int errorCode();

@DefaultIntValue(42)

int warningCode();

@Description("Error 13. Real bad thing.")

@Meaning("Shut down the server. Now. And run.")

@DefaultStringValue("13. Rums.")

String error_13();

}



generated property file

# Generated from de.oio.gwt.i18n.client.messages.AppConstants

# for locale us

errorCode=12

# Description: Error 13. Reald bad thing.

# Meaning: Shut down the server. Now.

error_13=13. Rums.

goodbye=Goodbye\!

# Description: Hello message.

# Meaning: Funny simple hello message needed on the hello i18n

sample.

hello=Hello i18n World-xxxxxxxxx

warningCode=42



there is one more thing...Dienstag, 7. Dezember 2010


... one more sessionbest practices

what‘s in GWT 2.1

tomorrow!



Thanks!Dienstag, 7. Dezember 2010


mehr von OIO zum Thema

Schulung: Einführung in GWThttp://www.oio.de/google-web-toolkit-schulung.htm

Artikel: Google Web Toolkit: Webanwendungen mit GWT entwickelnhttp://www.oio.de/public/opensource/gwt/google-web-toolkit.pdf

Schulung: Design Patterns mit Javahttp://www.oio.de/seminar/methodik-prozess-management-soft-skills/training-

java-kurs-design-patterns-schulung.htm


papick g. taboada - OIO€¦ · p.g.taboada | pgt technology scouting GmbH Google Web Toolkit...

Documents

Transcript of papick g. taboada - OIO€¦ · p.g.taboada | pgt technology scouting GmbH Google Web Toolkit...