Your SlideShare is downloading. ×
0
Microsoft AJAX Library kliens oldali osztálykönyvtár
Microsoft AJAX Library kliens oldali osztálykönyvtár
Microsoft AJAX Library kliens oldali osztálykönyvtár
Microsoft AJAX Library kliens oldali osztálykönyvtár
Microsoft AJAX Library kliens oldali osztálykönyvtár
Microsoft AJAX Library kliens oldali osztálykönyvtár
Microsoft AJAX Library kliens oldali osztálykönyvtár
Microsoft AJAX Library kliens oldali osztálykönyvtár
Microsoft AJAX Library kliens oldali osztálykönyvtár
Microsoft AJAX Library kliens oldali osztálykönyvtár
Microsoft AJAX Library kliens oldali osztálykönyvtár
Microsoft AJAX Library kliens oldali osztálykönyvtár
Microsoft AJAX Library kliens oldali osztálykönyvtár
Microsoft AJAX Library kliens oldali osztálykönyvtár
Microsoft AJAX Library kliens oldali osztálykönyvtár
Microsoft AJAX Library kliens oldali osztálykönyvtár
Microsoft AJAX Library kliens oldali osztálykönyvtár
Microsoft AJAX Library kliens oldali osztálykönyvtár
Microsoft AJAX Library kliens oldali osztálykönyvtár
Microsoft AJAX Library kliens oldali osztálykönyvtár
Microsoft AJAX Library kliens oldali osztálykönyvtár
Microsoft AJAX Library kliens oldali osztálykönyvtár
Microsoft AJAX Library kliens oldali osztálykönyvtár
Microsoft AJAX Library kliens oldali osztálykönyvtár
Microsoft AJAX Library kliens oldali osztálykönyvtár
Microsoft AJAX Library kliens oldali osztálykönyvtár
Microsoft AJAX Library kliens oldali osztálykönyvtár
Microsoft AJAX Library kliens oldali osztálykönyvtár
Microsoft AJAX Library kliens oldali osztálykönyvtár
Microsoft AJAX Library kliens oldali osztálykönyvtár
Microsoft AJAX Library kliens oldali osztálykönyvtár
Microsoft AJAX Library kliens oldali osztálykönyvtár
Microsoft AJAX Library kliens oldali osztálykönyvtár
Microsoft AJAX Library kliens oldali osztálykönyvtár
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

570

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
570
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • MSDN Konferencia: Windows Vista és .NET 3.0 fejlesztőknek 2006.11.30. Lurdy Ház
  • MSDN Konferencia: Windows Vista és .NET 3.0 fejlesztőknek 2006.11.30. Lurdy Ház
  • MSDN Konferencia: Windows Vista és .NET 3.0 fejlesztőknek 2006.11.30. Lurdy Ház
  • MSDN Konferencia: Windows Vista és .NET 3.0 fejlesztőknek 2006.11.30. Lurdy Ház
  • MSDN Konferencia: Windows Vista és .NET 3.0 fejlesztőknek 2006.11.30. Lurdy Ház
  • MSDN Konferencia: Windows Vista és .NET 3.0 fejlesztőknek 2006.11.30. Lurdy Ház
  • Transcript

    • 1. Kereskényi Róbert [email_address] 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 <ul><li>Architektúra </li></ul><ul><li>AJAX JavaScript </li></ul><ul><li>Kliens oldali alap AJAX osztálytípusok </li></ul><ul><li>Base Class Library (BCL) típusok </li></ul><ul><li>Authentication és Profile szolgáltatás </li></ul>
    • 3. Architektúra XHTML / CSS Server Scripts Microsoft A JAX Library Script Core Base Class Library Asynchronous Communications Browser Compatibility Browser s (IE, Firefox, Opera, Safari) XML-HTTP Stack XML-HTTP JSON Serializer Web Service Proxies
    • 4. Tartalom <ul><li>Architektúra </li></ul><ul><li>AJAX JavaScript </li></ul><ul><li>Kliens oldali alap AJAX osztálytípusok </li></ul><ul><li>Base Class Library (BCL) típusok </li></ul><ul><li>Authentication és Profile szolgáltatás </li></ul>
    • 5. JavaScript keretrendszer <ul><li>AJAX Library ≈ JavaScript keretrendszer </li></ul><ul><ul><li>Globális függvények ($functions) </li></ul></ul><ul><ul><li>JavaScript kiterjesztés </li></ul></ul><ul><ul><li>JavaScript típus rendszer </li></ul></ul><ul><ul><li>Alap osztályok, interfészek, … (Script Core) </li></ul></ul><ul><ul><li>További osztályok, interfészek, … (BCL) </li></ul></ul><ul><li>Használhatóvá teszi a JavaScript-et </li></ul><ul><ul><li>OOP jelleg </li></ul></ul><ul><ul><li>Könnyebb, produktívabb, használhatóbb </li></ul></ul>
    • 6. AJAX JavaScript <ul><li>Globális függvények </li></ul><ul><ul><li>$create, $find, $get, $addHandler, $removeHandler </li></ul></ul><ul><li>Típus kiegészítések </li></ul><ul><ul><li>Array – add, contains, insert, remove, … </li></ul></ul><ul><ul><li>Boolean – parse </li></ul></ul><ul><ul><li>Error – argumentOutOfRange, invalidOperations, … </li></ul></ul><ul><ul><li>Number – parse </li></ul></ul><ul><ul><li>Object – getType, getTypeName </li></ul></ul><ul><ul><li>String – format, endsWith, startWith, trim, … </li></ul></ul><ul><li>http ://ajax.asp.net/docs/ClientReference/ </li></ul>
    • 7. AJAX – OOP JavaScript <ul><li>JavaScript </li></ul><ul><ul><li>Objektum alapú </li></ul></ul><ul><ul><li>NEM objektum orientált </li></ul></ul><ul><li>Microsoft AJAX Library objektum orientált programozást biztosít </li></ul><ul><ul><li>Névtér, osztály, interfész, öröklés, enum </li></ul></ul><ul><li>Kulcs: </li></ul><ul><ul><li>JavaScript ”prototype” a kulcs </li></ul></ul><ul><ul><li>és persze az AJAX JavaScript </li></ul></ul>
    • 8. Példa – OOP JavaScript Type.RegisterNameSpace( &amp;quot;MyNameSapce&amp;quot; ); MyNameSapce.Person = function ( name ) { MyNameSapce.Person.initializeBase( this ); this ._name = name; } MyNameSapce.Person.prototype = { get_name: function () { return this ._name; } } MyNameSapce.Person.registerClass( &apos;MyNameSapce.Person&apos; );
    • 9. Tartalom <ul><li>Architektúra </li></ul><ul><li>AJAX JavaScript </li></ul><ul><li>Kliens oldali alap AJAX osztálytípusok </li></ul><ul><li>Base Class Library (BCL) típusok </li></ul><ul><li>Authentication és Profile szolgáltatás </li></ul>
    • 10. Script Core Library Sys Sys.Net Sys.Services Sys. Serialization Sys.UI Application StringBuilder Debug Component stb… EventArgs WebRequest -Executor WebRequest- Manager XML-HTTP- Executor WebRequest WebServiceError WebMethod ProfileService Authentication- Service ProfileGroup JavaScript- Serializer DOMElement Behavoir DOMEvent Control Timer stb… stb…
    • 11. Application és Debug osztály <ul><li>Application </li></ul><ul><ul><li>magát az alkalmazást reprezentálja </li></ul></ul><ul><ul><li>globálisan elérhető </li></ul></ul><ul><ul><li>load, unload események </li></ul></ul><ul><ul><ul><li>pageLoad, pageUnload automatikusan hívódik, ha jelen van </li></ul></ul></ul><ul><li>Debug </li></ul><ul><ul><li>beépített, kliens oldali debug lehetőség </li></ul></ul><ul><ul><li>assert, fail </li></ul></ul><ul><ul><li>globálisan elérhető </li></ul></ul><ul><ul><ul><li>windows.debug = new Sys.Debug(); </li></ul></ul></ul>
    • 12. Tartalom <ul><li>Architektúra </li></ul><ul><li>AJAX JavaScript </li></ul><ul><li>Kliens oldali alap AJAX osztálytípusok </li></ul><ul><li>Base Class Library (BCL) típusok </li></ul><ul><li>Authentication és Profile szolgáltatás </li></ul>
    • 13. Base Class Library típusok Sys.Preview Sys.Preview.UI Sys.Preview.Data Sys.Preview.UI.Data BindingBase Action Binding InvokeMethod- Action Timer SetProperty- Action Counter … Validator Label AutoComplete- Behavior Button TextBox CheckBox Selector … DataColumn DataTable DataRow DataView DataSource DataFilter … DataControl ItemView DataNavigator ListView … XSLTView
    • 14. JavaScript vs XML-Script <ul><li>Kliens oldalon fogalmazhatunk </li></ul><ul><ul><li>programkóddal: JavaScript </li></ul></ul><ul><ul><li>deklaratívan: XML-Script </li></ul></ul><ul><li>Egyenértékűek </li></ul><ul><li>Kontroll függő, hogy mikor melyiket egyszerűbb használni (pl. adatkötés) </li></ul><ul><li>Deklaratív módot támogatni fogják a tervezőeszközök  VS „Orcas” </li></ul>
    • 15. Timer - JavaScript &lt;script type= &amp;quot; text/javascript &amp;quot; &gt; 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ó?” ); } &lt;/script&gt;
    • 16. Timer – XML-Script &lt;script type= &amp;quot; text/javascript &amp;quot; &gt; function onTick() { window.alert( ’Nem zavaró?’ ); } &lt;/script&gt; &lt; script type = &amp;quot;text/xml-script&amp;quot; &gt; &lt;page xmlns:script= &amp;quot; http://schemas.microsoft.com/xml-script/2005 &amp;quot; &gt; &lt;components&gt; &lt;timer enabled = &amp;quot; true &amp;quot; interval = &amp;quot; 1000 &amp;quot; tick = &amp;quot; onTick &amp;quot; /&gt; &lt;/components&gt; &lt;/page&gt; &lt;/ script &gt;
    • 17. Viselkedések (behaviors) <ul><li>Viselkedést reprezentáló osztályok </li></ul><ul><li>Alap osztály: Sys.UI.Behavior </li></ul><ul><li>Leszármazott osztályok </li></ul><ul><ul><li>ClickBehavior </li></ul></ul><ul><ul><li>PopupBehavior </li></ul></ul><ul><ul><li>HoverBehavior </li></ul></ul><ul><ul><li>AutoCompleteBehavior </li></ul></ul><ul><ul><li>OpacityBehavior </li></ul></ul><ul><ul><li>LayoutBehavior </li></ul></ul><ul><ul><li>FloatingBehavior </li></ul></ul>
    • 18. Akciók (actions) <ul><li>Objektumon értelmezett akciókat reprezentáló osztályok </li></ul><ul><li>System.Preview.Action osztályból származik – közös ősosztály </li></ul><ul><li>Leszármazott osztályok: </li></ul><ul><ul><li>InvokeMethodAction </li></ul></ul><ul><ul><li>SetPropertyAction </li></ul></ul><ul><ul><li>PostBackAction </li></ul></ul>
    • 19. Példa - InvokeMethodAction &lt; script type =&amp;quot;text/xml-script&amp;quot; &gt; &lt;page xmlns =&amp;quot;http://schemas.microsoft.com/xml-script/2005&amp;quot; &gt; &lt;components&gt; &lt;label id= &amp;quot;lblTime&amp;quot; /&gt; &lt;timer id= &amp;quot;theTimer&amp;quot; interval= &amp;quot;2000&amp;quot; enabled= &amp;quot;true&amp;quot; &gt; &lt;tick&gt; &lt;invokeMethodAction target= &amp;quot;timeServiceMethod&amp;quot; method= &amp;quot;invoke&amp;quot; &gt; &lt;parameters userContext= &amp;quot;&amp;quot; /&gt; &lt;/invokeMethodAction&gt; &lt;/tick&gt; &lt;/timer&gt; &lt;serviceMethodRequest id= &amp;quot;timeServiceMethod&amp;quot; url= &amp;quot;DateTimeService.asmx&amp;quot; methodName= &amp;quot;GetTimeAsString&amp;quot; &gt; &lt;completed&gt; &lt;setPropertyAction target= &amp;quot;DateTime&amp;quot; property= &amp;quot;text&amp;quot; &gt; &lt;bindings&gt; &lt;binding dataContext= &amp;quot;timeServiceMethod&amp;quot; dataPath= &amp;quot;result&amp;quot; property= &amp;quot;value&amp;quot; /&gt; &lt;/bindings&gt; &lt;/setPropertyAction&gt; &lt;/completed&gt; &lt;/serviceMethodRequest&gt; &lt;/components&gt; &lt;/page&gt; &lt;/ script &gt; &lt;timer id= &amp;quot;theTimer&amp;quot; interval= &amp;quot;2000&amp;quot; enabled= &amp;quot;true&amp;quot; &gt; &lt;tick&gt; &lt;invokeMethodAction target= &amp;quot;timeServiceMethod„ method= &amp;quot;invoke&amp;quot; &gt; &lt;parameters userContext= &amp;quot;&amp;quot; /&gt; &lt;/invokeMethodAction&gt; &lt;/tick&gt; &lt;/timer&gt; &lt;serviceMethodRequest id= &amp;quot;timeServiceMethod&amp;quot; url= &amp;quot;DateTimeService.asmx&amp;quot; methodName= &amp;quot;GetTimeAsString&amp;quot; &gt; &lt;completed&gt; &lt;setPropertyAction target= &amp;quot;DateTime&amp;quot; property= &amp;quot;text&amp;quot; &gt; &lt;bindings&gt; &lt;binding dataContext= &amp;quot;timeServiceMethod„ dataPath= &amp;quot;result&amp;quot; property= &amp;quot;value&amp;quot; /&gt; &lt;/bindings&gt; &lt;/setPropertyAction&gt; &lt;/completed&gt; &lt;/serviceMethodRequest&gt;
    • 20. Adatkötés <ul><li>Adatot rendelni HTML elemhez hogy megjelenítse </li></ul><ul><li>Megadása </li></ul><ul><ul><li>data context: adatforrás neve </li></ul></ul><ul><ul><li>data path: adatforrás forrás tulajdonsága </li></ul></ul><ul><ul><li>property: vezérlő elem cél tulajdonsága </li></ul></ul><ul><ul><li>transformer: transzformáció az adatforráson az adatkötés előtt (opcionális) </li></ul></ul><ul><ul><li>binding direction: in / out / mindkettő </li></ul></ul>
    • 21. Komplex adatkötés <ul><li>Sys.Preview.Data névtér osztályai </li></ul><ul><ul><li>DataSource, DataTable, DataView, … </li></ul></ul><ul><li>Sys.Preview.UI.Data névtér osztályai </li></ul><ul><ul><li>ListView, ItemView, … </li></ul></ul><ul><li>Szerver oldali webszolgáltatás kétirányú </li></ul><ul><ul><li>Select, Insert, Update, Delete </li></ul></ul><ul><li>Saját osztály szintén lehet adatforrás </li></ul><ul><li>Ezek együttes használata kliens oldali adatkötéshez! </li></ul>
    • 22. Adatkötés - példa &lt; script type =&amp;quot;text/xml-script&amp;quot; &gt; &lt;page xmlns =&amp;quot;http://schemas.microsoft.com/xml-script/2005&amp;quot; &gt; &lt;components&gt; &lt;textBox id= &amp;quot;TextBox1&amp;quot; /&gt; &lt;label id= &amp;quot;Label1&amp;quot; &gt; &lt;bindings&gt; &lt;binding dataContext= &amp;quot;TextBox1&amp;quot; dataPath= &amp;quot;text&amp;quot; property= &amp;quot;text&amp;quot; transform= &amp;quot;ToString&amp;quot; transformerArgument= &amp;quot;Text entered: {0}&amp;quot; /&gt; &lt;/bindings&gt; &lt;/label&gt; &lt;/components&gt; &lt;/page&gt; &lt;/ script &gt;
    • 23. XML-Script, BCL
    • 24. Validáció <ul><li>ASP.NET AJAX saját validátorai </li></ul><ul><li>ASP.NET szerver oldali validátorokat egészíti ki AJAX-ossá </li></ul><ul><li>Tisztán kliens oldali validáció  a HTML elem által generált change eseményre triggerel </li></ul><ul><li>RTM verzióban NINCS BENNE!!! </li></ul><ul><ul><li>Patch-ként fog megjelenni </li></ul></ul>
    • 25. Autentikáció <ul><li>Front-end az ASP.NET 2.0 Membership szolgáltatásához </li></ul><ul><li>AuthenticationService.asmx (beépített) </li></ul><ul><li>Engedélyezni kell </li></ul><ul><li>Kliens oldalon Sys.Services.AuthenticationService osztály </li></ul><ul><li>Metódusok: </li></ul><ul><ul><li>login, logout, isLoggedIn </li></ul></ul><ul><li>Tulajdonságok: </li></ul><ul><ul><li>defaultLoginCompletedCallback, defaultFailedCallback, isLoggedIn, timeout, … </li></ul></ul>Web.config: &lt;authenticationService enabled= &amp;quot;true&amp;quot; requireSSL= „true|false&amp;quot; /&gt;
    • 26. Profil <ul><li>Front-end az ASP.NET 2.0 profil szolgáltatásához </li></ul><ul><li>ProfileService.asmx (beépített) </li></ul><ul><li>Engedélyezni kell </li></ul><ul><li>Kliens oldalon Sys.Services.ProfileService osztály </li></ul><ul><li>Metódusai: </li></ul><ul><ul><li>save, load </li></ul></ul><ul><li>Tulajdonságai: </li></ul><ul><ul><li>defaultLoadCompletedCallback, defaultSaveCompletedCallback, defaultFailedCallback, properties (field), timeout, … </li></ul></ul><ul><li>Profil tulajdonság elérése </li></ul><ul><ul><li>Sys.Services.ProfileService.load( …, OnLoadCompleted, … ); </li></ul></ul><ul><ul><li>function OnLoadCompleted () { Sys.Services.ProfileService.properties.PROPERTYNAME } </li></ul></ul>Web.config: &lt;profileService enabled= &amp;quot;true&amp;quot; requireSSL= „true|false&amp;quot; /&gt;
    • 27. PreviewGlitz.js <ul><li>UI effekt kiegészítés a BCL-hez </li></ul><ul><ul><li>Sys.Preview.UI.Effects névtér </li></ul></ul><ul><li>Átlátszóság  OpacityBehavoir </li></ul><ul><li>Méret és pozíció  LayoutBehavior </li></ul><ul><li>Animáció  Animation osztály és leszármazottai </li></ul><ul><ul><li>PropertyAnimation, InterpolatedAnimation, DiscreteAnimation, NumberAnimation, LengthAnimation, CompositeAnimation, FadeAnimation, ColorAnimation </li></ul></ul><ul><li>_duration, _fps, _target, play(), … </li></ul>
    • 28. Animáció… &lt;script language =&amp;quot;javascript&amp;quot; type =&amp;quot;text/javascript&amp;quot; &gt; function pageLoad() { var ani = new Sys.Preview.UI.Effects.FadeAnimation(); ani.set_target($get(&amp;quot;image1&amp;quot;).control); ani.set_effect(Sys.Preview.UI.Effects.FadeEffect.FadeOut); ani.set_duration(3); ani.play(); } &lt;/script&gt; …… &lt;compositeAnimation id=&amp;quot;aniComp&amp;quot; duration=&amp;quot;3&amp;quot;&gt; &lt;animations&gt; &lt;lengthAnimation target=&amp;quot; imgLayout1 &amp;quot; property=&amp;quot; top &amp;quot; startValue=&amp;quot; 0 &amp;quot; endValue=&amp;quot; 300 &amp;quot; /&gt; &lt;lengthAnimation target=&amp;quot; imgLayout1 &amp;quot; property=&amp;quot; left &amp;quot; startValue=&amp;quot; 0 &amp;quot; endValue=&amp;quot; 600 &amp;quot; /&gt; &lt;/animations&gt; &lt;/compositeAnimation&gt;
    • 29. Animáció demó
    • 30. VirtualEarthMap <ul><li>Korai béta fázisokban lévő vezérlő </li></ul><ul><ul><li>AtlasUIMap.js tartalmazza (v Beta2) </li></ul></ul><ul><ul><li>Microsoft Virtual Earth SDK burkoló osztály AJAX-hoz </li></ul></ul><ul><li>Térkép beágyazása saját web oldalakba </li></ul><ul><ul><li>mozgatás, nagyítás, kicsinyítés </li></ul></ul><ul><ul><li>Adatkötés (pushpin-ek) </li></ul></ul><ul><li>Talán újra része lesz az AJAX Library-nek… </li></ul>
    • 31. Összefoglalás <ul><li>Microsoft AJAX Library az ASP.NET AJAX kliens oldali része </li></ul><ul><li>Platform és böngésző független </li></ul><ul><li>OOP és osztály kiegészítés a JavaScripthez  JavaScript framework </li></ul><ul><li>Imperatív (JavaScript) és deklaratív (XML-Script) programozás </li></ul>
    • 32. További információk <ul><li>Fejlesztői Portál: </li></ul><ul><ul><li>http://www.devportal.hu </li></ul></ul><ul><ul><li>Webfejlesztés témaközpont: </li></ul></ul><ul><ul><ul><li>http://www.devportal.hu/Portal/Webdevelopment.aspx </li></ul></ul></ul><ul><ul><li>ASP.NET 2.0 Induló Készlet: </li></ul></ul><ul><ul><ul><li>http ://www.devportal.hu/InduloKeszlet </li></ul></ul></ul><ul><li>MSDN .NET Developer Center </li></ul><ul><ul><li>http:// msdn.microsoft.com/netframework/ </li></ul></ul><ul><li>MSDN ASP.NET Developer Center </li></ul><ul><ul><li>http://msdn.microsoft.com /aspnet </li></ul></ul><ul><li>Hivatalos ASP.NET honlap </li></ul><ul><ul><li>http://www.asp.net </li></ul></ul><ul><li>Hivatalos ASP.NET AJAX honlap </li></ul><ul><ul><li>http://ajax.asp.net </li></ul></ul><ul><li>Microsoft AJAX Library reference honlap </li></ul><ul><ul><li>http :// ajax.asp.net / docs / ClientReference / </li></ul></ul>
    • 33. Kérdések és válaszok Értékelőlapok!
    • 34. © 200 7 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.

    ×