gwt prezentace

31.3.2008

Google Web Toolkit

Google Web Toolkit (GWT)

Úplně jiný javascriptový framework

Bc. Miroslav Hrúz, [email protected],www.javaee.cz/gwt

mailto:[email protected]

http://www.javaee.cz/gwt

31.3.2008 Google Web Toolkit 2

Co nás čeká?

• Úvod

• GWT API

• Hello world!

• UI komponenty, widgety a panely + kód

• Základní adresářová struktura a napojení

• Hosted mód, debugování client-side

• Request/response vs. AJAX

• AJAX v podání GWT + kód

• Stavíme vlastní komponenty

• Design větších aplikací

• Otázky / odpovědi

• Odkazy


Úvod

javascriptový framework od Google (bez povoleného JS se neobejdeme :)• UI komponenty, komunikace se serverem pomocí AJAXu

vývoj v Javě, kompilátor vše přeloží do Javascriptu =>• statická typová kontrola• silné IDE – refaktorování, code completion• unit testování, potažmo testem řízený vývoj (TDD)• statická analýza kódu• integrace s dnešními backendy (Spring, Hibernate, JSF)

díky hosted módu můžeme debugovat kód v prohlížeči (uvidíme za chvíli)

zaručeně kompatibilní s nejpoužívanějšími prohlížeči• IE 6+, FF 1.x+, Opera 8.5+, Safari 2.0.x


Úvod (pokr.)

reimplementace nejdůležitejších částí JRE API • primitivní typy (emulace long)• java.lang.*, java.util.*

komponentová UI library kompilátor J2JS web vs. hosted mód

• upravený firefox• reaguje na eventy, debugging

Java 1.4 :(• do příchodu GWT 1.5


GWT API


Hello world!

public class Hello implements public class Hello implements EntryPointEntryPoint { {

public void public void onModuleLoadonModuleLoad() {() {

Button b = new Button("Click me", new ClickListener() {Button b = new Button("Click me", new ClickListener() {

public void onClick(Widget sender) {public void onClick(Widget sender) {

Window.alert("Hello, AJAX");Window.alert("Hello, AJAX");

}}

});});

RootPanel.get().add(b);RootPanel.get().add(b);

}}

}}


UI komponenty, widgety a panely


UI komponenty - kód

DockPanel dock = new DockPanel();DockPanel dock = new DockPanel();

dock.setHorizontalAlignment(DockPanel.ALIGN_CENTER);dock.setHorizontalAlignment(DockPanel.ALIGN_CENTER);

HTML north0 = new HTML("This is the <i>first</i> north HTML north0 = new HTML("This is the <i>first</i> north component", true);component", true);

HTML south = new HTML("This is the south component");HTML south = new HTML("This is the south component");

dock.add(north0, DockPanel.NORTH);dock.add(north0, DockPanel.NORTH);

dock.add(south, DockPanel.SOUTH);dock.add(south, DockPanel.SOUTH);

RootPanel.get(“box-where-gwt-is-situated”).add(dock);RootPanel.get(“box-where-gwt-is-situated”).add(dock);


Základní adresářová strukturaa napojení

client (kód UI komponent) server (kód serverové části AJAXových komponent – viz. dále) public (html, css) name-of-application.gwt.xml (nastavení aplikace, výběr

implementací na základě typu prohlížeče, import GWT knihoven (i18n, history token, JSON,...))

<html><body><html><body>

<script language="javascript" src= <script language="javascript" src= "/gwt/your_application.gwt.YourApplication.nocache.js">"/gwt/your_application.gwt.YourApplication.nocache.js">

</script></script>

<div id="box-where-gwt-is-situated" ><div id="box-where-gwt-is-situated" >

<%-- here will be gwt module loaded--%><%-- here will be gwt module loaded--%>

</div></div></body></html></body></html>


Hosted mód, debugování client-side(demo?)


Request/response vs. AJAX

“AJAX (Asynchronous JavaScript and XML) je obecné označení pro technologie vývoje interaktivních webových aplikací, které mění obsah svých stránek bez nutnosti jejich znovunačítání. Na rozdíl od klasických webových aplikací poskytují uživatelsky příjemnější prostředí, ale vyžadují použití moderních webových prohlížečů.” (cs.wikipedia.org)

menší trafic vs. rychlejší připojení desktop-like Rich internet application (RIA) aka Web 2.0 nástupce dnešního internetu?, desktopových aplikací?


AJAX v podání GWT

RPC pomocí XMLHttpRequest, volání se jeví jako lokální => odstínění od celého HTTP.

Aplikační logika pomocí rozhraní AsychronousCallbackAsychronousCallback

• neblokující single-threaded kód


AJAX (pokr.) - klientský kód

YourService.Util.getInstance().yourBussinessMethod(param, new YourService.Util.getInstance().yourBussinessMethod(param, new AsyncCallback() {AsyncCallback() {

public void onFailure(Throwable e) {public void onFailure(Throwable e) {

logger.error(“error occured”, e);logger.error(“error occured”, e);

Window.alertError(“error occured”);Window.alertError(“error occured”);

}}

public void onSuccess(Object result) {public void onSuccess(Object result) {

logger.debug("return from server");logger.debug("return from server");

//and more logic continues //and more logic continues

}}

});});


Stavíme vlastní komponenty

low-level úroveň, v komentáři je JavaScript, měli bychom odladit pro všechny prohlížeče

public static native void redirect(String url)/*-{public static native void redirect(String url)/*-{

$wnd.location = url;$wnd.location = url;

}-*/;}-*/;

většinou stačí podědit od Composite, příp. od nějakého Panelu, vždy podle potřeby.


Design větších aplikací

Př: Aplikace členěna do mnoha úrovní, mnoha UI vrstev a netriviální aplikační logiky a chceme např:

A->B->server->B, na základě response od serveru změnit obsah A nutnost využívat návrhové vzory (vlastní události, stav,

strategie, memento, chain of responsibility) uvědomit si strukturu AJAXových volání, kdy se dějí věci

asynchronně, není zaručeno, že požadavky na/ze serveru dojdou ve stejném pořadí• vnořováním vlastních “Callbacků” realizujeme sekvenční

význam předáním kódu tomu, kdo ho bude provádět.

http://objekty.vse.cz/Objekty/Vzory


Otázky / odpovědi

?


Zeptám se já...

Slyšeli jste o GWT dnes poprvé? Jmenujte pro Vás (alespoň) 3 výhody řešení

postaveném na GWT? Využili by jste jej na nějakou aplikaci? Uvítali by jste “nasetupovaný” hello world,

řekněme o funkcionalitě CRUD s• GWT (Hibernate4gwt, gwt-sl), Spring, Hibernate,

maven?


Odkazy

base site (en)• http://code.google.com/webtoolkit/

sample applications – distribuované spolu s GWT• kitchen sink, mail, dynatable, simple xml

lehký úvod do GWT od R.Pichlíka (cz)• http://interval.cz/clanky/google-web-toolkit/

seznam tutoriálů o GWT (en)• http://blogs.pathf.com/agileajax/2007/07/36-gwt-tutorial.html

Rešerše (+ impl.) také o server side části na platformě Java• https://dip.felk.cvut.cz/browse/pdfcache/hruzm1_2007bach.pdf• https://dip.felk.cvut.cz/browse/pdfcache/racanl1_2007bach.pdf

http://code.google.com/webtoolkit/

http://interval.cz/clanky/google-web-toolkit/

http://blogs.pathf.com/agileajax/2007/07/36-gwt-tutorial.html

https://dip.felk.cvut.cz/browse/pdfcache/hruzm1_2007bach.pdf

https://dip.felk.cvut.cz/browse/pdfcache/racanl1_2007bach.pdf


Děkuji za pozornostp0rn.bat

gwt prezentace

Education