Základy GWT

Google Web Toolkit

Wednesday, March 17, 2010

Google Web Toolkit
GWT


Úvod


Úvod
• GWT je javascriptový framework


Úvod
• Vývoj v JAVE (kompilátor preloží do JS)


Úvod
• silné IDE - refaktor, code completion


Úvod
• unit testovanie, moznosť TDD


Úvod
• unit testovanie, moznosť TDD
• integrácia s backendami (Spring,
Hibernate, JSF a ďalšie)


Úvod

• debug kódu v prehliadači


Úvod

• kompatibilita


Úvod

• kompatibilita
• IE 6+, FF 1.x+, Opera 8.5+, Safari 2.0.x


Hello world!
public class HelloApp implements EntryPoint {
public void onModuleLoad() {
Button b = new Button("Click me", new ClickListener() {
public void onClick(Widget sender) {
Window.alert("Hello world!");
}
}
RootPanel.get().add(b);
}
}


Widgets

Panels

Project Layout
• module base

• .client - kód ktorý sa
kompiluje do JS

• .server - java kód ktorý
nebude kompilovaný do
JS (ale bude pristupný
iba na serveri)

• .public - resources


Module
• XML súbor MyApp.gwt.xml
• source
• super source
• deferred binding
• inherited modules
• entry point

Module XML
<module>
<inherits name="com.google.gwt.user.User" />
<inherits name="com.google.gwt.user.theme.standard.Standard" />

<entry-point class="com.your.application.client.HelloApp" />

<script src=”someScript_inside_PublicFolder.js” />
<stylesheet src=”publicFolderRelativeURL_OR_HttpFullPath.css”/>

<source path=”shared” />
<super-source path=”jre” />
<module>


Module - source
• <source src=”client” />
• com.app.Module.gwt.xml
• com.app.client.* - kód ktorý sa bude
kompilovať
• com.app.other* alebo com.other.*- na
tento kód gwt neuvidí a nebude sa
kompilovať do JS


Module - super-source

• <super-source src=”jre” />
• com.app.Module.gwt.xml
• com.app.jre.java.util.UUID.java -
kompilátor to uvidí ako
java.util.UUID.java


Module - deferred

<replace-with class="com.google.gwt.user.client.ui.impl.PopupImpl">
<when-type-is class="com.google.gwt.user.client.ui.impl.PopupImpl"/>
</replace-with>


<replace-with class="com.google.gwt.user.client.ui.impl.PopupImplMozilla">
<when-type-is class="com.google.gwt.user.client.ui.impl.PopupImpl" />
<any>
<when-property-is name="user.agent" value="gecko"/>
<when-property-is name="user.agent" value="gecko1_8" />
</any>
</replace-with>

Module - deferred
PopupImpl impl = GWT.create(PopupImpl.class);
impl.callSomeMethod();
}
}


Index.html
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Web Application Starter Project</title>

<script type="text/javascript" language="javascript"
src="com.your.application.client.HelloApp.nocache.js"></script>
</head>
<body>
<h1>GWT content</h1>
<div id=”gwt-main-container”></div>
<div id=”gwt-sub-container”></div>
</body>
</html>


Hello world!
Button b = new Button("Click me", new ClickListener() {
public void onClick(Widget sender) {
Window.alert("Hello world!");
}
}
RootPanel.get(“gwt-main-container”).add(b);
}
}


Index.html
<body>
<h1>GWT content</h1>
<div id=”gwt-main-container”>
<button
type=”button”
tabindex=”0”
class=”gwt-Button”>Click me</button>
</div>
<div id=”gwt-sub-container”></di
</body>


Debug


Request Response


AJAX

• AJAX (Asynchronous JavaScript and XML) mení obsah
stránky bez nutnosti znovunačítania

• RIA (desktop-like Rich Internet Application) aka WEB 2.0


AJAX v podani GWT


AJAX v podani GWT
/ some code ﬂow
/

/ GWT.create(YourService.class);
/
YourService.Util.getInstance().method(param, new AsyncCallback() {
public void onFailure(Throwable e) {
Window.alertError(“error occured”);
}

public void onSuccess(Object result) {
/ and more logic continues
/
/ process the result
/
}
});


Client Bundles

• obrázky - multi-obrázok (jeden request)
• minimalizuje chyby medzi ﬁlename-om a
konštantou

• rozširiteľný design pre nové resource typy


Client Bundles
<inherits name="com.google.gwt.resources.Resources" />

public interface MyResources extends ClientBundle {
public static final MyResources INSTANCE = GWT.create
(MyResources.class);

@Source("my.css")
public CssResource css();

@Source("config.xml")
public TextResource initialConfiguration();

@Source("manual.pdf")
public DataResource ownersManual();


Client Bundles
/ Inject the contents of the CSS ﬁle
/
MyResources.INSTANCE.css().ensureInjected();

/ Display the manual ﬁle in an iframe
/
new Frame(MyResources.INSTANCE.ownersManual().getURL());


Client Bundles
@Source("logo.png")
ImageResource logo();

@Source("arrow.png")
@ImageOptions(ﬂipRtl = true)
ImageResource pointer();

@Source("a.txt")
TextResource synchronous();

@Source("b.txt")
ExternalTextResource asynchronous();


Client Bundles
/ Using a TextResource
/
myTextArea.setInnerText(Resources.INSTANCE.synchronous().getText());

/ Using an ExternalTextResource
/
Resources.INSTANCE.asynchronous().getText(new
ResourceCallback<TextResource>() {
public void onError(ResourceException e) { ... }
public void onSuccess(TextResource r) {
myTextArea.setInnerText(r.getText());
}
});


Vlastne komponenty

• extends Widget
• setElement()
• extends Composite
• initWidget()
• extends Button, Panel, ....


JSNI

• JavaScript Native Interface
• ľahko kombinovateľný JavaScript kód do
GWT
• volanie metód z GWT v JS
• volanie metód z JS v GWT


JSNI Syntax

• /*-{ JavaScript code here }-*/;
• native void nativeJsCall()/*-{alert(“JS”);}-*/;
• $wnd - pointer na window (ale preco?)


JSNI - JS call do GWT

• [instance-expr.]@class-name::method-name
(param-signature)(arguments)

• [instance-expr.]@class-name::ﬁeld-name


[instance-expr.]@class-name::method-name(param-signature)(arguments)
/ method calls
/
this.@com.example.client.MyClass::setStringValue(Ljava/lang/String;)(s);

x.@com.example.client.MyClass::setStringValue(Ljava/lang/String;)(s);

@com.example.client.MyClass::setStaticValue(Ljava/lang/String;)(s);

/ ﬁelds
/
var val = this.@com.example.client.MyClass::valueStringFiled

x.@com.example.client.MyClass::valueStringField = val + " and stuff";


Type Signature Java Type long f (int n, String s, int[] arr);
Z boolean =
B byte (ILjava/lang/String;[I)J
C char
S short
I int
J long
F ﬂoat
D double
L class ; class
[ type type[]


JavaScript overlay types

• JS objekt ako Java objekt
• protected konštruktor - bez arg
• mžnosť písť natívne aj nenatívne metódy
• nesmie obsahovať ﬁeldy


var jsonData = [
{ "FirstName" : "Jimmy", "LastName" : "Webber" },
{ "FirstName" : "Alan", "LastName" : "Dayal" },
{ "FirstName" : "Keanu", "LastName" : "Spoon" },
{ "FirstName" : "Emily", "LastName" : "Rudnick" }
];


class Customer extends JavaScriptObject {
/ Overlay types always have protected, zero-arg ctors
/
protected Customer() { }

/ Typically, methods on overlay types are JSNI
/
public final native String getFirstName() /*-{return this.FirstName; }-*/;
public final native String getLastName() /*-{return this.LastName; }-*/;

/ Note, though, that methods aren't required to be JSNI
/
public final String getFullName() {
return getFirstName() + " " + getLastName();
}
}


class MyModuleEntryPoint implements EntryPoint {
JsArray<Customer> cs = getCustomers();
for (int i = 0, n = cs.length(); i < n; ++i) {
Window.alert("Hello, " + cs.get(i).getFullName());
}
}

/ Return the whole JSON array, as is
/
private ﬁnal native JsArray<Customer> getCustomers() /*-{
return $wnd.jsonData;
}-*/;
}


Dovidenia

Základy GWT

Recommended

Recommended

More Related Content

What's hot

What's hot (7)

Viewers also liked

Viewers also liked (9)

Similar to Základy GWT

Similar to Základy GWT (20)

Recently uploaded

Recently uploaded (20)

Základy GWT