Ei, Equipe de Scripts!Que venha o Silverlight

A Equipe de Scripts da Microsoft

Faça download do código deste artigo: HeyScriptingGuy2007_10.exe (156KB)

A história humana tem sido marcada há muito pela colisão de forças diametralmente opostas: os romanos contra as hordas bárbaras; os Hatfields contra os McCoys; a Equipe de Scripts contra os que acreditam que uma coluna sobre scripts para administração de sistemas deva, na realidade, abordar scripts para administração de sistemas, e não, digamos, o confronto histórico de forças diametralmente opostas. [Ou, digamos, apontar uma arma... —Ed.]

O mundo dos computadores não está imune a confrontos entre essas forças. Em especial, temos a lembrança do confronto entre desenvolvedores e administradores do sistema. Como disse Karl Marx ao pesquisar a situação, "Ou este homem está morto ou meu relógio parou".

Espere, desculpe – na verdade, quem disse isso foi Groucho Marx. Karl Marx disse: "sempre e em toda parte, a arte é a confissão secreta e o movimento imortal de sua época". Para falar a verdade, não temos a menor idéia do que isso significa. Além disso, Groucho Marx era bem mais engraçado do que Karl Marx, mesmo que as brincadeiras de Groucho não sejam especialmente relevantes para o confronto entre desenvolvedores e administradores do sistema.

No entanto, temos a mais absoluta certeza de que era Karl Marx quem costumava fazer a Equipe de Scripts recitar o juramento de lealdade à automação todas as manhãs antes do trabalho: "administradores do sistema não são desenvolvedores". E isso é realmente verdade: os administradores do sistema não eram desenvolvedores. Os desenvolvedores eram pessoas que escreviam programas de computador, e os administradores do sistema eram as pessoas que... bem, para falar a verdade, não temos certeza se alguém na Microsoft realmente sabia o que os administradores de sistema faziam. Mas, seja lá o que fosse, certamente não era escrever programas de computador.

É claro que Karl Marx também chegou a compor aquela canção "The Times, They Are A-Changing" (Ou pelo menos foi isso o que ele nos disse).

Graças, em parte, ao Script Center da TechNet (microsoft.com/technet/scriptcenter), os administradores do sistema descobriram aos poucos o VBScript e começaram a escrever seus próprios utilitários que, embora não sejam tão completos e abrangentes quanto os programas de computador típicos, mesmo assim desempenham tarefas de gerenciamento bastante úteis. Ao escrever esses utilitários, os administradores de sistema tinham que contar com habilidades muito semelhantes às usadas pelos desenvolvedores.

E ainda não chegamos à metade da história. O advento do Windows PowerShell™ (microsoft.com/technet/scriptcenter/hubs/msh.mspx) significa que o Microsoft® .NET Framework deixa de ser o limite para administradores de sistema e redatores de scripts. O Windows Vista® apresentou ao mundo os gadgets (microsoft.com/technet/scriptcenter/topics/vista/gadgets-pt1.mspx), o que coloca administradores de sistema – ou, pelo menos, os que escrevem scripts – em pé de igualdade com os desenvolvedores. E agora – que rufem os tambores, por favor – há o Microsoft Silverlight, o "plug-in entre navegadores e plataformas que oferece a próxima geração de experiências em mídia baseadas no .NET Framework e aplicativos com interatividade avançada para a Web".

Parece impressionante, não? Mas, você pergunta, o que isso tem a ver com redatores de script para administração de sistemas como você? Sinceramente, não temos certeza. No entanto, o Silverlight simplifica muito a criação de interfaces de usuário legais e de apresentações multimídia. E como o material de marketing invariavelmente se refere ao Silverlight como uma forma de criar aplicativos Web, aqui está um fato pouco conhecido: o Silverlight parece funcionar igualmente bem em aplicativos HTML ou HTAs (microsoft.com/technet/scriptcenter/hubs/htas.mspx), um meio tão amado pelos redatores de scripts. Portanto, talvez possa valer a pena dar uma chance ao Silverlight.

Antes de continuarmos...

Devemos ressaltar que não abordaremos os muitos recursos e usos em potencial do Silverlight atualmente; a nossa meta principal é mostrar trechos de código o suficiente para que você experimente a tecnologia. Se você quiser instalar o Silverlight (ele é gratuito, aliás), visite a home page do Silverlight em microsoft.com/silverlight. Também é possível encontrar SDKs, projetos de exemplo e muitas outras coisas bastante úteis em silverlight.net/GetStarted.

Por enquanto, iremos supor que você já tenha instalado o Silverlight. Além disso, iremos pressupor que você já tenha acessado a seção Downloads de Código do site da TechNet Magazine (technetmagazine.com/code07.aspx) e baixado os arquivos descritos na Figura 1.

Figure 1 Componentes de projeto do Silverlight

Você não necessariamente precisa de SampleProject.js, pelo menos não para acompanhar a coluna deste mês. O Silverlight permite que você anexe scripts a objetos e eventos no projeto; esses scripts podem ser codificados no arquivo HTML ou (como nesse caso) lidos de um arquivo de "inclusão" externo como esse. Além disso, iremos transformar SampleProject.html em um HTA: basta renomeá-lo para SampleProject.hta. Fácil, certo?

Não se esqueça de salvar todos esses arquivos em uma pasta. E prepare-se para um pouco de diversão.

O arquivo XAML

Como você deve ter adivinhado, toda a empolgação na Ei, Equipe de Scripts! deste mês está relacionada ao arquivo XAML. (Por acaso, XAML pronuncia-se "zamel", o que rima com camel, ou camelo. Ou mammal, mamífero. Ou mesmo enamel, esmalte.) XAML é a abreviação de Extensible Application Markup Language. Dentre outras coisas, XAML oferece uma forma de criar interfaces de usuário com uma linguagem semelhante a XML. Isso facilita para que alguém – especialmente um administrador do sistema – crie interfaces de usuário? Você está prestes a descobrir.

Para começar essa jornada, abra o Bloco de notas e abra o arquivo SampleProject.xaml. Caso você veja algum código existente, substitua-o pelo seguinte:

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

Observação: SampleProject.hta já está pré-configurado para carregar informações de SampleProject.xaml. Para usar um arquivo XAML diferente, você precisa editar o arquivo CreateSilverlight.js.

Depois de colá-lo no código, salve o arquivo e clique duas vezes em SampleProject.hta. E o que você verá? É isso mesmo: uma grande e inútil caixa cinza.

Mas espere, não vá ainda! É exatamente isso o que você deve ver.

Não há muito o que ver simplesmente porque não fizemos nada ainda: tudo o que fizemos até agora foi adicionar uma tela ao arquivo XAML. Mas essa é uma etapa importante. Afinal, caso queira tentar pintar um quadro a óleo, a primeira coisa de que você precisa é encontrar uma tela. Acontece a mesma coisa com o Silverlight: para que possamos começar a adicionar elementos ao nosso projeto, precisamos primeiro de uma tela para "pintar". E agora temos uma.

E por que, curiosamente, obtivemos uma caixa cinza com 300 pixels de largura por 300 pixels de altura? É simples: essas são as especificações encontradas, por padrão, no arquivo CreateSilverlight.js. Caso você não goste desses valores padrão, basta abrir CreateSilverlight.js e ajustar as configurações conforme o necessário. Você prefere uma tela com 800 pixels de largura por 300 pixels de altura? (Dentre os exemplos que usamos, qual você prefere). Em seguida, basta verificar se há estas três linhas em 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.

Observação: Uma boa questão: no arquivo .js original, o plano de fundo está definido como #D6D6D6. Agora nós o definimos como branco. Na verdade, em um arquivo XAML, é possível usar valores RGB para representar cores ou usar nomes para representá-las. (Consulte msdn2.microsoft.com/bb188314.aspx para obter uma lista completa dos valores e dos nomes das cores). Como grande parte da Equipe de Scripts gosta de se referir às cores pelos valores RGB ("Minha casa? É FFFFFACD com corte em FFCD5C5C"), optamos por usar nomes de cores aqui.

Dica especial: você não está limitado a usar cores sólidas em um plano de fundo de tela. Cole o código da Figura 2 no arquivo XAML e veja o que acontece.

Figure 2 Cores legais

<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>

Você tentou? Muito legal, não?

É claro que uma tela totalmente preta não é muito interessante. Por isso, vamos avançar e adicionar um objeto à tela. Embora o Silverlight permita que você adicione todos os tipos de objetos (inclusive elipses, retângulos, linhas e polígonos), adicionaremos um bom bloco de texto da forma tradicional à nossa tela. Como? Inserindo as seguintes marcas entre as marcas <Canvas> e </Canvas> do nosso arquivo XAML:

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

Como é possível ver, XAML não é, de fato, muito difícil. Começamos usando a marca <TextBlock>, verificando se incluímos os vários parâmetros TextBlock (como, por exemplo, Name e FontSize) na marca. Em seguida, indicamos que passamos pelo nosso TextBlock usando a marca </TextBlock>. O que há de legal nisso? Isso é bastante semelhante à forma como você adiciona qualquer objeto a um arquivo XML. Deseja adicionar um retângulo de 300 pixels de largura por 100 pixels de altura? OK:

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

A propósito, ao adicionar uma forma (como, por exemplo, um retângulo) à tela, verifique se você especificou uma cor de preenchimento e/ou uma cor de traço. Se você não fizer isso, o Silverlight adicionará um retângulo transparente à tela. O retângulo estará lá, na verdade, mas você não conseguirá vê-lo a menos que tenha visão de raios-X como a do Super-homem.

Falando em cores de preenchimento e de traço, é por isso que você colore alguns objetos do Silverlight. Para os demais objetos, você precisa usar um pincel como, por exemplo, o LinearGradientBrush que mostramos (mas não abordamos) em nossa dica especial. Caso prefira pintar objetos com uma cor sólida, você pode usar apropriadamente SolidColorBrush. Por exemplo, observe a marcação XAML na Figura 3 que "pinta" o nosso texto (tecnicamente, ela pinta a propriedade Foreground de TextBlock) de vermelho.

Figure 3 Texto de pintura

<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>

Para obter um efeito ainda melhor, tente usar a propriedade ImageBrush, que preenche o texto com uma imagem:

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

Eis aqui uma outra dica: se tentar usar a propriedade ImageBrush, você certamente desejará aumentar o valor de FontSize porque quanto maior o texto, melhor o efeito.

Faça uma tentativa e veja o que acontece. Você ficará bastante impressionado.

Mas espere: você ainda não viu nada.

Temos de abordar com você: até agora mantive as coisas legais conosco. É legal que seja possível exibir texto no Silverlight; é ainda mais legal que você pode desenhar retângulos, elipses e polígonos. Mas tudo isso não significa nada em comparação com as animações que podem ser adicionadas a um projeto do Silverlight.

Novamente, tudo o que podemos fazer neste artigo é apresentá-lo a algumas das formas com as quais é possível criar a animação do Silverlight; nós apenas não temos espaço para ir além disso (Não nos culpe; continuamos sugerindo que a TechNet Magazine se torne a Ei, Equipe de Scripts! Magazine, mas aparentemente os nossos emails ainda não passaram por isso).

Sem mais a acrescentar, aqui está um efeito legal que faz com que haja fade in no nosso texto (mas certamente). Adicione o código à Figura 4 entre as marcas <TextBlock> e </TextBlock> do arquivo XAML.

Figure 4 Truques de 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>

Com certeza, parece que há muito o que fazer aqui; felizmente, grande parte dela é apenas uma marcação padronizada. Para começar, não basta adicionar uma animação a um arquivo XAML; você precisa indicar quando ela deve ser executada. Isso exige que nós especifiquemos um conjunto de disparadores para TextBlock. Nesse caso, iremos criar um disparador que iniciará a animação sempre que TextBlock for carregado:

<EventTrigger RoutedEvent="TextBlock.Loaded">

No Silverlight, as animações devem acontecer em um storyboard (um termo emprestado da indústria dos filmes). É por isso que temos as marcas <BeginStoryboard> e <Storyboard>.

Para que haja o fade in do nosso texto, precisamos modificar a propriedade Opacity. Aumentaremos gradualmente o valor de 0,0 (transparente) para 1,0 (cor sólida). Como Opacity é uma propriedade Double (uma propriedade baseada em um valor numérico de precisão dupla), usamos uma animação DoubleAnimation. E como usamos uma animação DoubleAnimation? Por que, indicando o objeto que queremos animar (nesse caso, Test, o nome que demos a TextBlock); especificando a propriedade de destino (Opacity) e especificando o intervalo de animação (entre 0,0 e 1,0 de opacidade) e a duração de toda a animação (5 segundos). Em outras palavras:

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

Observação: não se esqueça de usar a sintaxe 0:0:5 (horas, minutos, segundos) para indicar 5 segundos. Usar o valor 5 sozinho não gera erro, mas fará com que a animação demore 5 dias para ser concluída.

Você fez isso? Agora experimente isto: na marca DoubleAnimation, defina a propriedade AutoReverse como True:

AutoReverse="True"

Haverá fade in e fade out na animação.

Defina a propriedade RepeatBehavior como Forever, e continuará havendo fade in e fade out no texto, bem, para sempre:

RepeatBehavior="Forever"

Para sempre é muito? Em seguida, defina RepeatBehavior como, digamos, 3x, para que a animação seja executada 3 vezes e saia em seguida.

RepeatBehavior="3x"

Isso é bem legal, caso nos propusermos a isso. No entanto, e se você não gostar que haja fade in e fade out no texto; e se você quiser que o texto mude de cor gradualmente? Bem, aí você deverá usar uma animação ColorAnimation:

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

Observação: apenas não se esqueça de começar com o texto vermelho caso você tenha escolhido essa cor. Lembre-se de que nós já mostramos como pintar o texto de vermelho.

Foi legal, não foi? E mesmo assim, você parece um pouco desapontado. Ah, é por isso: ColorAnimation foi legal, mas, na verdade, você estava esperando que as coisas saíssem voando pela tela. Ei, não fique triste; que tipo de software seria o Silverlight se não deixasse as coisas voarem pela tela? Experimente isto:

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

Como pode ver, estamos fazendo com que o TextBlock mova-se lentamente de sua posição inicial para um destaque 150 pixels à esquerda da borda da tela (Canvas.Left). Se quisermos mover TextBlock para cima e para baixo, basta usarmos a propriedade Canvas.Top:

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

Poderíamos – que os nossos corações palpitantes se tranqüilizem – combinar essas animações e fazer com que TextBlock se movesse de um lado para outro e de cima para baixo? Não faço a menor idéia. Mas eis uma dica: cole as combinações no arquivo XAML (um após o outro) e veja o que acontece.

Observação: está bem, mentimos — sabíamos desde o início que você poderia combinar essas animações. Na verdade, você poderia colocar várias animações em um único projeto do Silverlight. É um pouco confuso – você talvez tenha que incluir marcações adicionais para garantir que uma animação acabe antes do início da próxima. Mas isso também lhe permite fazer algumas animações bem legais apenas digitando algumas marcas como XML.

Desculpe, pessoal, mas o show acabou

Sim, já sabemos. Também detestamos ir embora, especialmente agora que acabamos de entrar na parte realmente boa. Mas não se preocupe; isso não precisa ser um adeus. Se você quiser saber mais sobre o Silverlight, nos escreva pelo email scripter@microsoft.com. Se houver interesse o suficiente, bem, nós veremos o que podemos fazer nas colunas futuras. Além disso, não deixe de visitar o Script Center da TechNet (microsoft.com/technet/scriptcenter/resources/tnmag/archive.mspx); postaremos links para exemplos de XAML (eXAMLs?) completos para você. Até lá, como disseram Karl Marx e Frederick Engels ao final do seu manifesto, Carta do Comitê de Correspondência Comunista de Bruxelas para G. A. Kottgen, "Boa noite, e vá com cuidado para casa".

A Equipe de Scripts da Microsoft trabalha para a — bem, é empregada da — Microsoft. Quando não está jogando/treinando/assistindo beisebol (e diversas outras atividades), ela administra o Script Center da TechNet. Confira no site www.scriptingguys.com.

© 2008 Microsoft Corporation e CMP Media, LLC. Todos os direitos reservados. A reprodução parcial ou completa sem autorização é proibida..