Una de las mayores diferencias que encontramos con Flash, es que Silverlight y WPF no son “un programa” sino que son una tecnología en sí misma. Expression Blend es tan solo un programa que nos ayuda a “moldear” esa tecnología de una manera sencilla. Por poner un ejemplo, Blend es a XAML lo que Dreamweaver es a HTML. La tecnología es HTML pero Dreamweaver nos ayuda a, sin tener que tocar código, componer nuestro HTML.
Si habéis usado Dreamweaver, sabréis que esto es una verdad a medias. Porque o bien dreamweaver acaba metiendo código “basura” o no hace exactamente lo que queremos que haga. Así que lo más conveniente saber HTML y corregir a mano muchas cosas, incluso a veces hacerlo todo a mano desde 0.
Con Blend pasa exactamente igual, a veces Blend nos generará un código XAML que tendremos que cambiar a mano, así que voy a explicar brevemente…
¿Que es XAML?
Xaml es un lenguaje declarativo de Decorado (Markup) basado en XML. (Para que nos entendamos, es un HTML muuuy avanzado.) En él, se definen elementos y acciones que se representarán en el programa. Estos elementos, tienen una serie de propiedades que definen su forma, estado, color, tamaño, etc... Voy a poner un ejemplo.
<Button Height="57" Width="100" Content="mi Boton"/>
Como veis, con una sola línea, podemos hacer un botón. Exactamente como HTML. Los elementos o controles de usuario se definen como he dicho por propiedades. En este caso, el botón tiene un ancho “100”, un alto “57” y un contenido “mi botón”. Estas son propiedades simples. Donde una propiedad tiene un valor sencillo, como “40”, “Hola”, “#ffffffff”, etc...
Pero existen propiedades que son más complejas y no se podrían expresar como una palabra o numero. Esas, como es el caso de los rellenos degradados se escriben de esta forma.
<Button Height="57" Width="100" Content="mi Boton">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFFFFF"/>
<GradientStop Color="#FFFF0000" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
Abrimos el Nodo del elemento y metemos un hijo con esta nomenclatura <Elemento.Propiedad> y dentro metemos la información. Esto nos da un boton tal que así.
No os asustéis! como os he dicho, no tenéis que escribirlo vosotros. De hecho si todo va bien, apenas veréis el código, tan solo la interfaz grafica de Blend tal y como pasa en Flash.
Con XAML podéis hacer todo tipo de cosas, Dibujos vectoriales, Animaciones, Videos, Fotos, meter sonidos, hacer un Layaout dinámico, hacer gran parte de la interacción, meter incluso 3D (en WPF). No tenéis ningún limite os lo aseguro.
No obstante tal y como pasa en flash, llega un momento en el que la interacción se vuelve compleja y necesitamos programar que es lo que va a pasar. Por ejemplo, que pasa cuando hago clic en un botón. En flash es sencillo, nos vamos a la ventana de acciones y escribimos miboton.mouseDown = function(){}
En Blend, no tenemos ventana de acciones pero tenemos algo mejor e infinitamente más potente…
El Code Behind
Todos los archivos XAML tienen un “compañero” que se llaman igual pero terminan en XAML.CS (en el caso de C#). Si empezamos un proyecto de Silverlight veréis que hay un archivo Page.Xaml y otro Page.Xaml.cs
Estos son los archivos de “Code Behind” o Código trasero. Aquí estará toda la funcionalidad de nuestro elemento que no podamos hacer directamente en XAML.
En nuestro XAML, en el botón que tenemos en Page.Xaml hacernos referencia a una función que está escrita en su Code Behind, es decir en Page.Xaml.cs
Page.Xaml
<Button Height="57" Width="100" Content="mi Boton" Click="Button_Click"/>
Page.Xaml.cs
private void Button_Click(object sender, RoutedEventArgs e)
{
this.Background = new SolidColorBrush(Colors.Blue);
}
Lo bueno del tema, es que los Archivos CS podemos editarlos con VisualStudio 2008 lo que nos da una potencia increíble, y además vuestro programador estará muy contento. Ya que es un lenguaje que seguramente conozca (se puede programar en C#, Visual Basic, Phyton o Ruby) lo cual no está nada mal.
Bueno creo que hasta aquí los conceptos que menos se parecen a flash y pueden ser un poco más complicados. El resto será mucho más visual y divertido.
Próximo: Blending Flash Parte 3: Interfaz de Blend ~ Flash.