Upload
sampetruda
View
516
Download
1
Embed Size (px)
DESCRIPTION
Citation preview
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
ArchitektúraArchitektúra
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
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
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
AJAX JavaScriptAJAX JavaScript
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
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
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
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
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>
<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>
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>
<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>
<timer id="theTimer" interval="2000" enabled="true">
<tick>
<invokeMethodAction target="timeServiceMethod„
method="invoke">
<parameters userContext="" />
</invokeMethodAction>
</tick>
</timer>
<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>
<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>
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">
<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>
<script type="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>
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.