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ę