Vzpon na ATLAS z ASP.NET 2.0

1. Vzpon na ATLAS z ASP.NET 2.0 Dušan Zupančič

2. AGENDA • Razvoj tehnologij na spletnih brskalnikih • Kaj je AJAX? • Kaj je ATLAS? • Arhitektura ATLAS • Uporabniški vmesniki z ATLAS –om • Programsko • Deklarativno • Strežniški kontrolniki

3. Klasična spletna aplikacija Izberi izdelek ‘Dodaj v košarico’ Akcija ValidacijaPersistencaPosredovanje Pregled košarice Vstavljanje podatkov Pošiljanje Podatki odostavi Vnos podatkov Pošiljanje Akcija ValidacijaPersistencaPosredovanje Strani in akcije Stran z napako ‘Naročilo ni mogoče’ Akcija ValidacijaPersistencaPosredovanje Podatki o računu Vnos podatkov Pošiljanje • Enota dela je spletna stran (forma) • Po vnosu se pošlje na strežnik, kjer se izvrši ustrezna akcija • V okviru akcije se izvede ustrezna obdelava in preusmeritev na drugo spletno stran • Osveževanje strani za vsako akcijo

4. DEMO – Klasična spletna aplikacija

5. Gre za mit ali dejstvo? S tehnologijo, ki je trenutno na voljo na spletnih brskalnikih, ni mogoče izdelati spletne rešitve z bogatim uporabniškim vmesnikom

6. ECMAScript NS 2.0B3 JavaScript Flash 3 DOM 1 IE 3 IE 5 IFrames XML IE 4 DOM CSS XSL-T FF 1.5 Beta IE 6 JScript SVG Vse deluje! XMLHTTP E4X Kratka zgodovina brskalnikov in tehnologij Java Applet XSL-T Mozilla 1.0 WSDL FF 1.0 SVG Flash 8 CSS XHTML 96 98 05 97 99 00 01 02 03 04 XSL-T 2 XForms DOM 3 RDF Vojna brskalnikov Spletna depresija Web 2.0

7. Kaj je XMLHTTP? • Vmesnik, ki omogoča HTTP komunikacijo s strežnikom iz skipte na strani odjemalca brez osveževanja cele spletne strani • V Internet Explorerju je izveden kot ActiveX objekt z imenom XMLHTTP • Mozilla in ostali imajo vgrajen objekt poimenovan XMLHttpRequest • ‘ostali’ so: Safari 1.2+, Opera 8+ in Konqueror

8. Kaj je AJAX?

9. Kaj je AJAX? • Asynchronous Javascript and XML • Razvijalski vzorec, ki vključuje širok nabor obstoječih tehnologij: • Standardiziran prikaz s pomočjo XHTML in CSS • Dinamičen prikaz preko DOM • Izmenjava in manipulacija podatkov s pomočjo XML in XSL-T (ali z JSON) • Asinhrono pridobivanje podatkov s pomočjo XmlHttp • ... in JavaScript, ki vse skupaj povezuje v celoto • V teku je proces standardizacije pri W3C JavaScript AJAX DOM CSS XHTML XML XMLHTTP

10. Hej! Kaj pa je ta JSON?

11. JSON: JavaScript Object Notation • JSON = JavaScript Object Notation) • Alternativa XML serializaciji vendar “brez odvečnega ‘špeha’” • Na strani JavaScripta ni potrebe po parserju [ { “ime”: “Janezek Novak”, “starost” : 11, “zivali”: [“Reks”, “Pika”] }, { “ime”: “Minka Novak”, “starost” : 11, } ] var name = eval("(" + paketJSON + ")");

12. AJAX spreminja spletne strani Komponente in dogodki Komponentaspisek produktov Vnos naročila Napake(DIV) Dogodki/Akcije Validacija Persistenca Obravnava dogodkov Ustvarjanje GUI Komponentanakupovalnakošarica Spisek produktov (DIV) Nakupovalnakošarica (DIV) AJAX Komponentadostava Obrazec zadostavo (DIV) Obrazec za račun (DIV) Komponentaračun • Enota dela je komponenta • Troslojni model odjemalec/strežnik • Odjemalska koda poskrbi za validacijo, tok, izmenjavo podatkov • Brez gumba za pošiljanje obrazcev (submit) • Naenkrat so osveženi samo deli strani

13. Zemljevidi brez AJAX-a

14. Zemljevidi z AJAX-om

15. Kaj je na voljo za razvoj AJAX rešitev na ASP.NET 1.0/1.1 • Ajax.NET/BorgWorx Ajax.NET/Ajax.NET http://ajax.schwarz-interactive.de • WebORB for .NET -http://www.themidnightcoders.com/weborb/aboutWeborb.htm • Več ogrodij za AJAX na: http://ajaxpatterns.org/Ajax_Frameworks#Server-Side:_.NET

16. In kaj je ATLAS?

17. Zakaj ATLAS? • Poleti 2004 Microsoft prične s projektom “FireAnt” (nova oblikovna preobleka za Hotmail) • Med večimi možnimi arhitekturami so se odločili za uporabo: JavaScript, XMLHTTP in DHTML/CSS (ali drugače AJAX) • Pisanje kode za AJAX so si olajšali z lastnimi knjižnicami • Po ugotovitvi, da lahko te knjižnice koristijo tudi drugim, so oblikovali ogrodje - ATLAS

18. Kaj je ATLAS? • Ogrodje za izgradnjo bolj interaktivnih, bogatejših in personaliziranih spletnih uporabniških vmesnikov

19. “Atlas” Client Script Library Controls, Components ASP.NET “Atlas” Server Extensions App Services Bridge Component Model and UI Framework “Atlas” Client Application Services “Atlas” Server Controls Web Services Bridge Base Class Library Local Store Script Core ASP.NET 2.0 Browser Integration Page Framework, Server Controls Application Services Browser Compatibility Arhitektura Atlas-a HTML, Script, “Atlas” Markup “Atlas”-enabled ASP.NET Pages “Atlas” Service Proxies Web Services (ASMX or WCF) “Atlas” Client Framework and Services “Atlas” Server Framework

20. “Atlas” Client Script LibraryKljučni skripti inbazna knjižnica razredov • “Atlas” script core – poln tipski sistem za Javascript • Razredi in vmesniki, dedovanje, virtualne in abstraktne metode • Enumeracije • Multi-cast obravnava dogodkov (podobno kot v .NET) • Base class library • StringBuilder, razširitve obstoječih tipov • Serializatorji • Razredi za pomoč pri razhroščevanju • Networking

21. “Atlas” Networking • Na strani odjemalca deluje preko XMLHTTP • Razredi WebRequest, WebResponse, MethodRequest • ASP.NET “Atlas” most za spletne storitve • Dostop do komponent, ki jih gosti ASP.NET in servisnih komponent • ASMX in WCF storitve, .NET objekti • Samodejna izgradnja proxy objekta na odjemalcu • <script src=“MojaStoritev.asmx/js” /> • Format “na žici”: Javascript object notation { Coordinates : { X: 2.17, Y: 48.51 }, Name : "Eiffel-ovstolp" } public class Location { public Point Coordinates; public String Name; }

22. DEMO: JSON in spletne storitve

23. “Atlas” uporabniški vmesnikiKomponente in kontrolniki • Strežniške komponente • Ustvarimo jih deklarativno ali programsko • Povezane preko dogodkov in povezav • Sami skrbijo za svoje stanje • Komponetne upor. vmesnika • Povezane z DHTML elementi Web.Component Web.UI.Control

24. Uporaba ATLAS v kodi <!-- Referenca na spletno storitev --> <script type="text/javascript" src="Hello.asmx/js"> </script> <script type="text/javascript"> // Odziv na klik dogodek gumba function DoSearch() { var SrchElem = document.getElementById("SearchKey"); Hello.HelloWorld(SrchElem.value, OnRequestComplete); } // funkcija, ki se sproži ob končanem zahtevku function OnRequestComplete(result) { var RsltElem = document.getElementById("Results"); RsltElem.innerHTML = result; } </script>

25. DEMO – uporaba spletne storitve

26. Uporabniški vmesnik z ATLASUstvarjanje in povezovanje komponent • … Deklarativno (“Atlas” Declarative Script) … <script type=“text/xml-script”> <page xmlns := http://schemas.microsoft.com/xml-script/2005”> <components> <script:label targetElement=“Label1”> <bindings> <binding dataContext=“TextBox1" dataPath="text“ property="text" direction=“In”> </bindings> </script:label> <script:textBox targetElement=“TextBox1” /> </components> </page> </script> <div id="content"> <p><input type="text" id=“Textbox1" size="40" /></p> <p><span id=“Label1“ class=“MyLabel” /></p> </div>

27. DEMO – deklarativni UV

28. Uporabniški vmesnik z ATLASUstvarjanje in povezovanje komponent • … s pomočjo strežniških kontrolnikov <atlas:ScriptManager runat=“server” id=“TextBox1” /> <atlas:TextBox runat=“server” id=“TextBox1” /> <atlas:Label runat=“server” id=“Label1” CssClass=“MyLabel”> <Bindings> <atlas:Binding DataPath=“TextBox1” Property=“Text”> </Bindings> </atlas:Label>

29. Uporabniški vmesnik z ATLASPovezovanje komponent na odjemalcu • Samodejno povezovanje komponent Data source john User Name: Databound Controls Number of characters: 4 Transformer Preoblikujepodatke john_11 Alternates: Eno ali dvosmerno povezovanje

30. DEMO

31. Dodatne informacije • Povezave: • AJAXIAN:http://www.ajaxian.com/ • VWD Express 2005: http://msdn.microsoft.com/express/vwd/ • ASP.NET 2.0: http://www.asp.net/ • ATLAS:http://atlas.asp.net/

32. VPRAŠANJA?