1 Wojciech Rygielski [email protected]ASP.NET AtlasWojciech Rygielski
2 ASP.NET 2.0Atlas
3 1. ASP.NET
4 Zmiany w ASP.NET 2.0Kod można umieszczać na stronie (tzn. w pliku .aspx, nie koniecznie w .aspx.cs)Kompilacja projektu jest zbędna (jest wtedy kompilowany automatycznie przy odwołaniu się do strony)
5 Zmiany w ASP.NET 2.0 cd. Master pagesUmożliwienie tworzenia pseudo-obiektowej hierarchii wyglądu stron w aplikacji (strona może wywoływać metody publicznych obiektów w swojej master-stronie)Łatwe dodawanie wspólnych elementów dla wszystkich stron (np. menu w plików sitemap), elementy te mogę być konfigurowalneWielopoziomowe zagnieżdżanie master language="C#" master="~/TopLevel.master"%>
6 MasterPage.master ... xyz
7 Page.aspx ...ghi { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/7/Page.aspx+%3Cscript+runat%3D+server+%3E.jpg", "name": "Page.aspx ", "description": "void Page_Load(object sender, System.EventArgs e) { Label headerLabel = (Label) Master.FindControl( Header ); headerLabel.Text = abc ; } ... ghi. "> 8 Zmiany w ASP.NET 2.0 cd.WebParts (zbiór komponentów umożliwiających użytkownikom końcowym personalizację wyglądu strony)Lepsze cachowaniemożliwość odświeżenia cache po zmianach w bazie danych (w MSSQL7 na poziomie tabeli, w kolejnej wersji na poziomie wiersza) { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/8/Zmiany+w+ASP.NET+2.0+cd.+WebParts+%28zbi%C3%B3r+komponent%C3%B3w+umo%C5%BCliwiaj%C4%85cych+u%C5%BCytkownikom+ko%C5%84cowym+personalizacj%C4%99+wygl%C4%85du+strony%29.jpg", "name": "Zmiany w ASP.NET 2.0 cd. WebParts (zbiór komponentów umożliwiających użytkownikom końcowym personalizację wyglądu strony)", "description": "Lepsze cachowanie. możliwość odświeżenia cache po zmianach w bazie danych (w MSSQL7 na poziomie tabeli, w kolejnej wersji na poziomie wiersza)", "width": "800" } 9 Odświeżanie cache przy zmianach bazie danychNa stronie:OutputCache duration="3600" varybyparam="none"sqldependency="Northwind:Employees" %>W konfiguracji (web.config):pollTime = "1000" >connectionStringName="Northwind"pollTime = "1000"/>W bazie danych (SqlCacheDependencyAdmin.EnableTableForNotifications) { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/9/Od%C5%9Bwie%C5%BCanie+cache+przy+zmianach+bazie+danych.jpg", "name": "Odświeżanie cache przy zmianach bazie danych", "description": "Na stronie: W konfiguracji (web.config): W bazie danych (SqlCacheDependencyAdmin.EnableTableForNotifications)", "width": "800" } 10 Zmiany w ASP.NET 2.0 cd. Personalizacja (role) użytkownik/role wbudowane w logikę ASPkontrolki w rodzaju , , , itp.Mechanizm logowania można stworzyć całkowiecie deklaratywnie { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/10/Zmiany+w+ASP.NET+2.0+cd.+Personalizacja+%28role%29.jpg", "name": "Zmiany w ASP.NET 2.0 cd. Personalizacja (role)", "description": "http://www.ondotnet.com/pub/a/dotnet/2004/10/25/libertyonwhidbey.html page=1. użytkownik/role wbudowane w logikę ASP. kontrolki w rodzaju , , , itp. Mechanizm logowania można stworzyć całkowiecie deklaratywnie.", "width": "800" } 11 Sposoby przechowywania stanu aplikacjiApplicationViewStateSessionProfile (nowość) { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/11/Sposoby+przechowywania+stanu+aplikacji.jpg", "name": "Sposoby przechowywania stanu aplikacji", "description": "Application. ViewState. Session. Profile (nowość)", "width": "800" } 12 -> Application // global.asax:void Application_Start(object sender, EventArgs e) {Application.Add("clickCount", 0);Application.Add("userCount", 0);}void Session_Start(object sender, EventArgs e) {Application["userCount"] = ((int)Application["userCount"]) + 1;void Session_End(object sender, EventArgs e) {Application["userCount"] = ((int)Application["userCount"]) - 1;// *.aspx.cs:protected void Button1_Click(object sender, EventArgs e) {Application["clickCount"] = ((int)Application["clickCount"]) + 1;this.Label1.Text = Application["clickCount"].ToString(); { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/12/-%3E+Application+%2F%2F+global.asax%3A.jpg", "name": "-> Application // global.asax:", "description": "void Application_Start(object sender, EventArgs e) { Application.Add( clickCount , 0); Application.Add( userCount , 0); } void Session_Start(object sender, EventArgs e) { Application[ userCount ] = ((int)Application[ userCount ]) + 1; void Session_End(object sender, EventArgs e) { Application[ userCount ] = ((int)Application[ userCount ]) - 1; // *.aspx.cs: protected void Button1_Click(object sender, EventArgs e) { Application[ clickCount ] = ((int)Application[ clickCount ]) + 1; this.Label1.Text = Application[ clickCount ].ToString();", "width": "800" } 13 -> ViewState / SessionZapisywane w formularzu na stronieEnableViewState w wielu kontrolkachNie przeterminowuje sięSessionPrzechowywane w pamięci serweraDane usuwane po wygaśnięciu sesji { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/13/-%3E+ViewState+%2F+Session.jpg", "name": "-> ViewState / Session", "description": "Zapisywane w formularzu na stronie. EnableViewState w wielu kontrolkach. Nie przeterminowuje się. Session. Przechowywane w pamięci serwera. Dane usuwane po wygaśnięciu sesji.", "width": "800" } 14 Fragment „wyprodukowanej” strony z ViewState { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/14/Fragment+%E2%80%9Ewyprodukowanej+strony+z+ViewState.jpg", "name": "Fragment „wyprodukowanej strony z ViewState", "description": "", "width": "800" } 15 ViewState / Session / Profileliczniki („na żywo”) { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/15/ViewState+%2F+Session+%2F+Profile.jpg", "name": "ViewState / Session / Profile", "description": "liczniki („na żywo )", "width": "800" } 16 Zmiany w ASP.NET 2.0 cd. Profile Sprawdzanie typów, obsługa IntelliSenseMiała być możliwość zapisania danych w pamięci, bazie danych, pliku XML (domyślnie: AspNetSqlProfileProvider), można pisać własne Providery { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/16/Zmiany+w+ASP.NET+2.0+cd.+Profile.jpg", "name": "Zmiany w ASP.NET 2.0 cd. Profile", "description": "http://pluralsight.com/blogs/fritz/archive/2004/09/28/2450.aspx. Sprawdzanie typów, obsługa IntelliSense. Miała być możliwość zapisania danych w pamięci, bazie danych, pliku XML (domyślnie: AspNetSqlProfileProvider), można pisać własne Providery.", "width": "800" } 17 -> Profile (web.config) { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/17/-%3E+Profile+%28web.config%29.jpg", "name": "-> Profile (web.config)", "description": " ", "width": "800" } 18 Profile (wykorzystanie w kodzie)void save_Click(object sender, EventArgs e){Profile.lastName = this.lastName.Text;Profile.firstName = this.firstName.Text;Profile.phoneNumber = this.phone.Text;Profile.birthDate = Convert.ToDateTime(this.birthDate.Text);Response.Redirect("Default.aspx");} { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/18/Profile+%28wykorzystanie+w+kodzie%29.jpg", "name": "Profile (wykorzystanie w kodzie)", "description": "void save_Click(object sender, EventArgs e) { Profile.lastName = this.lastName.Text; Profile.firstName = this.firstName.Text; Profile.phoneNumber = this.phone.Text; Profile.birthDate = Convert.ToDateTime(this.birthDate.Text); Response.Redirect( Default.aspx ); }", "width": "800" } 19 Zmiany w ASP.NET 2.0 cd. ThemesPliki *.skin – domyślne ustawienia kontrolekMożna powiązać ze wszystkimi stronami, lub z wybranymi:theme="Testheme" %>Można zmieniać w trakcie wykonania (Page.Theme)Wartości nie tylko spośród adekwatnych im wartości CSS { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/19/Zmiany+w+ASP.NET+2.0+cd.+Themes.jpg", "name": "Zmiany w ASP.NET 2.0 cd. Themes", "description": "Pliki *.skin – domyślne ustawienia kontrolek. Można powiązać ze wszystkimi stronami, lub z wybranymi: Można zmieniać w trakcie wykonania (Page.Theme) Wartości nie tylko spośród adekwatnych im wartości CSS.", "width": "800" } 20 Zmiany w ASP.NET 2.0 cd. Nowe źródła danych obiekt jako wiersz/tabela (więcej zaraz)używany np. przez komponent menu { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/20/Zmiany+w+ASP.NET+2.0+cd.+Nowe+%C5%BAr%C3%B3d%C5%82a+danych+%3Casp%3ASqlDatasource%3E.jpg", "name": "Zmiany w ASP.NET 2.0 cd. Nowe źródła danych ", "description": " obiekt jako wiersz/tabela (więcej zaraz) używany np. przez komponent menu.", "width": "800" } 21 ObjectDataSourceatrybuty (właściwości? pary set+get) obiektów widoczne jako wartości kolumn (interpretacja: wiersz)obiekt może mieć metodę zwracającą kolekcję obiektów (interpretacja: tabela)public ICollection GetData() {ArrayList list = new ArrayList();list.Add(new InnyObiekt(bla,bla,bla));return list;} { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/21/ObjectDataSource+atrybuty+%28w%C5%82a%C5%9Bciwo%C5%9Bci+pary+set%2Bget%29+obiekt%C3%B3w+widoczne+jako+warto%C5%9Bci+kolumn+%28interpretacja%3A+wiersz%29.jpg", "name": "ObjectDataSource atrybuty (właściwości pary set+get) obiektów widoczne jako wartości kolumn (interpretacja: wiersz)", "description": "obiekt może mieć metodę zwracającą kolekcję obiektów (interpretacja: tabela) public ICollection GetData() { ArrayList list = new ArrayList(); list.Add(new InnyObiekt(bla,bla,bla)); return list; }", "width": "800" } 22 ObjectDataSource { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/22/ObjectDataSource.jpg", "name": "ObjectDataSource", "description": "ObjectDataSource", "width": "800" } 23 ObjectDataSource { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/23/ObjectDataSource.jpg", "name": "ObjectDataSource", "description": "ObjectDataSource", "width": "800" } 24 Wykorzystanie źródeł danychWiele funkcjonalności możemy opisać bez pisania kodu (nie chodzi tylko o zapytania select, ale również update/insert/delete)Dużo kontrolek obsługujących źródła danych (, , ), radzących sobie z problemami konkurencyjności itp.Spójny model i API { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/24/Wykorzystanie+%C5%BAr%C3%B3de%C5%82+danych.jpg", "name": "Wykorzystanie źródeł danych", "description": "Wiele funkcjonalności możemy opisać bez pisania kodu (nie chodzi tylko o zapytania select, ale również update/insert/delete) Dużo kontrolek obsługujących źródła danych (, , ), radzących sobie z problemami konkurencyjności itp. Spójny model i API.", "width": "800" } 25 Podsumowanie aplikacji webowych w ASP.NETLogika aplikacji webowej nie odbiega bardzo od logiki tworzenia zwykłej aplikacji okienkowejW czystym ASP.NET (bez ręcznie pisanych skryptów), praktycznie każde kliknięcie myszką oznacza przeładowanie całej strony { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/25/Podsumowanie+aplikacji+webowych+w+ASP.NET.jpg", "name": "Podsumowanie aplikacji webowych w ASP.NET", "description": "Logika aplikacji webowej nie odbiega bardzo od logiki tworzenia zwykłej aplikacji okienkowej. W czystym ASP.NET (bez ręcznie pisanych skryptów), praktycznie każde kliknięcie myszką oznacza przeładowanie całej strony.", "width": "800" } 26 Przykładowa aplikacja ASP.NET(„na żywo”) { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/26/Przyk%C5%82adowa+aplikacja+ASP.NET.jpg", "name": "Przykładowa aplikacja ASP.NET", "description": "(„na żywo )", "width": "800" } 27 2. Atlas { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/27/2.+Atlas.jpg", "name": "2. Atlas", "description": "2. Atlas", "width": "800" } 28 Realizacje AJAX dla ASP.NETComfortASP.NETMagicAJAX.NETZumiPageATLAS (CTP)OutPostFastPageComponentArtTelerikDart PowerWebAnthemSyncfusion Studio { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/28/Realizacje+AJAX+dla+ASP.NET.jpg", "name": "Realizacje AJAX dla ASP.NET", "description": "ComfortASP.NET. MagicAJAX.NET. ZumiPage. ATLAS (CTP) OutPost. FastPage. ComponentArt. Telerik. Dart PowerWeb. Anthem. Syncfusion Studio.", "width": "800" } 29 AJAX+ASP – dwie koncepcjeRozwiązanie 1 – dynamiczne odświeżanie całej stronyzamiast przeładowywać całą stronę, wysyłany jest request w tlepo stronie serwera sporządzana jest lista zmian na stronie (diff) i sama lista zmian jest przesyłana do klientalista zmian jest aplikowana dynamicznie po stronie klienta { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/29/AJAX%2BASP+%E2%80%93+dwie+koncepcje.jpg", "name": "AJAX+ASP – dwie koncepcje", "description": "Rozwiązanie 1 – dynamiczne odświeżanie całej strony. zamiast przeładowywać całą stronę, wysyłany jest request w tle. po stronie serwera sporządzana jest lista zmian na stronie (diff) i sama lista zmian jest przesyłana do klienta. lista zmian jest aplikowana dynamicznie po stronie klienta.", "width": "800" } 30 (1) Dynamiczne odświeżanie stronyZałożenia:Strona jest wyświetlana tak jak bez AJAXW kodzie aplikacji generalnie nic się nie zmieniaWpływ na wzorzec aplikacjiLogika aplikacji zostaje po stronie ASP (ograniczenie używanych skryptów JS)„Stan” aplikacji zmienia się wciąż tylko podczas przeładowywania strony { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/30/%281%29+Dynamiczne+od%C5%9Bwie%C5%BCanie+strony.jpg", "name": "(1) Dynamiczne odświeżanie strony", "description": "Założenia: Strona jest wyświetlana tak jak bez AJAX. W kodzie aplikacji generalnie nic się nie zmienia. Wpływ na wzorzec aplikacji. Logika aplikacji zostaje po stronie ASP (ograniczenie używanych skryptów JS) „Stan aplikacji zmienia się wciąż tylko podczas przeładowywania strony.", "width": "800" } 31 (1) Dynamiczne odświeżanie stronyProblemy (implementacji rozwiązania):Rozmiar przesyłanych danych; po każdym AJAXowym żądaniu, przesyłane są te rzeczy, które zmieniły się na stronie ASP („diff”)Ewentualne skrypty JS powinny być po takim żądaniu odświeżane i resetowane (tak jak by to było po odświeżeniu strony) { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/31/%281%29+Dynamiczne+od%C5%9Bwie%C5%BCanie+strony.jpg", "name": "(1) Dynamiczne odświeżanie strony", "description": "Problemy (implementacji rozwiązania): Rozmiar przesyłanych danych; po każdym AJAXowym żądaniu, przesyłane są te rzeczy, które zmieniły się na stronie ASP („diff ) Ewentualne skrypty JS powinny być po takim żądaniu odświeżane i resetowane (tak jak by to było po odświeżeniu strony)", "width": "800" } 32 AJAX+ASP – dwie koncepcjeRozwiązanie 2 – odświeżanie kontrolekdecyzję o tym co ma być odświeżane podejmuje programista { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/32/AJAX%2BASP+%E2%80%93+dwie+koncepcje.jpg", "name": "AJAX+ASP – dwie koncepcje", "description": "Rozwiązanie 2 – odświeżanie kontrolek. decyzję o tym co ma być odświeżane podejmuje programista.", "width": "800" } 33 (2) Odświeżanie kontrolekZałożenia:Oznaczamy na stronie kontrolki, które mogą się zmienić („partial/selective update”)Wpływ na wzorzec aplikacjiMożliwy rozwój „prawdziwej” aplikacji AJAXowej (w sensie: takiej jak do tej pory, a nie „symulowanej” jak w (1))W dalszym ciągu możliwy rozwój „normalnej” aplikacji ASPPrzeniesienie części logiki AJAXowej do zapisu deklaratywnego (w Atlasie: UpdatePanel)(Różne inne zależności zależne od implementacji) { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/33/%282%29+Od%C5%9Bwie%C5%BCanie+kontrolek.jpg", "name": "(2) Odświeżanie kontrolek", "description": "Założenia: Oznaczamy na stronie kontrolki, które mogą się zmienić („partial/selective update ) Wpływ na wzorzec aplikacji. Możliwy rozwój „prawdziwej aplikacji AJAXowej (w sensie: takiej jak do tej pory, a nie „symulowanej jak w (1)) W dalszym ciągu możliwy rozwój „normalnej aplikacji ASP. Przeniesienie części logiki AJAXowej do zapisu deklaratywnego (w Atlasie: UpdatePanel) (Różne inne zależności zależne od implementacji)", "width": "800" } 34 Sposoby oznaczania zmieniających się kontrolekRóżne sposoby w różnych implementacjach:Najbardziej popularny: zamknięcie kontrolek w „odświeżającym się” paneluOznaczenie poszczególnych kontrolek w kodzie aplikacji„Ręczne” zdecydowanie, które kontrolki mają być przesłane, podczas odpowiadania na żądanieWykrywanie po stronie klienta, które kontrolki powinny być zmienione, przesyłanie ich ID w żądaniu (?) { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/34/Sposoby+oznaczania+zmieniaj%C4%85cych+si%C4%99+kontrolek.jpg", "name": "Sposoby oznaczania zmieniających się kontrolek", "description": "Różne sposoby w różnych implementacjach: Najbardziej popularny: zamknięcie kontrolek w „odświeżającym się panelu. Oznaczenie poszczególnych kontrolek w kodzie aplikacji. „Ręczne zdecydowanie, które kontrolki mają być przesłane, podczas odpowiadania na żądanie. Wykrywanie po stronie klienta, które kontrolki powinny być zmienione, przesyłanie ich ID w żądaniu ( )", "width": "800" } 35 ATLAS Microsoftowa implementacja biblioteki AJAX pod ASP.NETNa razie uboga, rozwija się„Atlas” to tylko tymczasowa nazwaOmawiana tutaj wersja - April (2006) Community Technology Preview (CTP)API wciąż się zmienia (używać na własne ryzyko) { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/35/ATLAS+Microsoftowa+implementacja+biblioteki+AJAX+pod+ASP.NET.jpg", "name": "ATLAS Microsoftowa implementacja biblioteki AJAX pod ASP.NET", "description": "Na razie uboga, rozwija się. „Atlas to tylko tymczasowa nazwa. Omawiana tutaj wersja - April (2006) Community Technology Preview (CTP) API wciąż się zmienia (używać na własne ryzyko)", "width": "800" } 36 Szok ;) Atlas działa pod Firefoxem(dla przypomnienia: Atlas jest Microsoftu) { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/36/Szok+%3B%29+Atlas+dzia%C5%82a+pod+Firefoxem.jpg", "name": "Szok ;) Atlas działa pod Firefoxem", "description": "(dla przypomnienia: Atlas jest Microsoftu)", "width": "800" } 37 Czym jest Atlaszbiorem plików .js dołączanych do emitowanych stron, rozszerzających możliwości JavaScriptusposobem deklaratywnego opisania interakcji komponentów na stronie (XML-script)zbiorem komponentów do wykorzystania po stronie serwera, emitujących odpowiedni XML-script interpretowany przez (1)Możemy zaprzestać na każdej z tych trzech warstw abstrakcji (stąd np. pomysły wykorzystania niższych warstw Atlasa w PHP) { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/37/Czym+jest+Atlas+zbiorem+plik%C3%B3w+.js+do%C5%82%C4%85czanych+do+emitowanych+stron%2C+rozszerzaj%C4%85cych+mo%C5%BCliwo%C5%9Bci+JavaScriptu..jpg", "name": "Czym jest Atlas zbiorem plików .js dołączanych do emitowanych stron, rozszerzających możliwości JavaScriptu.", "description": "sposobem deklaratywnego opisania interakcji komponentów na stronie (XML-script) zbiorem komponentów do wykorzystania po stronie serwera, emitujących odpowiedni XML-script interpretowany przez (1) Możemy zaprzestać na każdej z tych trzech warstw abstrakcji (stąd np. pomysły wykorzystania niższych warstw Atlasa w PHP)", "width": "800" } 38 (1) Rozszerzenia do JavaScriptuAtlasRuntime.jsAtlas.jsAtlasCompat.jsAtlasCompat2.jsAtlasFX.jsAtlasUIDragDrop.jsAtlasUIGlitz.jsAtlasUIMap.jsAtlasWebParts.jsGadgetRuntime.js { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/38/%281%29+Rozszerzenia+do+JavaScriptu.jpg", "name": "(1) Rozszerzenia do JavaScriptu", "description": "AtlasRuntime.js. Atlas.js. AtlasCompat.js. AtlasCompat2.js. AtlasFX.js. AtlasUIDragDrop.js. AtlasUIGlitz.js. AtlasUIMap.js. AtlasWebParts.js. GadgetRuntime.js.", "width": "800" } 39 Atlasowy JavaScriptDodatkowe obiekty, funkcje i typy danych (klasy, przestrzenie nazw, enumeracje, interfejsy, dziedziczenie).Klasy do debuggowania, obsługi zdarzeń (events) i stringów, wywołań XML (webservices), timery i inneObsługa UI – kontrolki, zachowania (behaviors), walidacja, wiązanie danych, drag&drop...Atlasowe „implementacje” wielu standardowych kontrolek HTML (hyperlink, listview, select, dataview, button, checkbox, textbox, label, datasource, counter) { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/39/Atlasowy+JavaScript+Dodatkowe+obiekty%2C+funkcje+i+typy+danych+%28klasy%2C+przestrzenie+nazw%2C+enumeracje%2C+interfejsy%2C+dziedziczenie%29..jpg", "name": "Atlasowy JavaScript Dodatkowe obiekty, funkcje i typy danych (klasy, przestrzenie nazw, enumeracje, interfejsy, dziedziczenie).", "description": "Klasy do debuggowania, obsługi zdarzeń (events) i stringów, wywołań XML (webservices), timery i inne. Obsługa UI – kontrolki, zachowania (behaviors), walidacja, wiązanie danych, drag&drop... Atlasowe „implementacje wielu standardowych kontrolek HTML (hyperlink, listview, select, dataview, button, checkbox, textbox, label, datasource, counter)", "width": "800" } 40 Przykład: dodawanie klasy do przestrzeni nazwType.registerNamespace("Demo");Demo.Person = function(firstName, lastName, Address) {var _firstName = firstName;var _lastName = lastName;var _ Address = Address;this.getFirstName = function() {return _firstName;}// ...pozostałe akcesory...this.dispose = function() {alert('bye ' + this.getName());Demo.Person.registerClass('Demo.Person', null, Web.IDisposable); { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/40/Przyk%C5%82ad%3A+dodawanie+klasy+do+przestrzeni+nazw.jpg", "name": "Przykład: dodawanie klasy do przestrzeni nazw", "description": "Type.registerNamespace( Demo ); Demo.Person = function(firstName, lastName, emailAddress) { var _firstName = firstName; var _lastName = lastName; var _emailAddress = emailAddress; this.getFirstName = function() { return _firstName; } // ...pozostałe akcesory... this.dispose = function() { alert( bye + this.getName()); Demo.Person.registerClass( Demo.Person , null, Web.IDisposable);", "width": "800" } 41 Przykład: dziedziczenieDemo.Employee = function(firstName, lastName, Address, team, title) {Demo.Employee.initializeBase(this, [firstName, lastName, Address]);var _team = team;var _title = title;this.getTeam = function() {return _team;}this.setTeam = function(team) {_team = team;...Demo.Employee.registerClass('Demo.Employee', Demo.Person); { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/41/Przyk%C5%82ad%3A+dziedziczenie.jpg", "name": "Przykład: dziedziczenie", "description": "Demo.Employee = function(firstName, lastName, emailAddress, team, title) { Demo.Employee.initializeBase(this, [firstName, lastName, emailAddress]); var _team = team; var _title = title; this.getTeam = function() { return _team; } this.setTeam = function(team) { _team = team; ... Demo.Employee.registerClass( Demo.Employee , Demo.Person);", "width": "800" } 42 Przykład: override Demo.Person.prototype.toString = function() {return this.getName() + ' (' +this.get Address() + ')';}Demo.Employee.prototype.toString = function() {return Demo.Employee.callBaseMethod(this,'toString') + '\r\n' + this.getTitle() + '\r\n'+ this.getTeam(); { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/42/Przyk%C5%82ad%3A+override+Demo.Person.prototype.toString+%3D+function%28%29+%7B.jpg", "name": "Przykład: override Demo.Person.prototype.toString = function() {", "description": "return this.getName() + ( + this.getEmailAddress() + ) ; } Demo.Employee.prototype.toString = function() { return Demo.Employee.callBaseMethod(this, toString ) + \r\n + this.getTitle() + \r\n + this.getTeam();", "width": "800" } 43 Przykład: obsługa atlasowych „obiektów”g_panel = new Sys.UI.Control($('panel'));g_panel.initialize();g_panel.set_cssClass('normal');g_selColor = new Sys.UI.Select($('colorSelect'));g_selColor.initialize();g_selColor.selectionChanged.add(onSelectColor);g_tbx = new Sys.UI.TextBox($('textBox'));g_tbx.initialize();g_tbx.set_text("Simple text box control");g_tbx.set_cssClass("textBox");var btnVisibility = new Sys.UI.Button($('visibilityButton'));btnVisibility.initialize();btnVisibility.click.add(onSetVisibilityClick); { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/43/Przyk%C5%82ad%3A+obs%C5%82uga+atlasowych+%E2%80%9Eobiekt%C3%B3w.jpg", "name": "Przykład: obsługa atlasowych „obiektów", "description": "g_panel = new Sys.UI.Control($( panel )); g_panel.initialize(); g_panel.set_cssClass( normal ); g_selColor = new Sys.UI.Select($( colorSelect )); g_selColor.initialize(); g_selColor.selectionChanged.add(onSelectColor); g_tbx = new Sys.UI.TextBox($( textBox )); g_tbx.initialize(); g_tbx.set_text( Simple text box control ); g_tbx.set_cssClass( textBox ); var btnVisibility = new Sys.UI.Button($( visibilityButton )); btnVisibility.initialize(); btnVisibility.click.add(onSetVisibilityClick);", "width": "800" } 44 (2) XML-scriptMożliwość deklaratywnego zapisu wielu (AJAX-owych) aspektów aplikacji w postaci XML (zamiast kodu JS) { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/44/%282%29+XML-script+Mo%C5%BCliwo%C5%9B%C4%87+deklaratywnego+zapisu+wielu+%28AJAX-owych%29+aspekt%C3%B3w+aplikacji+w+postaci+XML+%28zamiast+kodu+JS%29.jpg", "name": "(2) XML-script Możliwość deklaratywnego zapisu wielu (AJAX-owych) aspektów aplikacji w postaci XML (zamiast kodu JS)", "description": "(2) XML-script Możliwość deklaratywnego zapisu wielu (AJAX-owych) aspektów aplikacji w postaci XML (zamiast kodu JS)", "width": "800" } 45 dataContext="searchText" dataPath="text.length"transform="NumberToBoolean" />dataContext="searchText" dataPath="text" /> { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/45/%3Cinput+type%3D+text+id%3D+searchText+%2F%3E.jpg", "name": "", "description": " ", "width": "800" } 46 Argumenty twórców Atlasa za wprowadzeniem XML-scriptDeklaratywny XML jest dużo łatwiejszy do przetwarzania w sposób automatyczny niż kod (Designer w Visual Studio)W Atlasowych kontrolkach serwera - łatwiej jest emitować XML niż JavaScript (XmlTextWriter)Deklaratywny sposób zapisu pozwala zdefiniować potrzeby zamiast akcjiNiektóre proste sytuacje mogą być opisane dużo łatwiej i bezpieczniej niż w JS [zdaje się, że chodzi tutaj w szczególności o wiązanie (binding)] { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/46/Argumenty+tw%C3%B3rc%C3%B3w+Atlasa+za+wprowadzeniem+XML-script.jpg", "name": "Argumenty twórców Atlasa za wprowadzeniem XML-script", "description": "Deklaratywny XML jest dużo łatwiejszy do przetwarzania w sposób automatyczny niż kod (Designer w Visual Studio) W Atlasowych kontrolkach serwera - łatwiej jest emitować XML niż JavaScript (XmlTextWriter) Deklaratywny sposób zapisu pozwala zdefiniować potrzeby zamiast akcji. Niektóre proste sytuacje mogą być opisane dużo łatwiej i bezpieczniej niż w JS [zdaje się, że chodzi tutaj w szczególności o wiązanie (binding)]", "width": "800" } 47 Przykład: sprawdzanie poprawności formularza { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/47/Przyk%C5%82ad%3A+sprawdzanie+poprawno%C5%9Bci+formularza.jpg", "name": "Przykład: sprawdzanie poprawności formularza", "description": " ", "width": "800" } 48 Przykład: sprawdzanie poprawności formularza cd.errorMessage="You must enter a number." /> { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/48/Przyk%C5%82ad%3A+sprawdzanie+poprawno%C5%9Bci+formularza+cd..jpg", "name": "Przykład: sprawdzanie poprawności formularza cd.", "description": " ", "width": "800" } 49 Przykład: inne wymysły { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/49/Przyk%C5%82ad%3A+inne+wymys%C5%82y.jpg", "name": "Przykład: inne wymysły", "description": " ", "width": "800" } 50 Przykład: łączenie XML-scriptu z javascriptem function sayHello() {alert("hello");} { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/50/Przyk%C5%82ad%3A+%C5%82%C4%85czenie+XML-scriptu+z+javascriptem.jpg", "name": "Przykład: łączenie XML-scriptu z javascriptem", "description": " function sayHello() { alert( hello ); }", "width": "800" } 51 (3) Kontrolki serwera emitujące XML-scriptWszystko co opisane wcześniej można zamknąć w logice kontrolki ASPPredefiniowanych kontrolek jest na razie mało, ich lista wciąż się zmienia, obsługa w Visual Studio jest ograniczona (szczególnie w Designerze).Jest gotowy interfejs do tworzenia własnych kontrolek (który być może już się bardzo nie zmieni) { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/51/%283%29+Kontrolki+serwera+emituj%C4%85ce+XML-script.jpg", "name": "(3) Kontrolki serwera emitujące XML-script", "description": "Wszystko co opisane wcześniej można zamknąć w logice kontrolki ASP. Predefiniowanych kontrolek jest na razie mało, ich lista wciąż się zmienia, obsługa w Visual Studio jest ograniczona (szczególnie w Designerze). Jest gotowy interfejs do tworzenia własnych kontrolek (który być może już się bardzo nie zmieni)", "width": "800" }
8 Zmiany w ASP.NET 2.0 cd.WebParts (zbiór komponentów umożliwiających użytkownikom końcowym personalizację wyglądu strony)Lepsze cachowaniemożliwość odświeżenia cache po zmianach w bazie danych (w MSSQL7 na poziomie tabeli, w kolejnej wersji na poziomie wiersza)
9 Odświeżanie cache przy zmianach bazie danychNa stronie:OutputCache duration="3600" varybyparam="none"sqldependency="Northwind:Employees" %>W konfiguracji (web.config):pollTime = "1000" >connectionStringName="Northwind"pollTime = "1000"/>W bazie danych (SqlCacheDependencyAdmin.EnableTableForNotifications)
10 Zmiany w ASP.NET 2.0 cd. Personalizacja (role) użytkownik/role wbudowane w logikę ASPkontrolki w rodzaju , , , itp.Mechanizm logowania można stworzyć całkowiecie deklaratywnie
11 Sposoby przechowywania stanu aplikacjiApplicationViewStateSessionProfile (nowość)
13 -> ViewState / SessionZapisywane w formularzu na stronieEnableViewState w wielu kontrolkachNie przeterminowuje sięSessionPrzechowywane w pamięci serweraDane usuwane po wygaśnięciu sesji
16 Zmiany w ASP.NET 2.0 cd. Profile Sprawdzanie typów, obsługa IntelliSenseMiała być możliwość zapisania danych w pamięci, bazie danych, pliku XML (domyślnie: AspNetSqlProfileProvider), można pisać własne Providery
19 Zmiany w ASP.NET 2.0 cd. ThemesPliki *.skin – domyślne ustawienia kontrolekMożna powiązać ze wszystkimi stronami, lub z wybranymi:theme="Testheme" %>Można zmieniać w trakcie wykonania (Page.Theme)Wartości nie tylko spośród adekwatnych im wartości CSS
20 Zmiany w ASP.NET 2.0 cd. Nowe źródła danych obiekt jako wiersz/tabela (więcej zaraz)używany np. przez komponent menu
21 ObjectDataSourceatrybuty (właściwości? pary set+get) obiektów widoczne jako wartości kolumn (interpretacja: wiersz)obiekt może mieć metodę zwracającą kolekcję obiektów (interpretacja: tabela)public ICollection GetData() {ArrayList list = new ArrayList();list.Add(new InnyObiekt(bla,bla,bla));return list;}
22 ObjectDataSource
23 ObjectDataSource
24 Wykorzystanie źródeł danychWiele funkcjonalności możemy opisać bez pisania kodu (nie chodzi tylko o zapytania select, ale również update/insert/delete)Dużo kontrolek obsługujących źródła danych (, , ), radzących sobie z problemami konkurencyjności itp.Spójny model i API
25 Podsumowanie aplikacji webowych w ASP.NETLogika aplikacji webowej nie odbiega bardzo od logiki tworzenia zwykłej aplikacji okienkowejW czystym ASP.NET (bez ręcznie pisanych skryptów), praktycznie każde kliknięcie myszką oznacza przeładowanie całej strony
26 Przykładowa aplikacja ASP.NET(„na żywo”)
27 2. Atlas
28 Realizacje AJAX dla ASP.NETComfortASP.NETMagicAJAX.NETZumiPageATLAS (CTP)OutPostFastPageComponentArtTelerikDart PowerWebAnthemSyncfusion Studio
29 AJAX+ASP – dwie koncepcjeRozwiązanie 1 – dynamiczne odświeżanie całej stronyzamiast przeładowywać całą stronę, wysyłany jest request w tlepo stronie serwera sporządzana jest lista zmian na stronie (diff) i sama lista zmian jest przesyłana do klientalista zmian jest aplikowana dynamicznie po stronie klienta
30 (1) Dynamiczne odświeżanie stronyZałożenia:Strona jest wyświetlana tak jak bez AJAXW kodzie aplikacji generalnie nic się nie zmieniaWpływ na wzorzec aplikacjiLogika aplikacji zostaje po stronie ASP (ograniczenie używanych skryptów JS)„Stan” aplikacji zmienia się wciąż tylko podczas przeładowywania strony
31 (1) Dynamiczne odświeżanie stronyProblemy (implementacji rozwiązania):Rozmiar przesyłanych danych; po każdym AJAXowym żądaniu, przesyłane są te rzeczy, które zmieniły się na stronie ASP („diff”)Ewentualne skrypty JS powinny być po takim żądaniu odświeżane i resetowane (tak jak by to było po odświeżeniu strony)
32 AJAX+ASP – dwie koncepcjeRozwiązanie 2 – odświeżanie kontrolekdecyzję o tym co ma być odświeżane podejmuje programista
33 (2) Odświeżanie kontrolekZałożenia:Oznaczamy na stronie kontrolki, które mogą się zmienić („partial/selective update”)Wpływ na wzorzec aplikacjiMożliwy rozwój „prawdziwej” aplikacji AJAXowej (w sensie: takiej jak do tej pory, a nie „symulowanej” jak w (1))W dalszym ciągu możliwy rozwój „normalnej” aplikacji ASPPrzeniesienie części logiki AJAXowej do zapisu deklaratywnego (w Atlasie: UpdatePanel)(Różne inne zależności zależne od implementacji)
34 Sposoby oznaczania zmieniających się kontrolekRóżne sposoby w różnych implementacjach:Najbardziej popularny: zamknięcie kontrolek w „odświeżającym się” paneluOznaczenie poszczególnych kontrolek w kodzie aplikacji„Ręczne” zdecydowanie, które kontrolki mają być przesłane, podczas odpowiadania na żądanieWykrywanie po stronie klienta, które kontrolki powinny być zmienione, przesyłanie ich ID w żądaniu (?)
35 ATLAS Microsoftowa implementacja biblioteki AJAX pod ASP.NETNa razie uboga, rozwija się„Atlas” to tylko tymczasowa nazwaOmawiana tutaj wersja - April (2006) Community Technology Preview (CTP)API wciąż się zmienia (używać na własne ryzyko)
36 Szok ;) Atlas działa pod Firefoxem(dla przypomnienia: Atlas jest Microsoftu)
37 Czym jest Atlaszbiorem plików .js dołączanych do emitowanych stron, rozszerzających możliwości JavaScriptusposobem deklaratywnego opisania interakcji komponentów na stronie (XML-script)zbiorem komponentów do wykorzystania po stronie serwera, emitujących odpowiedni XML-script interpretowany przez (1)Możemy zaprzestać na każdej z tych trzech warstw abstrakcji (stąd np. pomysły wykorzystania niższych warstw Atlasa w PHP)
38 (1) Rozszerzenia do JavaScriptuAtlasRuntime.jsAtlas.jsAtlasCompat.jsAtlasCompat2.jsAtlasFX.jsAtlasUIDragDrop.jsAtlasUIGlitz.jsAtlasUIMap.jsAtlasWebParts.jsGadgetRuntime.js
39 Atlasowy JavaScriptDodatkowe obiekty, funkcje i typy danych (klasy, przestrzenie nazw, enumeracje, interfejsy, dziedziczenie).Klasy do debuggowania, obsługi zdarzeń (events) i stringów, wywołań XML (webservices), timery i inneObsługa UI – kontrolki, zachowania (behaviors), walidacja, wiązanie danych, drag&drop...Atlasowe „implementacje” wielu standardowych kontrolek HTML (hyperlink, listview, select, dataview, button, checkbox, textbox, label, datasource, counter)
43 Przykład: obsługa atlasowych „obiektów”g_panel = new Sys.UI.Control($('panel'));g_panel.initialize();g_panel.set_cssClass('normal');g_selColor = new Sys.UI.Select($('colorSelect'));g_selColor.initialize();g_selColor.selectionChanged.add(onSelectColor);g_tbx = new Sys.UI.TextBox($('textBox'));g_tbx.initialize();g_tbx.set_text("Simple text box control");g_tbx.set_cssClass("textBox");var btnVisibility = new Sys.UI.Button($('visibilityButton'));btnVisibility.initialize();btnVisibility.click.add(onSetVisibilityClick);
44 (2) XML-scriptMożliwość deklaratywnego zapisu wielu (AJAX-owych) aspektów aplikacji w postaci XML (zamiast kodu JS)
46 Argumenty twórców Atlasa za wprowadzeniem XML-scriptDeklaratywny XML jest dużo łatwiejszy do przetwarzania w sposób automatyczny niż kod (Designer w Visual Studio)W Atlasowych kontrolkach serwera - łatwiej jest emitować XML niż JavaScript (XmlTextWriter)Deklaratywny sposób zapisu pozwala zdefiniować potrzeby zamiast akcjiNiektóre proste sytuacje mogą być opisane dużo łatwiej i bezpieczniej niż w JS [zdaje się, że chodzi tutaj w szczególności o wiązanie (binding)]
47 Przykład: sprawdzanie poprawności formularza
48 Przykład: sprawdzanie poprawności formularza cd.errorMessage="You must enter a number." />
49 Przykład: inne wymysły
50 Przykład: łączenie XML-scriptu z javascriptem function sayHello() {alert("hello");} { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/405736/1/images/50/Przyk%C5%82ad%3A+%C5%82%C4%85czenie+XML-scriptu+z+javascriptem.jpg", "name": "Przykład: łączenie XML-scriptu z javascriptem", "description": " function sayHello() { alert( hello ); }", "width": "800" } 51 (3) Kontrolki serwera emitujące XML-scriptWszystko co opisane wcześniej można zamknąć w logice kontrolki ASPPredefiniowanych kontrolek jest na razie mało, ich lista wciąż się zmienia, obsługa w Visual Studio jest ograniczona (szczególnie w Designerze).Jest gotowy interfejs do tworzenia własnych kontrolek (który być może już się bardzo nie zmieni)
52 Dodanie funkcjonalności Atlasowych do aplikacji ASP(„na żywo”)
53
54 Źródła http://www.daniel-zeiss.de/AJAXComparison/Results.htm