Metody integracji techniki AJAX w aplikacjach Web opartych o platformę Java Enterprise Edition

Transkrypt

1 Jan Mrzygłód 21 października 2006, Kraków Metody integracji techniki AJAX w aplikacjach Web opartych o platformę Java Enterprise Edition Jan Mrzygłód Java Developer Days

2 Zobaczmy to na mapie Jan Mrzygłód Java Developer Days

3 Jakieś sugestie? Jan Mrzygłód Java Developer Days

4 Inni nie pozostają w tyle Jan Mrzygłód Java Developer Days

5 Czy wiedziałeśże Aplikacje AJAX używają technologii które były z nami przez lata Jedyne czego brakowało to: Wizja. Jan Mrzygłód Java Developer Days

6 Jaka jest więc c wizja? Jan Mrzygłód Java Developer Days

7 Co to jest AJAX? Typowe wzorce AJAX Typowe problemy AJAX Biblioteki AJAX Integracja AJAX z JEE Narzędzia wspomagające Prezentacja praktyczna Pytania Agenda Jan Mrzygłód Java Developer Days

8 Zaczynamy! Co to jest AJAX? Typowe wzorce AJAX Typowe problemy AJAX Biblioteki AJAX Integracja z JEE Narzędzia wspomagające Prezentacja praktyczna Pytania Jan Mrzygłód Java Developer Days

9 Nie jest technologią Technika tworzenia interaktywnych aplikacji Web Cel: Interaktywnie Przyjaźnie Szybko AJAX w pigułce Ergonomicznie Jan Mrzygłód Java Developer Days

10 Asynchronous Żądania są tworzone asynchronicznie z wykorzystaniem XMLHttpRequest Żądanie nie wstrzymuje przeglądarki oraz użytkownika JavaScript Język skryptowy Akronim JScript wg. Microsoftu And Inne technologie takie jak CSS, XHTML XML XML jako technologia wymian danych Jan Mrzygłód Java Developer Days

11 Typowy przykład Jan Mrzygłód Java Developer Days

12 Odpowiedź jako HTML Jak to działa Zwracany tekst lub HTML Modyfikacja strony Zalety Łatwe w oprogramowaniu Minimalna ilość JavaScript Mniej przetwarzania Wady Może zużywać więcej pasma Nie tak łatwe do powtórnego użycia jak ogólne serwisy Trudne to zorganizowania tak by modyfikować różne elementy strony Jan Mrzygłód Java Developer Days

13 Odpowiedź semantyczna Jak to działa Zwracany XML lub JSON Interpretacja i modyfikacja Zalety Łatwość modyfikacji różnych elementów Małe wykorzystania pasma Powtórne użycie Wady XML wymaga parsingu który z kolei wymaga mocy obliczeniowej Inne podejścia jeśli chodzi o rendering inicjacyjny a modyfikacjy Mnóstwo specyficznego dla aplikacji kodu JavaScript Jan Mrzygłód Java Developer Days

14 Odpowiedź skryptowa Jak to działa Zwracany JavaScript Uruchomienie i modyfikacja Zalety Minimum kodu JavaScript Łatwo wykorzystać możliwości głównego języka implementacji aby śledzić DOM, zarządzać aktualizacjami itp.. Wady Wrażliwe jeśli mieszamy wraz z bibliotekami które modyfikują DOM Bardzo ściśle związany ze strukturą strony trudne do re-użycia Jan Mrzygłód Java Developer Days

15 Filozofia modelu Aplikacje AJAX nie: Przeładowują całej strony by zmodyfikować jej jedną część Ograniczają kreatywność twórców do niewielkiego zbioru kontrolek HTML Blokują aktywność użytkownika podczas oczekiwania na odpowiedź serwera Odświeżają strony pomiędzy ładowaniami Aplikacje AJAX zazwyczaj: Ładują dużo danych przy pierwszym wejściu na stronę Dokonują małych przyrostowych aktualizacji części strony Są interaktywne (informują użytkowników o tym co w danej chwili robią) Udostępniają elastyczne kontrolki Aplikacje AJAX są: Wydajne Ergonomiczne Interaktywne Jan Mrzygłód Java Developer Days

16 Całe bogactwo aplikacji typu Desktop Zaawansowane kontrolki interfejsu użytkownika Natychmiastowa odpowiedź Drag & drop Animacje Ziemia obiecana? Szybkie odpowiedzi (brak białych plam w przeglądarce) Wszystkie zalety aplikacji typu Web Proste wdrażanie pomiędzy platformami Natychmiastowa aktualizacja poprzez instalacje na serwerze Siła i elastyczność projektu graficznego Bezpieczeństwo i stabilność po stronie serwera Jan Mrzygłód Java Developer Days

17 Dwie strony medalu var xhr; try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { xhr = false; } } if (!xhr && typeof XMLHttpRequest!= 'undefined') { xhr = new XMLHttpRequest(); } Jan Mrzygłód Java Developer Days

18 AJAX to coś więcej niż zdalne wywołania Manipulacje modelem DOM CSS DHTML Złożone efekty graficzne Bogate doświadczenia użytkowników Wiele narzędzi Rzeczywistość Szkielety łagodzące trud kodowania JavaScript Łatwy do użycia nawet poprzez niewielkie wstawki Budowa kompletnej aplikacja AJAX może przypominać budowę bogatej aplikacji desktop w języku JavaScript Jan Mrzygłód Java Developer Days

19 Wgłę łębiamy się w AJAX Co to jest AJAX? Typowe wzorce AJAX Typowe problemy AJAX Biblioteki AJAX Integracja z JEE Narzędzia wspomagające Prezentacja praktyczna Pytania Jan Mrzygłód Java Developer Days

20 Znacznik statusu operacji Kiedy używać Długotrwające operacje Ładowanie plików na serwer Każde żądanie asynchroniczne mogące trwać kilka sekund Jak działa Użytkownik wyzwala operacje Wywołane jest zapytanie asynchroniczne oraz pokazana jest animacja Gdy zostaje otrzymana odpowiedź animacja jest usuwana W bardziej skomplikowanych przypadkach możliwe jest użycie czasomierzy po stronie klienta / serwera modyfikujących procentowy stopień postępu procesu Jan Mrzygłód Java Developer Days

21 Drill down Kiedy używać Interfejsy podobne do klientów z listą oraz panelem do przeglądania Kiedykolwiek użytkownik może przeglądać listę oraz przewijać elementy Jak działa Aplikacja wysyła żądanie danych poprzez onclick lub onkeypress Zwracane rezultaty są umieszczane w przewijanym polu Jan Mrzygłód Java Developer Days

22 Panel kontrolny popup Kiedy używać Panele z kontrolkami które nie w każdej chwili są potrzebne użytkownikowi Zaawansowane wyszukiwanie Przyciski które mają użyteczne opcje dla aktualnego elementu Jak działa Ukryty div zawierający panel kontrolny Przy zdarzeniu onclick, jest wywoływany i pozycjonowany Użytkownik może wykonywać operacje oraz zamknąć (schować) pop-up Do odkrywania/ukrywania panelu mogą być wykorzystywane efekty animacji Jan Mrzygłód Java Developer Days

23 Drag & drop Kiedy używać Sterowanie zawartością Reorganizacja list Listy zakupów Re-aranżacja portletów Jak działa Rejestrujemy komponenty (np. okna) Odbiorniki zdarzeń przesunięć myszy są zarejestrowane w przesuwalnych komponentach Przy zdarzeniu onmouseup, sprawdzana jest pozycja przynależności do celów upuszczania Jeśli rozpoznano cel, wysyłane jest żądanie powiadamiające serwer W innym przypadku - animacja do powrotu do poprzedniego stanu Najprościej użyć szkieletu Jan Mrzygłód Java Developer Days

24 Wirtualna przestrzeń Kiedy używać Serwisy map Każda aplikacja z funkcją zoom Bardzo duże wykresy bądź obrazy Jak działa Dane obrazu lub wykresu są dzielone na płytki Aktualnie widoczne identyfikatory płytek przechowywane są w tablicy JavaScript Wewnętrzny div wyświetla widoczne płytki w siatce Przy każdym przeciągnięciu siatka jest przesuwana Jeśli zachodzi potrzeba uaktualnienie poprzez żądanie zdalne Jan Mrzygłód Java Developer Days

25 Natychmiastowa walidacja Kiedy używać Wyświetlanie błędu gdy nazwa użytkownika jest już zajęta Wyświetlanie błędów formatu Wyświetlanie podpowiedzi Jak działa Podobieństwo do auto-uzupełniania Akcja serwera uruchamiana onkeypressed Błędy wyświetlane przy polu wejściowym Jan Mrzygłód Java Developer Days

26 Auto uzupełnianie Kiedy używać Pola zaznaczane kaskadowo Dynamiczne pola wyszukiwania Auto wypełnianie skojarzonych lub zależnych pól Uzupełnianie tabulatorem w polach formularza Jak działa Aplikacja wysyła do serwera wiadomości poprzez zdarzenia onkeypress, onchange Przychodzące wyniki są użyte do wpisania w inne pola lub zbiór wartości które mogą być zaznaczone i wybrane Jan Mrzygłód Java Developer Days

27 Powiadamianie użytkownikau Kiedy używać Zakończenia lub pojawienie się błędów w długotrwających procesach Pojawienie się nowej wiadomości lub elementu Inny użytkownik aktualnie pracuje na tym samym obiekcie aplikacji Jak działa Strona zawiera niewidzialny obszar powiadomień Timer JavaScript periodycznie sprawdza (pooling) serwer poprzez zapytanie asynchroniczne Powiadomienie jest wyświetlane dla użytkownika w obszarze powiadomień Użytkownik może dokonywać operacji na powiadomieniu (pop-up control panel) Jan Mrzygłód Java Developer Days

28 Profilowanie użytkownikau Kiedy używać Zapis preferencji wyświetlania Śledzenie czasu spędzonego na każdej stronie Śledzenie które pole formularza powoduje problemy Zdobywanie statystyk ergonomiczności Jak działa Akcje użytkownika ustawiające preferencje na stronie, wysyłają asynchroniczne akcje do serwisu preferencji gdzie zostają zapisane do przyszłego użytku Mogą być użyte timery Javascript do periodycznego wysyłania bitu życia (heartbeat) do serwera który może być użyty do śledzenia czasu spędzonego na danej stronie Żądanie może być wysłane przy przejściu pomiędzy polami formatki do śledzenia ile czasu jest spędzane nad każdym z pól i zrozumieć charakterystykę funkcjonalności Jan Mrzygłód Java Developer Days

29 Efekty wizualne Kiedy używać Dodawanie lub kasowanie elementów strony Podświetlenia ostatnio dodanych lub zmodyfikowanych elementów strony Animacje dla zaawansowanych widgetów strony Jak działa Efekt wizualny rozpoczyna się poprzez rozpoczęcie czasowej sekwencji JavaScript która modyfikuje rozmiar, kolor, widoczność oraz inne atrybuty elementów Zazwyczaj ukrywane jako biblioteka efektów Jan Mrzygłód Java Developer Days

30 Co to jest AJAX? Nie ma rzeczy idealnych Typowe wzorce AJAX Typowe problemy AJAX Biblioteki AJAX Integracja z J2EE Narzędzia wspomagające Prezentacja praktyczna Pytania Jan Mrzygłód Java Developer Days

31 Problemy: Użytkownik wywołuje akcje zdalną bez zdawania sobie sprawy z tego faktu Brak pewności czy akcja została wywołana na serwerze Duplikacja żądań Można przypadkowo przerwać długotrwałą akcje Rozwiązania: Brak odpowiedzi Wyświetlać dyskretną animacje kiedy tylko jest jakaś operacja w tle Używać bibliotek efektów gdy uzyskano poprawną odpowiedź Zawsze wyświetlać komunikat błędu gdy tylko jest jakieś niepowodzenie operacji Jan Mrzygłód Java Developer Days

32 Brak widoczności ci linku Problem: Duża część strony może być uaktualniona bez ładowania całej strony Pająki sieciowe mogą widzieć jedynie zawartość inicjującą Użytkownik nie może wysłać linka znajomym Użytkownik nie może zaznaczyć zawartości (bookmark) Trudność z linkiem z jednej części aplikacji do drugiej Rozwiązanie: Ładowania całej strony dla newralgicznych przejść Wspierać dwa modele przyrostowe modyfikacje oraz dla całej strony Udostępniać linki by użytkownik miał permanentny URL Udostępniać linki by użytkownik mógł wysłać URL do innych ludzi Jan Mrzygłód Java Developer Days

33 Brak przycisku back Problem Zaawansowana aplikacja AJAX może mieć jedynie pierwszą stronę w pełni ładowalną Użytkownicy są przyzwyczajeni do używania przycisków następny / poprzedni Mogą niechcący wyjść za aplikacji tracąc całą zawartość strony Rozwiązanie Wsparcie dla linków (poprzedni slajd) Użycie biblioteki Jan Mrzygłód Java Developer Days

34 Złamanie oczekiwań Web Problem Dane z formatek są wysłane bez submit a użytkownik nie zdaje sobie z tego sprawy Wiele indywidualnych przewijanych regionów na (przewijanej) stronie Nie działają klawisze back, bookmark Niespójne standardy kontrolek formularzy Rozwiązanie: Uważność w auto-zapisie formularzy Konsystencja w całej aplikacji Używanie popularnych bibliotek do efektów widget, tak aby użytkownik mógł je rozpoznać Jan Mrzygłód Java Developer Days

35 Złamanie oczekiwań Desktop Problem: Aplikacje AJAX stają się zastępnikiem aplikacji konwencjonalnych Wyglądają tak jak aplikacje desktop (n.p. Outlook) Nie wspierają jednak (zazwyczaj) standardowych cech grubego klienta: Cofnięcie, powtórzenie (undo / redo) Auto-zapis Ostrzeżenie podczas zamknięcia nie zachowanego dokumentu Rozwiązanie Implementacja cofnięć, powtórzeń, auto-zapisu oraz ostrzeżeń przy zamykaniu Zapewnić że przycisk powrotu nie wyprowadzi użytkownika poza aplikacje Zapewnić by linki nie otwierały się w tym samym oknie/zakładce zastępując aplikacje Jan Mrzygłód Java Developer Days

36 Ignorowanie błęb łędów Problem Użytkownik wywołuje zdalną operacje Wywołanie zwraca błędny kod lub zostaje przekroczony czas oczekiwania Użytkownik myśli iż akcja została poprawnie wywołana Strona jest niekompletna lub przestaje być spójna ze stanem serwera Rozwiązanie: Sprawdzać status HTTP w obiekcie odpowiedzi a nie tylko stan gotowości Wypisywać błędy procedur dla klauzul wyłapujących jak również błędne kody zwrotu Nie wyświetlać efektów sukcesu dopóki żądanie nie zostanie całkowicie obsłużone w tym czasie wyświetlać pasek postępu Zaimplementować spójny sposób informowania o błędach (komunikaty błędów, zaznaczenie na czerwono itp.) Jan Mrzygłód Java Developer Days

37 Niespójne odświe wieżanie Problem: Jedna część strony jest odświeżana periodycznie (server polling) Inna część jest statyczna dopóki strona nie zostanie ponownie w pełni odświeżona Mylące dla użytkownika Dane mogą być niespójne Rozwiązanie: Nie mieszać statycznych oraz dynamicznych danych wybrać jedno rozwiązanie Nie zapominać zmodyfikować wszystkie części strony jeśli te same dane są powtórzone wielokrotnie Jan Mrzygłód Java Developer Days

38 Starsze przeglądarki Problem Pewna funkcjonalność dostępna jedynie poprzez AJAX Użytkownicy z niekompatybilnymi przeglądarkami nie będą w stanie skorzystać z naszej aplikacji i być może nie będą nawet wiedzieli dlaczego aplikacja im nie działa Rozwiązanie Dostarczyć czyste strony HTML do dostępu do podstawowej funkcjonalności Testować z wyłączonym JavaScript Testować w starszych przeglądarkach Jan Mrzygłód Java Developer Days

39 Za dużo o połą łączeń Problem Strona może posiadać kilka znaczników pollingu serwera Przeglądarki limitują liczbę równoczesnych połączeń Ryzyko konfliktu jednoczesnej zmiany w DOM Ryzyko znaczących spowolnień Rozwiązanie Bądź świadomy ile połączeń jest niezbędne Kolejkowaćżądania i wykonywać w sekwencji lub jako jedno połączone wywołanie Użycie oddzielnych wywołań zwrotnych (callbacks) do równoległych żądań tak aby odświeżyć właściwy znacznik stanu postępu Jan Mrzygłód Java Developer Days

40 Eksplozja DOM Problem Rezultaty wywołania są zachowywane w DOM bez usunięcia poprzednich informacji Dynamiczna zawartość jest tworzona za każdym użyciem i tylko ukrywana kiedy już nie jest potrzebna Aplikacja zaczyna działać wolniej Rozwiązanie Usunięcie elementów z DOM kiedy są już niepotrzebne Ponowne użycie elementów pop-up, znaczników stanu, boksów komunikatów itd.. Jan Mrzygłód Java Developer Days

41 Co to jest AJAX? Nie wymyślajmy koła Typowe wzorce AJAX Typowe problemy AJAX Biblioteki AJAX Integracja z J2EE Narzędzia wspomagające Prezentacja praktyczna Pytania Jan Mrzygłód Java Developer Days

42 Biblioteki, szkielety - podział Specjalizowane biblioteki JavaScript Zdalne wywołania, Efekty, Drag & Drop, Komponenty DHTML Mogą być mieszane i dopasowane Wszechstronne biblioteki JavaScript Udostępniają powyższą funkcjonalność i więcej Czysty interfejs pomiędzy stroną serwera a klienta Language-specific Wrappery JavaScript Wygodne narzędzia / marka do ukrywania detali JavaScript Świetne do dodania małej właściwości AJAX do aplikacji Web W środku ciągle jednak JavaScript / DOM Language-specific Implementacje AJAX Brak zależności z zewnętrznymi bibliotekami Mogą wstawiać cechy języka do warstwy JavaScript Mogą być silnie zintegrowane z istniejącymi szkieletami W kontekście JEE omówione szerzej w kolejnym rozdziale Jan Mrzygłód Java Developer Days

43 Uniwersalny zestaw narzędzi Pełny i wszechstronny, zawierający: Biblioteki pomocnicze JavaScript Operacje na DOM / CSS Biblioteki zdarzeń Kolekcje Wywołania zdalne Wsparcie dla JSON Parser XML Widgets WYSIWIG Text Editor Efekty Drag & Drop Walidacja Manipulacja grafiką DOJO Jan Mrzygłód Java Developer Days

44 Biblioteka uniwersalnego zastosowania Udostępnia podstawowe udogodnienia metod JavaScript Np.. ${foo} zamiast document.getelementbyid( foo ) Zapewnia podstawową funkcjonalność AJAX Wywołania zdalne Periodyczne modyfikacje Ewaluacje JSON Prototype Lekka i prosto zintegrowana z innymi bibliotekami JavaScript Jan Mrzygłód Java Developer Days

45 Rico Na podstawie Prototype Udostępnia podstawową funkcjonalność AJAX: wywołania zdalne, drag & drop, efekty (np. zaokrąglone rogi) widgets (live grid) Wsparcie dla modyfikacji więcej niż jednego elementu strony poprzez jedną odpowiedź Lekki i prosto zintegrowany z innymi bibliotekami Yahoo User Interface Library Echo Scriptaculous Rialto Popularne szkielety - inne Jan Mrzygłód Java Developer Days

46 TrimPath trimpath.com Log4js log4js.sourceforge.net log4js.berlios.de JsUnit jsunit.net Biblioteki ogólne JSON parser kawa.net/works/js/jkl/parsexml.html Jan Mrzygłód Java Developer Days

47 Małą czarną poproszę Co to jest AJAX? Typowe wzorce AJAX Typowe problemy AJAX Biblioteki AJAX Integracja z JEE Narzędzia wspomagające Prezentacja praktyczna Pytania Jan Mrzygłód Java Developer Days

48 Biblioteki Integracja z Servlet API Integracja z JSF Integracja z JEE Integracja z Tapestry Integracja z Portlet API Jan Mrzygłód Java Developer Days

49 Google Web Toolkit AjaxTags AjaxStruts Biblioteki dedykowane Javie Direct Web Remoting Jan Mrzygłód Java Developer Days

50 Integracja z platformą JEE AjaxTags Szkielet Javy dla AJAX Usiłuje zasłonić developerów od praktycznie całego kodu JavaScript Niestandardowe znaczniki JSP dla funkcjonalności takich jak: Autouzupełnianie Callout Zamiana DOM Kaskadowe wybieranie Kaskadowe modyfikacje pól Zintegrowane efekty dla znacznika postępu stanu Dobry dla minimalnej ilości AJAX, jednak jeszcze niedojrzały Nie mylić z Struts AJAX Tags Jan Mrzygłód Java Developer Days

51 Szkielet AJAX dla platformy Java Zachowanie podobne do RMI, daje dostęp do klas dostępnych po stronie serwera z kodu JavaScript klienta Faworyzuje styl odpowiedzi semantycznej Dodaje udogodnienia Odpowiedź przychodzi jako obiekt a nie XML Metody narzędziowe do modyfikacji zbioru opcji na podstawie tablicy Popularny DWR Direct Web Remoting Zintegrowany z przodującymi frameworkami javy (Struts, Tapestry, Spring, JSF) Jan Mrzygłód Java Developer Days

52 Prosty przykład (1/4) Tworzenie obiektu XMLHttpRequest reprezentującego żądanie var req; function validate() { var idfield = document.getelementbyid("userid"); var url = "validate?id=" + escape(idfield.value); if (window.xmlhttprequest) { req = new XMLHttpRequest(); } else if (window.activexobject) { req = new ActiveXObject("Microsoft.XMLHTTP"); } req.open("get", url, true); req.onreadystatechange = callback; req.send(null); } Jan Mrzygłód Java Developer Days

53 Prosty przykład (2/4) Przetwarzanie żądania przez Servlet i generowanie odpowiedzi public void doget(httpservletrequest request, HttpServletResponse response) throws IOException, ServletException { String targetid = request.getparameter("id"); if ((targetid!= null) &&!users.containskey(targetid.trim())) { response.setcontenttype("text/xml"); response.setheader("cache-control", "no-cache"); response.getwriter().write("valid"); } else { response.setcontenttype("text/xml"); response.setheader("cache-control", "no-cache"); response.getwriter().write("invalid"); } } Jan Mrzygłód Java Developer Days

54 Prosty przykład (3/4) Zwrócenie odpowiedzi i wywołanie funkcji modyfikującej stronę function callback() { if (req.status == 200) { // call function to update the HTML DOM } } Jan Mrzygłód Java Developer Days

55 Prosty przykład (4/4) Modyfikacja zawartości (poprzez DOM) var rootdisplaynode = document.getelementbyid("root"); var TAB = document.createelement("table"); TAB.cellSpacing = "0"; TAB.cellPadding = "0"; TAB.border = "0"; TAB.className = "table_class"; var TB = document.createelement("tbody"); var TR = document.createelement("tr") var TD = document.createelement("td"); var class = "td_class"; TD.className = "td_class"; var link = document.createelement("a"); link.href = "#"; link.appendchild(document.createtextnode("link")); TD.appendChild(link); TR.appendChild(TD); TB.appendChild(TR); TAB.appendChild(TB); rootdisplaynode.appendchild(tab); Jan Mrzygłód Java Developer Days

56 Integracja AJAX oraz JSF Integracja z istniejącą architekturą JSF Niestandardowy komponent JSF współdziałający z kontrolerem AJAX Niestandardowy komponent JSF Jan Mrzygłód Java Developer Days

57 Integracja z istniejącą architekturą Jan Mrzygłód Java Developer Days

58 Kontroler AJAX Jan Mrzygłód Java Developer Days

59 Niestandardowy komponent Jan Mrzygłód Java Developer Days

60 Prosta Dedykowany Servlet, lub z użyciem szkieletu ogólnego przeznaczenia Zaawansowana Integracja z Tapestry Dedykowana biblioteka (np. Tacos), lub niestandardowe komponenty Jan Mrzygłód Java Developer Days

61 Specyfika Portlet API w kontekście wykorzystania techniki AJAX Potencjalne problemy Rozwiązania AJAX & Portlet API Jan Mrzygłód Java Developer Days

62 AJAX & Portlet API Jan Mrzygłód Java Developer Days

63 Co to jest AJAX? Dobre narzędzie to podstawa Typowe wzorce AJAX Typowe problemy AJAX Biblioteki AJAX Integracja z J2EE Narzędzia wspomagające Prezentacja praktyczna Pytania Jan Mrzygłód Java Developer Days

64 Popularne narzędzia Live Source Viewers Polegamy na view source do debugowania standardowych aplikacji web Nieeleganckie Nie działa gdy kod JavaScript dynamicznie dodaje/usuwa zawartość Narzędzie które przetłumaczy aktualny model DOM do widoku źródła Sprawdź rozszerzenia Firefox View Rendered Source Chart View Formatted Source Można również używać Ctrl-A oraz View selection source do otrzymania syntaktycznie podświetlonego widoku źródła strony. Jan Mrzygłód Java Developer Days

65 Firefox plugins View Rendered Source Chart View formatted source Jan Mrzygłód Java Developer Days

66 Nawigacja po całym drzewie DOM Widok właściwości każdego elementu Widok jak obliczany jest styl CSS Check out: Inspektorzy DOM Firefox built-in DOM Inspector (Tools Menu) Safari Debug Menu and Web Inspector Internet Explorer Developer Tool and DOM Inspector Jan Mrzygłód Java Developer Days

67 Odpluskwiacze JavaScript Każda aplikacja AJAX posiada dużo kodu JavaScript Przeglądarki (w szczególności inne niż Mozilla) nie ułatwiają odpluskwiania Brak łatwego sposobu na logowanie informacji debugujących w sposób niezniszczalny po przeładowaniu strony Jan Mrzygłód Java Developer Days

68 Java Script Debuggers Sprawdź Venkman JavaScript Debugger MyEclipse JavaScript Debugger (oraz inne narzędzia dla AJAX) Microsoft Script Debugger Jan Mrzygłód Java Developer Days

69 IE WebDeveloper Jan Mrzygłód Java Developer Days

70 FF DOM Inspector Jan Mrzygłód Java Developer Days

71 FF JavaScript Debugger Jan Mrzygłód Java Developer Days

72 FF FireBug Jan Mrzygłód Java Developer Days

73 Książki Pragmatyczny AJAX Wzorce Projektowe AJAX AJAX w akcji Strony web AjaxPatterns.org AlistApart.com Ajaxian.com Gdzie dowiedzieć się więcej? Jan Mrzygłód Java Developer Days

74 Show time Co to jest AJAX? Typowe wzorce AJAX Typowe problemy AJAX Biblioteki AJAX Integracja z J2EE Narzędzia wspomagające Prezentacja praktyczna Pytania Jan Mrzygłód Java Developer Days

75 Portal Liferay Jan Mrzygłód Java Developer Days

76 Platforma BEA ALSB Jan Mrzygłód Java Developer Days

77 O firmie Jesteśmy firmą zaawansowanych technologii Działamy na rynku Globalnym Dostarczamy wysokiej jakości produkty Jan Mrzygłód Java Developer Days

78 Partnerzy technologiczni Jan Mrzygłód Java Developer Days

79 Co to jest AJAX? Partnerzy technologiczni Typowe wzorce AJAX Typowe problemy AJAX Biblioteki AJAX Integracja z J2EE Narzędzia wspomagające Prezentacja praktyczna Pytania Jan Mrzygłód Java Developer Days

80 Zakończenie Dziękuj kuję za uwagę! Jan Mrzygłód Java Developer Days