Komunikacja w świecie Web ASP.NET JavaScript Silverlight
description
Transcript of Komunikacja w świecie Web ASP.NET JavaScript Silverlight
Komunikacja w świecie WebASP.NET JavaScript Silverlight
Jakub Binkowski
Jakub BinkowskiVisual C# MVPwebEFS sp.j.
Agenda
?
ASP.NET JavaScriptGET i POST
ProblemSortowanie playlisty
Jak przekazać do JavaScriptu listę filmów?
Jak zwrócić do serwera posortowaną listę?
HTTP
KLIENT SERWERGET /Default.aspx
POST /Default.aspx
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.
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"}
]}
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.
Serializacja JSON
Po stronie serwera (ASP.NET): JavaScriptSerializer
(Sys.Serialization)
Po stronie klienta (JavaScript): JavaScriptSerializer
(System.Web.Script.Serialization)
Demo 1Sortowanie playlisty
ASP.NET SilverlightDane początkowe
ProblemPrzekazanie listy odtwarzania do SL
Jak przekazać kontrolce Silverlight listę filmów do odtworzenia?
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.
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"];}
Serializacja JSON w Silverlight Klasa DataContractJsonSerializer
(namespace: System.Runtime.Serialization.Jsonassembly: System.ServiceModel.Web)
Dostęp do elementu HTML:HtmlPage.Document.GetElementById("elementID")
DemoPrzekazanie listy odtwarzania do SL
ASP.NET JavaScriptAJAX Web Services
ProblemKomentowanie oglądanego filmu
Jak dodać komentarz, nie przerywając oglądania filmu?
HTTP + AJAX
KLIENT SERWERGET /Default.aspx
POST /Default.aspx
AJAX: /Service.svc
…
XML / JSON
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
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...
}}
2) Konfiguracja ScriptManager<asp:ScriptManager runat="server"><Services> <asp:ServiceReference Path="~/CatalogService.asmx" /></Services></asp:ScriptManager>
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>
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)
Demo 2Komentowanie oglądanego filmu
JavaScript SilverlightSterowanie aplikacji Silverlight z poziomu JavaScriptu
ProblemSterowanie odtwarzaczem
Jak z poziomu JavaScriptsterować odtwarzaczem?
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);
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;
Metody
Właściwość:[ScriptableMember]public void Play(string url) {...}
Dostęp z JavaScript:get('silverlightControlHost').Content .mediaPlayer.Play("vid.wmv");
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);
Demo 3Sterowanie odtwarzaczem
ASP.NET SilverlightWeb Services
ProblemIlość odtworzeń
Chcę móc śledzić ilość odtworzeń filmów…
Współpraca
Po stronie serwera – usługa WCF
Po stronie klienta – proxy do usługi
Tylko wywołania asynchroniczne
Ograniczenia
Tylko basicHttpBinding
Odwołania tylko do domeny, z której pobraliśmy aplikację
Chyba że…
Demo 4Ilość odtworzeń
Silverlight JavaScriptOdwoływanie się do JavaScriptu z poziomu Silverlight
ProblemIlość odtworzeń cd.
Dostajemy aktualnąilość odtworzeń,
ale jak ją wyświetlić na stronie?
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
ScriptObject
GetProperty SetProperty
Invoke InvokeSelf
ConvertTo<T>
HtmlPage.Document
GetElementById QueryString Submit …
HtmlPage.Window
Alert, Confirm, Prompt Navigate …
Demo 5Ilość odtworzeń cd.
Ciekawostka:Polling duplexPowiadomienia on-line z serwera
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!
Tryb Push
KLIENT SERWERInformuj mnie o nowych wiadomościach
Bill: 640K ought to be enough for anybody
Steve: Developers! Developers!…
Close
Podsumowanie
Przekazywanie stanu przy GET i POST
Odwołania asynchroniczne
Współpraca po stronie klientaJavaScript Silverlight
Dziękuję za uwagę