Docstoc

Komunikacja w _wiecie Web - Jakub Binkowski - CodeGuru

Document Sample
Komunikacja w _wiecie Web - Jakub Binkowski - CodeGuru Powered By Docstoc
					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ę?
HTTP

       GET /Default.aspx
                            KLIENT   SERWER




       POST /Default.aspx
Przekazywanie danych
ASP.NET  JavaScript
1. 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 1
Sortowanie playlisty
ASP.NET  Silverlight
Dane początkowe
Problem
Przekazanie 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.Json
 assembly: System.ServiceModel.Web)

 Dostęp do elementu HTML:
 HtmlPage.Document.GetElementById("elementID")
Demo
Przekazanie listy odtwarzania do SL
ASP.NET  JavaScript
AJAX Web Services
Problem
Komentowanie oglądanego filmu




           Jak dodać komentarz,
     nie przerywając oglądania filmu?
HTTP + AJAX

KLIENT   GET /Default.aspx
                                  SERWER




         AJAX: /Service.svc

                     XML / JSON

                              …
         POST /Default.aspx
AJAX Web Services - działanie

 Działanie:
  1. Z poziomu JavaScript wywołujemy metodę
     WebService’u
  2. Otrzymujemy dane
  3. 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 2
Komentowanie oglądanego filmu
JavaScript  Silverlight
Sterowanie aplikacji Silverlight z poziomu JavaScriptu
Problem
Sterowanie odtwarzaczem




       Jak z poziomu JavaScript
       sterować 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 3
Sterowanie odtwarzaczem
ASP.NET  Silverlight
Web Services
Problem
Ilość 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 4
Ilość odtworzeń
Silverlight  JavaScript
Odwoływanie się do JavaScriptu z poziomu Silverlight
Problem
Ilość odtworzeń cd.



            Dostajemy aktualną
               ilość odtworzeń,
      ale jak ją wyświetlić na stronie?
HtmlPage

 HtmlPage.BrowserInformation
  Informacje o przeglądarce

 HtmlPage.Document
  Dostęp do dokumenty HTML (DOM)

 HtmlPage.Window                         ScriptObject
  Dostęp do okienka przeglądarki

 HtmlPage.Plugin
  Element, w którym osadzona jest kontrolka Silverlight.
ScriptObject

 GetProperty
 SetProperty

 Invoke
 InvokeSelf

 ConvertTo<T>
HtmlPage.Document

 GetElementById
 QueryString
 Submit
…
HtmlPage.Window

 Alert, Confirm, Prompt
 Navigate
…
Demo 5
Ilość odtworzeń cd.
Ciekawostka:
Polling duplex
Powiadomienia on-line z serwera
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!
Tryb Push

KLIENT                                                SERWER
         Informuj 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 klienta
  JavaScript  Silverlight
Dziękuję za uwagę

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:9
posted:6/17/2013
language:
pages:49