Unveiling the Power of AJAX Development in ASP.NET Framework

1. Who’s to blame? Jeppe Rørbæk jepper@microsoft.com +45 51 57 81 67 http://blogs.msdn.com/jepper Developer Evangelist, Development & Platform StrategyMCP, MCAD, MCSD, MCT

2. What’s on the menu? AJAX – En smudsig historie? ASP.NET AJAX – Rengøring med de fede handsker ASP.NET AJAX – Rengøring AS ASP.NET AJAX Control Toolkit – Gør det selv, og gør det rigtigt

3. AJAX – Historie 1596

4. AJAX – Historie 1942

5. AJAX – Historie 1953

6. AJAX – Historie BC

7. AJAX – Historie 2005?

8. AJAX - Asynchronous JavaScript and XML • Jesse James Garret – 18. februar 2005 - definition • “Standards-based presentation using XHTML and CSS” • “Dynamic display and interaction using the Document Object Model” • “Data interchange and manipulation using XML and XSLT” • “Asynchronous data retrieval using XMLHttpRequest” • “And JavaScript binding everything together” • Også omtalt som ”Enabler of Web 2.0”. • I må komme herop bagefter, hvis det var en af de andre i var ude efter.

9. AJAX - Asynchronous JavaScript and XML

10. AJAX - Asynchronous JavaScript and XML

11. AJAX – De overordnedemål? • Partiel rendering • Applikationsdele på klienten (JavaScript) • Demo (Nikhilk)

12. “AJAX” – Erblevetbenyttetlænge • Teknologier • IFrame’s • Callbacks med ASP.NET 2.0 • XmlHttp (IE 5.5) • Demo (old cr..)

13. Problematikker • Typisk opgave • Partiel renderingMulighed for opdatering af en mindre del af en side(det lyder jo egentlig enkelt ... ?) • Typiske problemer - A(argh)JAX • Browserforskelligheder • Browserindstillinger • JavaScript / ActiveX • 2 programmeringsmodeller (og sprog) • Integration med server applikation • Tilgang til kontroltræet • Tid! • Demo

14. Hvad er behovet? • Udvikling af ”ajaxificerede” sider skal være nemt og fleksibelt • ”Drag/drop løsninger”. • Problemer med browserforskelligheder skal minimeres. • Kompleksitet omkring XmlHttp skal fjernes. • Man skal kunne gøre som man plejer. • Man skal kunne udvikle avancerede (rige) applikationer på klientsiden på en fornuftig måde, og inden for rimelig tid. • Skal være baseret på eksisterende standarder, og ikke kræve installation hos klienten.

15. Hensigten med ASP.NET AJAX • Højproduktivt platform for udvikling af AJAX-style browser applikationer. • Færdige komponenter til løsning af typiske opgaver • Gør AJAX tilgængeligt for alle (Drag/Drop AJAX) • (Hvilket jo så også i mere eller mindre grad er tilfældet for andre AJAX baserede frameworks/komponenter) • Uproblematisk integration med den eksisterende .NET platform • Fuldt integreret med ASP.NET • Enkel model for brug af services • (Ikke nødvendigvis tilfældet med med andre frameworks/komponenter) • Fuld understøttelse i værktøjer • I første omgang bliver jo nok vores egne ;o) • Kompatibilitet og tilgængelighed • Skal fungere i ”alle” browsere • Ingen installation hos klienten

16. ASP.NET 2.0 Page Framework, Server Controls Application Services Arkitektur – hvad er budet så (beskrivelse) Web Services HTML markup, CSS, and Script ASP.NET Pages AJAX Service Proxies Microsoft Ajax Library ASP.NET 2.0 Ajax Extensions Control Layer App Services Bridge Ajax-Enabled Server Controls UI Layer Web Services Bridge Networking Layer Base Class Library Script Core Browser Compatibility Server Framework Client Framework

17. Microsoft AJAX Library (Client side) • Browser Compatibility Layer • Abstraherer forskellighederne i diverse browsere • Core Services • Javascript extensions (OO features) • Datatyper og serialisering • ASP.NET AJAX Base Class Library • ”.NET faciliteter” (StringBuilder, Debug, Event, IDisposable) • Profile og Authentication • Udvidet fejlhåndtering • Netværkslag • Kommunikation med webservices • Abstraktion over XmlHttp • UI Layer • Parsing af XML Scripts • Bindings • Behaviors • UI Components • Control Layer • ListView, MapControl, Timer, Counter etc...

18. ASP.NET 2.0 AJAX Extensions (Server side) • Server kontroller • UpdatePanel mv. • WebServices • ProfileWebService • AuthenticationWebService • HttpHandlers • ScriptHandlerFactory • MultiRequestHandler (batchcalls) • GlobalizationHandler • HttpModules • ScriptModule • BridgeModule • WebResourceCompressionModule

19. Hvad giver det så? • Browserkompetabilitet • Clientside compatibilitylayer • Kompleksitet omkring asynkrone request med XmlHttp • Indpakket i networklayer • Forskellige programmeringsmodeller • OO features til JavaScript • Browserindstillinger • Visse ting fungerer både med og uden JavaScript! • Kortere udviklingstid • Nem udvikling med indbyggede kontroller • Adgang til eksisterende Application Services fra klienten • Profile og Authentication services • Server og klientudvikling er bragt tættere på hinanden • OO Features i JavaScript • Udvidede muligheder for udvikling af applikationer på klienten

20. Partiel rendering med UpdatePanels • Demo • Page lifecycle • Rendering • Hvor ”partielt” er det egentlig?

21. Brug af services • Hvad skal der til? • Hvad foregår der? • Demo

22. Lille opsummering • Flere måder at arbejde med partiel rendering • UpdatePanel’s • WebServices • PageMethods !

23. Men... Er det ikke stadig noget fniller? • JavaScript på WebForms? • Extenders • Tilføj behaviors til eksisterende UI komponenter • Demo (DragOverlayExtender, AutoCompleteExtender)

24. ASP.NET AJAX Control Toolkit • En ordentlig ...fuld af fede extenders • Nogle få selvstændige kontroller • Gode værktøjer for udvikling af egne AJAX kontroller og extenders • Bunker af sourcekode • Visual Studio Templates • TestHarness

25. Application Services • Indbygget mulighed for at udnytte ASP.NET 2.0 Application Services alá AJAX • Eksempel : DragOverLayExtender / ProfileService

26. ASP.NET AJAX Control Toolkit

27. ASP.NET AJAX Control Toolkit • Demo

28. Udvikling af egne extenders • Benyt de medfølgende Visual Studio Templates • Inspicér eksisterende extenders og ”lad dig inspirere” • Skriv den færdig • Brug den  • Eksempel (ImageCropper)

29. ASP.NET Typiske arbejdstyper • Opdatering af almindelige deklarativt opbyggede sider • UpdatePanels • Clientside adgang til services • Opdatering af komponentbaserede sider • UserControls • CustomControls (JokeBrowser) • Konstruktion af ny AJAX UX • Control Toolkit (CityLookUpExtender, ImagePartExt) • TemplateUxService?

30. Hvordan kommer man igang - 1 • http://ajax.asp.net • Produktmodenhed • Release version 1.0 • Pakker • ASP.NET AJAX Extensions • ASP.NET AJAX Control Toolkit • ASP.NET AJAX Futures CTP • Microsoft AJAX Library • Docs, eksempler og videoer++

31. Hvordan kommer man igang - 2

32. Hvordan kommer man igang - 3

33. Links • http://ajax.asp.net • http://www.nikhilk.net • http://projects.nikhilk.net/ • http://weblogs.asp.net/bleroy • http://weblogs.asp.net/scottgu • http://www.telerik.com • http://www.daniel-zeiss.de/AJAXComparison/Results.htm • http://aspnetresources.com/blog/ms_ajax_cheat_sheets_batch2.aspx • http://blogs.msdn.com/delay/archive/2007/02/08/toolkit-talk-take-two-spoke-at-the-techready4-conference.aspx • De viste eksempler lægges til download på http://blogs.msdn.com/jepper

34. Kontakt • For yderligere spørgsmål, kodeeksempler og/eller lignende Jeppe Rørbæk jepper@microsoft.com +45 51 57 81 67 http://blogs.msdn.com/jepper