Google Web Toolkit Rozwój aplikacji

Transkrypt

1 Google Web Toolkit Rozwój aplikacji EMiI Lab A2 Daria Sikorska

2 Czym jest GTW (Google Web Toolkit)? To zestaw narzędzi do budowania i optymalizacji złożonych aplikacji opartych na przeglądarce. GWT jest używane przez wiele produktów w Google, włączając Google AdWords i Orkut. Jest open Source, czyli całkowicie za darmo i używane przez tysiące programistów Java na całym świecie. Google Web Toolkit jest frameworkiem do tworzenia ajaxowych aplikacji internetowych z wykorzystaniem języka Java. Framework to struktura wspomagająca tworzenie, rozwój i testowanie powstającej aplikacji. Z reguły na framework składają się programy wspomagające, biblioteki kodu źródłowego i inne podobne narzędzia. Pierwsza wersja GWT została wypuszczona w maju 2006 roku, teraz króluje nowa, oznaczona jako 2.4. GWT wydany jest na licencji Apache 2.0, umożliwiającej zarówno darmowe, jak i komercyjne wykorzystanie. Co znajduje się wewnątrz toolbox a? 1. GWT SDK - zawiera biblioteki Java API, kompilator, i serwer rozwoju. To pozwala pisać aplikacje po stronie klienta w języku Java i rozmieścić je jako JavaScript. 2. Speed Tracer - Rozszerzenie Chrome, który pozwala zidentyfikować problemy z wydajnością w aplikacjach internetowych. 3. Plugin dla Eclipse IDE - zapewnia wsparcie środowiska IDE dla Google Web Toolkit i projekty aplikacji internetowych Engine. 4. GWT Designer - pozwala na tworzenie z narzędzi interfejsów użytkownika w ciągu kilku minut, dla inteligentnego układu wspomagania, przeciągania i upuszczania oraz automatycznego generowanie kodu. Programowanie z Google Web Toolkit Pisanie GWT SDK udostępnia zestaw podstawowych Java API i Widgety. To pozwoli Ci pisać aplikacje AJAX w języku Java, a następnie skompilować źródła do wysoce zoptymalizowanego JavaScript, który działa we wszystkich przeglądarkach, w tym na

3 mobilnych przeglądarkach dla Androida i iphone'a. Budowa aplikacji AJAX w ten sposób jest bardziej wydajna dzięki wyższemu poziomowi abstrakcji w górnej części wspólnych pojęć, takich jak DOM manipulacji i komunikacji XHR. Nie jest się ograniczonym do widgetów pre-canned. Wszystko, co można zrobić z przeglądarki DOM i JavaScript można wykonać w GWT, w tym interakcję z ręcznie pisanym JavaScript. Debugowanie Możesz debugować aplikacji AJAX w swoim ulubionym IDE tak jakbyś aplikacja, w swojej ulubionej przeglądarki tak jak chcesz, jeśli były kodu JavaScript. Wtyczka autora GWT rozciąga się przepaść między kodu bajtowego Java w debugger i przeglądarki JavaScript. Dzięki wtyczce GWT programista, nie ma kompilacji kodu JavaScript, żeby go zobaczyć w przeglądarce. Można używać tego samego cyklu edycji odświeżania widoku jeśli jest się przyzwyczajonym do JavaScript i w tym samym czasie kontrolować zmienne, pułapki ustawione, i wykorzystania wszystkich innych narzędzi debugera dostępne w języku Java. A ponieważ tryb rozwojowy GWT jest obecnie w samej przeglądarce, można użyć narzędzi takich jak Firebug i Inspector jak w Javie. Optymalizacja Google Web Toolkit zawiera dwa potężne narzędzia do tworzenia zoptymalizowanych aplikacji internetowych. GWT kompilator wykonuje kompleksowe optymalizacje całej codebase - w In-lining metodzie, usuwa martwe kody, optymalizuje stringi i wiele więcej. Poprzez ustawienie podziału punktów w kodzie, ale również może segmentu pobieranie w wielu fragmentów JavaScript, podziału dużych aplikacji dla szybszego

4 uruchamiania. Układ przeglądarki i CSS często zachowują się w dziwny sposób, i przez to są trudne do zdiagnozowania. Speed Tracer to nowe rozszerzenie Chrome w Google Web Toolkit, który pozwala na diagnozowanie problemów z wydajnością w przeglądarce. Uruchom Kiedy będziesz gotowy do wdrożenia, GWT kompiluje kod źródłowy Java do zoptymalizowanych, samodzielnych plików JavaScript, które są automatycznie uruchamiane na wszystkich głównych przeglądarkach, jak również przeglądarkach mobilnych dla Androida i iphone'a. Rozwój aplikacji krok po kroku 1. Tworzenie projektu GWT Tworzenie aplikacji StockWatcher (przy użyciu Eclipse) Wtyczka Google dla Eclipse zawiera kreatora do tworzenia aplikacji GWT. Oto etapy tworzenia startowych aplikacji. 1. W pasku narzędzi kliknij przycisk New Web Application projektu. 2. Wypełnij szczegóły projektu: 1. Wprowadź nazwę projektu "StockWatcher". 2. Wpisz pakiet "com.google.gwt.sample.stockwatcher". 3. Upewnij się, że Use Google Web Toolkit jest zaznaczone, a Use default SDK (GWT) jest zaznaczona. 4. Jeśli używasz Google App Engine, upewnij się Use Google App Engine jest zaznaczone, a Use default SDK (App Engine)jest zaznaczona. 5. Jeśli nie zainstalowałeś SDK podczas instalacji Google Plugin for Eclipse, należy nacisnąć przycisk Configure SDKs... aby określić katalog, w którym GWT (i SDK App Engine w razie potrzeby) został rozpakowany. 3. Kliknij Finish przycisk.

5 2. Testowanie elementów projektu domyślnie Aby sprawdzić, czy wszystkie części projektu zostały stworzone, należy uruchomić rozrusznik aplikacji w trybie rozwoju. W trybie rozwoju, można wchodzić w interakcje z aplikacjami w przeglądarce tak, jak wtedy, kiedy to ostatecznie byłoby wykorzystane. Uruchomienie trybu rozwoju serwera kodu (z Eclipse) 1. W widoku Package Explorer, wybierz projekt StockWatcher. 2. Na pasku narzędzi kliknij przycisk Run (Uruchom jako Web Application). 3. Kiedy zakładce Tryb rozwoju otwiera, kliknij prawym przyciskiem myszy na URL aby go skopiować. 4. Wklej adres URL do przeglądarki wyboru. Podłączenie do trybu rozwoju serwera kodu (z lub bez Eclipse) Po uruchomieniu trybu rozwoju (z Eclipse lub za pomocą skryptu build.xml) i wejściu do URL do przeglądarki, będzie próbował się połączyć. Jeśli jest to pierwsze uruchomienie aplikacji GWT w trybie rozwoju, może pojawić się informacja o zainstalowaniu wtyczki Google Web Developer Toolkit. Postępuj zgodnie z instrukcjami na stronie, aby zainstalować wtyczkę, a następnie ponownie uruchom przeglądarkę i powrócić do tego samego adresu URL.

6 Starter aplikacji Podczas tworzenia nowej aplikacji internetowej z GWT, domyślnie tworzona jest prosty, starter. Aplikacja ta pozwala sprawdzić, czy wszystkie składniki są zainstalowane i skonfigurowane przed rozpoczęciem rozwoju. Po rozpoczęciu pisania aplikacji StockWatcher, będzie można zastąpić starter kodu aplikacji własnymi kodami.

7 3. Badanie elementów projektu Przeanalizujmy niektóre z generowanych plików i zobaczyć, jak one działają w formie projektu GWT. Moduł pliku XML Zawiera ona definicję modułu GWT, są zbiorem zasobów, które zawierają aplikacje GWT lub udostępnionego pakietu. Domyślnie StockWatcher dziedziczy funkcje GWT Core wymagany dla każdego projektu. Opcjonalnie można określić inne moduły dziedziczone GWT. Domyślnie StockWatcher używa dwóch arkuszy stylów: domyślny arkusz stylów GWT, standard.css, i arkusz stylów aplikacji, StockWatcher.css, które zostało wygenerowane przez webappcreator. Strona Host Kod aplikacji internetowej wykonuje w dokumencie HTML. W GWT, nazywamy to strony gospodarza. Na przykład, strona gospodarza dla projektu StockWatcher jest StockWatcher.html. Strony główne, odwołują się do arkusza stylów aplikacji, StockWatcher.css. Na stronie hosta odniesienia do ścieżki kodu źródłowego JavaScript (wygenerowanegp przez GWT) odpowiedzialne są za dynamiczne elementy na stronie. Treść całego elementu body mogą być generowane dynamicznie, na przykład, jak to jest ze starterem aplikacji. Jednak podczas wdrażania aplikacji StockWatcher, będzie trzeba korzystać z kombinacji elementów statycznych i dynamicznych. Wybór Osobliwy Tryb vs tryb standardowy W celu zapewnienia lepszej zgodności z różnymi przeglądarkami, GWT ustawia deklarację doctype HTML 4.01 Transitional. To z kolei, ustawia silnik renderujący przeglądarki "Tryb Quirks". Ogólnie rzecz biorąc, aplikacje GWT działa w "trybie standardowym" tak samo dobrze jak "Tryb Quirks", ale w niektórych przypadkach za pomocą widżetów, takich jak panele i takie mogą nie renderować poprawnie. Zachowanie historii przeglądarki GWT zapewnia mechanizm pomocy aplikacji wychodząc naprzeciw oczekiwaniom użytkownikom strony internetowej.

8 Arkusz stylów aplikacji Arkusz stylów jest związane z każdym projektem. Domyślny arkusz stylów aplikacji, StockWatcher.css, zawiera zasady stylów dla startera aplikacji. Podobnie jak w przypadku każdej strony, można podać wiele arkuszy stylów. Lista wielu arkuszy stylów w kolejności dziedziczenia, czyli z najbardziej szczegółowych zasad stylów w ostatni arkusz wymienionego stylu. Kod źródłowy Java Obecnie StockWatcher.java zawiera źródłowy Java dla startera aplikacji. Klasa StockWatcher dziedziczy funkcjonalność za pośrednictwem innych modułów GWT zawartych w definicji modułu StockWatcher. Na przykład przy tworzeniu interfejsu użytkownika, można włączyć rodzaje i środki z com.google.gwt.user.client.ui pakietu, ponieważ jest to część funkcji GWT podstawowych zawartych w module GWT com.google. gwt.user.user. Projektowanie aplikacji 1. Analiza wymagań funkcjonalnych Początkowo chcesz aby StockWatcher robił sześć rzeczy: Zapewniał użytkownikom możliwość dodawania zapasów. Wyświetlał następujące informacje dla każdego stada: symbol, cena, zmiany od ostatniego odświeżenia. Zapewniał użytkownikom możliwość usunięcia zapasów z listy. Odświeżał ceny akcji. Obliczał zmiany od ostatniego odświeżenia zarówno w liczbach jak i procentach. Wyświetlał znacznik czasu wskazujący ostatnią aktualizacji.

9 2. Identyfikacja elementów projektowania UI Po przestudiowaniu wymagań funkconalnych StockWatcher, potrzebujemy tych elementów interfejsu użytkownika: tabeli do przechowywania danych o zapasach dwa przyciski, jeden, aby dodać zapasy i drugi by je usunąć pole tekstowe gdzie można wpisać kod z ręki znacznika czasu, aby wyświetlić datę i godzinę ostatniego odświeżenia Zespół projektowy zaproponował następujące dodatki: logo

10 nagłówek kolory, aby wskazać, czy zmiana ceny była dodatnia lub ujemna W tym elementów statycznych GWT nie narzuca, w jaki sposób ma wyglądać układ strony HTML. Aplikacja GWT może zajmować całe okno przeglądarki, tak jak przy uruchomieniu aplikacji. Aplikacja StockWatcher zawiera zarówno statyczne i dynamiczne elementy. Logo Google Code i nagłówek "StockWatcher" są statycznymi elementami na stronie hosta HTML. Wszystkie inne elementy są tworzone programowo za pomocą widżetów GWT i paneli. Tworzenie interfejsu użytkownika 1. Wybór widżetów GWT do realizacji elementów UI W Galerii Widget widżety mają domyślny styl, ale i tak nie wyglądają dokładnie tak, jak będą w ostatecznej realizacji StockWatcher. Free tabeli danych GWT zapewnia specjalny widget tabeli o nazwie FlexTable. FlexTable widget tworzy komórki na żądanie. To jest to, czego potrzebujemy do tabeli zawierającej dane dotyczące zapasów, bo nie wiemy, jak wiele zasobów użytkownik doda. Tabela realizowanych z FlexTable widget będzie rozwijana lub zwijana, gdy użytkownik dodaje lub usuwa zapasy. Przyciski Jeśli to możliwe, GWT odracza do przeglądarki rodzimych elementów interfejsu użytkownika. Na przykład, widget przycisku staje się prawdziwym <button> HTML, a nie syntetycznych przycisk jak widget, który jest wbudowany, na przykład, z <div>. Oznacza to, że przyciski GWT renderowania są zaprojektowane przez przeglądarki i system operacyjny klienta. Zaletą korzystania z kontrolki przeglądarki jest to, że jest to szybkie, łatwo dostępne, i najbardziej znane użytkownikom. Ponadto, mogą one być stylizowane za pomocą CSS. Pole wejściowe GWT dostarcza kilka widgetów do tworzenia pól, które użytkownik może wpisać: TextBox widget, pojedyncza linia pola tekstowego

11 PassWordTextBox widget, pole tekstowe, które wizualnie maskuje wejście TextArea widget, wielo linijkowe pole tekstowe SuggestBox, pole tekstowe, które wyświetla wstępnie skonfigurowany zestaw elementów Etykieta W przeciwieństwie do widgeta przycisku, widget Label nie mapuje elementu HTML <label>, używanych w formularzach HTML. Zamiast tego mapuje element <div>, który zawiera dowolny tekst, który nie jest interpretowany jako HTML. <div class="gwt-label"> Ostatnia aktualizacja: 01 października :31:48 </ div> Wybór paneli GWT na układ elementów interfejsu użytkownika GWT zapewnia kilka rodzajów paneli do zarządzania układem. Panele mogą być zagnieżdżone w innych panelach. Jest to analogiczne do wykładania swojej strony internetowej w HTML za pomocą zagnieżdżonych elementów div i tabel. Dla StockWatcher, będziesz używać poziomych paneli zagnieżdżonych w pionowych panelach.

12 Panel główny Jest jeszcze jeden konieczny panel, który nie jest widoczny w interfejsie użytkownika: panel główny. Panel główny jest kontenerem dla dynamicznych elementów aplikacji. Jest na górze każdej hierarchii interfejsu GWT użytkownika. Istnieją dwa sposoby: można korzystać z panelu głównego, albo do generowania całego ciała strony lub do tworzenia poszczególnych elementów osadzonych w organizmie. Panel główny działa poprzez otaczanie <body> lub innego elementu na stronie HTML hosta. Domyślnie panel główny otacza <body>. Jednakże, można owinąć każdy element, jeśli poda się identyfikator, a następnie, po wywołaniu z panelu głównego, przekaże id jako parametr. Strona hosta może zawierać wiele płyt głównych. Na przykład, jeśli osadzamy wielu widgetów GWT lub paneli na stronę gospodarza, każdy z nich może być realizowany niezależnie od pozostałych, zawinięty w swój własny panel główny. Osadzanie aplikacji na stronie hosta Aby wniosek StockWatcher uruchomić w przeglądarce, musisz umieścić go w pliku HTML, HTML strony gospodarza. Na stronie gospodarza dla projektu StockWatcher, StockWatcher.html zostało wygenerowane przez webappcreator. Do startera aplikacji, StockWatcher.html miał pusty element body. W rezultacie panel główny owinięł cały element body. Pole wprowadzania tekstu, etykiety ("Podaj swoje imie:") i przycisk "Wyślij" były dynamicznie, z GWT. Jeśli aplikacja nie ma elementów statycznych, nie byłoby potrzeby edytowania kodu HTML strony głównej, na wszystkich. Jednak dla StockWatcher będzie trzeba korzystać z niektórych statycznych tekstów HTML (w nagłówku) i obrazie (logo) w uzupełnieniu do dynamicznych elementów. Będzie trzeba osadzić aplikację GWT na stronie przeglądarki za pomocą zastępczego elementu <div> z id "stanów magazynowych". Strategia ta jest szczególnie przydatna do osadzania GWT do istniejącej aplikacji. Odświeżanie Trybu Rozwoju Nie zawsze potrzeba podjęcia na nowo aplikacji w trybie rozwoju po zmodyfikowaniu kodu źródłowego. Zamiast tego, wystarczy kliknąć przycisk Odśwież w przeglądarce po zapisaniu zmian, a serwer automatycznie przebuduje aplikację i otworzy w nowej wersji. Zarządzanie Wydarzeniami W tym momencie utworzone są wszystkie elementy interfejsu. Podobnie jak wiele ram interfejs użytkownika, GWT jest oparty na zdarzeniach. Oznacza to, że kod jest wykonywany

13 w odpowiedzi na pewne miejsce zdarzenia. Najczęściej, gdy zdarzenie jest wywoływane przez użytkownika, który używa myszy lub klawiatury do interakcji z interfejsem aplikacji. Wymagania StockWatcher Zadanie UI zdarzenia Odpowiedź Użytkownik wprowadza kod akcji. Kliknięcie przycisku Dodaj lub naciśnięcia zwrot w polu tekstowym. Sprawdź, czy wejście. Sprawdź, czy czas już istnieje. Dodaj nowy wiersz. Utwórz przycisk Usuń. Usuwa Stock z tabeli. przycisk Usuń. Usuń wiersz z tabeli. GWT dostarcza wiele różnych interfejsów obsługi zdarzeń. Do obsługi zdarzeń kliknij przyciski Dodaj i Usuń, będziesz korzystać wtedy z clickhandler interfejsu. Aby obsługiwać zdarzenia klawiatury w polu tekstowym, należy skorzystać z KeyPressHandler interfejsu. Wydarzenia w GWT korzystają z obsługi zdarzeń modelu interfejsu podobnego do innych programów interfejsu użytkownika. Aby zapisać zdarzenie, mijamy konkretny interfejs obsługi zdarzeń do odpowiedniego widgetu. Interfejs obsługi zdarzeń definiuje jedną lub więcej metod, które widget następnie wywołuje. Jednym ze sposobów użytkowników StockWatcher oprócz wprowadzenia kodu ręcznie jest użycie myszy - przycisk Dodaj. Gdy użytkownik kliknie przycisk Dodaj, StockWatcher powinien odpowiedzieć poprzez dodanie akcji do tabeli stock. Tak więc, aby obsłużyć zdarzenie click, wywołujemy metodę addstock. Oprócz korzystania z przycisku Dodaj, użytkownicy StockWatcher można wprowadzić kod ręcznie bez zdejmowania rąk z klawiatury, naciskając zwrot w polu tekstowym. W tym momencie StockWatcher powinien czekać na dane od użytkownika, zdarzenie myszy lub klawiatury, które zasygnalizuje, że użytkownik wpisał kod akcji. Więc następnym krokiem będzie sprawdzenie czy interfejs obsługuje zdarzenia pracujące przez kodowanie

14 odpowiedzi, StockWatcher powinno po wykryciu zdarzenia: dodać akcję. StockWatcher odpowiada po stronie klienta i nie wysyła żadnych wniosków z powrotem do serwera i nie odświeża strony HTML. Dodawanie akcji W StockWatcher użytkownicy wpisywane kody zasobów chcą monitorować pojedynczo w polu tekstowym. Kiedy wciskamy Enter lub klikamy przycisk Dodaj, chcemy, aby StockWatcher odpowiedział w następujący sposób: 1. Sprawdził poprawność danych wejściowych. 2. Sprawdził duplikaty. 3. Dodał akcję. 4. Dodał przycisk do usuwania jej z listy. Sprawdzanie danych wejściowych w polu tekstowym Chcesz sprawdzić, czy wprowadzony kod jest aktualny. Po pierwsze, należy wyodrębnić kod akcji. Aby pobrać tekst z TextBox widget należy wykorzystać metodę gettext. Następnie należy upewnić się, że symbole nie są w zestawie nielegalnych znaków. Po konwersji danych wprowadzonych przez użytkownika do formularza, należy użyć wyrażenia regularnego, aby sprawdzić jego format. Jeśli dane wejściowe są poprawne, należy wyczyścić pole tekstowe w którym użytkownik może dodać kolejny kod akcji. W tym momencie możliwe powinno być wprowadzenie tekstu w pole tekstowe. Jeśli korzystamy z nielegalnej symboliki, okno dialogowe powinno pojawić się i wyświetlić ostrzeżenie.

15 Zmiany w kodzie Java są natychmiast wyświetlane w przeglądarce po naciśnięciu przycisku odświeżania. Jeśli tryb rozwoju jest już uruchomiony, nie ma potrzeby jego ponownego uruchomienia. Wystarczy kliknąć przycisk Odśwież w przeglądarce, aby przeładować zaktualizowany kod GWT. W tym momencie mamy wbudowany interfejs użytkownika z widżetów GWT, paneli i połączonych obsługą zdarzeń. StockWatcher akceptuje dane wejściowe, ale nie może jeszcze dodać czas do tabeli lub zaktualizować dane dotyczące zapasów. Należy więc dodać kod akcji i przycisk Usuń w ręcznej tabeli. Pamiętaj, że FlexTable automatycznie zmieni rozmiar do przechowywania danych, więc nie trzeba się martwić o pisanie kodu do obsługi tego. Po wprowadzeniu przez użytkownika ręcznie kodu, najpierw należy się upewnić, że nie jest to duplikat. Jeśli ręczny kod nie istnieje, należy dodać nowy wiersz do FlexTable i wypełnić komórki w pierwszej kolumnie - wprowadzonej przez użytkownika. Aby dodać tekst do komórki w FlexTable, należy skorzystać z settext metody. Po wywołaniu settext metody, FlexTable automatycznie tworzy nowe komórki w miarę potrzeb, dlatego nie ma potrzeby,

16 aby zmienić rozmiar tabeli wyraźnie. Dzięki czemu użytkownicy mogą usunąć określony czas z listy, wstawić przycisk Usuń w ostatniej komórce w wierszu tabeli. Aby dodać widget do komórki w FlexTable, wywołujemy metodę setwidget. Subskrybuj kliknij wydarzenia z metodą addclickhandler. Jeśli przycisk Usuń fotografii publikuje zdarzenie kliknięcia, należy wyjąć ją z FlexTable i ArrayList. Najważniejszą cechą StockWatcher jest aktualizacja cen zapasów, które użytkownicy oglądają. Jeśli chcemy napisać StockWatcher przy użyciu tradycyjnych technik tworzenia stron WWW, będziemy musieli polegać na pełnym przeładowaniu strony za każdym razem, gdy będziemy chcieli uaktualnić ceny. Użytkownicy StockWatcher chcą, aby ich aktualizacja cen akcji była natychmiastowa bez czekania, aż strona się przeładuje. GWT ułatwia aktualizację zawartości aplikacji w locie. Dla StockWatcher, będziemy automatycznie aktualizować ceny akcji przy użyciu klasy Timer GWT. To umożliwia zaplanowanie kodu w pewnym momencie w przyszłości, albo raz zgodnie z wyznaczonym harmonogramem lub wielokrotnie przy użyciu metody schedulerepeating. Ponieważ chcemy StockWatcher do automatycznej aktualizacji cen akcji (co pięć sekund), będziesz używać schedulerepeating. Dla StockWatcher będziemy przesłaniać metody uruchamiania z wywołania metody refreshwatchlist która odświeża Cena i pole Zmień. Na razie wystarczy umieścić w skrótowej dla metody formie refreshwatchlist, później w tej sekcji, jego wdrożenie. Jednym z podstawowych sposobów przyspieszenia rozwoju AJAX, jest możliwość pisania aplikacji w języku Java. W związku z tym można skorzystać ze statycznych typów sprawdzania i sprawdzonych wzorców programowania obiektowego. Te, w połączeniu z nowoczesnym IDE jak uzupełnianie kodu i refaktoringu zautomatyzowanego, ułatwia wydajne pisanie aplikacji AJAX w dobrze zorganizowanych bazach kodu.

17 Tworzenie klasy Java z wykorzystaniem Eclipse Losowe generowanie danych Zamiast pobierania w czasie rzeczywistym ceny akcji z internetowego źródła danych, należy utworzyć pseudo-losowe ceny i wartości zmian. Aby to zrobić, należy użyć klasy GWT Random. Następnie wypełnić tablicę z StockPrice obiektów tymi wartościami i przekazać je do metody updatetable.

18 Teraz należy obciążyć generowanie losowo cen i zmian danych w tabeli StockWatcher. Dla każdego zasobu, formatu cen i zmian kolumny, a następnie należy również załadować dane. Aby to zrobić należy wprowadzić dwie metody w klasie StockWatcher. Format wartości w polu Cena do dwóch miejsc po przecinku (1,956.00). Prefiks wartości w polu Zmień znakiem (+/-). Ostatnim z elementów funkcjonalności, który należy wdrożyć, jest znacznik czasu. Etykieta timestamp powinna być wyświetlana pod tablicą ręczną. Jak cena i zmiany pól odświeżają się, tak timestamp powinien wyświetlić datę i czas ostatniej aktualizacji. Takie klasy jak DateTimeFormat i NumberFormat żyją w podpakiecie com.google.gwt.i18n, i sugerują, że mają do czynienia z internacjonalizacją w jakiś sposób. I rzeczywiście tak jest: w obu klasach korzystamy z aplikacji, ustawień regionalnych przy formatowaniu liczb i dat. W tym momencie został zbudowane elementy interfejsu i zakodowane wszystkie podstawowe funkcje po stronie klienta dla aplikacji StockWatcher. Użytkownik może dodawać i usuwać zapasy. Cena i zmiany pola aktualizują się co 5 sekund. Timestamp pokazuje kiedy ostatni raz strona była odświeżana.

19 Debug aplikacji przy błędzie Musimy użyć Eclipse do debugowania kodu Java podczas pracy w trybie rozwoju StockWatcher. 1. Znaleźć błąd. 2. Naprawić błąd. 3. Test naprawiający błąd, uruchamiając StockWatcher w trybie rozwoju. Można debugować kod źródłowy Java, zanim go skompilujemy w JavaScript. Ten proces rozwoju GWT pomógł skorzystać z narzędzia do debugowania w IDE dla Javy. Można: Ustawić punkty przełomowe. Krok po kroku prześledzić kod linia po linii. Drążyć w kodzie. Sprawdź wartości zmiennych. Ekran ramki stosu dla zawieszonych wątków. Jedną z atrakcji rozwijających się w JavaScript jest to, że można wprowadzać zmiany i zobaczyć je bezpośrednio przez odświeżanie przeglądarki bez konieczności wykonywania wolnym krokiem kompilacji. GWT rozwoju tryb zapewnia dokładnie taki sam cykl rozwojowy. Nie trzeba robić kompilacji po każdej zmianie, właśnie o to chodzi w trybie rozwoju. Wystarczy kliknąć "Odśwież", aby zobaczyć zaktualizowany kod Java w akcji. Stosowanie styli GWT dostarcza niewielu metod Java bezpośrednio związanymi stylami. Raczej zachęcamy do definiowania stylów kaskadowych arkuszy stylów. Jeśli chodzi o stylistykę aplikacji internetowych, CSS jest idealny. Oprócz czystego i logicznego oddzielenia aplikacji od stylu, taki podział pracy pomaga odciążać serwery i renderowane szybciej, zajmują mniej pamięci, a nawet czyni je łatwiej dostosowującymi się podczas edycji / cykli debug, ponieważ nie ma potrzeby rekompilacji dla szczypie stylu.

20 Dwa arkusze stylów są już związane z projektem StockWatcher. arkusz stylów tematu, standard.css: gdzie style GWT domyślnie są zdefiniowane arkusz stylów aplikacji, StockWatcher.css: gdzie można zdefiniować specyficzny styl dla StockWatcher Podobnie jak obrazy, pliki CSS są statycznymi zasobami, które są przechowywane w katalogu publicznym i odwołują się ze strony hosta HTML. Można powiązać arkusz stylów z aplikacją na dwa sposoby. Preferowane: w pliku XML modułu (StockWatcher.gwt.xml) Zastępcze: na stronie HTML hosta (StockWatcher.html) Niezależnie od wybranej metody, można przypisać jeden lub więcej arkuszy stylów aplikacji z projektu. Robią kaskady w kolejności, w jakiej są wymienione, tak jak robią w dokumencie HTML. W StockWatcher, będziemy postępować zgodnie z preferowaną strategią. Zamiast umieścić linki do arkuszy stylów na stronie HTML host, należy skorzystać z modułu pliku XML. Wtedy, podczas kompilacji StockWatcher, GWT kompilator będzie zawierać wszystkie statyczne zasoby niezbędne do uruchamiania aplikacji, w tym arkuszy stylów. Ten mechanizm nazywa się Automatyczne włączenie zasobów. W większości przypadków jest to lepsza strategia, ponieważ arkusz stylów będzie podążać za modułem wszędzie tam, gdzie jest on stosowany w nowych kontekstach. Wspólne moduły nie zawierają strony gospodarza i dlatego nie można zagwarantować dostępności arkuszy stylów aplikacji, chyba że użyjemy Automatycznego włączenie zasobów. Zmiana tematu GWT bazuje na trzech tematach: Standard, Chrome i Dark. Standard jest domyślnie zaznaczony gdy moduł GWT jest tworzony. Każda aplikacja może korzystać tylko z jednego tematu na raz. Jednakże, jeśli masz już styl lub wolisz projekt stworzony od podstaw, nie trzeba używać żadnych tematów w ogóle.

21 Decydując się na temat strategii wdrażania Istnieją różne sposoby umożliwiające modyfikację GWT na style domyślne. Możesz tworzyć nowe reguły stylu w arkuszu stylów aplikacji, Stockwatcher.css. Zmiany wprowadzone w tym podejściu stosuje się do wszystkich widżetów tego typu, na przykład, do wszystkich przycisków. Można dołączyć dodatkowy styl do elementu HTML, dodając kolejny atrybut klasy. Zmiany wprowadzone w tym podejściu stosuje się do jednego widgetu, na przykład tylko przycisk Usuń w StockWatcher. Możesz zmienić widgetowi główną nazwę stylu. Jeśli potrzebujesz, aby usunąć wszelkie istniejące style, które są dziedziczone z tematem lub inne arkusze stylów, możesz zmienić domyślny podstawowej klasy związany z widgetem. W przypadku osadzania aplikacji GWT do istniejącej strony, można edytować własne arkusze stylów. Możesz zacząć zupełnie od podstaw. Dotychczasowe zmiany

22 Aktualizowanie stylów dynamicznie Ostatnia zmiana stylu, który jest do wykonania to zmiana koloru zmiany ceny. Jeśli cena akcji idzie w górę, StockWatcher wyświetla je na zielono, w dół, w kolorze czerwonym, bez zmian, w kolorze czarnym. To jest ten styl, który zmienia się dynamicznie, jak działa StockWatcher. Czasami potrzeba ustawić atrybuty stylu bezpośrednio na elemencie HTML, zamiast definiować reguły stylu CSS. Na przykład element tabela HTML ma atrybut odległość akapitu, który jest wygodny dla ustalenia dopełnienie wszystkich komórek w tabeli. W GWT, w zależności od elementu HTML, możesz ustawić kilka atrybutów w kodzie Java, aby wygenerować odpowiedni kod HTML. Aplikacja HTML strony głównej, może obejmować wszelkie dodatkowe statyczne elementy HTML które potrzebujesz. Na przykład w StockWatcher, doda logo Google Code. Aby dołączyć zdjęcia, należy umieścić je w ramach projektu w publicznym katalogu. GWT kompilator będzie kopiował wszystkie potrzebne pliki do katalogu wyjściowego do wdrożenia. Kompilacja aplikacji GWT W tym momencie początkowego wdrożenia StockWatcher jest kompletny. Do tej pory, to już działa StockWatcher w trybie rozwoju. W trybie rozwoju można zobaczyć efekt zmiany kodu natychmiast i używać IDE debuggera. Po kompilacji StockWatcher, można uruchomić i przetestować w trybie produkcyjnym. Gdy aplikacja działa w trybie produkcji, istnieje jako czysty JavaScript, ale nie wymaga żadnych wtyczek do przeglądarek lub Java Virtual Machine (JVM). Tak więc podsumowując GWT cechuje: 1. W trakcie kompilacji kod napisany w Javie jest tłumaczony do JavaScriptu i optymalizowany 2. Możliwośd debugowania 3. JavaScript Native Interface - wywołanie metod i obiektów Javy z poziomu kodu JavaScript

23 4. Wsparcie dla wykorzystania googlowych APIs w aplikacjach pisanych w GWT, np. Gears 5. Przygotowane do wykorzystania widgety i panele, z których buduje się aplikację 6. Obsługa css Zastosowanie ogólne - podejście do rozwoju Utwórz nowy projekt Usuń obce pliki - Usuwanie automatyczne generowanie klas, które nie używasz - Jeśli prostych aplikacji bez kodu po stronie serwera: Usuń cały "serwer" pakiet Edytuj web.xml, aby usunąć odniesienie do GWT servlet Edytuj automatyczne generowanie pliku HTML - Wojna / MyApp.html Edytuj wygenerowany automatycznie plik Java - Src / package.client / MyApp.java Test Wielkie idee Cały proces rozwoju - możemy usuwać zbędne kod - edytować wygenerowane automatycznie pliki HTML Auto Edit - automatycznie wygenerować klasy Java HTML - Tag <script> - Zastępowanie, gdzie wystepuje wstawiania widgetów Javy Java - Ogólne struktury klasowe EntryPoint Rozszerzenie Punkt wyjścia: onmoduleload - Po stronie klienta obsługa zdarzeń

24 Testowanie w trybie Rozwoju Pomysł - Pracując w trybie rozwoju oznacza, działać w przeglądarce, która używa wtyczki do przeglądarki Google by łączyć kod Javy do Eclipse - Po zmianie Java lub HTML w Eclipse, nie trzeba ponownie uruchamiać tryb rozwoju. Wystarczy przejść do przeglądarki i nacisnąć Odśwież. Stopnie - Kliknij nazwę projektu i Uruchom jako Web Application - Wynik: Pokazuje kartę URL w trybie "rozwoju" Należy wkleić adres URL do przeglądarki

25 Literatura: