Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

Kereskényi Róbert MSDN Kompetencia Központ Budapesti Műszaki és Gazdaságtudományi Egyetem Automatizálási és Alkalmazott Informatikai.

Hasonló előadás


Az előadások a következő témára: "Kereskényi Róbert MSDN Kompetencia Központ Budapesti Műszaki és Gazdaságtudományi Egyetem Automatizálási és Alkalmazott Informatikai."— Előadás másolata:

1 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 16 Timer – XML-Script function onTick() { window.alert( ’Nem zavaró?’ ); } function onTick() { window.alert( ’Nem zavaró?’ ); }

17 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 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 19 Példa - InvokeMethodAction

20 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 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 22 Adatkötés - példa

23 23 XML-Script, BCL

24 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 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 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 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 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 29 Animáció demó

30 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 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 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 33 Kérdések és válaszok Értékelőlapok!

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


Letölteni ppt "Kereskényi Róbert MSDN Kompetencia Központ Budapesti Műszaki és Gazdaságtudományi Egyetem Automatizálási és Alkalmazott Informatikai."

Hasonló előadás


Google Hirdetések