Komunikacja w świecie Web ASP.NET  JavaScript  Silverlight

1. Jakub Binkowski Komunikacja w świecie WebASP.NET JavaScriptSilverlight Jakub Binkowski Visual C# MVP webEFS sp.j.

2. Agenda ?

3. ASP.NET JavaScript GET i POST

4. ProblemSortowanie playlisty Jak przekazać do JavaScriptu listę filmów? Jak zwrócić do serwera posortowaną listę?

5. HTTP Klient Serwer GET /Default.aspx POST /Default.aspx

6. Przekazywanie danychASP.NET  JavaScript • Klient prosi o stronę. • Serwer generuje stronę.Dane serializujedo formatu JSON i umieszcza w ukrytym polu formularza. • Klient otrzymuje stronę. • Skrypt po załadowaniu strony deserializujedanedo postaci obiektowej.

7. JavaScriptObjectNotation(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"}]}

8. Zwracanie danych danychJavaScript  ASP.NET • Klient przed wysłaniem formularza serializuje dane do formatu JSON.Umieszcza je w ukrytym polu. • Formularz wysyłany jest na serwer. • Serwer deserializuje dane z formatu JSON do postaci obiektowej.

9. Serializacja JSON • Po stronie serwera (ASP.NET): • JavaScriptSerializer(Sys.Serialization) • Po stronie klienta (JavaScript): • JavaScriptSerializer(System.Web.Script.Serialization)

10. Demo 1Sortowanie playlisty

11. ASP.NET Silverlight Dane początkowe

12. ProblemPrzekazanie listy odtwarzania do SL Jak przekazać kontrolce Silverlight listę filmów do odtworzenia?

13. Schemat • Serwer serializuje dane do formatu JSON i umieszcza w ukryty polu formularza. • Kontrolka Silverlightotrzymuje w parametrach nazwę pola z danymi. • Silverlight odczytuje dane i je deserializuje do postaci obiektowej.

14. Parametry inicjalizacyjne • Umieszczane wewnątrz tagu <object>:<paramname="initParams"value="volume=1,url=video.vmv"/> • Odczyt w Silverlight w App.xaml:privatevoidApplication_Startup(objectsender, StartupEventArgs e){varurl = e.InitParams["url"];}

15. Serializacja JSON w Silverlight • Klasa DataContractJsonSerializer(namespace: System.Runtime.Serialization.Jsonassembly: System.ServiceModel.Web) • Dostęp do elementu HTML:HtmlPage.Document.GetElementById("elementID")

16. DemoPrzekazanie listy odtwarzania do SL

17. ASP.NET JavaScript AJAX Web Services

18. ProblemKomentowanie oglądanego filmu Jak dodać komentarz, nie przerywając oglądania filmu?

19. HTTP + AJAX Klient Serwer GET /Default.aspx AJAX: /Service.svc XML / JSON … POST /Default.aspx

20. AJAX Web Services - działanie • Działanie: • Z poziomu JavaScript wywołujemy metodę WebService’u • Otrzymujemy dane • 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

21. 1) WebService [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [ScriptService] publicclassCatalogService : System.Web.Services.WebService { [WebMethod] publicIList<Product> FindProducts(stringfilter) { //logika... } }

22. 2) Konfiguracja ScriptManager <asp:ScriptManagerrunat="server"> <Services> <asp:ServiceReferencePath="~/CatalogService.asmx"/> </Services> </asp:ScriptManager>

23. 3) JavaScript <scripttype="text/javascript"> Demo.CatalogService.FindProducts( 'blue', FindProducts_success, FindProducts_error); functionFindProducts_success(results) { //pokaż produkty } functionFindProducts_error(error) { //poinformuj o błędzie } </script>

24. PageMethods • Metoda WebService’u zawarta w stronie:[WebMethod]publicstaticstring[] GetComments(){returnDataRepository.GetComments();} • Konfiguracja ScriptManagera:EnablePageMethods="true" • Odwołanie z JavaScript:PageMethods.GetComments(GetComments_Success, GetComments_Error)

25. Demo 2Komentowanie oglądanego filmu

26. JavaScriptSilverlight Sterowanie aplikacji Silverlight z poziomu JavaScriptu

27. ProblemSterowanie odtwarzaczem Jak z poziomu JavaScript sterować odtwarzaczem?

28. 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);

29. Właściwości • Właściwość:[ScriptableMember]publicdoubleVolume { get; set;} • Dostęp z JavaScript:varvolume = get('silverlightControlHost').Content .mediaPlayer.Volume;get('silverlightControlHost').Content .mediaPlayer.Volume = volume + 0.1;

30. Metody • Właściwość:[ScriptableMember]publicvoid Play(stringurl) {...} • Dostęp z JavaScript:get('silverlightControlHost').Content .mediaPlayer.Play("vid.wmv");

31. Zdarzenia • Zdarzenie:[ScriptableMember]publiceventEventHandlerMediaChanged;(tylko EventHandler i EventHandler<T>) • Podłączanie się:$get('silverlightControlHost').Content .mediaPlayer.MediaChanged = playerMediaChanged;$get('silverlightControlHost').Content.mediaPlayer.addEventListener('MediaChanged', playerMediaChanged);

32. Demo 3Sterowanie odtwarzaczem

33. ASP.NET Silverlight Web Services

34. ProblemIlość odtworzeń Chcę móc śledzić ilość odtworzeń filmów…

35. Współpraca • Po stronie serwera – usługa WCF • Po stronie klienta – proxy do usługi • Tylko wywołania asynchroniczne

36. Ograniczenia • Tylko basicHttpBinding • Odwołania tylko do domeny, z której pobraliśmy aplikację • Chyba że…

37. Demo 4Ilość odtworzeń

38. Silverlight JavaScript Odwoływanie się do JavaScriptu z poziomu Silverlight

39. ProblemIlość odtworzeń cd. Dostajemy aktualną ilość odtworzeń, ale jak ją wyświetlić na stronie?

40. HtmlPage • HtmlPage.BrowserInformationInformacje 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

41. ScriptObject • GetProperty • SetProperty • Invoke • InvokeSelf • ConvertTo<T>

42. HtmlPage.Document • GetElementById • QueryString • Submit • …

43. HtmlPage.Window • Alert, Confirm, Prompt • Navigate • …

44. Demo 5Ilość odtworzeń cd.

45. Ciekawostka:Polling duplex Powiadomienia on-line z serwera

46. Tryb Pull Klient Serwer Czy 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!

47. Tryb Push Klient Serwer Informuj mnie o nowych wiadomościach Bill: 640K ought to be enough for anybody Steve: Developers! Developers!… Close

48. Podsumowanie • Przekazywanie stanu przy GET i POST • Odwołania asynchroniczne • Współpraca po stronie klientaJavaScript Silverlight

49. Dziękuję za uwagę