Nowe Trendy W Projektowaniu Aplikacji Webowych

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” Client Script Library“Atlas” Client Script Library

ControlsControls

Script CoreScript Core

Base Class LibraryBase Class Library

User InterfaceUser Interface

Browser CompatibilityBrowser CompatibilityBrowser CompatibilityBrowser Compatibility



• Warstwa kompatybilności “Atlas” Client Script Library“Atlas” Client Script Library

ControlsControls




Browser Compatibility





• 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


• Script Core “Atlas” Client Script Library“Atlas” Client Script Library

ControlsControls









• Dodanie konstrukcji OOP do JavaScriptu

• Przestrzenie nazw

• Klasy dziedziczenie (klasy sealed, abstrakcyjne…)

metody abstrakcyjne i wirtualne

Interfejsy

• Typy wyliczeniowe


• Biblioteka przydatnych klas “Atlas” Client Script Library“Atlas” Client Script Library

ControlsControls









• Sieć: WebRequest, WebResponse

• StringBuilder

• Timer

• Debugger


“Atlas” Client Script Library“Atlas” Client Script Library

ControlsControls









• 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


• Kontrolki klienckie “Atlas” Client Script Library“Atlas” Client Script Library

ControlsControls









• 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”



• 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


• Proxy usług webowych ““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)


• 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



• 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ść

http://www.wilcob.com/




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

http://www.atlas.asp.net/

http://www.mat.uni.torun.pl/~gekon/add/atlas.zip

http://www.mat.uni.torun.pl/~gekon/add/srcs.zip








http://www.wilcob.com/AtlasClassBrowser/




KONIEC!KONIEC!

Entertainment & Humor

Nowe Trendy W Projektowaniu Aplikacji Webowych