1 / 34

Microsoft AJAX Library kliens oldali osztálykönyvtár

Microsoft AJAX Library kliens oldali osztálykönyvtár. Kereskényi Róbert kereskenyi.robert@aut.bme.hu MSDN Kompetencia Központ Budapesti Műszaki és Gazdaságtudományi Egyetem Automatizálási és Alkalmazott Informatikai Tanszék. Tartalom. Architektúra AJAX JavaScript

sherwood
Download Presentation

Microsoft AJAX Library kliens oldali osztálykönyvtár

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. Microsoft AJAX Library kliens oldali osztálykönyvtár Kereskényi Róbert kereskenyi.robert@aut.bme.hu MSDN Kompetencia Központ Budapesti Műszaki és Gazdaságtudományi Egyetem Automatizálási és Alkalmazott Informatikai Tanszék

  2. Tartalom • Architektúra • AJAX JavaScript • Kliens oldali alap AJAX osztálytípusok • Base Class Library (BCL) típusok • Authentication és Profile szolgáltatás

  3. Microsoft AJAX Library Base Class Library Script Core Asynchronous Communications XML-HTTP Stack JSON Serializer Web Service Proxies XML-HTTP Browser Compatibility Browsers (IE, Firefox, Opera, Safari) Architektúra Server Scripts XHTML / CSS

  4. Tartalom Architektúra AJAX JavaScript Kliens oldali alap AJAX osztálytípusok Base Class Library (BCL) típusok Authentication és Profile szolgáltatás

  5. JavaScript keretrendszer • AJAX Library ≈ JavaScript keretrendszer • Globális függvények ($functions) • JavaScript kiterjesztés • JavaScript típus rendszer • Alap osztályok, interfészek, … (Script Core) • További osztályok, interfészek, … (BCL) • Használhatóvá teszi a JavaScript-et • OOP jelleg • Könnyebb, produktívabb, használhatóbb

  6. AJAX JavaScript • Globális függvények • $create, $find, $get, $addHandler, $removeHandler • Típus kiegészítések • Array – add, contains, insert, remove, … • Boolean – parse • Error – argumentOutOfRange, invalidOperations, … • Number – parse • Object – getType, getTypeName • String – format, endsWith, startWith, trim, … • http://ajax.asp.net/docs/ClientReference/

  7. AJAX – OOP JavaScript • JavaScript • Objektum alapú • NEM objektum orientált • Microsoft AJAX Library objektum orientált programozást biztosít • Névtér, osztály, interfész, öröklés, enum • Kulcs: • JavaScript ”prototype” a kulcs • és persze az AJAX JavaScript

  8. Példa – OOP JavaScript Type.RegisterNameSpace( "MyNameSapce" ); MyNameSapce.Person = function( name ) { MyNameSapce.Person.initializeBase( this ); this._name = name; } MyNameSapce.Person.prototype = { get_name: function() { returnthis._name; } } MyNameSapce.Person.registerClass( 'MyNameSapce.Person' );

  9. Tartalom Architektúra AJAX JavaScript Kliens oldali alap AJAX osztálytípusok Base Class Library (BCL) típusok Authentication és Profile szolgáltatás

  10. stb… Behavoir XML-HTTP- Executor Application StringBuilder Debug Component stb… EventArgs WebRequest -Executor WebRequest- Manager Timer DOMElement DOMEvent JavaScript- Serializer WebRequest ProfileGroup Authentication- Service Control stb… WebMethod WebServiceError ProfileService Script Core Library Sys. Serialization Sys.Services Sys.UI Sys Sys.Net

  11. Application és Debug osztály • Application • magát az alkalmazást reprezentálja • globálisan elérhető • load, unload események • pageLoad, pageUnload automatikusan hívódik, ha jelen van • Debug • beépített, kliens oldali debug lehetőség • assert, fail • globálisan elérhető • windows.debug = new Sys.Debug();

  12. Tartalom Architektúra AJAX JavaScript Kliens oldali alap AJAX osztálytípusok Base Class Library (BCL) típusok Authentication és Profile szolgáltatás

  13. CheckBox TextBox BindingBase Action Binding InvokeMethod- Action Timer SetProperty- Action Counter … Validator Label AutoComplete- Behavior ListView Button XSLTView ItemView DataControl … … DataNavigator DataSource DataFilter DataRow DataTable DataColumn … Selector DataView Base Class Library típusok Sys.Preview Sys.Preview.UI.Data Sys.Preview.Data Sys.Preview.UI

  14. JavaScript vs XML-Script • Kliens oldalon fogalmazhatunk • programkóddal: JavaScript • deklaratívan: XML-Script • Egyenértékűek • Kontroll függő, hogy mikor melyiket egyszerűbb használni (pl. adatkötés) • Deklaratív módot támogatni fogják a tervezőeszközök  VS „Orcas”

  15. Timer - JavaScript <script type="text/javascript"> function pageLoad() { var timer = new Sys.Preview.Timer(); timer.initialize(); timer.set_enabled( true ); timer.set_interval( 1000 ); //1 sec timer.add_tick( onTick ); } function onTick() { window.alert( ”Nem zavaró?” ); } </script>

  16. Timer – XML-Script <script type="text/javascript"> function onTick() { window.alert( ’Nem zavaró?’ ); } </script> <scripttype="text/xml-script"> <page xmlns:script="http://schemas.microsoft.com/xml-script/2005"> <components> <timer enabled="true"interval="1000"tick="onTick" /> </components> </page> </script>

  17. Viselkedések (behaviors) • Viselkedést reprezentáló osztályok • Alap osztály: Sys.UI.Behavior • Leszármazott osztályok • ClickBehavior • PopupBehavior • HoverBehavior • AutoCompleteBehavior • OpacityBehavior • LayoutBehavior • FloatingBehavior

  18. Akciók (actions) • Objektumon értelmezett akciókat reprezentáló osztályok • System.Preview.Action osztályból származik – közös ősosztály • Leszármazott osztályok: • InvokeMethodAction • SetPropertyAction • PostBackAction

  19. Példa - InvokeMethodAction <timer id="theTimer" interval="2000" enabled="true"> <tick> <invokeMethodAction target="timeServiceMethod„ method="invoke"> <parameters userContext="" /> </invokeMethodAction> </tick> </timer> <scripttype="text/xml-script"> <page xmlns="http://schemas.microsoft.com/xml-script/2005"> <components> <label id="lblTime" /> <timer id="theTimer" interval="2000" enabled="true"> <tick> <invokeMethodAction target="timeServiceMethod" method="invoke"> <parameters userContext="" /> </invokeMethodAction> </tick> </timer> <serviceMethodRequest id="timeServiceMethod" url="DateTimeService.asmx" methodName="GetTimeAsString"> <completed> <setPropertyAction target="DateTime" property="text" > <bindings> <binding dataContext="timeServiceMethod" dataPath="result" property="value" /> </bindings> </setPropertyAction> </completed> </serviceMethodRequest> </components> </page> </script> <serviceMethodRequest id="timeServiceMethod" url="DateTimeService.asmx" methodName="GetTimeAsString"> <completed> <setPropertyAction target="DateTime" property="text" > <bindings> <binding dataContext="timeServiceMethod„ dataPath="result" property="value" /> </bindings> </setPropertyAction> </completed> </serviceMethodRequest>

  20. Adatkötés • Adatot rendelni HTML elemhez hogy megjelenítse • Megadása • data context: adatforrás neve • data path: adatforrás forrás tulajdonsága • property: vezérlő elem cél tulajdonsága • transformer: transzformáció az adatforráson az adatkötés előtt (opcionális) • binding direction: in / out / mindkettő

  21. Komplex adatkötés • Sys.Preview.Data névtér osztályai • DataSource, DataTable, DataView, … • Sys.Preview.UI.Data névtér osztályai • ListView, ItemView, … • Szerver oldali webszolgáltatás kétirányú • Select, Insert, Update, Delete • Saját osztály szintén lehet adatforrás • Ezek együttes használata kliens oldali adatkötéshez!

  22. Adatkötés - példa <scripttype="text/xml-script"> <page xmlns="http://schemas.microsoft.com/xml-script/2005"> <components> <textBox id="TextBox1" /> <label id="Label1"> <bindings> <binding dataContext="TextBox1" dataPath="text" property="text" transform="ToString" transformerArgument="Text entered: {0}" /> </bindings> </label> </components> </page> </script>

  23. XML-Script, BCL

  24. Validáció • ASP.NET AJAX saját validátorai • ASP.NET szerver oldali validátorokat egészíti ki AJAX-ossá • Tisztán kliens oldali validáció a HTML elem által generált change eseményre triggerel • RTM verzióban NINCS BENNE!!! • Patch-ként fog megjelenni

  25. Autentikáció • Front-end az ASP.NET 2.0 Membership szolgáltatásához • AuthenticationService.asmx (beépített) • Engedélyezni kell • Kliens oldalon Sys.Services.AuthenticationService osztály • Metódusok: • login, logout, isLoggedIn • Tulajdonságok: • defaultLoginCompletedCallback, defaultFailedCallback, isLoggedIn, timeout, … Web.config: <authenticationService enabled="true" requireSSL=„true|false" />

  26. Profil • Front-end az ASP.NET 2.0 profil szolgáltatásához • ProfileService.asmx (beépített) • Engedélyezni kell • Kliens oldalon Sys.Services.ProfileService osztály • Metódusai: • save, load • Tulajdonságai: • defaultLoadCompletedCallback, defaultSaveCompletedCallback, defaultFailedCallback, properties (field), timeout, … • Profil tulajdonság elérése • Sys.Services.ProfileService.load( …, OnLoadCompleted, … ); • function OnLoadCompleted (){ Sys.Services.ProfileService.properties.PROPERTYNAME } Web.config: <profileService enabled="true" requireSSL=„true|false" />

  27. PreviewGlitz.js • UI effekt kiegészítés a BCL-hez • Sys.Preview.UI.Effects névtér • Átlátszóság  OpacityBehavoir • Méret és pozíció  LayoutBehavior • Animáció  Animation osztály és leszármazottai • PropertyAnimation, InterpolatedAnimation, DiscreteAnimation, NumberAnimation, LengthAnimation, CompositeAnimation, FadeAnimation, ColorAnimation • _duration, _fps, _target, play(), …

  28. Animáció… <script language="javascript"type="text/javascript"> function pageLoad() { var ani = new Sys.Preview.UI.Effects.FadeAnimation(); ani.set_target($get("image1").control); ani.set_effect(Sys.Preview.UI.Effects.FadeEffect.FadeOut); ani.set_duration(3); ani.play(); } </script> …… <compositeAnimation id="aniComp" duration="3"> <animations> <lengthAnimation target="imgLayout1" property="top" startValue="0" endValue="300" /> <lengthAnimation target="imgLayout1" property="left" startValue="0" endValue="600" /> </animations> </compositeAnimation>

  29. Animáció demó

  30. VirtualEarthMap • Korai béta fázisokban lévő vezérlő • AtlasUIMap.js tartalmazza (v Beta2) • Microsoft Virtual Earth SDK burkoló osztály AJAX-hoz • Térkép beágyazása saját web oldalakba • mozgatás, nagyítás, kicsinyítés • Adatkötés (pushpin-ek) • Talán újra része lesz az AJAX Library-nek…

  31. Összefoglalás • Microsoft AJAX Library az ASP.NET AJAX kliens oldali része • Platform és böngésző független • OOP és osztály kiegészítés a JavaScripthez  JavaScript framework • Imperatív (JavaScript) és deklaratív (XML-Script) programozás

  32. További információk • Fejlesztői Portál: • http://www.devportal.hu • Webfejlesztés témaközpont: • http://www.devportal.hu/Portal/Webdevelopment.aspx • ASP.NET 2.0 Induló Készlet: • http://www.devportal.hu/InduloKeszlet • MSDN .NET Developer Center • http://msdn.microsoft.com/netframework/ • MSDN ASP.NET Developer Center • http://msdn.microsoft.com/aspnet • Hivatalos ASP.NET honlap • http://www.asp.net • Hivatalos ASP.NET AJAX honlap • http://ajax.asp.net • Microsoft AJAX Library reference honlap • http://ajax.asp.net/docs/ClientReference/

  33. Kérdések és válaszok Értékelőlapok!

  34. © 2007 Microsoft Corporation. Minden jog fenntartva. Az előadás csupán tájékoztató jellegű, a Microsoft Magyarország a benne szereplő esetleges hibákért vagy tévedésekért semmilyen felelősséget nem vállal.

More Related