Redazione
a- a+

Integrazione con Ajax

Silverlight: integrazione con ASP.NET Ajax

ASP.NET è stato rilasciato agli sviluppatori circa 8 anni fa ed è stato adottato largamente nell'industria ed ha avuto molto tempo per diventare un prodotto molto stabile. Di fatto esiste una pletora di applicazioni in ASP.NET nel Web che beneficerebbero l'aggiornamento a Silverlight. Ad ogni modo tenete in mente che ASP.NET viene processato lato server. ASP.NET Ajax viene anch'esso processato lato server attraverso il ciclo degli eventi nelle pagine ASP.NET sebbene attraverso Ajax il carico maggiore della processazione viene spostato lato client.

Un'applicazione Silverlight viene ospitata su un web server in modo tale che un utente possa eseguirla via Web. Ad ogni modo, una volta effettuata la richiesta di tale applicazione, tutti i contenuti delle applicazioni vengono scaricati sulla macchina dell'utente e lì processati. Una volta in esecuzione, l'applicazione può effettuare delle chiamate al server o al Web service ma di default non è necessaria alcuna comunicazione con il server: l'applicazione viene eseguita in un ambiente isolato e indipendente.

Ci sono ad ogni modo dei casi in cui sarebbe bene unire la parte client e la parte server: ad esempio un'applicazione Silverlight che deve continuamente esser aggiornata dai contenuti lato server. Tuttavia riconcepire completamente un'applicazione web attorno ad una nuova tecnologia richiede molto tempo e fatica, anche se molte applicazioni in ASP.NET e ASP.NET AJAX attualmente sviluppate e stabili potrebbero beneficiare molto dall'intergrazione con la tecnologia silverlight senza esser ridisegnate da capo.

Le estensioni ASP.NET Futures includono nuove potenzialità e funzionalità che vengono considerate l'integrazione fra ASP.NET, ASP.NET AJAX e Silverlight e sono state rese disponibili agli sviluppatori per incominciare a sperimentarle. I componenti realizzati in ASP.NET Futures sono generalmente stabili e inclusi nelle release successive di ASP.NET, ASP.NET AJAX e Silverlight.

Il controllo asp:Xaml

Il framework Silverlight fornisce una classe generica per lavorare con XAML, ossia Sys.Preview.UI.Xaml.Control. Il controllo asp:Xaml viene usato per inserire XAML all'interno di una pagina ASP.NET AJAX in una modalità generica. Tale controllo viene tipicamente esteso attraverso Javascript, codice managed o dinamico per fornire un'implementazione specializzata del controllo. L'attributo più comunemente utilizzato dal controllo asp:Xaml è XamlUrl. Tale attributo identifica il file XAML da includere nella pagina. Il controllo asp:Xaml espone solamente tre eventi minimali con uno di quelli scatenati da un errore riguardanti il caricamento del file XAML.

Come esempio di inclusione di XAML in una pagina ASP.NET AJAX usando il controllo asp:Xaml, mostriamo il seguente codice.

Es 1: Default.aspx

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
    <%@ Register assembly="Microsoft.Web.Preview" namespace="Microsoft.Web.Preview.UI.Controls" tagprefix="asp" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
      <title>My Simple XAML Example</title>
  </head>
  <body>
      <form id="form1" runat="server">
      <asp:ScriptManager ID="ScriptManager1" runat="server">
      </asp:ScriptManager>
      <div>
            </div>
      <asp:Xaml ID="Xaml1" runat="server" Height="300px" Width="300px"         
                 XamlUrl="~/Scene.xaml" />
      </form>
  </body>
  </html>

 

<a href="/img/11/iframe_ajaxInt1.html" title= "Vedi esempio">Vedi esempio</a>;

 


Il controllo asp:Media

Il controllo asp:Media viene incluso nella release di ASP.NET Futures e viene usato per integrare facilmente audio e video in unìapplicazione ASP.NET o ASP.NET AJAX. Tale controllo è stato sviluppato per integrare audio e video in Silverlight. I benefici nel suo utilizzo riguardano la possibilità di integrare audio e video silverlight senza che lo sviluppatore debba conoscere XAML o javascript. Il controllo The asp:Media permette una veloce integrazione di silverlight nelle applicazioni ASP.NET o ASP.NET AJAX dando l'opportunità allo sviluppatore di adeguarsi alle nuove tecnologie.

Silverlight supporta i formati Windows Video (WMV), Windows Media Audio (WMA) e MP3.


Proprietà, eventi e metodi

Il controllo asp:Media include un certo numero di proprietà e metodi, ereditando tutte le proprietà, gli eventi e i metodi inclusi in System.Web.UI.Controls.WebControl.XamlControl.

Le proprietà più comunemente usate da tale controllo sono MediaUrl e MediaSkin. Come suggeriscono i loro nomi, la proprietà MediaUrl viene usata per identificare l'URL del file multimediale che deve essere riprodotto dal controllo asp:Media, mentre la proprietà MediaSkin viene usata per identificare la skin che il controllo dovrebbe mostrare mentre riproduce i file multimediali. Il controllo asp:Media supporta svariate skin predefinite che possono essere facilmente selezionate e personalizzate.

Il controllo asp:Media supporta anche un buon numero di eventi predefiniti, fra i quali onClientMediaOpened e onClientChapterStarted.

Questo controllo è facilmente usabile. Una volta installate le estensioni ASP.NET Futures, il controllo asp:Media può essere aggiunto alle pagine ASP.NET dichiarativamente o tramite drag & drop del controllo dalla Toolbox. Tramite un semplice drag & drop del controllo sulla nuova pagina ASP.NET e assegnando un valore valido alla proprietà MediaUrl, la pagina è abilitata alla riproduzione multimediale. Comunque i controlli ASP.NET Futures così come il controllo asp:Media, richiedono l'uso di una libreria ASP.NET AJAX, quindi ogni pagina che utilizza il controllo asp:Media deve avere anche un controllo asp:ScriptManager. Il codice sottostante è il risultato di un drag & drop del controllo asp:Media su una nuova pagina ASP.NET e in cui è stato assegnato un valore alla proprietà MediaUrl.

Es 2: Default.aspx

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
    <%@ Register Assembly="Microsoft.Web.Preview" 
                 Namespace="Microsoft.Web.Preview.UI.Controls" TagPrefix="asp" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
      <title>My Cardinals Videos</title>
            <script type="text/JavaScript">
            function onChapterStarted(sender, chapterEventArgs) {
              var chapters = sender.get_chapters();
              var ci = chapterEventArgs.get_chapterIndex();
              var chapter = chapters[ci];
              Sys.Debug.trace("Chapter Info" + chapter.imageUrl + " " + chapter.title);
            }
            </script>
     </head>
  <body>
      <form id="form1" runat="server">
      <asp:ScriptManager ID="smCardinalVideos" runat="server">
      </asp:ScriptManager>
      <div>
        <asp:Media ID="myCardVideo" AutoPlay="true" runat="server"
                   Height="388px" MediaUrl="~/EMEOutput/SteveBreastonCardinalsPuntReturn.wmv"
                   Width="512px" XamlUrl="~/CustomProfessional.xaml" OnClientChapterStarted="onChapterStarted">
            <Chapters>
              <asp:MediaChapter Title="Start" TimeIndex="0.0" 
                   ImageUrl="~/EMEOutput/SteveBreastonCardinalsPuntReturn_MarkerThumb 00.00.00.jpg" />
              <asp:MediaChapter Title="Reception" TimeIndex="6.6253847" 
                   ImageUrl="~/EMEOutput/SteveBreastonCardinalsPuntReturn_MarkerThumb 00.00.06.6253847.jpg" />
              <asp:MediaChapter Title="Broken Tackle" TimeIndex="10.5280086" 
                   ImageUrl="~/EMEOutput/SteveBreastonCardinalsPuntReturn_MarkerThumb 00.00.10.5280086.jpg" />
              <asp:MediaChapter Title="End Zone" TimeIndex="13.1600108" 
                   ImageUrl="~/EMEOutput/SteveBreastonCardinalsPuntReturn_MarkerThumb 00.00.13.1600108.jpg" />
              <asp:MediaChapter Title="Replay" TimeIndex="17.3349108" 
                   ImageUrl="~/EMEOutput/SteveBreastonCardinalsPuntReturn_MarkerThumb 00.00.17.3349108.jpg" />
              <asp:MediaChapter Title="Celebration" TimeIndex="55.1768291" 
                   ImageUrl="~/EMEOutput/SteveBreastonCardinalsPuntReturn_MarkerThumb 00.00.55.1768291.jpg" />
              <asp:MediaChapter Title="End" TimeIndex="71.2455760" 
                   ImageUrl="~/EMEOutput/SteveBreastonCardinalsPuntReturn_MarkerThumb 00.01.11.2455760.jpg" />
            </Chapters>
        </asp:Media>
      </div>
      </form>
  </body>
  </html>

 

<a href="/img/11/iframe_ajaxInt2.html" title= "Vedi esempio">Vedi esempio</a>;

 

La stessa pagina mostrata nella vista Design mostra il media player Silverlight nella figura sottostante.

Design View
Fig 1: Design View, Visual Studio

Quando viene eseguita la pagina ASP.NET, viene riprodotto il file specificato nel controllo asp:Media come mostrato qui sotto.

Execution
Fig 2: Esecuzione dell'esempio

Capitoli

Ci riferiamo all'audio e video e alla loro combinazione con il termine generico di media. I media possono essere in vari formati, alcuni dei quali proprietari o formati industriali supportati da molti player. Tali media possono essere memorizzati in particolari formati quando vengono salvati dopo esser stati registrati oppure possono esser stati convertiti da un formato all'altro attraverso un tool di conversione.

Quando tali media vengono preparati per essere riprodotti in un particolare formati, si esegue il media encoding. Durante il processo di encoding, il flusso di bit dei dati multimediali può esser manipolato. Ad esempio, usando un media encoder, uno stream audio/video può esser riprodotto in un certo punto e poi se ne può inserire un altro. Gli studi televisivi compiono tali encoding per intrecciare stream in diretta e registrati mentre li trasmette agli utenti.

Microsoft ha rilasciato Expression Media Encoder (EME) nella Expression Suite. Attraverso EME, si possono definire marcatori, simili a bookmarks, nei flussi multimediali. Il controllo asp:Media rileva tali marcatori nello stream e può rispondere di conseguenza. Usando un player Silverlight, un utente può passare da un marcatore all'altro. Inoltre, gli eventi possono essere automaticamente scatenati quando si incontra un nuovo marcatore. Tali marcatori vengono generalmente definiti capitoli. Nell'immagine qui sotto possiamo vedere dei media importati in EME con dei marcatori definiti.

Player
Fig 3: Importazione di dati multimediali in Expression Media Encoder

Quando i dati sono preparati e codificati con EME, includendo i marcatori, appare l'output in Visual Studio come mostrato nella figura sottostante.

Explorer
Fig 4: Vista del progetto nel pannello Solution Explorer

Il controllo asp:Media include funzionalità per navigare nei marcatori definiti. Tale controllo include l'elemento figlio <Chapters> usato per definire i capitoli nei media codificati. L'elemento <Chapters> contiene una serie di elementi <asp:MediaChapter> che sono correlati a ciascun capitolo nel media. Ogni elemento <asp:MediaChapter> può avere tre attributi:

  • Title: quest'attributo definisce il titolo del capitolo e viene mostrato dal media player per identificarlo;
  • TimeIndex: definisce la posizione dove inizia il capitolo all'interno del media codificato;
  • ImageUrl: identifica un'immagine che viene mostrata dal media player per identificare visivamente il capitolo.

Il modo più semplice per fornire dei valori per ciascuno degli attributi è usare le definizioni dei marcatori in EME. Comunque, l'attributo TimeIndex dovrebbe essere rappresentato in un valore che possa essere convertito in un valore di tipo double, quindi è necessaria una conversione di qualche tipo dei valori da EME a asp:Media. Nell'esempio mostrato qui, il marcatore alla fine del media viene mostrato alla posizione 1.11.2455760 in EME mentre deve essere convertito al numero attuale di minuti nell'attributo TimeIndex come 71.2455760. La definizione risultante dell'elemento asp:Media viene mostrata nel codice sottostante.

<asp:Media ID="myCardVideo" AutoPlay="true" runat="server" Height="240px"
          MediaSkin="Professional" MediaUrl="SteveBreastonCardinalsPuntReturn.wmv"
          Width="320px">
            <Chapters>
              <asp:MediaChapter Title="Start" TimeIndex="0.0"
                   ImageUrl="~/EMEOutput/SteveBreastonCardinalsPuntReturn_MarkerThumb 00.00.00.jpg" />
              <asp:MediaChapter Title="Reception" TimeIndex="6.6253847"  
                   ImageUrl="~/EMEOutput/SteveBreastonCardinalsPuntReturn_MarkerThumb 00.00.06.6253847.jpg" />
              <asp:MediaChapter Title="Broken Tackle" TimeIndex="10.5280086"  
                   ImageUrl="~/EMEOutput/SteveBreastonCardinalsPuntReturn_MarkerThumb 00.00.10.5280086.jpg" />
              <asp:MediaChapter Title="End Zone" TimeIndex="13.1600108"  
                   ImageUrl="~/EMEOutput/SteveBreastonCardinalsPuntReturn_MarkerThumb 00.00.13.1600108.jpg" />
              <asp:MediaChapter Title="Replay" TimeIndex="17.3349108"  
                   ImageUrl="~/EMEOutput/SteveBreastonCardinalsPuntReturn_MarkerThumb 00.00.17.3349108.jpg" />
              <asp:MediaChapter Title="Celebration" TimeIndex="55.1768291"  
                   ImageUrl="~/EMEOutput/SteveBreastonCardinalsPuntReturn_MarkerThumb 00.00.55.1768291.jpg" />
              <asp:MediaChapter Title="End" TimeIndex="71.2455760"  
                   ImageUrl="~/EMEOutput/SteveBreastonCardinalsPuntReturn_MarkerThumb 00.01.11.2455760.jpg" />
            </Chapters>
</asp:Media>

 

<a href="/img/11/iframe_ajaxInt3.html" title= "Vedi esempio">Vedi esempio</a>;

 

Il media player Silverlight è in grado di navigare fra i capitoli nel media codificato una volta che i capitoli sono stati definiti. Per fare ciò, passate il mouse sopra il bottone del player e verranno mostrate le immagini dei capitoli. Cliccando una delle immagini dei capitoli, il player passerà a quel capitolo. Il player risultante viene visualizzato nell'immagine qui sotto.

Resulting player
Fig 5: risultato finale

Skin

Il controllo asp:Media include molte skin predefinite che vengono usate per cambiare il look del media player. Le skin predefinite possono essere facilmente modificate con Visual Studio 2008 in maniera dichiarativa nel markup o visualmente attraverso il designer. Una skin personalizzata può esser fornita al player creando un file XAML e importandolo attraverso l'attributo XamlUrl del controllo asp:Media.

Un metodo più semplice per creare una skin personalizzata è esportare una skin preesistente e modificarla. Per esportare e modificare una skin in Visual Studio 2008, usate il menu del controllo asp:Media nella design view e selezionate Configure Skin. Tale voce offre l'opportunità di selezionare una skin predefinita, di esportarla e di selezionare una skin personale. Selezionate la skin da esportare e cliccate il bottone Export. Modificate il file XAML della skin e selezionate il file XAML modificato come skin personale. Ad esempio, nella figura sottostante, è stata esportata la skin Professional ed è stata modificata aggiungendo dei riflessi arancioni per poi esser seleizonata come skin attiva.

Skin
Fig 6: Modifica e selezione di una skin

Gestione degli eventi del Media Player

Il plugin Microsoft Silverlight include un framework di namespaces, classi e funzionalità che vengono usate per interagire con il media player e creare applicazioni. La classe Sys.Preview.UI.Xaml.Media.Player viene usata per controllare direttamente il player Silverlight. Le classi nella documentazione Silverlight vengono definite come tipi client. Ciò ha senso in quanto classe nella terminologia orientata agli oggetti e viene definita come rappresentante di un particolare tipo di entità.

Il tipo del Player è fortemente legato al media player. Quest'ultimo e la sua skin attiva vengono definiti nello XAML, che deve obbedire alla sintassi XML in modo tale che il tipo Player possa assumere quei particolari elementi esistenti all'interno dello XAML. Se tale file include gli elementi corretti, identificando le funzioni per gestire gli eventi del player usando il controllo asp:Media, il processo è semplice. Le fnzioni handler possono essere identificate dichiaratamente o attraverso la loro visualizzazione in Visual Studio 2008. Il codice completo con l'handler OnClientChapterStarted viene mostrato qui sotto.

Es 3: Default.aspx

<asp:Media ID="myCardVideo" AutoPlay="true" runat="server" Height="240px"
          MediaSkin="Professional" MediaUrl="SteveBreastonCardinalsPuntReturn.wmv"
          Width="320px">
            <Chapters>
              <asp:MediaChapter Title="Start" TimeIndex="0.0"
                   ImageUrl="~/EMEOutput/SteveBreastonCardinalsPuntReturn_MarkerThumb 00.00.00.jpg" />
              <asp:MediaChapter Title="Reception" TimeIndex="6.6253847"  
                   ImageUrl="~/EMEOutput/SteveBreastonCardinalsPuntReturn_MarkerThumb 00.00.06.6253847.jpg" />
              <asp:MediaChapter Title="Broken Tackle" TimeIndex="10.5280086"  
                   ImageUrl="~/EMEOutput/SteveBreastonCardinalsPuntReturn_MarkerThumb 00.00.10.5280086.jpg" />
              <asp:MediaChapter Title="End Zone" TimeIndex="13.1600108"  
                   ImageUrl="~/EMEOutput/SteveBreastonCardinalsPuntReturn_MarkerThumb 00.00.13.1600108.jpg" />
              <asp:MediaChapter Title="Replay" TimeIndex="17.3349108"  
                   ImageUrl="~/EMEOutput/SteveBreastonCardinalsPuntReturn_MarkerThumb 00.00.17.3349108.jpg" />
              <asp:MediaChapter Title="Celebration" TimeIndex="55.1768291"  
                   ImageUrl="~/EMEOutput/SteveBreastonCardinalsPuntReturn_MarkerThumb 00.00.55.1768291.jpg" />
              <asp:MediaChapter Title="End" TimeIndex="71.2455760"  
                   ImageUrl="~/EMEOutput/SteveBreastonCardinalsPuntReturn_MarkerThumb 00.01.11.2455760.jpg" />
            </Chapters>
</asp:Media>

 

<a href="/img/11/iframe_ajaxInt3.html" title= "Vedi esempio">Vedi esempio</a>;

 

L'output risultante in Visual Studio 2008 viene mostrato nella figura sottostante.

Result
Fig 7: Output in Visual Studio 2008



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Sara
Hai dubbi su questo articolo?