Hey, Scripting Guy!La tecnologia Silverlight

Gli Scripting Guy di Microsoft

Scarica il codice per questo articolo: HeyScriptingGuy2007_10.exe (156KB)

La storia umana è stata da sempre contrassegnata dallo scontro di forze diametralmente opposte: i romani contro le orde barbare, gli Hatfield contro i McCoy, gli Scripting Guy contro coloro che ritengono che un articolo sulla creazione di script per l'amministrazione del sistema debba trattare esclusivamente questo specifico argomento e non dilungarsi su altri argomenti apparentemente non pertinenti come, ad esempio, lo scontro storico tra forze diametralmente opposte [o trattare, ad esempio, di uncini da macellaio... ].

Il mondo informatico non è immune a questi scontri tra forze diametralmente opposte. In particolare, viene in mente lo scontro tra sviluppatori e amministratori di sistema. Come Karl Marx disse: "O quest'uomo è morto o il mio orologio si è fermato".

Un momento... Era Groucho Marx. Karl Marx ha detto: "L'arte è sempre e ovunque la confessione segreta e, allo stesso tempo, il movimento immortale del suo tempo". In verità, non abbiamo idea di cosa significhi questa affermazione. Bisogna ammettere tuttavia che, sebbene Groucho Marx sia senza dubbio un po' più divertente di Karl Marx, le battute di spirito di Groucho non sono particolarmente pertinenti alla questione relativa al contrasto tra sviluppatori e amministratori di sistema.

Inoltre, non abbiamo dubbi sul fatto che fosse Karl Marx a spingere gli Scripting Guy a recitare il giuramento di fedeltà ogni mattina prima del lavoro: "gli amministratori di sistema non sono sviluppatori". Una verità incontestabile: gli amministratori di sistema non erano sviluppatori. Gli sviluppatori si occupavano della scrittura di programmi software, mentre gli amministratori di sistema si occupavano ... beh, a dire il vero, nessuno di noi alla Microsoft sa con esattezza cosa facessero gli amministratori di sistema. Una sola cosa è certa: non aveva nulla a che vedere con la scrittura di programmi software.

Ovviamente, Karl Marx scrisse anche il brano "The Times, They Are A-Changing" (o almeno ci ha detto che l'ha scritto).

Grazie in parte al TechNet Script Center (microsoft.com/technet/scriptcenter), gli amministratori di sistema hanno gradualmente scoperto VBScript e hanno iniziato a scrivere autonomamente alcune utilità che, sebbene non fossero complete di tutte le funzionalità di cui un tipico programma software dispone, consentivano di eseguire utili attività di gestione. Per la scrittura delle utilità, gli amministratori di sistema hanno dovuto avvalersi di competenze molto simili a quelle degli sviluppatori.

Ma il bello deve ancora venire. Con l'avvento di Windows PowerShell™ (microsoft.com/technet/scriptcenter/hubs/msh.mspx) anche gli amministratori di sistema e gli autori di script hanno la possibilità di utilizzare Microsoft® .NET Framework. Windows Vista® ha in seguito introdotto il concetto di gadget (microsoft.com/technet/scriptcenter/topics/vista/gadgets-pt1.mspx), collocando gli amministratori di sistema, o almeno gli amministratori di sistema che scrivono script, e gli sviluppatori su un piano di parità. E ora, rullo di tamburi, è arrivata la tecnologia Microsoft Silverlight, il "plug-in multipiattaforma compatibile con più browser per la creazione di contenuti multimediali di nuova generazione basati su .NET Framework e di applicazioni interattive complete per il Web".

Una presentazione davvero altisonante, vero? Ci si chiederà tuttavia cosa c'entri tutto questo con gli autori di script per l'amministrazione del sistema. Onestamente, non siamo in grado di dare una risposta esaustiva. È comunque vero che Silverlight consente di semplificare la creazione di presentazioni multimediali e interfacce utente molto interessanti. Tutti sanno che Silverlight è, come descritto nel materiale di marketing, un metodo per creare applicazioni Web; ecco tuttavia una notizia di cui non tutti sono a conoscenza: Silverlight sembra funzionare altrettanto bene con applicazioni HTML o HTA (HTML Application) (microsoft.com/technet/scriptcenter/hubs/htas.mspx), uno strumento molto amato dagli autori di script. Dunque potrebbe valere la pena provare a utilizzare Silverlight.

Prima di andare avanti...

È opportuno sottolineare che questo articolo non si propone di trattare le numerose funzionalità di Silverlight e i potenziali utilizzi di tale tecnologia; lo scopo principale dell'articolo è illustrare un numero sufficiente di frammenti di codice che è possibile utilizzare per esercitarsi con questa tecnologia. Per installare Silverlight (disponibile gratuitamente), accedere alla home page di Silverlight all'indirizzo microsoft.com/silverlight. Sono inoltre disponibili SDK, progetti di esempio e molte altre utili risorse all'indirizzo silverlight.net/GetStarted.

Per ora, si partirà dal presupposto che si sia già installato Silverlight e che si sia scaricato dalla sezione Code Downloads del sito Web di TechNet Magazine (technetmagazine.com/code07.aspx) il file descritto nella Figura 1.

Figure 1 Componenti del progetto Silverlight

Non è necessario utilizzare il file SampleProject.js, almeno non per seguire le indicazioni illustrate nell'articolo di questo mese. Silverlight consente di associare gli script a oggetti ed eventi all'interno del progetto; gli script possono essere specificati a livello di codice nel file HTML o (come in questo caso) letti da un file di "inclusione" esterno come quello riportato di seguito. Inoltre, il file SampleProject.html verrà convertito in un HTA: è sufficiente rinominarlo SampleProject.hta. Semplice, no?

Salvare tutti questi file in una cartella e prepararsi alle sorprese.

File XAML

Come si sarà intuito, l'attenzione nell'articolo di questo mese della rubrica Hey, Scripting Guy! è incentrata sul file XAML. Detto per inciso, XAML si pronuncia "zamel". XAML è l'acronimo di Extensible Application Markup Language. Tra le altre funzioni, XAML consente di creare interfacce utente mediante un linguaggio XML. La domanda è: questo strumento sarà in grado di semplificare la creazione di interfacce utente per un amministratore di sistema? Questa è una delle sorprese.

Per iniziare, avviare il Blocco note e aprire il file SampleProject.xaml. Sostituire qualsiasi codice eventualmente presente con il seguente codice:

<Canvas
 xmlns="https://schemas.microsoft.com/
    client/2007"
 xmlns:x="https://schemas.microsoft.com/
    winfx/2006/xaml">
</Canvas>

Nota: SampleProject.hta è già preconfigurato per il caricamento delle informazioni contenute in SampleProject.xaml. Per utilizzare un file XAML differente, è necessario modificare il file CreateSilverlight.js.

Dopo aver incollato il codice, salvare il file e fare doppio clic su SampleProject.hta. Cosa verrà visualizzato? Esatto: un grande riquadro grigio.

Nulla di strano: il risultato ottenuto è esattamente quello previsto.

Non c'è niente da vedere semplicemente perché non è stata ancora eseguita alcuna operazione: l'unica operazione eseguita finora è l'aggiunta di un'area di disegno al file XAML. Si tratta tuttavia di un passaggio importante. Dopotutto, utilizzando un'analogia, nel caso in cui si desideri esercitarsi con la tecnica della pittura a olio, la prima operazione da eseguire è trovare una tela. Lo stesso avviene in Silverlight: prima di aggiungere elementi al progetto, è necessario un'area in cui "disegnare". E ora l'area è disponibile.

Perché, tuttavia, si è ottenuto un riquadro grigio di 300 pixel per 300? La risposta è semplice: queste sono lo le specifiche riportate, per impostazione predefinita, nel file CreateSilverlight.js. Per sostituire questi valori predefiniti, è sufficiente aprire CreateSilverlight.js e modificare le impostazioni in base alle proprie esigenze. È meglio un'area di disegno con sfondo bianco di 800 pixel in larghezza e 300 pixel in altezza? Per gli esempi utilizzati in questo articolo, è preferibile proprio una configurazione di questo tipo. Accertarsi semplicemente di includere queste tre righe in CreateSilverlight.js:

width:'800', // Width of rectangular region of 
             // control in pixels.
height:'300', // Height of rectangular region 
              // of control in pixels.
background:'white', // Background color of
                    // control.

Nota: esatto: Nel file .js originale lo sfondo è impostato su #D6D6D6. Ora è stato impostato su bianco (white). Di fatto, in un file XAML, per rappresentare i colori, è possibile utilizzare valori RGB o nomi di colore (per un elenco completo dei valori e dei nomi di colore, visitare il sito Web all'indirizzo msdn2.microsoft.com/bb188314.aspx). Sebbene agli Scripting Guy piaccia rappresentare i colori con i valori RGB ("la mia casa è tutta in FFFFFACD con finiture FFCD5C5C"), in questo articolo si utilizzeranno i nomi di colore.

Suggerimento bonus: non è obbligatorio utilizzare colori a tinta unita come sfondo di un'area di disegno. Incollare il codice riportato nella Figura 2 nel file XAML e attendere il risultato.

Figure 2 Possibili colori da utilizzare

<Canvas
 xmlns="https://schemas.microsoft.com/client/2007"
 xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
 Width="800"
 Height="300">
 
 <Canvas.Background>
 <LinearGradientBrush>
 <GradientStop Color="Blue" Offset="0.0" />
 <GradientStop Color="Black" Offset="1.0" />
 </LinearGradientBrush>
 </Canvas.Background>

</Canvas>

Fatto? Niente male, vero?

Ovviamente, l'interesse che può suscitare una "tela" vuota è davvero minimo se non nullo. È opportuno pertanto procedere aggiungendo un oggetto all'area di disegno. Sebbene Silverlight consenta di aggiungere tutti i tipi di oggetti, tra cui ellissi, rettangoli, linee e poligoni, si procederà aggiungendo all'area di disegno un blocco di testo, come ai vecchi tempi. Come? Inserendo tra i tag <Canvas> e </Canvas> nel file XAML i seguenti tag:

<TextBlock 
 Name="Test"
 FontSize="40"
 FontFamily="Georgia"
 FontWeight="Bold"
 Canvas.Top="20" 
 Canvas.Left="20"
 Text="The TechNet Script Center">
</TextBlock>

Come si può vedere, XAML non è niente di trascendentale. Utilizzare innanzitutto il tag <TextBlock>, includendo i diversi parametri di TextBlock (come Name e FontSize) all'interno del tag. Indicare che si sta utilizzando TextBlock mediante il tag </TextBlock>. Ecco un particolare interessante su questa operazione. La procedura da seguire è molto simile all'aggiunta di un oggetto a un file XAML. Si desidera aggiungere un rettangolo di 300 pixel in larghezza e 100 pixel in altezza? Nessun problema:

<Rectangle
 Height="300" 
 Width="100" 
 Fill="Blue">
</Rectangle> 

Quando si aggiunge una forma, ad esempio un rettangolo, all'area di disegno, specificare anche un colore di riempimento e/o di tratto. In caso contrario, Silverlight aggiungerà automaticamente un rettangolo trasparente all'area di disegno. Il rettangolo esiste, ma non è possibile visualizzarlo, a meno di non avere dei superpoteri con vista a raggi X.

A proposito di colori di riempimento e di tratto, questo è il metodo per applicare i colori ad alcuni oggetti in Silverlight. Per altri oggetti è necessario utilizzare un pennello, come LinearGradientBrush, già citato ma non descritto, nel suggerimento bonus. Se si preferisce applicare agli oggetti un colore a tinta unita, è possibile utilizzare SolidColorBrush. Dare ad esempio un'occhiata al codice XAML nella Figura 3 che consente di applicare al testo il colore rosso (tecnicamente viene "colorata" la proprietà Foreground di TextBlock).

Figure 3 Applicazione di colori al testo

<TextBlock 
 Name="Test"
 FontSize="40"
 FontFamily="Georgia"
 FontWeight="Bold"
 Canvas.Top="20" 
 Canvas.Left="20"
 Text="The TechNet Script Center">

 <TextBlock.Foreground>
 <SolidColorBrush Name="test_brush" Color="red"/>
 </TextBlock.Foreground>

</TextBlock>

Per un effetto ancora migliore, provare la proprietà ImageBrush, che consente di inserire un'immagine nel testo:

<TextBlock.Foreground>
 <ImageBrush Name="test_brush" ImageSource="Sunset.jpg"/>
</TextBlock.Foreground>

Ecco un altro suggerimento: quando si utilizza la proprietà ImageBrush, è opportuno aumentare il valore di FontSize, poiché maggiori sono le dimensioni dei caratteri del testo, migliore sarà l'effetto ottenuto.

Utilizzarla e verificarne il risultato, che non mancherà di entusiasmare.

Un attimo: non è finita qui.

In termini di "abilità", non siamo ancora sullo stesso livello: restano ancora alcuni segreti da svelare. Non è niente male questa funzionalità che consente di visualizzare il testo in Silverlight; ancora più straordinaria è la possibilità di disegnare rettangoli, ellissi e poligoni. Ma tutte queste funzionalità impallidiscono in confronto alle animazioni che è possibile aggiungere a un progetto Silverlight.

Tuttavia, lo spazio a disposizione in questo articolo ci consente solo di introdurre alcuni dei metodi con cui è possibile creare animazioni Silverlight; qualsiasi altro argomento esula dall'ambito dell'articolo (non possiamo farci nulla; continuiamo a suggerire che TechNet Magazine diventi Hey, Scripting Guy! Magazine, ma evidentemente i nostri messaggi non sono stati ricevuti).

Senza indugiare oltre, ecco un effetto straordinario che consente di eseguire una graduale dissolvenza in entrata del testo. Aggiungere il codice riportato nella Figura 4 tra i tag <TextBlock> e </TextBlock> nel file XAML.

Figure 4 Suggerimenti di TextBlock

<TextBlock.Triggers>
 <EventTrigger RoutedEvent=
     "TextBlock.Loaded">
 <BeginStoryboard>
 <Storyboard>
 <DoubleAnimation
 Storyboard.TargetName="Test"
 Storyboard.TargetProperty="Opacity"
 From="0.0" To="1.0" 
 Duration="0:0:5" />
 </Storyboard>
 </BeginStoryboard>
 </EventTrigger>
</TextBlock.Triggers>

Non lasciarsi tuttavia impressionare dalla lunghezza del codice da inserire; si tratta per lo più di codice boilerplate. Per cominciare, non è sufficiente aggiungere un'animazione a un file XAML; è necessario indicare il momento in cui si prevede di eseguire l'animazione. Questo rende necessaria l'impostazione di un insieme di trigger per TextBlock. Nell'esempio verrà creato un trigger che consente di avviare l'animazione ogni volta che TextBlock viene caricato:

<EventTrigger RoutedEvent="TextBlock.Loaded">

In Silverlight le animazioni devono essere eseguite in uno storyboard (un termine preso in prestito dall'industria cinematografica). Questo spiega la presenza dei tag <BeginStoryboard> e <Storyboard>.

Per consentire la dissolvenza in entrata del testo, è necessario modificare la proprietà Opacity. Il valore dovrà essere gradualmente aumentato da 0.0 (trasparente) a 1.0 (colore a tinta unita). Poiché Opacity è una proprietà di tipo Double (una proprietà basata su un valore numerico a doppia precisione), verrà utilizzata un'animazione DoubleAnimation. Come si utilizza un'animazione DoubleAnimation? Indicando l'oggetto di cui si desidera eseguire l'animazione (in questo caso Test, il nome assegnato a TextBlock); impostando la proprietà di destinazione (Opacity); e specificando l'intervallo dell'animazione (opacità da 0.0 a 1.0) e la durata dell'intera animazione (5 secondi). In altre parole:

<DoubleAnimation
 Storyboard.TargetName="Test"
 Storyboard.TargetProperty="Opacity"
 From="0.0" To="1.0" 
 Duration="0:0:5" />

Nota: per specificare una durata di 5 secondi, utilizzare la sintassi 0:0:5 (ore, minuti, secondi). Se si utilizza il valore 5, non verrà generato un errore ma il completamento dell'animazione richiederà 5 giorni.

Fatto? Ora provare a eseguire questa operazione: all'interno del tag DoubleAnimation impostare la proprietà AutoReverse su True:

AutoReverse="True"

Verrà quindi eseguita prima la dissolvenza in entrata e successivamente la dissolvenza in uscita dell'animazione.

Impostare la proprietà RepeatBehavior su Forever; in tal modo, la dissolvenza in entrata e in uscita del testo verrà eseguita letteralmente per sempre:

RepeatBehavior="Forever"

Forse "per sempre" è un periodo di tempo troppo lungo? Impostare RepeatBehavior su 3x, ad esempio, in modo che l'animazione venga eseguita tre volte, quindi uscire.

RepeatBehavior="3x"

Tutto questo è molto interessante. Tuttavia, quando non si desidera eseguire la dissolvenza in entrata e in uscita del testo ma si preferisce un effetto con cui cambiare gradualmente il colore del testo, è consigliabile utilizzare l'animazione ColorAnimation:

<ColorAnimation 
 Storyboard.TargetName="test_brush"
 Storyboard.TargetProperty="Color"
 From="Red" To="Blue" Duration="0:0:5" />

Nota: in questo caso, iniziare con del testo di colore rosso. La procedura per applicare al testo il colore rosso è già stata illustrata nella prima parte dell'articolo.

Interessante, vero? Eppure si sente un po' di delusione. Ah, ecco perché: con la proprietà ColorAnimation si sono ottenuti degli effetti piacevoli, ma in realtà si sperava consentisse di spostare gli oggetti sullo schermo. Non è il caso di perdersi d'animo. Silverlight anche da questo punto di vista non delude le aspettative. Provare il codice che segue:

<DoubleAnimation
 Storyboard.TargetName="Test"
 Storyboard.TargetProperty="(Canvas.Left)" 
 To="150"
 Duration="0:0:5" />

Come si può vedere, è possibile spostare lentamente l'oggetto TextBlock dalla posizione iniziale in un punto a una distanza di 150 pixel dal bordo sinistro dell'area di disegno (Canvas.Left). Per spostare TextBlock verso l'alto e verso il basso, è sufficiente utilizzare la proprietà Canvas.Top:

<DoubleAnimation
 Storyboard.TargetName="Test"
 Storyboard.TargetProperty="(Canvas.Top)" 
 To="150"
 Duration="0:0:5" />

È possibile combinare queste animazioni e fare in modo che l'oggetto TextBlock si sposti da un lato all'altro e verso il basso o verso l'alto? Mistero! Ecco tuttavia un suggerimento: incollare entrambe le animazioni nel file XAML (una dopo l'altra) e restare a guardare.

Nota: ebbene sì, era una bugia. Abbiamo sempre saputo che era possibile combinare queste animazioni. Infatti, è possibile inserire un gruppo di animazioni in un singolo progetto Silverlight. Non è un'operazione semplice: potrebbe essere necessario includere tag aggiuntivi per terminare un'animazione prima dell'inizio dell'animazione successiva. È inoltre possibile creare animazioni personalizzate inserendo semplicemente alcuni tag XML.

Questo è tutto. Fine della presentazione.

Sì, è vero: è un dispiacere anche per noi, soprattutto adesso che eravamo giunti alla parte più divertente. Tuttavia, questo non è un addio, ma un arrivederci. Coloro che desiderano ottenere ulteriori informazioni su Silverlight possono inviarci un messaggio all'indirizzo scripter@microsoft.com. Se l'interesse sull'argomento sarà sufficiente, vedremo cosa si potrà fare negli articoli futuri. Visitare il sito Web di TechNet Script Center (microsoft.com/technet/scriptcenter/resources/tnmag/archive.mspx) in cui verranno pubblicati collegamenti utili per il completamento degli esempi XAML. Fino ad allora, come dissero Karl Marx e Frederick Engels alla fine del manifesto dal Comitato di corrispondenza comunista di Bruxelles a G. A. Kottgen: "Buona notte e guida con prudenza".

Gli Scripting Guy di Microsoft lavorano o, per meglio dire, sono stipendiati da Microsoft. Quando non si dedicano al baseball (o ad altre attività) come giocatori, allenatori o semplici spettatori, gestiscono il TechNet Script Center. Consultare la pagina www.scriptingguys.com.

© 2008 Microsoft Corporation e CMP Media, LLC. Tutti i diritti riservati. È vietata la riproduzione completa o parziale senza autorizzazione.