komunikacja w świecie web asp.net javascript silverlight
DESCRIPTION
Jakub Binkowski. Komunikacja w świecie Web ASP.NET JavaScript Silverlight. Jakub Binkowski Visual C# MVP webEFS sp.j. Agenda. ?. ASP.NET JavaScript. GET i POST. Problem Sortowanie playlisty. Jak przekazać do JavaScriptu listę filmów? Jak zwrócić do serwera posortowaną listę?. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/1.jpg)
Komunikacja w świecie WebASP.NET JavaScript Silverlight
Jakub Binkowski
Jakub BinkowskiVisual C# MVPwebEFS sp.j.
![Page 2: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/2.jpg)
Agenda
?
![Page 3: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/3.jpg)
ASP.NET JavaScriptGET i POST
![Page 4: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/4.jpg)
ProblemSortowanie playlisty
Jak przekazać do JavaScriptu listę filmów?
Jak zwrócić do serwera posortowaną listę?
![Page 5: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/5.jpg)
HTTP
KLIENT SERWERGET /Default.aspx
POST /Default.aspx
![Page 6: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/6.jpg)
Przekazywanie danychASP.NET JavaScript1. Klient prosi o stronę.
2. Serwer generuje stronę.Dane serializuje do formatu JSON i umieszcza w ukrytym polu formularza.
3. Klient otrzymuje stronę.
4. Skrypt po załadowaniu strony deserializuje dane do postaci obiektowej.
![Page 7: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/7.jpg)
JavaScript Object Notation(JSON) Tekst:"Ala ma kota"
Tablica:[1,2,3,4]
Obiekt złożony:{fullname: "Jan Kowalski", age: 15, pets: [
{species: "dog", name: "Klops"},{species: "goldfish", name: "Ryba"}
]}
![Page 8: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/8.jpg)
Zwracanie danych danych JavaScript ASP.NET
1. Klient przed wysłaniem formularza serializuje dane do formatu JSON.Umieszcza je w ukrytym polu.
2. Formularz wysyłany jest na serwer.
3. Serwer deserializuje dane z formatu JSON do postaci obiektowej.
![Page 9: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/9.jpg)
Serializacja JSON
Po stronie serwera (ASP.NET): JavaScriptSerializer
(Sys.Serialization)
Po stronie klienta (JavaScript): JavaScriptSerializer
(System.Web.Script.Serialization)
![Page 10: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/10.jpg)
Demo 1Sortowanie playlisty
![Page 11: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/11.jpg)
ASP.NET SilverlightDane początkowe
![Page 12: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/12.jpg)
ProblemPrzekazanie listy odtwarzania do SL
Jak przekazać kontrolce Silverlight listę filmów do odtworzenia?
![Page 13: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/13.jpg)
Schemat
1. Serwer serializuje dane do formatu JSON i umieszcza w ukryty polu formularza.
2. Kontrolka Silverlight otrzymuje w parametrach nazwę pola z danymi.
3. Silverlight odczytuje dane i je deserializuje do postaci obiektowej.
![Page 14: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/14.jpg)
Parametry inicjalizacyjne Umieszczane wewnątrz tagu
<object>:<param name="initParams" value="volume=1,url=video.vmv" />
Odczyt w Silverlight w App.xaml:private void Application_Startup( object sender, StartupEventArgs e){ var url = e.InitParams["url"];}
![Page 15: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/15.jpg)
Serializacja JSON w Silverlight Klasa DataContractJsonSerializer
(namespace: System.Runtime.Serialization.Jsonassembly: System.ServiceModel.Web)
Dostęp do elementu HTML:HtmlPage.Document.GetElementById("elementID")
![Page 16: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/16.jpg)
DemoPrzekazanie listy odtwarzania do SL
![Page 17: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/17.jpg)
ASP.NET JavaScriptAJAX Web Services
![Page 18: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/18.jpg)
ProblemKomentowanie oglądanego filmu
Jak dodać komentarz, nie przerywając oglądania filmu?
![Page 19: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/19.jpg)
HTTP + AJAX
KLIENT SERWERGET /Default.aspx
POST /Default.aspx
AJAX: /Service.svc
…
XML / JSON
![Page 20: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/20.jpg)
AJAX Web Services - działanie Działanie:
1. Z poziomu JavaScript wywołujemy metodę WebService’u
2. Otrzymujemy dane3. Wyświetlamy dane na stronie
Posługujemy się obiektami (przesyłane jako XML lub JSON)
Z kodu JavaScript sprowadza się do wywołania zwykłej metody
![Page 21: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/21.jpg)
1) WebService[WebService(Namespace = "http://tempuri.org/")][WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)][ScriptService]public class CatalogService : System.Web.Services.WebService{ [WebMethod] public IList<Product> FindProducts(string filter) { //logika...
}}
![Page 22: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/22.jpg)
2) Konfiguracja ScriptManager<asp:ScriptManager runat="server"><Services> <asp:ServiceReference Path="~/CatalogService.asmx" /></Services></asp:ScriptManager>
![Page 23: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/23.jpg)
3) JavaScript<script type="text/javascript"> Demo.CatalogService.FindProducts( 'blue', FindProducts_success, FindProducts_error); function FindProducts_success(results) { //pokaż produkty } function FindProducts_error(error) { //poinformuj o błędzie }</script>
![Page 24: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/24.jpg)
PageMethods
Metoda WebService’u zawarta w stronie:[WebMethod]public static string[] GetComments(){ return DataRepository.GetComments();}
Konfiguracja ScriptManagera:EnablePageMethods="true"
Odwołanie z JavaScript:PageMethods.GetComments( GetComments_Success, GetComments_Error)
![Page 25: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/25.jpg)
Demo 2Komentowanie oglądanego filmu
![Page 26: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/26.jpg)
JavaScript SilverlightSterowanie aplikacji Silverlight z poziomu JavaScriptu
![Page 27: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/27.jpg)
ProblemSterowanie odtwarzaczem
Jak z poziomu JavaScriptsterować odtwarzaczem?
![Page 28: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/28.jpg)
Udostępnianie dla JavaScript Silverlight może udostępnić
następujące elementy klasy: właściwości metody Zdarzenia
Udostępnianie obiektu:HtmlPage.RegisterScriptableObject( "mediaPlayer", this);
![Page 29: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/29.jpg)
Właściwości
Właściwość:[ScriptableMember]public double Volume { get; set;}
Dostęp z JavaScript:var volume = get('silverlightControlHost').Content
.mediaPlayer.Volume;
get('silverlightControlHost').Content .mediaPlayer.Volume = volume + 0.1;
![Page 30: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/30.jpg)
Metody
Właściwość:[ScriptableMember]public void Play(string url) {...}
Dostęp z JavaScript:get('silverlightControlHost').Content .mediaPlayer.Play("vid.wmv");
![Page 31: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/31.jpg)
Zdarzenia
Zdarzenie:[ScriptableMember]public event EventHandler MediaChanged;
(tylko EventHandler i EventHandler<T>) Podłączanie się:
$get('silverlightControlHost').Content .mediaPlayer.MediaChanged = playerMediaChanged; $get('silverlightControlHost').Content.mediaPlayer.addEventListener('MediaChanged', playerMediaChanged);
![Page 32: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/32.jpg)
Demo 3Sterowanie odtwarzaczem
![Page 33: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/33.jpg)
ASP.NET SilverlightWeb Services
![Page 34: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/34.jpg)
ProblemIlość odtworzeń
Chcę móc śledzić ilość odtworzeń filmów…
![Page 35: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/35.jpg)
Współpraca
Po stronie serwera – usługa WCF
Po stronie klienta – proxy do usługi
Tylko wywołania asynchroniczne
![Page 36: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/36.jpg)
Ograniczenia
Tylko basicHttpBinding
Odwołania tylko do domeny, z której pobraliśmy aplikację
Chyba że…
![Page 37: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/37.jpg)
Demo 4Ilość odtworzeń
![Page 38: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/38.jpg)
Silverlight JavaScriptOdwoływanie się do JavaScriptu z poziomu Silverlight
![Page 39: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/39.jpg)
ProblemIlość odtworzeń cd.
Dostajemy aktualnąilość odtworzeń,
ale jak ją wyświetlić na stronie?
![Page 40: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/40.jpg)
HtmlPage HtmlPage.BrowserInformation
Informacje o przeglądarce
HtmlPage.DocumentDostęp do dokumenty HTML (DOM)
HtmlPage.WindowDostęp do okienka przeglądarki
HtmlPage.PluginElement, w którym osadzona jest kontrolka Silverlight.
ScriptObject
![Page 41: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/41.jpg)
ScriptObject
GetProperty SetProperty
Invoke InvokeSelf
ConvertTo<T>
![Page 42: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/42.jpg)
HtmlPage.Document
GetElementById QueryString Submit …
![Page 43: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/43.jpg)
HtmlPage.Window
Alert, Confirm, Prompt Navigate …
![Page 44: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/44.jpg)
Demo 5Ilość odtworzeń cd.
![Page 45: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/45.jpg)
Ciekawostka:Polling duplexPowiadomienia on-line z serwera
![Page 46: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/46.jpg)
Tryb Pull
KLIENT SERWERCzy ktoś coś napisał?
Nie
Czy ktoś coś napisał?
Nie
Czy ktoś coś napisał?
JK: Nigdy nas nie przekonają, że białe jest białe, a czarne jest czarne!
![Page 47: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/47.jpg)
Tryb Push
KLIENT SERWERInformuj mnie o nowych wiadomościach
Bill: 640K ought to be enough for anybody
Steve: Developers! Developers!…
Close
![Page 48: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/48.jpg)
Podsumowanie
Przekazywanie stanu przy GET i POST
Odwołania asynchroniczne
Współpraca po stronie klientaJavaScript Silverlight
![Page 49: Komunikacja w świecie Web ASP.NET JavaScript Silverlight](https://reader036.vdocuments.net/reader036/viewer/2022062816/568156cb550346895dc45f58/html5/thumbnails/49.jpg)
Dziękuję za uwagę