GWT - Google Web Toolkit

Transkrypt

Wprowadzenie
AJAX
Konfiguracja środowiska
GWT w akcji
Zastosowania
Bibliografia
Anna Wrona, Janis Paraschidis, Igor Klimer
Politechnika Wrocławska
Informatyka
6 kwietnia 2009
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Dlaczego GWT
Troszeczkę historii
Zalety i wady GWT
Zawartość GWT
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
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Dlaczego GWT
Zalety i wady GWT
Zawartość GWT
Dlaczego GWT ?
kalkulator
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Dlaczego GWT
Zalety i wady GWT
Zawartość GWT
Dlaczego GWT ?
kalkulator
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Dlaczego GWT
Zalety i wady GWT
Zawartość GWT
Dlaczego GWT ?
kalkulator
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Dlaczego GWT
Zalety i wady GWT
Zawartość GWT
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
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Dlaczego GWT
Zalety i wady GWT
Zawartość GWT
technologii AJAX
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Dlaczego GWT
Zalety i wady GWT
Zawartość GWT
technologii AJAX
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Dlaczego GWT
Zalety i wady GWT
Zawartość GWT
technologii AJAX
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Dlaczego GWT
Zalety i wady GWT
Zawartość GWT
Zalety GWT
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
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Dlaczego GWT
Zalety i wady GWT
Zawartość GWT
Wady GWT
Nadal jest to JavaScript, z którym nie radzi sobie część
klientów wyszukiwarek
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Dlaczego GWT
Zalety i wady GWT
Zawartość GWT
Zawartość GWT
Kompilator GWT
Warstwa interfejsu użytkownika
Zdalne wywoływanie procedur (RPC)
Dodatkowe narzędzia
Powłoka GWT
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Dlaczego GWT
Zalety i wady GWT
Zawartość GWT
Zawartość GWT
Kompilator GWT
Powłoka GWT
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Dlaczego GWT
Zalety i wady GWT
Zawartość GWT
Zawartość GWT
Kompilator GWT
Powłoka GWT
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Dlaczego GWT
Zalety i wady GWT
Zawartość GWT
Zawartość GWT
Kompilator GWT
Powłoka GWT
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Dlaczego GWT
Zalety i wady GWT
Zawartość GWT
Zawartość GWT
Kompilator GWT
Powłoka GWT
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Dlaczego GWT
Zalety i wady GWT
Zawartość GWT
Kompilator
Kompiluje kod Javy do JavaScriptu
Definiowanie 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
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Dlaczego GWT
Zalety i wady GWT
Zawartość GWT
Warstwa Interfejsu użytkownika
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
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Dlaczego GWT
Zalety i wady GWT
Zawartość GWT
Zdalne wywoływanie procedur RPC
Umożliwia „porozumiewanie się” klienta z serwerem
Serializacja i deserializacja obiektów Javy
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Dlaczego GWT
Zalety i wady GWT
Zawartość GWT
Obsługa dodatkowych sposobów komunikowania się z
serwerami (XML i JSON)
Narzędzia internacjonalizacji (il8n)
System zarządzania historią
Obsługa testowania
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Dlaczego GWT
Zalety i wady GWT
Zawartość GWT
Powłoka GWT
Składa się z trzech głównych części: konsoli rejestrowania
zdarzeń, wbudowanego serwera Tomcat oraz przeglądarki
trybu rozwojowego
Przeglądarka potrafi 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
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Dlaczego GWT
Zalety i wady GWT
Zawartość GWT
Powłoka GWT
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
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
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 firmę
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
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
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 firmę
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
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
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
<?xml version="1.0" encoding="UTF-8"?>
<ksiazka-telefoniczna kategoria="bohaterowie ksiazek">

<osoba charakter="dobry">
<imie>Ambrozy</imie>
<nazwisko>Kleks</nazwisko>
<telefon>123-456-789</telefon>
</osoba>
<osoba charakter="zly">
<imie>Alojzy</imie>
<nazwisko>Babel</nazwisko>
<telefon/>
</osoba>
</ksiazka-telefoniczna>
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
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
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Rysunek: Automatyczne podpowiedzi
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Pliki
Eclipse
Netbeans
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
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Pliki
Eclipse
Netbeans
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
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Pliki
Eclipse
Netbeans
Konfiguracja środowiska - Eclipse c.d.
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
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Pliki
Eclipse
Netbeans
Aby uruchomić nasz wygenerowany projekt wystarczy wpisać w
konsoli odpowiednią sekwencję:
Uruchomienie
projectName-shell.cmd -port XXXX
gdzie
-XXXX
numer portu (np. 8889)
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Pliki
Eclipse
Netbeans
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 Configurations
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Pliki
Eclipse
Netbeans
Konfiguracja środowiska - Netbeans
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
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Struktura aplikacji
Trochę kodu
UI
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()
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Struktura aplikacji
Trochę kodu
UI
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()
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Struktura aplikacji
Trochę kodu
UI
Struktura aplikacji
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
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Struktura aplikacji
Trochę kodu
UI
Struktura aplikacji c.d.
Entry point *.gwt.xml - strona sterująca
Znacznik inherits
Znacznik entry point
Znacznik style-sheet
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Struktura aplikacji
Trochę kodu
UI
Znacznik inherits
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Struktura aplikacji
Trochę kodu
UI
Znacznik inherits
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Struktura aplikacji
Trochę kodu
UI
Styl pliku *.js wygenerowanego przez kompilator:
OBF (zaciemniony)
PRETTY
DETAILED
Zainstalowany serwer:
Tomcat
Glassfish
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Struktura aplikacji
Trochę kodu
UI
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
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Struktura aplikacji
Trochę kodu
UI
Co się musi znaleźć w każdym projekcie GWT?
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
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Struktura aplikacji
Trochę kodu
UI
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;
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Struktura aplikacji
Trochę kodu
UI
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
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Struktura aplikacji
Trochę kodu
UI
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:
<img src=http://code.google.com/webtoolkit/logo-185x175.png />
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Struktura aplikacji
Trochę kodu
UI
UI - ImageBundle
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
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Struktura aplikacji
Trochę kodu
UI
UI - TREE
Tree tree = new Tree();
initWidget(tree);
TreeItem outerRoot = new TreeItem("Item 1");
outerRoot.addItem("Item 1-1");
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(new CheckBox("Item 1-5-5"));
outerRoot.addItem(innerRoot);
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Struktura aplikacji
Trochę kodu
UI
UI c.d.
com.google.gwt.user.client.ui.TextBox
Klasa konwertowana do <input type="text">
Rysunek: TextBox
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Struktura aplikacji
Trochę kodu
UI
Praca z przeglądarką
Dwa tryby pracy z projektem GWT
tryb rozwojowy (debuggowanie!!)
tryb produkcyjny
Rysunek: Przeglądarka trybu rozwojowego
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
W praktyce
TypeRacer
http://play.typeracer.com/
Rysunek: Przykład 1
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
W praktyce
Riflethru
http://riflethru.com/
Rysunek: Przykład 2
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
W praktyce
Więcej przykładów . . .
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
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/
Wprowadzenie
AJAX
GWT w akcji
Zastosowania
Bibliografia
Bibliografia
Dziękujemy za uwagę.

GWT - Google Web Toolkit

Transkrypt

Podobne dokumenty

tworzenie aplikacji z użyciem gwt

PDF: GWT 2.x dla zaawansowanych

Starszy Programista Java/Projektant

Tabela rozmiarów

Google Web Toolkit

Google Web Toolkit