Il markup XHTML per le applicazioni Silverlight 2.0

Ormai è noto che Silverlight ci consente di integrare le nostre pagine Web con animazioni, player video, menu dinamici, etc. In questo articolo esaminiamo da vicino il markup necessario all'integrazione di un elemento Silverlight 2 all'interno di una qualsiasi pagina Web. Le novità introdotte con la versione 2.0, in questo senso, sono principalmente due:

• la possibilità di generare i file .xap, che semplificano la gestione degli elementi silverlight all'interno del markup (X)HTML
• il nuovo elemento <asp:Silverlight> che possiamo aggiungere in Visual Studio o Visual Web Developer Express(SP1), grazie ai Microsoft Silverlight Tools e che semplifica l'importazione di elementi Silverlight nelle WebForm.

Per il controllo asp.net possiamo contare sull'aiuto del framework, che si occupa di trasformare la dichiarazione dell'elemento <asp:Silverlight> e di generare il contenitore per la nostra applicazione. È opportuno quindi occuparci di come inserire le applicazioni Silverlight 2 nel comune markup XHMTL.

La procedura non è molto differente da quella utilizzata per le animazioni realizzate in Flash. Anche nel nostro caso l'elemento principale è <object>, il tag preposto dal W3C per l'inserimento di qualsiasi elemento multimediale.

Il codice che viene generato automaticamente da Visual Studio o da Expression Blend è molto simile al seguente:

<div id="silverlightControlHost">

<object Data="data:application/x-silverlight," type="application/x-silverlight-2" Width="400" Height="300">
  <param Name="source" value="EsempioSilverlight.xap"/>
  <param Name="onerror" value="onSilverlightError" />
  <param Name="onResize" value="onResizeHandler" />
  <param Name="Background" value="white" />
  <param Name="initParams" value="nomeParam=ValoreParam,nomeParam2=ValoreParam2" />
  <param Name="minRuntimeVersion" value="2.0.31005.0" />
  
  <a href="http://go.microsoft.com/fwlink/?LinkID=108182" Style="text-decoration: none;">
    <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" Style="border-Style: none"/>
  </a>
</object>

<iframe Style='Visibility:hidden;Height:0;Width:0;border:0px'></iframe>

</div>

Prima di entrare nel dettaglio dei parametri e degli attributi, notiamo il link con immagine dichiarato all'interno dell'<object>. Questa parte viene visualizzata se, sul client, non è stato installato il plugin di Silverlight 2. In questo caso appare l'immagine che ci invita a scaricarlo per far funzionare la pagina.

Altri elementi anomali sono è l'<iframe> vuoto che troviamo in basso e il contenitore silverlightControlHost. Il <div> può essere utile all'impaginazione e alla degradazione del controllo o come riferimento per alcuni script, mentre l'<iframe> serve a risolvere problemi di compatibilità con alcuni browser come Safari (stando a quanto trovato su MSDN). In ogni caso sono entrambi elementi facoltativi, possiamo inserire il nostro oggetto Silverlight utilizzando un markup semplificato:

<object data="data:application/x-silverlight," type="application/x-silverlight-2" width="300" height="300">
<param name="source" value="esempio.xap"/>
</object>

Naturalmente possiamo sfruttare le potenzialità di XHTML per aggiungere parametri da passare all'applicazione multimediale e, grazie a questi, passare impostazioni e gestire eventi.

Attributi

Nel tag <div> troviamo l'attributo id, che serve come nome identificativo univoco per fare riferimento all'oggetto nella pagina (X)HTML. Possiamo dare un nome qualunque all'id, ciò che conta è che unico nella pagina.

Passiamo all'elemento <object>. Gli attributi data e type servono rispettivamente a specificare tipo di mime type dell'applicazione (in questo definiamo una applicazione Silverlight) e la versione del plugin che utilizziamo (in questo caso Silverlight 2.0).

Il significato degli attribti width e height è più intuitivo, rappresentano larghezza e altezza dell'oggetto. Possiamo definire queste dimensioni sia in termini di pixel, sia di percentuali rispetto al contenitore.

Parametri

A questo punto esaminiamo l'impostazione dei parametri necessari alla visualizzazione del nostro oggetto. Come abbiamo visto possiamo fare a meno di tutti i parametri tranne che di source, che ci serve per definire l'URL, ovvero l'indirizzo del file .xap che contiene l'applicazione. Possiamo inserire un indirizzo assoluto o relativo.

Gli altri parametri sono opzionali ma sono quelli che ci aiutano ad aumentare il controllo sull'oggetto:

Tra i parametri possiamo impostare anche elementi dell'interazione con la pagina ospite grazie alla definizione degli eventi. Silverlight 2 consente di gestire alcuni eventi che vengono lanciati dal plug-in che possono essere gestiti tramite JavaScript.

In particolare è utile inserire i gestori per gli eventi:

• onError, che viene sollevato in caso di errore da parte dell'applicazione. Consente di gestire eventuali eccezioni
• onResize, viene sollevato quando le proprietà ActualHeight ed ActualWidth vengono reimpostate

Altri eventi che possono renderci la vita più semplice sono:

• onLoad, viene invocato nel momento in cui la nostra applicazione viene lanciata, ma prima che l'utente visualizzi il suo contenuto
• onSourceDownloadComplete, sollevato nel momento in cui la nostra applicazione ha terminato di essere scaricata
• onSourceDownloadProgressChanged, sollevato per ogni cambiamento di quantità di applicazione che è stata scaricata

Gestire gli eventi

Per gestire gli eventi, come ad esempio gli errori generati dal plug-in, sollevati attraverso l'evento onError, possiamo utilizzare delle semplici funzioni JavaScript:

function onSilverlightError(sender, args)
{
  if (args.errorType == "InitializeError")
  {
    var errorDiv = document.getElementById("errorLocation");
    
    if (errorDiv != null)
      errorDiv.innerHTML = args.errorType + "- " + args.errorMessage;
  }
}

In questo modo ogni eccezione sollevata dal plug-in viene gestita mostrando un messaggio di errore. Perché funzioni queto script dobbiamo ovviamente aver predisposto un <div> (o un altro elemento) con id="errorLocation".

Come tutti i delegati, anche le nostre funzioni client avranno come parametri gli oggetti:

• sender, ovvero l'elemento che ha scatenato l'evento
• args, eventuali argomenti allegati all'evento

Ad esempio, possiamo gestire le singole eccezioni analizzando il tipo di errore occorso. L'oggetto args, attraverso la proprietà errorType espone l'eccezione sollevata.

Possiamo anche decidere di non gestire gli eventi, ad esempio dichiarando un gestore vuoto. Vediamo come fare con il ridimensionamento:

function onResizeHandler(sender, args) { }