Transcript Slide 1

Google Web Toolkit
Peter Norrhall
Ajax och JavaScript
2007-09-06
Frågor!
2007-09-06
Bakgrund o Historik
Ajax
Pre-Ajax
2007-09-06
HTML vs Ajax
HTML
User Action
Stateless
HTML View
Browser
Stateful
Server
New HTML page
Ajax
Events
handled
locally
Stateful
JavaScript UI
Browser
Remote procedure call
Stateless
Server
Data only, not HTML
2007-09-06
Ajax
+ Upplevelse
+ Funktionalitet/Användbarhet
+ Hastighet
+ Ingen installation
- Tillgänglighet (accessibility)
- JavaScript
- Bakåtknappen
- Webbläsarinkompabilitet
- Säkerhet
2007-09-06
GWT - Java till JavaScript
2007-09-06
GWT
Demo
(Eclipse, Hosted Mode, Debug)
2007-09-06
GWT - Arkitektur
Java till JS
Kompilator
JRE
Emulering
JSNI
GWT API
Widget &
Panels
i18n
RPC
XML
Parser
2007-09-06
Historik
JUnit
integration
Webbläsare
6, 7
1.0, 1.5, 2.0
2.0
8.5, 9.0
2007-09-06
Java-till-JavaScript Kompilator
BookSearch.html
history.html
BookSearch.html
BookSearch.css
BookSearch.css
history.html
....client.BookSearch.java
XXXXXXXXXXXX.cache.xml
Standard
App
BookSearch.nocache.js
XXXXXXXXXX.cache.html
....client.BookSearch.gwt.xml
gwt-user.jar
Cross
Site
App
BookSearch.nocache-xs.js
XXXXXXXXXX.cache.js
2007-09-06
Widgets, Panels & Historik
Demo
(KitchenSink)
2007-09-06
Skapa egna Widgets
2007-09-06
Widget - Arv
ButtonBase
CheckBox
RadioButton
2007-09-06
RadioButton
public class RadioButton extends CheckBox {
public RadioButton(String name) {
super(DOM.createInputRadio(name));
setStyleName("gwt-RadioButton");
}
...
}
2007-09-06
EditLabel - Composite
Composite
EditLabel
Label
TextBox
Label
2007-09-06
”KompositWidget”
public class EditLabel extends Composite {
public EditLabel() {
final HorizontalPanel horizontalPanel = new
HorizontalPanel();
initWidget(horizontalPanel);
final Label label = new Label("Label");
horizontalPanel.add(label);
final TextBox textBox = new TextBox();
horizontalPanel.add(textBox);
}
}
2007-09-06
DOM Widget
UIObject
Widget
FileUpload
2007-09-06
FileUpload – DOM
public class FileUpload extends Widget implements HasName {
public FileUpload(String name){
super(DOM.createElement("input"));
DOM.setAttribute(getElement(), "type", "file");
setStyleName("gwt-FileUpload");
}
public String getFilename() {
return DOM.getElementProperty(getElement(), "value");
}
public String getName() {
return DOM.getElementProperty(getElement(), "name");
}
public void setName(String name) {
DOM.setElementProperty(getElement(), "name", name);
}
}
2007-09-06
Paneler
2007-09-06
Layout, Widgets och CSS
.gwt-TextBox {
height: 8px
}
.gwt-TextBox {
height: 14px
}
mobile.css
screen.css
<div id=”search”>
</div
SearchFrm.html
RootPanel.get(”search”)
.add(textBox);
SearchFrm.java
2007-09-06
Integration
XHR
GWT-RPC
RequestBuilder
Remote procedure call
Data only, not HTML
2007-09-06
Mash-Ups
Proxy
2007-09-06
GWT-RPC
Serializable
SearchResult.java
String name;
String isbn;
2007-09-06
GWT-RPC - AmazonSearch
Klient
AmazonSearch.java
onClick() { ... }
onSuccess() {...}
AmazonSearchService.java
public List searchBook
Server
RemoteServiceServlet
AmazonSearchServiceImpl.java
public List searchBook() {...}
SearchResult.java
String name;
String isbn;
Serializable
2007-09-06
Demo
Demo
(AmazonSearch)
2007-09-06
RequestBuilder
2007-09-06
JSON
• object peter = {”name”:”Peter”,
”age”:40,”married”:true,”mistress”:null}
• array norrhalls = {peter, maria, frida,
linnea, jakob, moa}
2007-09-06
RequestBuilder
Klient
AmazonSearch.java
onClick() { ... }
onResponseReceived () {...}
Server
HttpServlet
AmazonSearchService.java
protected void service () {...}
2007-09-06
RequestBuilder
JSONObject o = new JSONObject();
o.put("searchString", new JSONString(searchString));
RequestBuilder rb = new
RequestBuilder(RequestBuilder.POST,
GWT.getModuleBaseURL() + "search");
try {
rb.sendRequest(o.toString(), new
SearchResultsHandler());
} catch (RequestException e) {
GWT.log("Could not send search request", e);
}
2007-09-06
Demo
2007-09-06
i18n
cd i18n
«interface»
Constants
SearchAppConstans.properties
buttonText=Search
SearchAppConstans_sv.properties
«interface»
SearchAppConstants
-
buttonText: String
+
+
«property get» getButtonText() : String
«property set» setButtonText(String) : void
buttonText=Sök
private static final SearchAppConstants CONSTANTS =
(SearchAppConstants) GWT.create(SearchAppConstants.class);
…
clickMeButton.setText(CONSTANTS.getButtonText());
2007-09-06
i18n
Demo
(Îñţérñåţîöñåļîžåţîöñ Sample)
2007-09-06
JavaScript Native Interface
• Att komma åt browserfunktionalitet
• Att komma åt andra JavaScript bibliotekt
public native
static java_class method()
/*- { ... } -*/
Effects.java
JavaScript Kod
2007-09-06
JSNI
<div class="example" id="demo-effect-pulsate"
onclick="new Effect.Pulsate(this)">
<img src="http://script.aculo.us/images/demo-logo.gif" alt="" />
<span>Click me</span> </div>
prublic static native JavaScriptObject effect(String name, Element elem)
/*-{
return new $wnd.Effect[name](elem);
}-*/;
...
Effects.Effect("Pulsate", uiObj);
2007-09-06
JSNI
Demo - Effect
(script.actulo.us)
2007-09-06
Prestanda (Källa Google)
2007-09-06
Prestanda (GWT 1.4)
• Bilder
• Kodstorlek
<30%
<20-50%
• Prestanda
• Läsbarhet (pretty,detailed, obfuscated)
• Cachning
2007-09-06
GWT-svagheter
• Ingen inbyggd säkerhet
• Sökmotorindexering
• Komponenter
• DataTransferObject
2007-09-06
Fördelar GWT
• Ej expert på JavaScript
• Verktygstöd
• Hanterar – Historik och bokmärken
• Användbarhet och prestanda i fokus
• Google + Apache 2.0 Open Source
2007-09-06
GWT - Mission
To radically improve
the web experience for users
by enabling developers
to use existing Java tools
to build no-compromise AJAX
for any modern browser
8.5, 9.0
2.0
6, 7
1.0, 1.5, 2.0
2007-09-06
Avslutande Frågor
2007-09-06
Referenser
•
•
•
•
http://code.google.com/webtoolkit
http://www.instantiations.com/gwtdesigner
http://www.json.org
http://www.manning.com/hanson/
2007-09-06