Google Web Toolkit Piotr Findeisen findepi@students.mimuw.edu.pl
Czym jest GWT kompilator Javy do Javascriptu biblioteki Java/Javascript emulacja części java.lang i java.util webowe okienka narzędzia do tworzenia projektów GWT Hosted Web Browser
GWT: możliwości kompilatora rozumie Java 2 Standard Edition 1.4.2 i wcześniejsze typy proste: byte, char, short, int, long, float, double, Object, String, T[] Java long Javascript double try, catch, finally także wyjątki zdefiniowane przez użytkownika bez getstacktrace() także poprzez Java Javascript RPC
Czego kompilator nie umie tak nie można (dodane w J2SE 1.5): for (String c : new String[] {"abc", "def")... ArrayList<Integer> a; Java assert Javscript no-op brak finalize() brak synchronized, Object.wait(); notify() brak strictfp Java serialization
Więcej różnic... wyrażenia regularne podobne, ale nie identyczne używać ostrożnie! brak ładowania klas na życzenie cała logika użytkownika trafia do jednego pliku tylko częściowa implementacja java.lang i java.util więcej o zgodności: http://code.google.com/webtoolkit/documentation/jre.html
IDE dla GWT GWT nie jest związane z konkretnym IDE IntelliJ IDEA, Eclipse, NetBeans, JCreator, JBuilder, vim... Eclispe żaden plugin nie jest potrzebny GWT Hosted Mode to com.google.gwt.dev.gwtshell.main() kiedyś specjalny plugin: Googlipse darmowe narzędzia od Cypal Solutions http://www.cypal.in/studiodocs
GWT w Eclipse wygeneruj projekt Eclipse: projectcreator -eclipse MyProject dodaj do niego GWT: applicationcreator -eclipse MyProject com.mycompany.client.myapplication... i uruchom./myapplication-shell lub zaimportuj projekt do Eclipse Run lub Debug (już zdefiniowane)
GWT Hosted Mode
Debugowanie w Eclipse
Hello World: html Najprostsza strona dołączająca kod GWT src/edu/taw/public/hello.html <html> <head> <script language='javascript' src='edu.taw.hello.nocache.js'> </script> </head> <body></body> </html>
Hello World: moduł gwt.xml src/edu/taw/hello.gwt.xml (istotny do wdrożenia) <module> <!-- Inherit the core Web Toolkit stuff.--> <inherits name='com.google.gwt.user.user'/> <!-- Specify the app entry point class. --> <entry-point class='edu.taw.client.hello'/> </module>
Hello World: Java src/edu/taw/client/hello.java package edu.taw.client; import com.google.gwt.core.client.entrypoint; import com.google.gwt.user.client.ui.*; public class Hello implements EntryPoint { public void onmoduleload() { Label l = new Label("Strona dynamiczna."); RootPanel.get().add(l);
Hello World: efekt końcowy <html><head> <script src="edu.taw.hello.nocache.js" language="javascript"> </script> <script> edu_taw_hello.oninjectiondone('edu.taw.hello') </script> </head> <body> <iframe src="ec79bab10271672dbc9d5bc7e9a11901.cache.html" id="edu.taw.hello" style="border: medium none ; position: absolute; width: 0pt; height: 0pt;"></iframe> <div class="gwt-label">strona dynamiczna.</div> </body></html> http://students.mimuw.edu.pl/~findepi/gwt/hello/hello.html
JavaScript: nie próbuj tego samemu c=k.getelementbyid('edu.taw.hello');var b=c.contentwind function edu_taw_hello(){var l=window,k=document,t=l.ex function y(){if(ab&&w){var c=k.getelementbyid('edu.taw. function s(){var j,h=' gwt_marker_edu.taw.hello',i;k.w ;if(j&&j.src){p=d(j.src);if(p==''){var c=k.getelements function D(){var f=document.getelementsbytagname('meta' function n(a,b){return b in db[a]; function m(a){var b=z[a];return b==null?null:b; function cb(d,e){var a=o;for(var b=0,c=d.length-1;b<c;+ function r(d){var e=f[d](),b=db[d];if(e in b){return e; F['user.agent']=function(){var d=navigator.useragent.to var u;function x(){if(!u){u=true;var a=k.createelement( if(k.addeventlistener){k.addeventlistener('domcontentlo edu_taw_hello. gwt_inithandlers=function(i,e,j){var d= http://students.mimuw.edu.pl/~pf219427/gwt/hello/edu.taw.hello.nocache.js http://students.mimuw.edu.pl/~pf219427/gwt/hello/ec79bab10271672dbc9d5bc7e9a11901.cache.html
GWT: dalsze możliwości wiele żywych kawałków na jednej stronie brak zależności w kodzie Java czy HTML <module> <!-- Inherit the core Web Toolkit stuff.--> <inherits name='com.google.gwt.user.user'/> <!-- Specify the app entry point class. --> <entry-point class='edu.taw.client.hello'/> <entry-point class='edu.taw.client.byebye'/> </module>
GWT a istniejące strony kod GWT może modyfikować tylko wybrany fagment strony (lub nic) package edu.taw.client; import com.google.gwt.core.client.entrypoint; import com.google.gwt.user.client.ui.*; public class Hello implements EntryPoint { public void onmoduleload() { Label l = new Label("Strona dynamiczna."); RootPanel.get("writehere").add(l);
Historia w przeglądarce DHTML brak historii wystarczy dodać do hello.html kod: <iframe src="javascript:''" id=" gwt_historyframe" style="width:0;height:0;border:0"></iframe> historię kontroluje com.google.gwt.user.client.history historię zmienia com.google.gwt.user.client.ui.hyperlink (link zmieniający stan aplikacji)
JavaScript Native Interface JSNI to asembler dla Javy umożliwia zaimplementowanie pojedynczych metod z Javy wprost w JavaScripcie package edu.taw.client; import com.google.gwt.core.client.entrypoint; public class Hello implements EntryPoint { public native void onmoduleload() /*-{ $doc.body.innerhtml = "Strona dynamiczna."; -*/; kontekst wykonania
ImageBundle trywialne w obsłudze umożliwia sklejanie obrazków przyspiesza transfer np. obrazki z googla: http://code.google.com/webtoolkit/documentation/com.google.gwt.doc.developerguide.userinterface.html#imagebundles
ImageBundle: przykład public interface MyImageBundle extends ImageBundle { /** 'new_file_icon.png', 'new_file_icon.gif', or 'new_file_icon.png' */ public AbstractImagePrototype new_file_icon(); /** @gwt.resource open_file_icon.gif */ public AbstractImagePrototype openfileicon(); public class Hello implements EntryPoint { public native void onmoduleload() { MyImageBundle ib = (MyImageBundle) GWT.create(MyImageBundle.class); RootPanel.get().add( ib.new_file_icon().createimage());
internationalization Constants type-safe, definiowane w plikach, statyczne Messages jak Constants, ale całe wyrażenia Dictionary zupełnie dynamiczne nie tylko napisy
internationalization Localizable public interface Person extends Localizable { String name(); public class Person_en implements Person { public String name() { return "John"; public class Person_pl implements Person { public String name() { return "Jaś"; inlineowane public void localperson() { Person p = (Person) GWT.create(Person.class);
and more... strona z tą prezentacją: http://students.mimuw.edu.pl/~findepi/gwt/ strona GWT przykłady dokumentacja dostępnych klas bardzo ciekawe prezentacje