Hello World Silverlight!

L'attributo type="application/x-silverlight" dichiara il tipo di controllo, con source si imposta il riferimento al codice XAML relativo al contenuto da renderizzare, è possibile impostare come sorgente un codice in-line precedentemente inserito in un tag <script id="Scene1xaml" type="text/xaml">?</script> specificando ad esempio source="#Scene1xaml", oppure un file esterno (es. source="Scene1.xaml") purché appartenga allo stesso dominio.

Con questo approccio lo sviluppatore deve porre un'attenzione manuale ai diversi comportamenti dei browser per mantenere ampiamente compatibile il contenuto Silverlight, deve scegliere la strategia comportamentale agli eventi di assenza di plug-in nel browser dell'utente, ai casi di non compatibilità del sistema operativo ed anche ai futuri aggiornamenti del plug-in stesso.

Per semplificare queste attività Microsoft ha introdotto nell'SDK un file Javascript "helper" contenente due funzioni che si occupano degli aspetti appena citati, esse preparano i tag OBJECT ed EMBED ed eseguono le opportune verifiche.

Il file Silverlight.js in oggetto si trova all'interno di \Tools\Silverlight.jsdella cartella di istallazione dell'SDK, per usare questa libreria è sufficiente copiare tale file nel sito web e farne riferimento nelle pagine contenenti gli oggetti Silverlight:

<script type="text/javascript" src="Silverlight.js"/>

Le due funzioni da utilizzare sono Silverlight.createObject e Silverlight.createObjectEx, entrambe eseguono la stessa attività con la sola differenza di sintassi della firma: createObjectEx accetta un array come un unico parametro contenente le proprietà da attribuire all'oggetto Silverlight, la sua comodità rispetto a createObject è che la sintassi è autodescrittiva dichiarando il nome della proprietà di fianco al rispettivo valore seguendo la notazione JSON (JavaScript Object Notation); ecco due esempi:

Silverlight.createObject( 
    "#Scene1xaml",                       
    parentElement,                       
    "myPlugin",                          
    {                                    
        width:'640',                     
        height:'480',                    
        inplaceInstallPrompt:false,      
        background:'white',              
        isWindowless:'false',            
        framerate:'24',                  
        version:'1.0'                    
    }, 
    { 
        onError:null,                    
        onLoad:null                      
    }, 
    null,                                
    null);                               
             
Silverlight.createObjectEx({ 
    source: '#Scene1xaml',           
    parentElement:parentElement,     
    id:'myPlugin',                   
    properties:{                     
        width:'640',                
        height:'480',                
        inplaceInstallPrompt:false,  
        background:'white',          
        isWindowless:'false',        
        framerate:'24',              
        version:'1.0'},              
    events:{ 
        onError:null,                
        onLoad:null},                
    initParams:null,                 
    context:null});

Per valersi di queste funzioni è comodo richiamarle da una propria funzione Javascript (es. createSilverlight()) da utilizzare nella posizione desiderata all'interno della pagina, per comodità all'interno di un tag <div>:

<script type="text/javascript"> 
    function createSilverlight() 
    {   
        Silverlight.createObjectEx({ 
           source: '#Scene1xaml',           
           parentElement:parentElement,     
           id:'myPlugin',                   
           properties:{                     
               width:'640',                
               height:'480',                
               inplaceInstallPrompt:false,  
               background:'white',          
               isWindowless:'false',        
               framerate:'24',              
               version:'1.0'},              
           events:{ 
               onError:null,                
               onLoad:null},                
           initParams:null,                 
           context:null}); 
    }     
</script> 
<div id="divSilverlightPlugInHost"> 
    <script type="text/javascript"> 
        var parentElement = document.getElementById("divSilverlightPlugInHost"); 
        createSilverlight(); 
    </script> 
</div> 

Tale funzione potrà essere estesa e parametrizzata in futuro per renderla utilizzabile con diversi file XAML.

L'uso delle funzioni "helper" evita anche il click di attivazione degli oggetti ActiveX nel browser.

Ecco il risultato finale del codice proposto:

Con questi passaggi è stato realizzato un semplice banner in Silverlight.

Conclusioni

Silverlight è la tecnologia che porta le potenzialità del .NET Framework su ogni computer per realizzare siti web interattivi ed applicazioni web cross-platform e cross-browser; in questo articolo sono stati introdotti i principi del progetto, gli strumenti di sviluppo e le metodologie di lavoro preparando un semplice ma reale esempio di banner in Silverlight.

Attenzione: Questo articolo contiene un allegato

Sullo stesso argomento

Commenti

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Segnala su: