Atlas/Otto Knudsen 1 "Atlas"  AJAX Extensions til ASP.NET.

Præsentationer af emnet: "Atlas/Otto Knudsen 1 "Atlas"  AJAX Extensions til ASP.NET."— Præsentationens transcript:

1 Atlas/Otto Knudsen 1 "Atlas"  AJAX Extensions til ASP.NET

2 Atlas/Otto Knudsen 2 "Atlas"  "Atlas" er det interne navn for Microsoft's AJAX-produkter  version 1.0 er udgivet i januar 2007  produktet hedder AJAX Extensions for ASP.NET  Mål?  Bedre brugeroplevelser  Større funktionalitet på klient-siden  Forbedret intergration af web-tjenester på klient-siden  en brugeroplevelse, som ligger tættere opad Windows-applikationer!

3 Atlas/Otto Knudsen 3 Hvad er Atlas?  Atlas = Værktøjer til AJAX-applikationer  3 væsentlige komponenter:  Klient-side kontroller & JavaScript-biblioteker  Microsoft AJAX Library  Server-side ASP.NET AJAX-kontroller  ASP.NET 2.0 AJAX Extensions  Udvidet samling af AJAX-kontroller  ASP.NET AJAX Control Toolkit

4 Atlas/Otto Knudsen 4 Atlas - arkitektur Server Klient – Browser Atlas Client Framework Controls & Components Component Model Base Class Library UI Framework Browser Compatibility Script Core Atlas Server Framework Atlas Server Controls App Services Bridge Web Services Bridge ASP.NET 2.0 Page Frameworks Server Controls Application Services

5 Atlas/Otto Knudsen 5 Microsoft AJAX Library  Klient-side-kontroller og JavaScript-biblioteker

6 Atlas/Otto Knudsen 6 Microsoft AJAX Library  Kompatibilitet på tværs af browsere  IE, Firefox, Opera,...  Script run-time-kerne med JavaScript-tilføjelser  Klasser, namespaces, arv, interfaces  hjælp-klasser til.NET (fx StringBuilder)  Komponentmodel og UI Framework  Klient-side-kontroller, som mapper DHTML elements  XML-script-erklæringer, data-binding, validering  Adfærd: træk-og-slip, værktøjstips, auto-komplettering Atlas Client Framework Controls & Components Component Model Base Class Library UI Framework Browser Compatibility Script Core

7 Atlas/Otto Knudsen 7 Eksempel  Atlas-baseret web-applikation, som viser aktuelle klokkeslæt  anvender Microsoft's AJAX library på klienten  anvender VB-agtig timer-kontrol til at hente klokkeslættet  foretager asynkront kald til en webtjeneste (mere effektivt end kald til en side) Web-server TimeSvc. asmx 03:45:23 PM GetTime.aspx

8 Atlas/Otto Knudsen 8 TimeSvc.asmx  TimeSvc.asmx er en webtjeneste ( ASP.NET modul )  indeholder ingen UI, kald til GetTime( ) returnerer aktuelle klokkeslæt … [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class TimeSvc : System.Web.Services.WebService { [WebMethod] public string GetTime() { return DateTime.Now.ToString("hh:mm:ss tt"); } [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class TimeSvc : System.Web.Services.WebService { [WebMethod] public string GetTime() { return DateTime.Now.ToString("hh:mm:ss tt"); } TimeSvc.asmx TimeSvc.cs Web-server TimeSvc. asmx

9 Atlas/Otto Knudsen 9 GetTime.aspx  GetTime.aspx er en webside, som brugeren kan interagere med  anvender kontroller i AJAX –biblioteket for at blive browserusafhængig  Gør brug af en webtjeneste function pageLoad() { // create controls for page: var btn = new Sys.UI.Button($("cmdGetTime")); btn.click.add(OnGetTimeClick); btn.initialize(); } GetTime.aspx

10 Atlas/Otto Knudsen 10 Kald af webtjenesten  Ved knaptryk foretages det asynkrone kald  biblioteket opretter en proxy og håndterer detaljerne  når kaldet er færdigbehandlet, (evt. time-out), får vi tilbagemelding function OnGetTimeClick(sender, args) { TimeSvc.GetTime(OnComplete, OnTimeout); } function OnComplete(result) { $("divTime").style.display = 'block'; lblTime.set_text(result); } function OnTimeout(result) { alert("Call to server failed, please try again in a few minutes."); }

11 Atlas/Otto Knudsen 11 Løbende opdatering  Anvendelse af timer til løbende opdatering  kontrollen findes i biblioteket…. function OnEnableTimerClick(sender, args) { if (timerEnabled) return; var timer = new Sys.Timer(); timer.tick.add(OnGetTimeClick); timer.set_interval(3000); // 3 seconds timer.set_enabled(true); timerEnabled = true; }

12 Atlas/Otto Knudsen 12 Klient-side kontroller og adfær  Klientkontroller  Sys.UI.Window  Sys.UI.Label  Sys.UI.Image  Sys.UI.HyperLink  Sys.UI.Button  Sys.UI.CheckBox  Sys.UI.Select  Sys.UI.TextBox  Adfærd  Sys.UI.PopupBehavior  Sys.UI.ClickBehavior  Sys.UI.HoverBehavior  Sys.UI.AutoCompleteBehavior  Sys.UI.FloatingBehavior  Sys.UI.OpacityBehavior  Sys.UI.LayoutBehavior

13 Atlas/Otto Knudsen 13 Flere eksempler

14 Atlas/Otto Knudsen 14 ASP.NET 2.0 AJAX Extensions  AJAX-aktive server-side-kontroller til ASP.NET

15 Atlas/Otto Knudsen 15 ASP.NET 2.0 AJAX Extensions  Tilbyder AJAX på en mere "ASP.NET-agtig" facon  server-side model  kræver intet klient-side JavaScript  ligner "Masterpage"-konceptet med placeholders, som håndterer alt arbejdet …  Alle de gode egenskaber ved AJAX uden klient-side programmering! Atlas Server Framework Atlas Server Controls App Services Bridge Web Services Bridge

16 Atlas/Otto Knudsen 16 UpdatePanel  UpdatePanel –kontroller tilbyder AJAX-funktionalitet  en beholder, som gør det muligt at opdatere et område og foretage asynkrone kald  kontroller, som er placeret inde i en UpdatePanel -kontrol vil foretage et asynkront kald, ikke en postback  ingen speciel programmering på hverken klient eller server! Browser Hændelse udløses på panelet ASP.NET 2.0 ASPX side Postback- hændelsen udløses som sædvanligt! Indholdet af UpdatePanel-området returneres Kun “updatePanel”- området opdateres på klienten Asynkront Postback

17 Atlas/Otto Knudsen 17 Oprettelse af en AJAX-webapplikation  Opret et nyt websted af typen ASP.NET AJAX-enabled Web Site  den eneste forskel er web.config-filen  Byg webapplikationen ganske som du plejer …  træk og slip kontroller, master pages, osv.  placér kontroller på UpdatePanel-kontrollen, når du vil opnå AJAX-funktionalitet…

18 Atlas/Otto Knudsen 18 Eksempel  AJAX-opdatering af GridView fra en database…

19 Atlas/Otto Knudsen 19 Andre eksempler  Microsoft tilbyder en række demoapplikationer:  Simple List applikation  Contact List applikation  Multi-user Task List applikation

20 Atlas/Otto Knudsen 20 ASP.NET AJAX Control Toolkit  Yderligere AJAX-kontroller …

21 Atlas/Otto Knudsen 21 ASP.NET AJAX Control Toolkit  Yderligere AJAX-kontroller og udvidelser  software udviklingsværktøj (SDK) til at skrive AJAX-aktive komponenter til ASP.NET  fuld kildekode AccordionAnimationCascadingDropDown CollapsiblePanelConfirmButtonDragPanel FilteredTextBoxHoverMenuModalPopup NumericUpDownPagingBulletedListPasswordStrength RatingSliderTextBoxWatermark ToggleButtonUpdatePanelAnimation...

22 Atlas/Otto Knudsen 22 Hvad så?  Øvelse #8  Mere information om Atlas:  http://atlas.asp.net/ http://atlas.asp.net/

23 Atlas/Otto Knudsen 23 ……