Nowe Trendy W Projektowaniu Aplikacji Webowych

1,737 views
1,658 views

Published on

Originally presented on Academic Developer Day 2006 (Faculty of Mathematics and Computer Science, NCU, Torun)

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,737
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Nowe Trendy W Projektowaniu Aplikacji Webowych

  1. 2. AGENDA <ul><li>Wstęp – rzut oka na współczesne aplikacje webowe </li></ul><ul><li>Filozofia AJAX – omówienie, wady, zalety, słownik pojęć </li></ul><ul><li>ASP.net Atlas – wprowadzenie, omówienie architektury </li></ul><ul><li>Trzy poziomy pracy z Atlasem: </li></ul><ul><ul><li>JavaScript </li></ul></ul><ul><ul><li>XML-Script </li></ul></ul><ul><ul><li>Kontrolki serwerowe </li></ul></ul><ul><li>Demo </li></ul>
  2. 3. WSTĘP <ul><li>Aplikacje webowe zdobywają coraz więcej popularności: </li></ul><ul><ul><li>możliwość uruchomienia na każdej maszynie wyposażonej w przeglądarkę i podłączonej do Internetu </li></ul></ul><ul><ul><li>małe wymagania systemowe po stronie klienta </li></ul></ul><ul><ul><li>łatwość projektowania interfejsu użytkownika </li></ul></ul><ul><li>Istotne różnice między aplikacjami webowymi a tradycyjnymi z punktu widzenia użytkownika końcowego i programisty: </li></ul><ul><ul><li>dłuższy czas reakcji - dane na odległych serwerach </li></ul></ul><ul><ul><li>uciążliwe, dezorientujące przeładowania strony </li></ul></ul><ul><ul><li>potrzeba żmudnego programowania w JavaScripcie </li></ul></ul>
  3. 4. WSTĘP - cel <ul><li>Celem dzisiejszej prezentacji jest omówienie zupełnie innego podejścia do pisania aplikacji webowych </li></ul><ul><li>Chcemy napisać aplikację webową o dużej interaktywności i łatwej nawigacji </li></ul><ul><li>Chcemy pobierać dane z odległych serwerów w tle – bez przeładowywania strony </li></ul><ul><li>Chcemy jak najbardziej upodobnić korzystanie z naszej aplikacji do obsługi tradycyjnych (niewebowych) aplikacji </li></ul>
  4. 5. AJAX - wprowadzenie <ul><li>AJAX - Asynchronous JavaScript And XML </li></ul><ul><li>AJAX - nie jest jednoznacznie określoną technologią - jest to raczej sposób myślenia, inne podejście do programowania aplikacji webowych </li></ul><ul><li>AJAX - jest rozumiany także jako zestaw technologii użytych razem i tworzących nową jakość: </li></ul><ul><ul><li>standardowa warstwa prezentacji oparta na XHTML i arkuszach stylów (CSS) </li></ul></ul><ul><ul><li>dynamiczne wyświetlanie i interakcja w oparciu o DOM (Document Object Model) </li></ul></ul><ul><ul><li>manipulowanie i wymiana danych przy użyciu XML i XSLT </li></ul></ul><ul><ul><li>asynchroniczne pobieranie danych z użyciem XMLHttpRequest </li></ul></ul><ul><ul><li>JavaScript łączący wszystkie powyższe technologie </li></ul></ul>
  5. 6. AJAX – słownik pojęć <ul><li>XHTML – Extensible HyperText Markup Language „HTML zgodny z XML” </li></ul><ul><li>XML – Extensible Markup Language – „sposób opisu ze znacznikami” </li></ul><ul><li>XSLT – XSL Transformations – pozwala przetłumaczyć dokumenty z jednego formatu XML na inny </li></ul><ul><li>JavaScript – obiektowo skryptowy język programowania wykorzystywany po stronie klienta m. in. do zapewniania interaktywności dokumentów HTML </li></ul><ul><li>DOM – Document Object Model – sposób reprezentacji dokumentów HTML i XML w postaci modelu zorientowanego obiektowo </li></ul><ul><li>CSS – Cascading Style Sheets – opis sposobu renderowania stron WWW </li></ul><ul><li>XMLHttpRequest – obiekt JavaScriptowy pozwalający na bezpośrednie zgłaszanie żądań HTTP z poziomu skryptu JS </li></ul>
  6. 7. AJAX – przykłady zastosowań <ul><li>Obsługa poczty elektronicznej: gmail.com </li></ul><ul><li>Wyszukiwanie z dynamicznymi podpowiedziami: Google Suggest </li></ul><ul><li>Strona startowa: start.com </li></ul><ul><li>System map: Virtual Earth </li></ul><ul><li>wiele, wiele innych – podejście AJAXowe jest dynamicznie rozwijającym się sposobem pisania aplikacji webowych </li></ul>
  7. 8. AJAX – wady <ul><li>Brak poprawnej obsługi przycisków Wstecz / Dalej </li></ul><ul><li>Niemożność zaindeksowania treści strony przez wyszukiwarki </li></ul><ul><li>Brak obsługi historii </li></ul><ul><li>Niekompatybilność ze starszymi/dziwnymi przeglądarkami </li></ul><ul><li>Trudności w linkowaniu </li></ul>Są podejmowane próby rozwiązania tych problemów!
  8. 9. ASP.NET 2.0 – Asynchroniczne callbacki <ul><li>Implementując interfejs ICallbackEventHandler zyskujemy możliwość wywołania c# metody RaiseCallBackEvent po stronie klienta z poziomu JavaScript </li></ul><ul><li>TreeView </li></ul><ul><ul><li>PopulateNodesFromClient i EnableClientScript </li></ul></ul>
  9. 10. ATLAS – Co to jest? <ul><li>Zestaw nowych technologii służących do rozwijania aplikacji webowych </li></ul><ul><li>Dotyczy zarówno „client-side” jak i „server-side” </li></ul><ul><li>O Atlasie można myśleć jako o implementacji podejścia AJAX zgodnej z ASP.NET 2.0 </li></ul><ul><li>Cel: budowanie obfitego, dynamicznego interfejsu użytkownika w aplikacjach webowych oraz asynchroniczny dostęp do danych </li></ul><ul><li>Wersja: „early pre-alpha release”, ale już z dużą funkcjonalnością </li></ul><ul><li>Tworząca się społeczność - blogi, tutoriale rekompensują tymczasowy brak dokumentacji </li></ul><ul><li>Twórcy Atlasa liczą na duży feedback </li></ul>
  10. 11. ATLAS – Co zawiera? <ul><li>Zestaw nowych webowych technologii, na który składa się: </li></ul><ul><ul><li>obszerny zbiór bibliotek skryptów wykonywanych po stronie klienta z pełnym wsparciem: dla obiektowego modelu programowania, różnych przeglądarek, asynchronicznego wywołania webserwisów oraz projektowania obfitych i dynamicznych interfejsów użytkownika </li></ul></ul><ul><ul><li>zbiór komponentów zanurzonych w technologii ASP.NET 2.0 – po stronie serwera – deklaratywny sposób generowania odpowiednich skryptów klienckich </li></ul></ul><ul><ul><li>zestaw webserwisów dodających przydatne funkcjonalności po stronie klienta </li></ul></ul>
  11. 12. ATLAS – architektura “ Atlas” Server Framework “ Atlas” Client Framework and Services “ Atlas”-enabled ASP.NET Pages Web Services (ASMX or WCF) HTML, Script, “ Atlas” Markup “ Atlas” Service Proxies ASP.NET “Atlas” Server Extensions “ Atlas” Server Controls App Services Bridge Web Services Bridge ASP.NET 2.0 Application Services Page Framework, Server Controls “ Atlas” Client Script Library Controls Script Core Base Class Library User Interface Browser Compatibility Browser Compatibility Script Core
  12. 13. ATLAS – architektura <ul><li>Warstwa kompatybilności </li></ul><ul><ul><li>Firefox </li></ul></ul><ul><li>Internet Explorer: </li></ul><ul><ul><li>Traktowany jako bazowy </li></ul></ul><ul><ul><li>Dla innych przeglądarek emulowane nieistniejące w nich funkcje IE </li></ul></ul><ul><li>Safari </li></ul><ul><ul><li>Najwięcej problemów ze względu na specyficznie tworzony DOM </li></ul></ul>“ Atlas” Client Script Library Controls Script Core Base Class Library User Interface Browser Compatibility Browser Compatibility Script Core
  13. 14. ATLAS – architektura <ul><li>Script Core </li></ul><ul><li>Dodanie konstrukcji OOP do JavaScriptu </li></ul><ul><li>Przestrzenie nazw </li></ul><ul><li>Klasy </li></ul><ul><ul><ul><ul><li>dziedziczenie (klasy sealed, abstrakcyjne…) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>metody abstrakcyjne i wirtualne </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Interfejsy </li></ul></ul></ul></ul><ul><li>Typy wyliczeniowe </li></ul>“ Atlas” Client Script Library Controls Script Core Base Class Library User Interface Browser Compatibility Browser Compatibility Script Core
  14. 15. ATLAS – architektura <ul><li>Biblioteka przydatnych klas </li></ul><ul><ul><li>Sieć: WebRequest, WebResponse </li></ul></ul><ul><ul><li>StringBuilder </li></ul></ul><ul><ul><li>Timer </li></ul></ul><ul><ul><li>Debugger </li></ul></ul>“ Atlas” Client Script Library Controls Script Core Base Class Library User Interface Browser Compatibility Browser Compatibility Script Core
  15. 16. ATLAS – architektura <ul><li>User Interface </li></ul><ul><li>Model komponentowy </li></ul><ul><li>Web.Component posiadający bindowania </li></ul><ul><li>Deklaratywny sposób na interfejs użytkownika </li></ul><ul><li>XmlScript tłumaczony w runtime’ie (po stronie klienta) na „obiekty” JavaScript </li></ul>“ Atlas” Client Script Library Controls Script Core Base Class Library User Interface Browser Compatibility Browser Compatibility Script Core
  16. 17. ATLAS – architektura <ul><li>Kontrolki klienckie </li></ul><ul><ul><li>Konkretne kontrolki rozszerzają Web.UI.Control o specyficzne funkcjonalności </li></ul></ul><ul><ul><li>Przykłady: </li></ul></ul><ul><ul><li>TextBox z autouzupełnianiem </li></ul></ul><ul><ul><li>VirtualEarthMap </li></ul></ul><ul><ul><li>Web.UI.Control dziedziczy z Web.Component dodając m.in. właściwości takie jak „zachowania”, „cssClass” </li></ul></ul>“ Atlas” Client Script Library Controls Script Core Base Class Library User Interface Browser Compatibility Browser Compatibility Script Cor e
  17. 18. ATLAS – architektura <ul><li>Kontrolki serwerowe </li></ul><ul><ul><li>Dostarczają warstwę abstrakcji nad kontrolkami klienckimi. </li></ul></ul><ul><ul><li>Generują xml-script </li></ul></ul>ASP.NET “Atlas” Server Extensions “ Atlas” Server Controls App Services Bridge Web Services Bridge
  18. 19. ATLAS – architektura <ul><li>Proxy usług webowych </li></ul>“ Atlas” Service Proxies <ul><li>Webserwisy (ASMX) </li></ul><ul><li>Webmetody osadzone na stronie ASPX </li></ul><ul><li>Automatyczne tworzenie proxy </li></ul><ul><ul><li><script src=„SuperServis.asmx/js”/> </li></ul></ul><ul><li>W komunikacji z webserwisami użyty JSON (JavaScript Object Notation) </li></ul><ul><li>eval() </li></ul><ul><li>serializer/deserializer </li></ul><ul><li>przykład: [&quot;A&quot;:{&quot;x&quot;:1, &quot;y&quot;:2}, &quot;B&quot;:{&quot;x&quot;:3,&quot;y&quot;:1}] </li></ul>
  19. 20. ATLAS – bindowanie <ul><li>Mechanizm bindowania pomiędzy komponentami. </li></ul><ul><ul><li>Umożliwia podpinanie własności jednego komponentu do innego </li></ul></ul><ul><ul><li>Możliwe transformacje (również własne) </li></ul></ul>Wejście Kontrolki Podłączone Do TextBox’a Transformacja Login: ania Alternatywy: ania_123 Długość tekstu : 4
  20. 21. ATLAS – bindowanie <ul><li>ATLAS pozwala na podpinanie do komponentów danych: </li></ul><ul><li>Pochodzących z regularnych webserwisów (komponent serviceMethod) </li></ul><ul><li>Pochodzących z DataService’ów </li></ul><ul><li>Abstrakcja danych: </li></ul><ul><li>atlas:DataSource </li></ul><ul><li>atlas:DataView </li></ul><ul><li>Kontrolki służące do prezentacji danych tabelarycznych </li></ul><ul><li>atlas:ListView </li></ul><ul><li>atlas:ItemView </li></ul>
  21. 22. ATLAS – Walidacja <ul><li>Analogiczna do tej z ASP.NET </li></ul><ul><li>Dostępne rodzaje walidatorów: </li></ul><ul><li>requiredFieldValidator </li></ul><ul><li>typeValidator </li></ul><ul><li>rangeValidator </li></ul><ul><li>regexValidator </li></ul><ul><li>customValidator </li></ul><ul><li>Kontrolki do prezentacji informacji po wprowadzeniu błędnej wartości: </li></ul><ul><li>ValidationErrorLabel </li></ul><ul><li>ValidationGroup </li></ul>
  22. 23. ATLAS – Zachowania <ul><li>Rodzaje: </li></ul><ul><li>Click </li></ul><ul><li>Floating </li></ul><ul><li>Hover </li></ul><ul><li>AutoComplete – Google Suggest w 2 linijkach </li></ul><ul><li>Pop-up </li></ul><ul><li>DragDropList – wsparcie dla przeciągania elementów pomiędzy kontrolkami </li></ul>
  23. 24. ATLAS – tworzenie aplikacji <ul><li>Trzy sposoby tworzenia aplikacji </li></ul><ul><li>Imperatywnie (Java Script) </li></ul><ul><li>Już na tym poziomie korzyści z używania biblioteki Atlas </li></ul><ul><li>Wygodne wywoływanie web-metod (service proxy) </li></ul><ul><li>BCL zawiera przydatne klasy (np. StringBuilder) </li></ul>
  24. 25. ATLAS – tworzenie aplikacji <ul><ul><li>Deklaratywnie (Xml Script) </li></ul></ul><ul><li>Zalety: </li></ul><ul><li>Łatwieszy dostęp i możliwości modyfikacji dla kreatorów (designerów) </li></ul><ul><li>Wady: </li></ul><ul><li>Brak intellisense (jeszcze) </li></ul><ul><li>Kontrolki serwerowe nie muszą sklejać fragmentów JavaScript (do generowania xml’a można użyć np. XmlTextWriter) </li></ul><ul><li>Xml-script jest parsowany po stronie klienta </li></ul><ul><li>Verbose </li></ul>
  25. 26. DEMO
  26. 27. ATLAS – tworzenie aplikacji <ul><ul><li>Kontrolki serwerowe </li></ul></ul><ul><li>Generowana jest warstwa przejściowa (XmlScript) </li></ul><ul><li>Wiele ciekawych kontrolek na blogach osób związanych z Atlasem </li></ul><ul><li>Wilco Bauwer napisał i udostępnia wraz z opisem tworzenia ProgressBar, KeyboardHandler… </li></ul><ul><li><atlas:ScriptManager /> </li></ul><ul><li>Kontrolki do abstrakcji i prezentacji danych </li></ul><ul><li>Rozszerzalność </li></ul>
  27. 28. DEMO
  28. 29. PYTANIA?
  29. 30. LINKI <ul><ul><li>Strona domowa projektu Atlas: www.atlas.asp.net </li></ul></ul><ul><ul><li>Prezentacja: www.mat.uni.torun.pl/~gekon/add/atlas.zip </li></ul></ul><ul><ul><li>Kody źródłowe: www.mat.uni.torun.pl/~gekon/ add / srcs.zip </li></ul></ul><ul><ul><li>Warto zajrzeć: </li></ul></ul><ul><ul><ul><li>Blog Wilco Bauwera </li></ul></ul></ul><ul><ul><ul><li>Atlas Class Browser </li></ul></ul></ul>
  30. 31. KONIEC!

×