1 / 23

"Atlas"

"Atlas". AJAX Extensions til ASP.NET. "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

tiva
Télécharger la présentation

"Atlas"

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. "Atlas" • AJAX Extensions til ASP.NET

  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. 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. ASP .NET 2.0 Page Frameworks Server Controls Application Services Atlas - arkitektur Atlas Client Framework Atlas Server Framework Controls & Components Atlas Server Controls App Services Bridge Component Model Web Services Bridge UI Framework Base Class Library Script Core Browser Compatibility Server Klient – Browser

  5. Microsoft AJAX Library • Klient-side-kontroller og JavaScript-biblioteker

  6. Microsoft AJAX Library Atlas Client Framework Controls & Components Component Model UI Framework • 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 Base Class Library Script Core Browser Compatibility

  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) GetTime.aspx Web-server TimeSvc.asmx <result> 03:45:23 PM</result>

  8. TimeSvc.asmx Web-server TimeSvc.asmx • TimeSvc.asmx er en webtjeneste (ASP.NET modul) • indeholder ingen UI, kald til GetTime( ) returnerer aktuelle klokkeslæt … TimeSvc.asmx <%@ WebService Language="C#"CodeBehind="~/App_Code/TimeSvc.cs"Class="TimeSvc"%> TimeSvc.cs [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"); } }

  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 GetTime.aspx <head> <script type="text/javascript"> function pageLoad() { // create controls for page: var btn = new Sys.UI.Button($("cmdGetTime")); btn.click.add(OnGetTimeClick); btn.initialize(); } </script> </head> <body> <atlas:ScriptManager ...> <Services> <atlas:ServiceReference Path="TimeSvc.asmx" .../> </Services> </atlas:ScriptManager> <form>

  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 <script type="text/javascript" ...> 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. Løbende opdatering • Anvendelse af timer til løbende opdatering • kontrollen findes i biblioteket… <script type="text/javascript" ...> . . . 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. 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. Flere eksempler

  14. ASP.NET 2.0 AJAX Extensions • AJAX-aktive server-side-kontroller til ASP.NET

  15. Atlas Server Framework Atlas Server Controls App Services Bridge Web Services Bridge 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!

  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 ASP .NET 2.0 ASPX side Postback- hændelsen udløses som sædvanligt! Asynkront Postback Hændelse udløses på panelet Kun “updatePanel”- området opdateres på klienten Indholdet af UpdatePanel-området returneres

  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. Eksempel • AJAX-opdatering af GridView fra en database…

  19. Andre eksempler • Microsoft tilbyder en række demoapplikationer: • Simple List applikation • Contact List applikation • Multi-user Task List applikation

  20. ASP.NET AJAX Control Toolkit • Yderligere AJAX-kontroller …

  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 Accordion Animation CascadingDropDown CollapsiblePanel ConfirmButton DragPanel FilteredTextBox HoverMenu ModalPopup NumericUpDown PagingBulletedList PasswordStrength Rating Slider TextBoxWatermark ToggleButton UpdatePanelAnimation ...

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

  23. <blank> • …

More Related