¡Hola, encargados del scripting!Hágase de Silverlight

Los encargados del scripting

Descargar el código de este artículo: HeyScriptingGuy2007_10.exe (156KB)

La historia de la humanidad ha estado marcada durante mucho tiempo por el choque de fuerzas diametralmente opuestas: Los romanos contra las hordas bárbaras; los Montesco contra los Capuleto; los encargados del scripting contra los que creen que un artículo acerca de scripting de administración de sistemas debe hablar en realidad acerca de la administración de sistemas antes que, por ejemplo, del choque histórico entre fuerzas diametralmente opuestas. [o, pongamos, de ganchos de carnicero... (nota del director)]

El mundo de la informática no está inmune a estos choques entre fuerzas diametralmente opuestas. En particular, se menciona el choque entre desarrolladores y administradores del sistema. Como Karl Marx dijo al inspeccionar la situación: "este hombre está muerto o mi reloj se ha detenido".

Espere, perdón, en realidad era Groucho Marx. Karl Marx dijo: "el arte es siempre y en todas partes la confesión secreta y, al mismo tiempo, el movimiento inmortal de su tiempo". Para ser sinceros, no tenemos la menor idea de lo que significa. Además, Groucho Marx era bastante más gracioso que Karl Marx, aunque las ocurrencias de Groucho no sean muy relevantes para el choque entre desarrolladores y administradores del sistema.

No obstante, estamos casi seguros de que fue Karl Marx quien acostumbraba a obligar a los encargados del scripting a recitar el himno a la automatización cada mañana antes de trabajar: "los administradores del sistema no son desarrolladores". Y realmente era una gran verdad: los administradores del sistema no eran desarrolladores. Los desarrolladores eran personas que escribían los programas, mientras que los administradores del sistema eran personas que... bueno, sinceramente, no estamos seguros de que nadie de Microsoft sepa en realidad qué hacían los administradores del sistema. Pero fuera lo que fuera, seguro que no escribían programas de software.

Por supuesto, Karl Marx también es el autor de la canción "Los tiempos están cambiando" (o eso nos contó).

Gracias en parte al TechNet Script Center (microsoft.com/technet/scriptcenter), los administradores del sistema gradualmente descubrieron VBScript y comenzaron a escribir sus propias utilidades, que, aunque no sean tan completas y extensas como los programas típicos, realizan útiles tareas de administración. Para escribir estas utilidades, los administradores del sistema han tenido que apelar a habilidades muy semejantes a las que usan los desarrolladores.

Y eso para empezar. La llegada de Windows PowerShell™ (microsoft.com/technet/scriptcenter/hubs/msh.mspx) implica que Microsoft® .NET Framework ya no está fuera del alcance de los administradores del sistema y escritores de script. Windows Vista® presentó los gadgets al mundo (microsoft.com/technet/scriptcenter/topics/vista/gadgets-pt1.mspx) y puso a los administradores del sistema (o al menos, a los que escriben scripts), en pie de igualdad con los desarrolladores. Y ahora (redoble de tambores) llega Microsoft Silverlight, el "complemento que sirve para todos los exploradores y plataformas que permite vivir la próxima generación de experiencias de medios y aplicaciones interactivas enriquecidas para la Web basadas en .NET Framework".

Suena bien, ¿no? Pero, se preguntará, ¿y esto qué tiene que ver con los creadores de scripts de administración de sistemas como usted? Para ser sinceros, no estamos totalmente seguros. Sin embargo, Silverlight hace muy fácil la creación de interfaces de usuario y presentaciones multimedia atractivas. Y aunque el material de marketing se refiere invariablemente a Silverlight como una manera de crear aplicaciones web, una verdad poco conocida es que Silverlight parece funcionar igualmente bien en aplicaciones HTML y en HTA (microsoft.com/technet/scriptcenter/hubs/htas.mspx), un medio muy apreciado por los escritores de script. Por tanto, quizá merezca la pena intentar usar Silverlight.

Antes de que continuemos...

Debemos indicar que no hablaremos hoy sobre muchas funciones y posibles usos de Silverlight; nuestro objetivo principal es mostrarle suficientes fragmentos de código para que jugar con la tecnología. Si desea instalar Silverlight (es gratis, por cierto), vaya a la página principal de Silverlight en microsoft.com/silverlight. También puede encontrar los SDK, proyectos de ejemplo y otros materiales útiles en silverlight.net/GetStarted.

Por ahora, daremos hecho que ya instaló Silverlight. También asumiremos que ya fue a la sección Code Downloads del sitio web de TechNet Magazine (technetmagazine.com/code07.aspx) y descargó los archivos que se describen en la figura 1.

Figure 1 Componentes de proyecto de Silverlight

No necesitará SampleProject.js obligatoriamente, al menos para seguir el artículo de este mes. Silverlight le permite adjuntar scripts a objetos y eventos en su proyecto; dichos scripts se pueden codificar en su archivo HTML o (como en este caso) leer desde un archivo "include" externo como éste. Además, vamos a convertir SampleProject.html en una HTA: simplemente cambie el nombre por SampleProject.hta. ¿Fue fácil, no?

Asegúrese de guardar en una carpeta todos estos archivos. Y, a continuación, prepárese para la diversión.

El archivo XAML

Como quizás adivinó, todo el entusiasmo del artículo ¡Hola, encargados del scripting! de este mes gira en torno al archivo XAML. (A propósito, XAML se pronuncia "zamel," que rima con camel (camello). O con mammal (mamífero). O también con enamel [encía]. XAML es un acrónimo de lenguaje de marcado de aplicaciones extensible. Entre otras cosas, XAML ofrece una manera de crear interfaces de usuario que usan un lenguaje similar a XML. ¿Facilita esto a alguien, especialmente a un administrador del sistema, la creación de interfaces de usuario? Está a punto de averiguarlo.

Para comenzar este ejercicio, inicie el Bloc de notas y abra el archivo SampleProject.xaml. Si observa que existe código, reemplácelo con lo siguiente:

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

Nota: SampleProject.hta ya está preconfigurado para cargar información de SampleProject XAML. Para usar un archivo XAML diferente, necesita editar el archivo CreateSilverlight.js.

Después de pegar el código, guarde el archivo y, a continuación, haga doble clic en SampleProject.hta. ¿Adivina lo que verá? Exacto: un enorme e inútil cuadro gris.

Pero espere, no se vaya. Es exactamente eso lo que debe ver.

No hay mucho por ver simplemente porque aún no hemos hecho nada: todo lo que hicimos hasta ahora es agregar un lienzo a nuestro archivo XAML. Pero ése es un paso importante. Después de todo, si desea probar pintura al óleo lo primero que debe hacer es encontrar un lienzo para pintar. Lo mismo sucede con Silverlight: antes de que podamos empezar a agregar elementos a nuestro proyecto necesitamos primero un lienzo sobre el que "pintar". Y ya lo tenemos.

A propósito, ¿por qué obtuvimos un cuadro gris de 300 píxeles de ancho por 300 píxeles de alto? Muy fácil: ésas son las especificaciones que se encuentran, de forma predeterminada, en el archivo CreateSilverlight.js. Si no desea esos valores predeterminados, simplemente abra CreateSilverlight.js y ajuste la configuración según sea necesario. ¿Preferiría un lienzo blanco de 800 píxeles de ancho por 300 píxeles de alto? Probablemente lo preferirá para los ejemplos que estamos a punto de usar. Simplemente asegúrese de que estas tres líneas están presentes en 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. Buena observación: en el archivo .js original el fondo está establecido en #D6D6D6. Ahora lo establecimos en blanco. Pero resulta que en un archivo XAML se pueden usar valores RGB para representar los colores, o se pueden usar nombres de colores para representar los colores. Vaya a msdn2.microsoft.com/bb188314.aspx para obtener una lista completa de los valores y los nombres de los colores. Dado que los encargados del scripting prefieren referirse a los colores por sus valores RGB ("¿Mi casa? Es una FFFFFACD con molduras FFCD5C5C"), decidimos usar aquí los nombres de colores.

Otra sugerencia: no se limite a usar colores sólidos para el fondo del lienzo. Pegue el código de la figura 2 en su archivo XAML y observe el resultado.

Figure 2 Colores elegantes

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

¿Lo intentó? Queda bien, ¿no?

Por supuesto, un lienzo en blanco por sí mismo no es muy interesante. Así que sigamos adelante y agreguemos un objeto al lienzo. Aunque Silverlight le permite agregar todo tipo de objetos diferentes (incluidos elipses, rectángulos, líneas y polígonos), agregaremos a nuestro lienzo un bloque de texto clásico. ¿Cómo? Mediante la inserción de las siguientes etiquetas entre las etiquetas <Canvas> y </Canvas> de nuestro archivo XAML:

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

Como puede ver, este asunto del XAML realmente no es tan difícil. Empezamos mediante la etiqueta <TextBlock>, y nos aseguramos de incluir los distintos parámetros de TextBlock (como Name y FontSize) dentro de la etiqueta. a continuación, indicamos que terminamos nuestro TextBlock mediante la etiqueta </TextBlock>. ¿Cuál es la ventaja de este sistema? Esta es prácticamente lo único que hay que hacer para agregar cualquier objeto a un archivo XAML. ¿Desea agregar un rectángulo de 300 píxeles de ancho por 100 píxeles de alto? De acuerdo:

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

A propósito, al agregar una forma (por ejemplo, un rectángulo) a su lienzo, asegúrese de especificar un color de relleno y un color de trazo. Si no lo hace, Silverlight agregará un rectángulo transparente al lienzo. El rectángulo existirá, pero a menos que tenga visión de rayos X como Superman, no podrá verlo.

Hablando de colores de relleno y colores de trazo, ésta es la manera en que se asignan colores a algunos objetos de Silverlight. En otros objetos, necesita usar un pincel, como LinearGradientBrush que ya le mostramos (pero no analizamos) en nuestra sugerencia adicional. Si prefiere pintar objetos con un color sólido, puede usar SolidColorBrush, que por cierto, responde bien a su nombre. Por ejemplo, examine el etiquetado XAML de la figura 3 que "pinta" nuestro texto de rojo (técnicamente, pinta la propiedad Foreground de TextBlock).

Figure 3 Pintura de texto

<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 obtener un efecto más atractivo, pruebe la propiedad ImageBrush, que rellena texto con una imagen:

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

Y he aquí otra sugerencia más: Si prueba la propiedad ImageBrush, probablemente deseará aumentar el valor de FontSize porque cuanto más grande es el texto, mejor es el efecto.

Inténtelo y verá lo que sucede. Como es de esperar, le resultará llamativa.

Pero espere: Todavía no ha visto nada

Tenemos que ponernos al mismo nivel: hasta ahora nos hemos reservado lo mejor para nosotros. Está muy bien poder mostrar texto en Silverlight y aún está mejor poder dibujar rectángulos, elipses y polígonos. Pero todo eso no es nada cuando se compara con las animaciones que se pueden agregar a un proyecto de Silverlight.

Nuevamente, lo único que podemos hacer en este artículo es presentarle algunas maneras de crear animaciones en Silverlight: ir más allá supondría ocupar un espacio que no tenemos. (No es culpa nuestra: seguimos insistiendo en que TechNet Magazine se convierta en la revista ¡Hola, encargados del scripting!, pero parece que hay algún problema para que nuestros mensajes de correo electrónico lleguen a sus destinatarios.)

Pero vayamos al grano: he aquí un efecto atractivo para que el texto se intensifique de manera lenta (pero segura). Agregue el código de la figura 4 entre las etiquetas <TextBlock> y </TextBlock> en su archivo XAML.

Figure 4 Trucos 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>

Hay que admitir que parece una operación compleja, pero afortunadamente, la mayor parte es sólo etiquetado repetitivo. Para empezar, no basta con agregar una animación a un archivo XAML; necesita indicar cuándo se supone que esa animación se reproducirá. Eso requiere que especifiquemos un conjunto de Triggers para el TextBlock. En este caso, crearemos un desencadenador que iniciará la animación cada vez que se cargue TextBlock:

<EventTrigger RoutedEvent="TextBlock.Loaded">

En Silverlight, las animaciones deben hacerse en un guión gráfico (un término que se toma prestado de la industria cinematográfica). Por eso tenemos las etiquetas <BeginStoryboard> y <Storyboard>.

Para hacer que nuestro texto se intensifique, necesitamos modificar la propiedad Opacity. Aumentaremos gradualmente el valor desde 0.0 (transparente) a 1.0 (color sólido). Debido a que Opacity resulta ser una propiedad Double (una propiedad basada en un valor numérico de doble precisión), usamos una animación DoubleAnimation. ¿Y cómo hacemos para usar una animación DoubleAnimation? Indicando el objeto que deseamos animar (en este caso Test, el nombre que asignamos a TextBlock); especificando la propiedad de destino (Opacidad); y, a continuación, especificando el rango de animación (de opacidad 0.0 a opacidad 1.0) y la duración de la animación completa (5 segundos). En otras palabras:

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

Nota. Asegúrese de usar la sintaxis 0:0:5 (horas, minutos, segundos) para indicar 5 segundos. Si usa el valor 5 de forma independiente no generará ningún error, pero la animación tardará 5 días en completarse.

¿Lo intentó? Ahora pruebe lo siguiente: dentro de la etiqueta DoubleAnimation, establezca la propiedad AutoReverse en True:

AutoReverse="True"

Su animación se intensificará y volverá a atenuarse.

Establezca la propiedad RepeatBehavior en Forever y su texto continuará intensificándose y atenuándose, pero para siempre:

RepeatBehavior="Forever"

¿Es para siempre demasiado tiempo? Establezca RepeatBehavior en, por ejemplo, 3x, para que la animación se reproduzca 3 veces y, a continuación, salga.

RepeatBehavior="3x"

Todo muy bonito, nos decimos. Sin embargo, ¿qué sucede si no le gusta que un texto se intensifique y después se atenúe? ¿Qué sucede si prefiere que un texto cambie gradualmente de color? En tal caso debe usar una animación ColorAnimation:

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

Nota. Asegúrese de empezar con texto rojo si prueba el ejemplo siguiente. Recuerde que ya le mostramos cómo pintar su texto de rojo.

Divertido, ¿verdad? Y aún así, parece un poco decepcionado. Ah, esa es la razón: ColorAnimation estuvo bien, pero en realidad esperaba poder hacer que los objetos volaran alrededor de la pantalla. No se ponga triste. ¿Qué clase de software sería Silverlight si no le permitiera hacer volar los objetos vuelen por la pantalla? Pruebe esto:

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

Como puede observar, hacemos que nuestro TextBlock se mueva lentamente desde su posición inicial hasta un lugar ubicado a 150 píxeles del borde izquierdo del lienzo (Canvas.Left). Si deseamos mover TextBlock hacia arriba y abajo, simplemente hay que usar la propiedad Canvas.Top:

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

¿Podríamos (aguantad la respiración) combinar estas animaciones y hacer que TextBlock se mueva de lado a lado y de arriba a abajo? No tenemos ni la más mínima idea. Pero he aquí una sugerencia: pegue ambas animaciones en su archivo XAML (una a continuación de la otra) y observe lo que sucede.

Nota. Muy bien, era mentira: ya sabíamos que podría combinar estas animaciones. De hecho, podría llenar un único proyecto de Silverlight con un montón de animaciones. Es un poco complicado, quizás tendría que incluir marcado adicional para asegurarse de que una animación termina antes de que comience la siguiente. Pero esto también le permite realizar algunas animaciones muy elegantes simplemente con escribir algunas etiquetas similares a XML.

Lo sentimos amigos; terminó la presentación

Sí, lo sabemos: también lamentamos tener que irnos, especialmente ahora que empezamos con el material realmente bueno. Pero no se preocupe; esto no tiene que ser una despedida. Si desea conocer más acerca de Silverlight, escríbanos unas líneas a scripter@microsoft.com. Si hay suficiente interés, veremos lo que podemos hacer en los próximos artículos. Además, asegúrese de pasar por el TechNet Script Center (microsoft.com/technet/scriptcenter/resources/tnmag/archive.mspx); publicaremos vínculos para completar los ejemplos XAML (¿eXAMpLos?). Hasta entonces, como Karl Marx y Frederick Engels dijeron al final de su declaración desde el Comité comunista de correspondencia de Bruselas a G. A. Kottgen, "Buenas noches, y conduzcan con cuidado".

Los encargados del scripting trabajan para Microsoft, mejor dicho, están contratados por Microsoft. Cuando no juegan al béisbol, ni entrenan ni lo ven (u otras actividades varias), dirigen el TechNet Script Center. Visite la página web www.scriptingguys.com.

© 2008 Microsoft Corporation and CMP Media, LLC. Reservados todos los derechos; queda prohibida la reproducción parcial o total sin previa autorización.