Qué tal, a través de estas líneas intentaré presentarles a todos algunos tips, tutoriales y artículos sobre TI, que espero les sean útiles a toda esa banda de geeks que infestan la red, y que carecen de vida social (juar juar) y comparten la misma pasión por el extreme coding.
Con su ayuda, todo esto irá tomando forma. No es un blog, como siempre lo he dicho, no creo en los blogs, y mucho menos para escribir trivialidades como mi vida o a donde voy o que hice durante el día, pero sí creo en la red como fuente de información, mi objetivo será precisamente saber, que allá afuera, alguien vivo, alguien real pone en práctica lo que exponemos aquí, por lo que si en algún momento encuentran aplicable y/o interesante lo que decimos aquí, me harían inmensamente feliz si me lo hacen saber.
Así que a lo que nos truje… Let da fun begin, empezaré con una serie de entregas de .NET 3.0
Introducción
Seguramente, todos han oido hablar del .NET Framework 3.0 y seguramente todos ya hasta debatimos sobre el tema pavoneando que sabemos mucho jeje. Lanzo ahora el reto ¿Quién ya ha hecho algún experimento real con esta nueva tecnología? Seguramente pocos. Y no los culpo, realmente es un dolor de cabeza, que las versiones, que las betas, que ya no se llama WinFX, que cambian los nombres de los namespaces al mismo ritmo que las contradicciones de Fox y que las arañas. ¡Puaf! Pues a grandes males, grandes remedios. He aquí la receta (tipo Cositas) para que ustedes pasen horas de sana diversión con .NET 3.0 y puedan presumir a sus amiguitos J.
WPF (Windows Presentation Foundation) es parte del .NET Framework 3.0, y el .NET Framework 3.0 es un súper conjunto del .NET Framework 2.0, liberado en 2005. Con la llegada de este framework surgió un desacoplamiento del CLR con las clases del Framework, por ejemplo el CLR 1.1 funcionaba con el Framework 1.1 y el CLR 2.0 con el Framework 2.0, el embrollo es que ahora el .NET Framework 3.0 sigue ejecutándose bajo el CLR 2.0. En otras palabras, el .NET Framework 3.0 es el .NET Framework 2.0 más WPF, WCF, WWF e Infocard. ¡Plop!
Bill y sus muchachos creyeron que todo sería más fácil así. Ustedes tienen la última palabra…
Más allá de los nombres
Sin tanto rollo WPF, es a grandes rasgos, una nueva API que provee nuevas y mejores funcionalidades para manejar gráficos dentro del sistema operativo, y desde el punto de vista de los desarrolladores simplifica en gran medida el tratamiento de gráficos, ya que sin WPF es necesario utilizar DirectX, OpenGL y/o tener gran conocimiento de lenguajes como C++. Ahora muchas clases y funciones gráficas están encapsuladas dentro del .NET Framework, para que el programador disfrute de la sintaxis familiar que los lenguajes de .NET ofrecen.
Además, WPF introduce XAML que es un lenguaje declarativo y basado en marcas (etiquetas) al igual que XML o HTML, que puede ser utilizado para facilitar aun más el desarrollo de objetos gráficos. Cuando uno escribe XAML, su parser lo lee y se ejecutan los métodos y/o atributos de las clases correspondientes al .NET Framework. (algo parecido a lo que sucede con los web-controls de ASP.NET, que son clases serializadas en XML y programables declarativamente)
XAML representa los objetos en forma de markup y a cada objeto del .NET Framework corresponde una etiqueta en XAML por lo que su sintaxis es sencilla y no es necesario aprender ninguna implementación adicional de un objeto en XAML porque su etiqueta se llamará igual que la clase del .NET Framework
Por ejemplo si nosotros declaramos un botón, en Visual Basic se vería así:
Dim Boton As System.Windows.Controls.Button
Y la representación correspondiente en XAML es muy sencilla
<Button Name="Button1" VerticalAlignment="Top" >
Como se puede ver, es posible establecer las propiedades de los objetos mediante el uso de atributos propios del XML.
Otro de los objetivos de WPF es disminuir la brecha entre el desarrollo web y el desarrollo Windows. Actualmente utilizamos Webforms (páginas ASP.NET) si deseamos escribir una capa de usuario para web, y utilizamos Winforms si queremos hacer lo mismo para Windows. Evidentemente esto representa un doble trabajo, toda vez que el modelo de programación es distinto para ambas plataformas.
Con XAML es posible reutilizar el código para cualquiera de las plataformas y sólo hacer cambios mínimos (y en ciertos casos, ninguno) para que una implementación de capa de usuario funcione en una u otra plataforma.
Y ahora, al más puro estilo de Cositas, DevelopersDotNet se complace en presentar un tutorial para hacer una aplicación WPF para Windows.
Necesitaremos…
1) Windows XP SP2 o Windows Vista
2) Visual Studio 2005 (no betas, ni demos, ni nada por el estilo, la versión final, cualquiera pero final)
3) Microsoft Visual Studio Code Name “Orcas” Community Technology Preview – Development Tools for .NET Framework 3.0 - Descargable desde:
http://www.microsoft.com/downloads/details.aspx?FamilyID=f54f5537-cc86-4bf5-ae44-f5a1e805680d&DisplayLang=en5
4) Si tu sistema operativo es Windows XP SP2, deberás descargar además el .NET Framework 3.0 - Descargable desde: http://www.microsoft.com/downloads/details.aspx?FamilyID=10cc340b-f857-4a14-83f5-25634c3bf043&DisplayLang=en
5) Unas tijeras de punta chatita
Una vez que hayas instalado todo esto, tu Visual Studio 2005 tendrá instalado unos bonitos templates. Estos templates se encuentran agrupados dentro de la categoría Windows (WinFX) e incluyen WinFX Windows Application, que, como su nombre lo indica, genera un proyecto para utilizar el .NET Framework 3.0 desde una aplicación Windows. También tenemos al Web Browser Application que genera un archivo XBAP que es una aplicación de WPF para ejecutarse desde un browser etc.
Para efectos de este primer tutorial, veremos la manera de crear una aplicación utilizando WPF en Windows.
(Si te sigues preguntando para qué son las tijeras, sólo son requeridas sólo si no te sale nada y si deseas cortarte las venas no me hagas responsable. Hahaha, sí, humor de informático, lo siento)
Al momento de seleccionar Nuevo Proyecto, selecciona WinFX Windows Application
Ahora Visual Studio está preparado para que tú, modifiques el XAML del archivo Window1.xaml
Dentro de la ventana de edición aparecerá una ventana para poder editar el XAML
Internamente Visual Studio generará archivos .g representando los objetos de .NET derivados markup de XAML.
Ejecuta la aplicación y verás cómo tienes una aplicación Windows, sin WinForms, pero generada a través de los objetos de WPF.
Detén la ejecución de la aplicación y ahora localiza las etiquetas <Grid></Grid> dentro de tu archivo XAML y escribe dentro de éstas, copia y pega el siguiente código
<DockPanel
Width="Auto"
VerticalAlignment="Stretch"
Height="Auto"
HorizontalAlignment="Stretch"
Grid.ColumnSpan="1"
Grid.Column="0"
Grid.Row="0"
Margin="0,0,0,0"
Grid.RowSpan="1">
<StackPanel>
<StackPanel.Background>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Color="Green" Offset=".1"/>
<GradientStop Color="White" Offset=".5"/>
<GradientStop Color="Red" Offset="1"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</StackPanel.Background>
</StackPanel>
</DockPanel>
Ejecuta la aplicación… ¿No es conmovedor? Ahora tenemos los bonitos colores patrios, a propósito de septiembre. Vamos a seguirle. Después de el cierre de la etiqueta </DockPanel> vamos a agregar un botón con el siguiente código
<Button Name="Button1" VerticalAlignment="Top" Height="28.2" Margin="121,6,113,0" ToolTipService.HasDropShadow="True" ToolTip="Pushame!">
WPF es la neta!!!
</Button>
Ejecuta y el resultado debería ser como el siguiente:
Evidentemente al hacer click en el botón no sucederá nada. Vamos ahora a ver como agregar un manejador de evento dentro de XAML e implementarlo con código de Visual Basic.
Modifica la etiqueta Button agregando el manejador de evento Click
<Button Name="Button1" VerticalAlignment="Top" Click="Saludar()" >
WPF es la neta!!! </Button>
Posteriormente deberemos escribir el código para manejar el evento. En la vista Source, después del constructor de la clase Window1 pega el siguiente código
Public Sub Saludar(ByVal sender As Object, ByVal e As RoutedEventArgs)
MsgBox("Hola soy un mensaje desde el manejador de eventos")
End Sub
Ejecútalo. ¿A que te recuerda este tipo de programación?, ¡Desde luego! a Javascript, imagína ahora el poder que tienes en tus manos. Acceder a todo el poder de WPF desde un lenguaje de scripting.
Ahora vamos a pintar un bonito círculo. Hacerlo es sencillo. Se logra con el siguiente código después del cierre de la etiqueta Button. En este caso, la clase Path define las características del trazado de la línea y dentro de ella definiremos una clase llamada EllipseGeometry que como su nombre lo indica pinta una geometría elíptica. Como los radios son iguales pintará un círculo perfecto. Posteriormente volveremos a utilizar las técnicas de gradiente tonal que ya utilizamos para pintar el verde, blanco y rojo. El código es el siguiente.
<Path Name="MiPath"
Width="800" Height="800"
StrokeThickness="20" >
<Path.Data>
<EllipseGeometry x:Name="MiGeometria" Center="200,200" RadiusX="150" RadiusY="150" />
</Path.Data>
<Path.Stroke>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0" Color="White" />
<GradientStop Offset="1" Color="Purple" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Path.Stroke>
</Path>
Al ejecutar este programa deberías tener algo como esto
Ahora pondremos texto dentro de ése círculo. Dentro del alcance de la etiqueta <Path>Utilizaremos una VisualBrush, que es utilizada para rellenar elementos y un TextBlock para pintar el texto, además de nuestra ya conocida LinearGradientBrush para ponerle otro degradado.
<Path.Fill>
<VisualBrush>
<VisualBrush.Visual>
<TextBlock Text="¡Viva México!" FontWeight="Bold" Padding="10">
<TextBlock.Foreground>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0" Color="Blue" />
<GradientStop Offset="1" Color="Yellow" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</TextBlock.Foreground>
<!-- Aqui irá más código. -->
</TextBlock>
</VisualBrush.Visual>
</VisualBrush>
</Path.Fill>
Al ejecutar este código deberías ver el círculo rellenado con un texto con los colores azul y oro J como el siguiente…
Sí, sí muy entretenido. ¿Y eso es todo? Por supuesto que no. Ahora crearemos una animación muy sencilla.
Shake it baby!
Ahora haremos que ese texto que acabamos de pintar se mueva como las mismas caderas de Shakira, utilizando <TextBlock.TextEffects> que nos permiten modificar la apariencia y el comportamiento de un bloque de texto. Posteriormente indicaremos que deseamos iniciar la animación en el momento que sea cargado el TextBlock, que contiene el Viva México por lo que haremos uso de <EventTrigger RoutedEvent="TextBlock.Loaded"> así como de un <Storyboard> que representa una línea de tiempo y su relación con los objetos y propiedades que implementarán la animación y de un <DoubleAnimation> que anima una propiedad de tipo Double usando interpolación linear con una duración especificada con el atributo Duration.
El código que debes copiar es el siguiente, en el lugar donde se encuentra el comentario <!-- Aqui irá más código. -->
<TextBlock.TextEffects>
<TextEffect PositionCount="1" x:Name="MyTextEffect">
<TextEffect.Transform>
<RotateTransform x:Name="TextEffectRotateTransform"
Angle="0" CenterX="10" CenterY="10" />
</TextEffect.Transform>
</TextEffect>
</TextBlock.TextEffects>
<TextBlock.Triggers>
<EventTrigger RoutedEvent="TextBlock.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ParallelTimeline RepeatBehavior="Forever">
<DoubleAnimation
Storyboard.TargetName="TextEffectRotateTransform"
Storyboard.TargetProperty="Angle"
From="0"
To="360"
Duration="00:00:0.30"
/>
</ParallelTimeline>
</Storyboard>
</BeginStoryboard>
</