GWT W Akcji Zastosowania Bibliograﬁa

Wprowadzenie AJAX Konﬁguracja środowiska GWT w akcji Zastosowania Bibliograﬁa

Anna Wrona, Janis Paraschidis, Igor Klimer

Politechnika Wrocławska Informatyka

6 kwietnia 2009

Anna Wrona, Janis Paraschidis, Igor Klimer GWT - Google Web Toolkit Wprowadzenie AJAX Dlaczego GWT Konﬁguracja środowiska Troszeczkę historii GWT w akcji Zalety i wady GWT Zastosowania Zawartość GWT Bibliograﬁa Dlaczego GWT ?

Duża popularność technologii AJAX Słaba kompatybilność przeglądarek (Internet Explorer, Safari, Mozilla Firefox, etc...) GWT nie jest kolejnym frameworkiem AJAXowym, będącym w praktyce zbiorem komponentów takich jak kalendarz czy kalkulator GWT jest kompilatorem skrośnym Javy do JavaScript’u, tak aby został on uruchomiony w przeglądarce

Web 2.0 (interakcja z użytkownikami) - dynamiczny Internet Aplikacja Google Maps stworzona przy wykorzystaniu technologii AJAX Artykuł Jesse’a Jamesa Garretta (18 luty 2005) o nowym podejściu do pisania aplikacji sieciowych Po raz pierwszy zaprezentowany na konferencji JavaOne (Sun 2006) przez Bruce Johnsona i Joel Webbera

Zbiór komponentów UI, podobnych do komponentów z aplikacji desktopowych (suwaki, odbicia, obsługa „ przeciągnij i upuść”, ramki podpowiedzi, tabele wiązania danych, itd.) system RPC (Remote Procedure Call)do zarządzania komunikacją z serwerem WWW Wsparcie dla przycisku „Wstecz” w przeglądarce Aplikacje GWT działają identycznie na wszystkich najpopularniejszych przeglądarkach Możliwość dokonywania testów JUnit Obsługa internacjonalizacji Kod piszemy w Javie!!! Piszemy w dowolnym IDE

Nadal jest to JavaScript, z którym nie radzi sobie część klientów wyszukiwarek

Kompilator GWT Warstwa interfejsu użytkownika Zdalne wywoływanie procedur (RPC) Dodatkowe narzędzia Powłoka GWT

Kompiluje kod Javy do JavaScriptu Deﬁniowanie zadań kompilacji GWT w modułach Optymalizacja aplikacji w czasie kompilacji Aktualnie wersja GWT 1.5 wspiera Java 5, więc również wszelkie typy generyczne, typy wyliczeniowe, adnotacje

Parametry GWTCompiler GWTCompiler [-logLevel level] [-gen dir] [-out dir] [-treeLogger] [-style style] module gdzie -logLevel poziom szczegółowości rejestrowania zdarzeń -gen katalog, do którego będą wygenerowane pliki do analizy -out katalog, do którego będą zapisywane pliki wynikowe -treeLogger wynik zdarzeń przedstawiony w formie drzewka -style styl skryptu wynikowego module nazwa modułu, który ma zostać skompilowany

Implementacja elementów UI w Javie Szeroki zakres paneli związanych z układem (komponenty takie jak: Tree oraz Grid, ImageBundle) GWT od wersji 1.4 zaczął poszerzać narzędzia UI

Umożliwia „porozumiewanie się” klienta z serwerem Serializacja i deserializacja obiektów Javy

Obsługa dodatkowych sposobów komunikowania się z serwerami (XML i JSON) Narzędzia internacjonalizacji (il8n) System zarządzania historią Obsługa testowania

Składa się z trzech głównych części: konsoli rejestrowania zdarzeń, wbudowanego serwera Tomcat oraz przeglądarki trybu rozwojowego Przeglądarka potraﬁ wywoływać klasy Javy bezpośrednio wobec zdarzeń przeglądarki, nie wymagając kompilacji do JavaScript Powłoka pozwala na testowanie aplikacji w przeglądarce podczas wykonywania kodu Javy

Parametry GWTShell GWTShell [-port port-number] [-noserver] [-whitelist whitelist-string] [-blacklist blacklist-string] [-logLevel level] [-gen dir] [-out dir] [-style style] [url] gdzie -port uruchamia egzemplarz wbudowanego Tomcata na określonym porcie -noserver zapobiega uruchomieniu wbudowanego serwera Tomcat -whitelist umożliwia użytkownikowi przeglądanie adresów URL, które odpowiadają określonym wyrażeniom regularnym -blacklist uniemożliwia użytkownikowi przeglądanie adresów URL, które odpowiadają określonym wyrażeniom regularnym -logLevel poziom szczegółowości rejestrowania zdarzeń -gen katalog do którego zapisywane będą wygenerowane pliki do analizy -out katalog do którego zapisywane będą pliki wynikowe -style styl skryptu wynikowego -url automatycznie wywołuje określony URL

Anna Wrona, Janis Paraschidis, Igor Klimer GWT - Google Web Toolkit Wprowadzenie AJAX Konﬁguracja środowiska GWT w akcji Zastosowania Bibliograﬁa AJAX - Asynchronous JavaScript and XML

Ajax Technologia tworzenia aplikacji internetowych, w której interakcja użytkownika z serwerem odbywa się bez przeładowywania całego dokumentu, w sposób asynchroniczny. Jest ona oparta na JavaScripcie oraz XMLu

JavaScript Obiektowy skryptowy język programowania, stworzony przez ﬁrmę Netscape, najczęściej stosowany na stronach internetowych. Najczęściej spotykanym zastosowaniem języka JavaScript są strony WWW. Skrypty służą najczęściej do zapewnienia interaktywności poprzez reagowanie na zdarzenia, sprawdzania poprawności formularzy lub budowania elementów nawigacyjnych

Anna Wrona, Janis Paraschidis, Igor Klimer GWT - Google Web Toolkit Wprowadzenie AJAX Konﬁguracja środowiska GWT w akcji Zastosowania Bibliograﬁa AJAX - Asynchronous JavaScript and XML

Anna Wrona, Janis Paraschidis, Igor Klimer GWT - Google Web Toolkit Wprowadzenie AJAX Konﬁguracja środowiska GWT w akcji Zastosowania Bibliograﬁa AJAX - Asynchronous JavaScript and XML c.d.

XML Rozszerzalny język znaczników przeznaczony do reprezentowania różnych danych w strukturalizowany sposób. Jest niezależny od platformy

Przykładowy plik xml Ambrozy Kleks 123-456-789 Alojzy Babel

Anna Wrona, Janis Paraschidis, Igor Klimer GWT - Google Web Toolkit Wprowadzenie AJAX Konﬁguracja środowiska GWT w akcji Zastosowania Bibliograﬁa AJAX - Asynchronous JavaScript and XML c.d.

AJAX wykrozystuje: Klasę XMLHttpRequest, która umożliwia komunikację z serwerem bez przeładowania strony XML i XSLT do opisywania przesyłanej informacji DOM do dynamicznego wyświetlania i interakcji z użytkownikiem za pomocą JScript czy JavaScript HTML i CSS do opisu sposobu reprezentacji danych język skryptowy - najczęściej JavaScript

Anna Wrona, Janis Paraschidis, Igor Klimer GWT - Google Web Toolkit Wprowadzenie AJAX Konﬁguracja środowiska GWT w akcji Zastosowania Bibliograﬁa AJAX - Asynchronous JavaScript and XML c.d.

Rysunek: Automatyczne podpowiedzi

Anna Wrona, Janis Paraschidis, Igor Klimer GWT - Google Web Toolkit Wprowadzenie AJAX Pliki Konfiguracja środowiska Eclipse GWT w akcji Netbeans Zastosowania Bibliografia Konfiguracja środowiska

Aby rozpocząć przygodę z GWT w środowisku Pobrać i zainstalować wirtualną maszynę Javy http://java.sun.com/javase/downloads/index.jsp Pobrać i rozpakować Google Web Toolkit Package http://code.google.com/intl/pl-PL/webtoolkit/download.html

Anna Wrona, Janis Paraschidis, Igor Klimer GWT - Google Web Toolkit Wprowadzenie AJAX Pliki Konfiguracja środowiska Eclipse GWT w akcji Netbeans Zastosowania Bibliografia Konfiguracja środowiska - Eclipse

ProjectCreator - składnia ProjectCreator [-ant projectName] [-eclipse projectName] [-out dir] [-overwrite] [-ignore] gdzie -ant generuje plik uruchomieniowy dla Anta (.ant.xml) -eclipse generuje projekt Eclipse -out katalog w którym ma zostać utworzony plik -overwrite nadpisanie istniejącego pliku -ignore w przypadku istniejącego pliku nie nadpisuje go

Rysunek: projectCreator - stworzenie szkieletu nowego projektu

ApplicationCreator - składnia ApplicationCreator [-eclipse projectName] [-out dir] [-overwrite] [-ignore] className gdzie -eclipse tworzy program uruchomieniowy dla odpowiedniego projektu Eclipse -out katalog, w którym będą zapisane pliki -overwrite nadpisz istniejące pliki -ignore nie nadpisuj istniejących plików className pełna nazwa klasy, z uwzględnieniem packages

Rysunek: applicationCreator - stworzenie aplikacji startowej

Aby uruchomić nasz wygenerowany projekt wystarczy wpisać w konsoli odpowiednią sekwencję: Uruchomienie projectName-shell.cmd -port XXXX gdzie -XXXX numer portu (np. 8889)

Aby cieszyć się GWT w powiązaniu z Eclipsem możemy również skorzystać z projektu Cypal Studio for GWT: Cypal Studio pobieramy ze strony http://cypal-studio. googlecode.com/files/cypal.studio.for.gwt-1.0.zip Pobrane pliki jar wrzucamy do katalogu plugins Eclipsa Windows 99K Preferences 99K CypalStudio 99K GWT Versions oraz zaznaczamy „Invoke when publishing to an external server” Tworzymy projekt File 99K New 99K Other 99K Dynamic Web Project Dodajemy moduł New 99K Other 99K GWT Module Wypełniamy zawartość Run Conﬁgurations

Tools 99K Plugins 99K Available Plugins 99K GWT4NB 99K Install Choose Project 99K Java Web 99K Web Application 99K ... Frameworks: Google Web Toolkit GWT Installation folder: folder, w którym znajduje się Google Web Toolkit

Anna Wrona, Janis Paraschidis, Igor Klimer GWT - Google Web Toolkit Wprowadzenie AJAX Struktura aplikacji Konfiguracja środowiska Trochę kodu GWT w akcji UI Zastosowania Bibliografia Podstawowe definicje

Moduł Moduł - module - pliki XML z konfiguracją GWT odpowiadającą jednostkom funkcjonalnym aplikacji. W module znajdują się wszystkie ustawienia konfiguracyjne niezbędne do poprawnego uruchomienia aplikacji GWT. Moduły definiują klasy, które podlegają translacji do JavaScript

Punkt dostępowy Punkt dostępowy - entry-point - jest klasą rozszerzającą interfejs EntryPoint. Podczas uruchamiania modułu, każdy punkt dostępowy jest tworzony i wywoływana jest jego metoda EntryPoint.onModuleLoad()

Rysunek: struktura aplikacji

Struktura aplikacji Client pakiet kliencki Public zasoby Rebind kod czasu kompilacji Server kod implementacji serwerowej Punkt startowy aplikacji Entry point odpowiednikiem public static void main

Entry point *.gwt.xml - strona sterująca

Rysunek: struktura aplikacji

Znacznik inherits Znacznik entry point Znacznik style-sheet

Entry point *.gwt.xml - strona sterująca

Rysunek: struktura aplikacji

Znacznik inherits Znacznik entry point Znacznik style-sheet

Entry point *.gwt.xml - strona sterująca

Rysunek: struktura aplikacji

Znacznik inherits Znacznik entry point Znacznik style-sheet

Styl pliku *.js wygenerowanego przez kompilator: OBF (zaciemniony) PRETTY DETAILED Zainstalowany serwer: Tomcat Glassﬁsh

Struktury pamiętać nie trzeba, ale warto znać, aby wiedzieć się orientować w projekcie. Strukturę tworzą za nas odpowiednio: plugin GWT4NB w Netbeans IDE plugin GWT-ext w Eclipse IDE projectCreator dostarczany wraz z Google Web Toolkit

public class Aplikacja1 implements EntryPoint { public void onModuleLoad() { } }

Entry point - klasa główna danego modułu, musi implementować interfejs: com.google.gwt.core.client.EntryPoint OnModuleLoad() ekwiwalent public static void main

Anna Wrona, Janis Paraschidis, Igor Klimer GWT - Google Web Toolkit Wprowadzenie AJAX Struktura aplikacji Konﬁguracja środowiska Trochę kodu GWT w akcji UI Zastosowania Bibliograﬁa Use

Korzystanie bardzo przypomina klasyczne programowanie w Javie

Button button = new Button("Click me");

Nie można jednak zapominać, że

java.awt.Button != com.google.gwt.user.client.ui.Button;

Anna Wrona, Janis Paraschidis, Igor Klimer GWT - Google Web Toolkit Wprowadzenie AJAX Struktura aplikacji Konﬁguracja środowiska Trochę kodu GWT w akcji UI Zastosowania Bibliograﬁa Use c.d.

Dodawanie nowych elementów do strony

RootPanel.get().add(Widget w) dodaje dany widżet zaraz przed końcem sekcji h body i RootPanel.get(„idElementu”).add(Widget w) dodaje element w elemencie o id ”idElementu”przykładowo: hdiv id=„idElementu”i

Anna Wrona, Janis Paraschidis, Igor Klimer GWT - Google Web Toolkit Wprowadzenie AJAX Struktura aplikacji Konﬁguracja środowiska Trochę kodu GWT w akcji UI Zastosowania Bibliograﬁa UI

Odpowiednikami tabel w GWT są obiekty typu Grid

W trakcie kompilacji zostanie to przekonwertowane do postaci typu htablei....h/tablei Aby osadzać obrazki w kodzie należy skorzystać z klasy

com.google.gwt.user.client.ui.Image;

Przykład: Image img = new Image("http://code.google.com/webtoolkit/logo-185x175.png");

Zostanie zamienione na kod html typu:

ImageBundle ImageBundle łączy wiele małych obrazków w jeden duży wyświetlany jako tło na stronie html. W wyniku czego strona nie negocjuje wielokrotnie połączeń z serwerem

Anna Wrona, Janis Paraschidis, Igor Klimer GWT - Google Web Toolkit Wprowadzenie AJAX Struktura aplikacji Konﬁguracja środowiska Trochę kodu GWT w akcji UI Zastosowania Bibliograﬁa UI - TREE

Tree tree = new Tree(); initWidget(tree); TreeItem outerRoot = new TreeItem("Item 1"); outerRoot.addItem("Item 1-1"); outerRoot.addItem("Item 1-2"); outerRoot.addItem("Item 1-3"); outerRoot.addItem(new CheckBox("Item 1-4")); tree.addItem(outerRoot); TreeItem innerRoot = new TreeItem("Item 1-5"); innerRoot.addItem("Item 1-5-1"); innerRoot.addItem("Item 1-5-2"); innerRoot.addItem("Item 1-5-3"); innerRoot.addItem("Item 1-5-4"); innerRoot.addItem(new CheckBox("Item 1-5-5")); outerRoot.addItem(innerRoot);

Anna Wrona, Janis Paraschidis, Igor Klimer GWT - Google Web Toolkit Wprowadzenie AJAX Struktura aplikacji Konﬁguracja środowiska Trochę kodu GWT w akcji UI Zastosowania Bibliograﬁa UI c.d.

com.google.gwt.user.client.ui.TextBox Klasa konwertowana do

Rysunek: TextBox

Dwa tryby pracy z projektem GWT tryb rozwojowy (debuggowanie!!) tryb produkcyjny

Rysunek: Przeglądarka trybu rozwojowego

Anna Wrona, Janis Paraschidis, Igor Klimer GWT - Google Web Toolkit Wprowadzenie AJAX Konﬁguracja środowiska W praktyce GWT w akcji Zastosowania Bibliograﬁa TypeRacer

http://play.typeracer.com/

Rysunek: Przykład 1

Anna Wrona, Janis Paraschidis, Igor Klimer GWT - Google Web Toolkit Wprowadzenie AJAX Konfiguracja środowiska W praktyce GWT w akcji Zastosowania Bibliografia Riflethru

http://riflethru.com/

Rysunek: Przykład 2

Anna Wrona, Janis Paraschidis, Igor Klimer GWT - Google Web Toolkit Wprowadzenie AJAX Konﬁguracja środowiska W praktyce GWT w akcji Zastosowania Bibliograﬁa

Więcej przykładów . . .

Anna Wrona, Janis Paraschidis, Igor Klimer GWT - Google Web Toolkit Wprowadzenie AJAX Konfiguracja środowiska Bibliografia GWT w akcji Zastosowania Bibliografia Bibliografia

R. Cooper, C.E. Collins, GWT w praktyce, Manning, Lublin 2008 http://googlewebtoolkit.pl/ http://rmalinowski.pl/index.php?option=com_frontpage&Itemid= 1&lang=pl http://www.ajaxdaddy.com/ http://code.google.com/intl/pl-PL/webtoolkit/

Anna Wrona, Janis Paraschidis, Igor Klimer GWT - Google Web Toolkit Wprowadzenie AJAX Konfiguracja środowiska Bibliografia GWT w akcji Zastosowania Bibliografia

Dziękujemy za uwagę.

Anna Wrona, Janis Paraschidis, Igor Klimer GWT - Google Web Toolkit