Who’s to blame? Jeppe Rørbæk Developer Evangelist, Development & Platform Strategy MCP, MCAD, MCSD, MCT

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

AJAX – Historie 1596

AJAX – Historie 1942

AJAX – Historie 1953

AJAX – Historie BC

AJAX – Historie 2005?

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

AJAX - Asynchronous JavaScript and XML

AJAX – De overordnede mål? Partiel rendering Applikationsdele på klienten (JavaScript) Demo (Nikhilk) Partiel rendering Applikationsdele på klienten (JavaScript) Demo (Nikhilk)

“AJAX” – Er blevet benyttet længe Teknologier IFrame’s Callbacks med ASP.NET 2.0 XmlHttp (IE 5.5) Demo (old cr..) Teknologier IFrame’s Callbacks med ASP.NET 2.0 XmlHttp (IE 5.5) Demo (old cr..)

Problematikker Typisk opgave Partiel rendering Mulighed 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 Typisk opgave Partiel rendering Mulighed 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

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. 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.

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

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

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... 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...

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

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

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

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

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

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

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

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

ASP.NET AJAX Control Toolkit

Demo

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) Benyt de medfølgende Visual Studio Templates Inspicér eksisterende extenders og ”lad dig inspirere” Skriv den færdig Brug den Eksempel (ImageCropper)

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? 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?

Hvordan kommer man igang 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++ 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++

Hvordan kommer man igang - 2

Hvordan kommer man igang - 3

Links spoke-at-the-techready4-conference.aspx De viste eksempler lægges til download på spoke-at-the-techready4-conference.aspx De viste eksempler lægges til download på

Kontakt Jeppe Rørbæk For yderligere spørgsmål, kodeeksempler og/eller lignende