Előadást letölteni
1
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 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, … http://ajax.asp.net/docs/ClientReference/ http://ajax.asp.net/docs/ClientReference/
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 <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
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 <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
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: http://www.devportal.hu http://www.devportal.hu Webfejlesztés témaközpont: http://www.devportal.hu/Portal/Webdevelopment.aspx http://www.devportal.hu/Portal/Webdevelopment.aspx ASP.NET 2.0 Induló Készlet: http://www.devportal.hu/InduloKeszlet http://www.devportal.hu/InduloKeszlet MSDN.NET Developer Center http://msdn.microsoft.com/netframework/ http://msdn.microsoft.com/netframework/ MSDN ASP.NET Developer Center http://msdn.microsoft.com/aspnet http://msdn.microsoft.com/aspnet http://msdn.microsoft.com/aspnet Hivatalos ASP.NET honlap http://www.asp.net http://www.asp.net Hivatalos ASP.NET AJAX honlap http://ajax.asp.net http://ajax.asp.net Microsoft AJAX Library reference honlap http://ajax.asp.net/docs/ClientReference/ http://ajax.asp.net/docs/ClientReference/
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.
