Per una generazione di programmatori l'ispirazione principale è venuta dai videogiochi, per altre generazioni il modello è stato invece la pagina Web e la curiosità si è spostata dai flussi infinitesimali di bit al funzionamento dei linguaggi a marcatori intrecciati con i linguaggi di scripting. Questa evoluzione ha portato nel tempo il modello "Web" a diventare un vero e proprio stile di programmazione. Microsoft ha tenuto conto di tutto questo per creare gli strumenti di programmazione dedicati al nuovo Windows Vista.
In quest'ottica si incastona Windows Presentation Foundation (WPF), ovvero uno strumento dedicato alla generazione di interfacce grafiche che si basa su un linguaggio di markup: XAML. XAML è un'applicazione di XML, quindi ne conserva le caratteristiche: marcatori logici inclusi gerarchicamente uno dentro l'altro, sintassi di case sensitive, l'utilizzo di files di testo.
Finalmente, Silverlight è il sottoinsieme di WPF dedicato al Web (in precedenza il nome in codice era WPF/E, dove E sta per Everywhere).
Si tende a definire Silverlight il diretto concorrente di Flash/Flex e bisogna ammettere che la sfida può diventare interessante, vista la similarità di funzioni e di scopi. Con Silverlight possiamo definire interfacce utente, animazioni ed effetti speciali, utilizzando un sottoinsieme di XAML dedicato al Web, un po' come accade con Flex e MXML.
Per fare una migliore conoscenza della tecnologia, cerchiamo di entrare nel pratico installando la piattaforma di sviluppo e implementando un primo esempio.
Installazione
Come è possibile immaginare, per visualizzare le animazioni e le interfacce sviluppate per Silverlight abbiamo bisogno di aggiungere un plugin al browser (un po' come per Flash, per i PDF etc.). Per prima cosa quindi possiamo scaricare il plugin Silverlight dal sito Microsoft.
I sistemi operativi attualmente supportati sono Microsoft Windows e Mac OS X ed i relativi browser, ma presto il plugin sarà disponibile anche per Linux.
Con il plugin possiamo finalmente fruire del materiale prodotto con Silverlight, ma se vogliamo cominciare anche a sviluppare dobbiamo scaricare anche l'SDK
Istanziare un componente
Per richiamare contenuti in Flash è sufficiente utilizzare il marcatore <object>, col quale aggiungiamo alle pagine componenti ActiveX e simili. Silverlight invece, richiede una procedura più complessa, forse addirittura macchinosa. Cerchiamo di spiegare cosa consiglia Microsoft (nel tutorial allegato all'SDK) per realizzare un primo esempio.
È anzitutto necessario includere due file JavaScript nella pagina Web.
Listato 1. Importare i file JavaScript
...
<head>
<script type="text/JavaScript" src="Silverlight.js"></script>
<script type="text/JavaScript" src="esempio.html.js"></script>
</head>
...
- Silverlight.js è il file fondamentale da importare perché contiene tutta la libreria che permette concretamente di istanziare, a seconda del modello del browser utilizzato, i componenti Silverlight. Possiamo trovare questo file all'interno del pacchetto dell'SDK.
- esempio.html.js è un file che creiamo per indicare i parametri da applicare ai componenti che definiamo nella pagina. Qui possiamo programmare funzionalità quali la gestione delle eccezioni, l'ampiezza dell'area occupata dal componente Silverlight, l'URL del file XAML, colore dello sfondo etc. Potremmo pensare a questo file come all'equivalente del "code behind" per le classiche Web Form. Troviamo un esempio di file come questo nell'SDK sotto il nome di "
CreateSilverlight.js"
Per comodità possiamo lasciare i file nella stessa cartella della pagina Web che li richiama, ma tipicamente è più comodo inserirli in una directory "js".
Torniamo alla pagina da costruire. All'interno del <body> poniamo un <div> e lo identifichiamo impostandone l'attributo id.
Dobbiamo poi aggiungere un blocco di inizializzazione che istanzia il componente Silverlight all'interno del nostro <div>.
Listato 2. Creare il blocco per l'inizializzazione
<body>
<div id="mioControlloSilverlight"></div>
<script type="text/JavaScript">
var mioElemento = document.getElementById("mioControlloSilverlight");
creaMioControlloSilverlight();
</script>
</body>
In questo blocco creiamo una variabile, alla quale assegnare il riferimento all'elemento <div>. Nel nostro caso la chiamiamo "mioElemento". Questa variabile sarà utilizzata dalla funzione che creeremo per istanziare un nuovo compontente Silverlight (all'interno del file esempio.html.js).
Una volta impostato il contenitore dobbiamo creare la funzione di inizializzazione (nell'esempio creaMioControlloSilverlight()) all'interno del file esempio.html.js
Listato 3. Impostare la funzione di inizializzazione
function creaMioControlloSilverlight()
{
// Crea un elemento Silverlight e associa alcune caratteristiche
Sys.Silverlight.createObject(
"myxaml.xaml", // Il file in cui definiamo gli elementi da visualizzare.
mioElemento, // L'elemento che ospita l'interfaccia
"mioControlloSilverlight", // id che abbiamo assegnato al conrollo
{ // Proprietà per la visualizzazione.
width:'300', height:'300', // larghezza e altezza in pixel
inplaceInstallPrompt:false, // visualizzare il messaggio per scaricare il plug-in
background:'#D6D6D6', // colore di sfondo
isWindowless:'true', // mostrare il controllo in modo "Windowless"
framerate:'24', // frame per secondo (tipicamente impostato a 24)
version:'0.9' // Verifica la versione (0.9 per la beta)
},
{
onError:null, // funzione per gestire gli errori
onLoad:null // funzione da lanciare al caricamento
},
null // valore contesutale (parametro da passare alla funzione onload)
);
}
Il gioco è quasi fatto e, una volta presa un po' di confidenza, non sembrerà così strano. Prima di ultimare il nostro esempio creando il file XAML, precisiamo che è possible creare, nella stessa pagina Web, più controlli Silverlight inserendoli ognuno in un elemento <div> con ID univoco. Ad ogni <div> bisogna associare il relativo blocco di inizializzazione e, naturalmente la relativa funzione. I blocchi relativi a ciascun elemento devono essere posti uno accanto all'altro, senza frapporre alcun codice di altro genere.
Hello World: il primo file XAML
Finalmente possiamo creare il nostro primo file XAML, che è il vero protagonista della programmazione di interfacce con Silverlight. XAML è un linguaggio a marcatori basato su XML, vediamo come scrivere l'inevitabile "Hello World".
Listato 4. Codice XAML per scrivere un testo
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<TextBlock>hello world!</TextBlock>
</Canvas>
Il marcatore principale di Silverlight è <Canvas> che è tela da pittore sulla quale disporre tutti gli elementi grafici. Per le applicazioni desktop invece il nodo radice è <Window>.
Intuitivamente <TextBlock> è l'elemento che si occupa dell'inserimento del testo. é naturalmente possibile formattare il testo in maniera più sofisticata; nel dettaglio è possibile collocare il testo nell'area canvas attraverso gli attributi:
- Canvas.Left: distanza dal lato sinistro dell'area Canvas
- Canvas.Top: distanza dal lato superiore dell'area Canvas
Per le caratteristiche avanzate è utile consultare il manuale di riferimento online messo a disposizione da Microsoft.
