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