Kereskényi Róbert MSDN Kompetencia Központ Budapesti Műszaki és Gazdaságtudományi Egyetem Automatizálási és Alkalmazott Informatikai Tanszék Microsoft AJAX Library kliens oldali osztálykönyvtár

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

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, … 

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() { return this._name; } MyNameSapce.Person.registerClass( 'MyNameSapce.Person' ); Type.RegisterNameSpace( "MyNameSapce" ); MyNameSapce.Person = function( name ) { MyNameSapce.Person.initializeBase( this ); this._name = name; } MyNameSapce.Person.prototype = { get_name: function() { return this._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 Script Core Library Application StringBuilder Debug Component stb… EventArgs Sys WebRequest-Executor WebRequest-Manager XML-HTTP-Executor WebRequest WebServiceError WebMethod Sys.Net ProfileService Authentication-Service ProfileGroup Sys.Services JavaScript-Serializer Sys. Sys.Serialization DOMElement Behavoir DOMEvent Control Timer Sys.UI stb… stb…

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

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 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ó?” ); } 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ó?” ); }

16 Timer – XML-Script function onTick() { window.alert( ’Nem zavaró?’ ); } function onTick() { window.alert( ’Nem zavaró?’ ); }

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 <serviceMethodRequest id="timeServiceMethod" url="DateTimeService.asmx" methodName="GetTimeAsString"> <serviceMethodRequest id="timeServiceMethod" url="DateTimeService.asmx" methodName="GetTimeAsString"> <invokeMethodAction target="timeServiceMethod„ method="invoke"> <invokeMethodAction target="timeServiceMethod„ method="invoke"> <serviceMethodRequest id="timeServiceMethod" url="DateTimeService.asmx" methodName="GetTimeAsString"> <binding dataContext="timeServiceMethod„ dataPath="result" property="value" /> <serviceMethodRequest id="timeServiceMethod" url="DateTimeService.asmx" methodName="GetTimeAsString"> <binding dataContext="timeServiceMethod„ dataPath="result" property="value" />

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 <binding dataContext="TextBox1" dataPath="text" property="text" transform="ToString" transformerArgument="Text entered: {0}" /> <binding dataContext="TextBox1" dataPath="text" property="text" transform="ToString" transformerArgument="Text entered: {0}" />

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: Web.config:

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: Web.config:

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ó… 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(); } …… 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(); } ……

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:   Webfejlesztés témaközpont:   ASP.NET 2.0 Induló Készlet:   MSDN.NET Developer Center   MSDN ASP.NET Developer Center   Hivatalos ASP.NET honlap   Hivatalos ASP.NET AJAX honlap   Microsoft AJAX Library reference honlap 

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.