microsoft ajax library kliens oldali osztÃ¡lykÃ¶nyvtÃ¡r

Kereskényi RóbertKereskényi Ró[email protected]@aut.bme.hu

MSDN Kompetencia KözpontMSDN Kompetencia KözpontBudapesti Műszaki és Gazdaságtudományi EgyetemBudapesti Műszaki és Gazdaságtudományi EgyetemAutomatizálási és Alkalmazott Informatikai TanszékAutomatizálási és Alkalmazott Informatikai Tanszék

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

22

TartalomTartalom

ArchitektúraArchitektúra

AJAX JavaScriptAJAX JavaScript

Kliens oldali alap AJAX osztálytípusokKliens oldali alap AJAX osztálytípusok

Base Class Library (BCL) típusokBase Class Library (BCL) típusok

Authentication és Profile szolgáltatásAuthentication és Profile szolgáltatás

33


XHTML / CSSXHTML / CSSXHTML / CSSXHTML / CSS Server ScriptsServer ScriptsServer ScriptsServer Scripts

Microsoft AJAX LibraryMicrosoft AJAX Library

Script CoreScript Core

Base Class LibraryBase Class Library

Asynchronous CommunicationsAsynchronous Communications

Browser CompatibilityBrowser Compatibility

Browsers (IE, Firefox, Opera, Safari)Browsers (IE, Firefox, Opera, Safari)

XML-HTTP StackXML-HTTP Stack

XML-HTTPXML-HTTP

JSON Serializer

JSON Serializer

Web Service Proxies

Web Service Proxies

44

TartalomTartalom






55

JavaScript keretrendszerJavaScript keretrendszer

AJAX Library AJAX Library ≈ JavaScript keretrendszer≈ JavaScript keretrendszer Globális függvények ($functions)Globális függvények ($functions) JavaScript kiterjesztésJavaScript kiterjesztés JavaScript típus rendszerJavaScript típus rendszer Alap osztályok, interfészek, … (Script Core)Alap osztályok, interfészek, … (Script Core) További osztályok, interfészek, … (BCL)További osztályok, interfészek, … (BCL)

Használhatóvá teszi a JavaScript-etHasználhatóvá teszi a JavaScript-et OOP jellegOOP jelleg Könnyebb, produktívabb, használhatóbbKönnyebb, produktívabb, használhatóbb

66


Globális függvényekGlobális függvények $create, $find, $get, $addHandler, $removeHandler$create, $find, $get, $addHandler, $removeHandler

Típus kiegészítésekTípus kiegészítések Array – add, contains, insert, remove, …Array – add, contains, insert, remove, … Boolean – parseBoolean – parse Error – argumentOutOfRange, invalidOperations, …Error – argumentOutOfRange, invalidOperations, … Number – parseNumber – parse Object – getType, getTypeNameObject – getType, getTypeName String – format, endsWith, startWith, trim, …String – format, endsWith, startWith, trim, …

http://ajax.asp.net/docs/ClientReference/http://ajax.asp.net/docs/ClientReference/

77

AJAX – OOP JavaScriptAJAX – OOP JavaScript

JavaScriptJavaScript Objektum alapúObjektum alapú NEM objektum orientáltNEM objektum orientált

Microsoft AJAX Library objektum Microsoft AJAX Library objektum orientált programozást biztosítorientált programozást biztosít Névtér, osztály, interfész, öröklés, enumNévtér, osztály, interfész, öröklés, enum

Kulcs:Kulcs: JavaScript ”prototype” a kulcsJavaScript ”prototype” a kulcs és persze az AJAX JavaScriptés persze az AJAX JavaScript

88

Példa – OOP JavaScriptPélda – OOP JavaScriptType.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' );

99

TartalomTartalom






1010

Script Core LibraryScript Core Library

ApplicationApplication

StringBuilderStringBuilder

DebugDebug

ComponentComponent

stb…stb…

EventArgsEventArgs

SysSysWebRequestWebRequest

-Executor-Executor

WebRequest-WebRequest-ManagerManager

XML-HTTP-XML-HTTP-ExecutorExecutor

WebRequestWebRequest

WebServiceErrorWebServiceError

WebMethodWebMethod

Sys.NetSys.Net

ProfileServiceProfileService

Authentication-Authentication-ServiceService

ProfileGroupProfileGroup

Sys.ServicesSys.ServicesJavaScript-JavaScript-SerializerSerializer

Sys.Sys.SerializationSerialization

DOMElementDOMElement

BehavoirBehavoir

DOMEventDOMEvent

ControlControl

TimerTimer

Sys.UISys.UI

stb…stb…

stb…stb…

1111

Application és Debug osztályApplication és Debug osztály

ApplicationApplication magát az alkalmazást reprezentáljamagát az alkalmazást reprezentálja globálisan elérhetőglobálisan elérhető load, unload eseményekload, unload események

pageLoad, pageUnload automatikusan hívódik, pageLoad, pageUnload automatikusan hívódik, ha jelen vanha jelen van

DebugDebug beépített, kliens oldali debug lehetőségbeépített, kliens oldali debug lehetőség assert, failassert, fail globálisan elérhetőglobálisan elérhető

windows.debug = new Sys.Debug();windows.debug = new Sys.Debug();

1212

TartalomTartalom






1313

Base Class Library típusokBase Class Library típusok

BindingBaseBindingBase

ActionAction

BindingBinding

InvokeMethod-InvokeMethod-ActionAction

TimerTimer

SetProperty-SetProperty-ActionAction

Sys.PreviewSys.Preview

CounterCounter

……

ValidatorValidator

LabelLabel

AutoComplete-AutoComplete-BehaviorBehavior

ButtonButton

TextBoxTextBox

CheckBoxCheckBox

Sys.Preview.UISys.Preview.UI

SelectorSelector

……

DataColumnDataColumn

DataTableDataTable

DataRowDataRow

DataViewDataView

DataSourceDataSource

DataFilterDataFilter

Sys.Preview.DataSys.Preview.Data

……

DataControlDataControl

ItemViewItemView

DataNavigatorDataNavigator

ListViewListView

……

XSLTViewXSLTView

Sys.Preview.UI.DataSys.Preview.UI.Data

1414

JavaScript vs XML-ScriptJavaScript vs XML-Script

Kliens oldalon fogalmazhatunkKliens oldalon fogalmazhatunk programkóddal: JavaScriptprogramkóddal: JavaScript deklaratívan: XML-Scriptdeklaratívan: XML-Script

EgyenértékűekEgyenértékűek

Kontroll függő, hogy mikor melyiket Kontroll függő, hogy mikor melyiket egyszerűbb használni (pl. adatkötés)egyszerűbb használni (pl. adatkötés)

Deklaratív módot támogatni fogják a Deklaratív módot támogatni fogják a tervezőeszközök tervezőeszközök VS „Orcas” VS „Orcas”

1515

Timer - JavaScriptTimer - 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>

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

1616

Timer – XML-ScriptTimer – XML-Script<script type="text/javascript">

function onTick()

{

window.alert( ’Nem zavaró?’ );

}

</script>

<script type="text/xml-script">

<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">

<components>

<timer enabled="true" interval="1000" tick="onTick" />

</components>

</page>

</script>

<script type="text/javascript">

function onTick()

{

window.alert( ’Nem zavaró?’ );

}

</script>


<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">

<components>

<timer enabled="true" interval="1000" tick="onTick" />

</components>

</page>

</script>

1717

Viselkedések (behaviors)Viselkedések (behaviors)

Viselkedést reprezentáló osztályokViselkedést reprezentáló osztályok

Alap osztály: Sys.UI.BehaviorAlap osztály: Sys.UI.Behavior

Leszármazott osztályokLeszármazott osztályok ClickBehaviorClickBehavior PopupBehaviorPopupBehavior HoverBehaviorHoverBehavior AutoCompleteBehaviorAutoCompleteBehavior OpacityBehaviorOpacityBehavior LayoutBehaviorLayoutBehavior FloatingBehaviorFloatingBehavior

1818

Akciók (actions)Akciók (actions)

Objektumon értelmezett akciókat Objektumon értelmezett akciókat reprezentáló osztályokreprezentáló osztályok

System.Preview.Action osztályból System.Preview.Action osztályból származik – közös ősosztályszármazik – közös ősosztály

Leszármazott osztályok:Leszármazott osztályok: InvokeMethodActionInvokeMethodAction SetPropertyActionSetPropertyAction PostBackActionPostBackAction

1919

Példa - InvokeMethodActionPélda - InvokeMethodAction<script type="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>



<components>

<label id="lblTime" />


<tick>

<invokeMethodAction target="timeServiceMethod" method="invoke">



</tick>

</timer>

<serviceMethodRequest id="timeServiceMethod" url="DateTimeService.asmx"

methodName="GetTimeAsString">

<completed>


<bindings>

<binding dataContext="timeServiceMethod" dataPath="result" property="value" />

</bindings>


</completed>


</components>

</page>

</script>


<tick>

<invokeMethodAction target="timeServiceMethod„

method="invoke">



</tick>

</timer>


<tick>

<invokeMethodAction target="timeServiceMethod„

method="invoke">



</tick>

</timer>

<serviceMethodRequest id="timeServiceMethod"

url="DateTimeService.asmx" methodName="GetTimeAsString">

<completed>


<bindings>

<binding dataContext="timeServiceMethod„

dataPath="result" property="value" />

</bindings>


</completed>


<serviceMethodRequest id="timeServiceMethod"

url="DateTimeService.asmx" methodName="GetTimeAsString">

<completed>


<bindings>

<binding dataContext="timeServiceMethod„

dataPath="result" property="value" />

</bindings>


</completed>


2020

AdatkötésAdatkötés

Adatot rendelni HTML elemhez hogy Adatot rendelni HTML elemhez hogy megjelenítsemegjelenítse

MegadásaMegadása data context: adatforrás nevedata context: adatforrás neve data path: adatforrás forrás tulajdonságadata path: adatforrás forrás tulajdonsága property: vezérlő elem cél tulajdonságaproperty: vezérlő elem cél tulajdonsága transformer: transzformáció az transformer: transzformáció az

adatforráson az adatkötés előtt (opcionális)adatforráson az adatkötés előtt (opcionális) binding direction: in / out / mindkettőbinding direction: in / out / mindkettő

2121

Komplex adatkötésKomplex adatkötés

Sys.Preview.Data névtér osztályaiSys.Preview.Data névtér osztályai DataSource, DataTable, DataView, …DataSource, DataTable, DataView, …

Sys.Preview.UI.Data névtér osztályaiSys.Preview.UI.Data névtér osztályai ListView, ItemView, …ListView, ItemView, …

Szerver oldali webszolgáltatás kétirányúSzerver oldali webszolgáltatás kétirányú Select, Insert, Update, DeleteSelect, Insert, Update, Delete

Saját osztály szintén lehet adatforrásSaját osztály szintén lehet adatforrás

Ezek együttes használata kliens oldali Ezek együttes használata kliens oldali adatkötéshez!adatkötéshez!

2222

Adatkötés - példaAdatkötés - példa<script type="text/xml-script">


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



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

2323

XML-Script, BCLXML-Script, BCL

2424

ValidációValidáció

ASP.NET AJAX saját validátoraiASP.NET AJAX saját validátorai

ASP.NET szerver oldali validátorokat ASP.NET szerver oldali validátorokat egészíti ki AJAX-ossáegészíti ki AJAX-ossá

Tisztán kliens oldali validációTisztán kliens oldali validáció a HTML elem által generált a HTML elem által generált changechange eseményre triggereleseményre triggerel

RTM verzióban NINCS BENNE!!!RTM verzióban NINCS BENNE!!! Patch-ként fog megjelenniPatch-ként fog megjelenni

2525

AutentikációAutentikáció Front-end az ASP.NET 2.0 Membership Front-end az ASP.NET 2.0 Membership

szolgáltatásáhozszolgáltatásához

AuthenticationService.asmx (beépített)AuthenticationService.asmx (beépített)

Engedélyezni kellEngedélyezni kell

Kliens oldalon Sys.Services.AuthenticationService Kliens oldalon Sys.Services.AuthenticationService osztályosztály

Metódusok: Metódusok: login, logout, isLoggedInlogin, logout, isLoggedIn

Tulajdonságok:Tulajdonságok: defaultLoginCompletedCallback, defaultFailedCallback, defaultLoginCompletedCallback, defaultFailedCallback,

isLoggedIn, timeout, …isLoggedIn, timeout, …

Web.config:

<authenticationService enabled="true" requireSSL=„true|false" />

Web.config:

<authenticationService enabled="true" requireSSL=„true|false" />

2626

ProfilProfil Front-end az ASP.NET 2.0 profil szolgáltatásáhozFront-end az ASP.NET 2.0 profil szolgáltatásához ProfileService.asmx (beépített)ProfileService.asmx (beépített) Engedélyezni kellEngedélyezni kell

Kliens oldalon Sys.Services.ProfileService osztályKliens oldalon Sys.Services.ProfileService osztály Metódusai:Metódusai:

save, loadsave, load

Tulajdonságai:Tulajdonságai: defaultLoadCompletedCallback, defaultSaveCompletedCallback, defaultLoadCompletedCallback, defaultSaveCompletedCallback,

defaultFailedCallback, properties (field), timeout, …defaultFailedCallback, properties (field), timeout, …

Profil tulajdonság eléréseProfil tulajdonság elérése Sys.Services.ProfileService.load( …, OnLoadCompleted, … );Sys.Services.ProfileService.load( …, OnLoadCompleted, … ); function OnLoadCompleted ()function OnLoadCompleted ()

{ Sys.Services.ProfileService.properties.PROPERTYNAME }{ Sys.Services.ProfileService.properties.PROPERTYNAME }

Web.config:

<profileService enabled="true" requireSSL=„true|false" />

Web.config:

<profileService enabled="true" requireSSL=„true|false" />

2727

PreviewGlitz.jsPreviewGlitz.js

UI effekt kiegészítés a BCL-hezUI effekt kiegészítés a BCL-hez Sys.Preview.UI.Effects névtérSys.Preview.UI.Effects névtér

Átlátszóság Átlátszóság OpacityBehavoir OpacityBehavoir

Méret és pozíció Méret és pozíció LayoutBehavior LayoutBehavior

Animáció Animáció Animation osztály és Animation osztály és leszármazottaileszármazottai PropertyAnimation, InterpolatedAnimation, PropertyAnimation, InterpolatedAnimation,

DiscreteAnimation, NumberAnimation, DiscreteAnimation, NumberAnimation, LengthAnimation, CompositeAnimation, LengthAnimation, CompositeAnimation, FadeAnimation, ColorAnimationFadeAnimation, ColorAnimation

_duration, _fps, _target, play(), …_duration, _fps, _target, play(), …

2828

Animáció…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>

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

2929

Animáció demóAnimáció demó

3030

VirtualEarthMapVirtualEarthMap

Korai béta fázisokban lévő vezérlőKorai béta fázisokban lévő vezérlő AtlasUIMap.js tartalmazza (v Beta2)AtlasUIMap.js tartalmazza (v Beta2) Microsoft Virtual Earth SDK burkoló osztály Microsoft Virtual Earth SDK burkoló osztály

AJAX-hozAJAX-hoz

Térkép beágyazása saját web oldalakbaTérkép beágyazása saját web oldalakba mozgatás, nagyítás, kicsinyítésmozgatás, nagyítás, kicsinyítés Adatkötés (pushpin-ek)Adatkötés (pushpin-ek)

Talán újra része lesz az AJAX Library-Talán újra része lesz az AJAX Library-nek…nek…

3131

ÖsszefoglalásÖsszefoglalás

Microsoft AJAX Library az ASP.NET Microsoft AJAX Library az ASP.NET AJAX kliens oldali részeAJAX kliens oldali része

Platform és böngésző függetlenPlatform és böngésző független

OOP és osztály kiegészítés a OOP és osztály kiegészítés a JavaScripthez JavaScripthez JavaScript framework JavaScript framework

Imperatív (JavaScript) és deklaratív Imperatív (JavaScript) és deklaratív (XML-Script) programozás(XML-Script) programozás

3232

További információkTovábbi információk Fejlesztői Portál: Fejlesztői Portál:

http://www.devportal.huhttp://www.devportal.hu WebfejlesztésWebfejlesztés témaközpont: témaközpont:

http://www.devportal.hu/Portal/Webdevelopment.aspxhttp://www.devportal.hu/Portal/Webdevelopment.aspx

ASP.NET 2.0 Induló Készlet:ASP.NET 2.0 Induló Készlet: http://www.devportal.hu/InduloKeszlethttp://www.devportal.hu/InduloKeszlet

MSDN .NET Developer CenterMSDN .NET Developer Center http://msdn.microsoft.com/netframework/http://msdn.microsoft.com/netframework/

MSDN MSDN ASP.NETASP.NET Developer Center Developer Center http://msdn.microsoft.comhttp://msdn.microsoft.com/aspnet/aspnet

Hivatalos ASP.NET honlapHivatalos ASP.NET honlap http://www.asp.nethttp://www.asp.net

Hivatalos ASP.NET AJAX honlapHivatalos ASP.NET AJAX honlap http://ajax.asp.nethttp://ajax.asp.net

Microsoft AJAX Library reference honlapMicrosoft AJAX Library reference honlap http://ajax.asp.net/docs/ClientReference/http://ajax.asp.net/docs/ClientReference/

3333

Kérdések és válaszokKérdések és válaszok

Értékelőlapok!Értékelőlapok!

3434

© 200© 20077 Microsoft Corporation. Microsoft Corporation. Minden jog fenntartva.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.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.

microsoft ajax library kliens oldali osztÃ¡lykÃ¶nyvtÃ¡r

Documents