Google Web Toolkit. Martin Šurkovský, SUR března Katedra informatiky

Transkript

1 Google Web Toolkit Martin Šurkovský, SUR096 Vysoká škola Báňská - Technická univerzita Ostrava Katedra informatiky 29. března 2010 Martin Šurkovský, SUR096 (VŠB - TUO) Google Web Toolkit 29. března / 17

2 Obsah 1 Úvod 2 AJAX 3 Co GWT přináší 4 Tvorba uživatelského rozhraní 5 Hosted mode vs. web mode 6 GWT RPC 7 Implementace historie 8 Co podporuje JRE Emulator 9 JSNI 10 Kompilace do JS Martin Šurkovský, SUR096 (VŠB - TUO) Google Web Toolkit 29. března / 17

3 Coje GWT a k čemu slouží Nástroj (framework) pro tvorbu AJAX aplikací v Javě Open source Řešení typu all-in-one Poskytuje komfort vyvoje java aplikaci - IDE, debugger,... Martin Šurkovský, SUR096 (VŠB - TUO) Google Web Toolkit 29. března / 17

4 AJAX Asynchronous JavaScript and XML Souhrn technologií pro vývoj interaktivních webových aplikací Výhody Načítají se pouze části stránky, které byly aktuazovány Menší objem přenášených dat Možnost vytvařet aplikace podobných desktopovým (RIA) Nevýhody Programování a údržba velkých aplikací Problémy s kompatibilitou prohížečů Obtížná implementace historie Martin Šurkovský, SUR096 (VŠB - TUO) Google Web Toolkit 29. března / 17

5 Co GWT přináší Vývoj v prostředí Java Možnost použití vyvojových prostředí Eclipse, NetBeans, ItelliJ IDEA Plnohodnotný debugger Sestavení hotové aplikace (Ant) Programátor neřeší kompatibilitu prohlížečů Martin Šurkovský, SUR096 (VŠB - TUO) Google Web Toolkit 29. března / 17

6 Ukázka - HelloWorld public class HelloWorld implements E n t r y P o i n t { public void onmoduleload ( ) { Button btn = new Button ( K l i k n i ) ; btn. addclickhandler ( new ClickHandler ( ) { public void onclick ( ClickEvent event ) { Window. a l e r t ( Hello World!!! ) ; } } ) ; RootPanel. get ( ). add ( btn ) ; } } Martin Šurkovský, SUR096 (VŠB - TUO) Google Web Toolkit 29. března / 17

7 Tvorba uživatelského rozhraní Uživatelské rozhraní se vytvaří podobně jako u desktopových aplikací (Swing,...) Prvky uživateského rozhraní by se daly rozdělit do dvou skupin: 1 Widgets Button, Label, TextBox, CheckBox, Table,... MenuBar, RichText, SuggestBox, StackPanel HTML 2 Panels FlowPanel, VerticalPanel, DockPanel,... Stylovaní komponent je možné provádět pomocí CSS.gwt-TextBox { padding: 2px; } Martin Šurkovský, SUR096 (VŠB - TUO) Google Web Toolkit 29. března / 17

8 Tvorba vlastních widgetů Je možné též vytvářet vlastní widgety: Poskládáním existujících widgetů a penelů Napsáním v jave od nuly Nativně pomocí JavaScriptu generujícího HTML Demo Showcase.html Ukázka Login widget Martin Šurkovský, SUR096 (VŠB - TUO) Google Web Toolkit 29. března / 17

9 Hosted mode vs. web mode Hosted mode slouží pro vývoj aplikace nepřekládá se do JS, běží v rámcí JVM plnohodnotný debugging stejná funkcionalita jako přeložený kód Web mode kód je zkompilovaný do JS Ukázka Debug aplikace Martin Šurkovský, SUR096 (VŠB - TUO) Google Web Toolkit 29. března / 17

10 GWT RPC komunikace se serverem Celý proces je realizován v Javě GWT RPC zajišt uje serializaci dat Serializovatelné třídy: primitivní datové typy: int, char, double, boolean,... String, Date a všechny objektové třídy primitivních typů datové struktury: List, Set, Map, pole a vyčty uživatelsky definované typy, které implementuji rozhraní IsSerializable Serverová část implementována jako servlet Ukázka Vlastní typ posilaný přes GWT - RPC (IsSerializable) Martin Šurkovský, SUR096 (VŠB - TUO) Google Web Toolkit 29. března / 17

11 GWT RPC komunikace se serverem Obrázek: Struktura GWT RPC Martin Šurkovský, SUR096 (VŠB - TUO) Google Web Toolkit 29. března / 17

12 Implementace historie AJAX historii v prohlížeči narušuje GWT tento problém řeší pomocí odkazů uvnitř stránkay (#) Rozhraní ValueChangHandler Demo Showcase.html Ukázka Implementace hitorie Martin Šurkovský, SUR096 (VŠB - TUO) Google Web Toolkit 29. března / 17

13 Co podporuje JRE Emulator java.lang java.lang.annotation java.util java.io java.sql Martin Šurkovský, SUR096 (VŠB - TUO) Google Web Toolkit 29. března / 17

14 JSNI - JavaScript Navite Interface Umožnuje psát v javě nativně JS metody Možnost odkazovat se na proměnné z javy Možnost volaní Java metod Musí se dávat pozor na přenostitelnost kódu (nekompatibilita prohlížečů) Nativní kód není překladán překladačem ale je přimo vložen do výsledného kódu Není možné tyto části kódu debuggovat Martin Šurkovský, SUR096 (VŠB - TUO) Google Web Toolkit 29. března / 17

15 JSNI - JavaScript Navite Interface Příklady public native void r e d i r e c t ( S t r i n g u r l ) / { $wnd. l o c a t i o n. replace ( u r l ) ; } / ; public native void f i l l D a t a ( L i s t data ) / { u t i l. L i s t : : add ( Ljava / lang / Object ; ) ( item1 ) ; u t i l. L i s t : : add ( Ljava / lang / Object ; ) ( item2 ) ; } / ; [instance-expr.]@class-name::method-name(param-signature)(arguments) Martin Šurkovský, SUR096 (VŠB - TUO) Google Web Toolkit 29. března / 17

16 Kompilace do JavaScriptu Vytvoření syntaktického stromu z javovského kódu Překlad stromu Uzly stromu odpovídají JavaScript kódu (překlad) JSNI - metody přímo vloženy JSON - metody přímo vloženy Vygenerují se různé výstupu pro různé prohlížeče (Defferend Binding) Martin Šurkovský, SUR096 (VŠB - TUO) Google Web Toolkit 29. března / 17

17 Zdroje 1 Google Web Toolkit projekt (aktuální verze 2.0) code.google.com/intl/cs/webtoolkit/ 2 Dokumentace code.google.com/intl/cs/webtoolkit/doc/latest/devguide.html 3 GWT API google-web-toolkit.googlecode.com/svn/javadoc/2.0/index.html?overview-summary.html 4 GWT Showcase and Features gwt.google.com/samples/showcase/showcase.html 5 JRE Emulator Reference code.google.com/intl/cs/webtoolkit/doc/latest/refjreemulation.html 6 GWT Tutorial developerlife.com/tutorials/?p=80 7 Přednáška Jiřího Semeckého video.google.com/videoplay?docid= &hl=cs# Martin Šurkovský, SUR096 (VŠB - TUO) Google Web Toolkit 29. března / 17