El Blog de Fox

TwitFox 1.0

Fox — Sun, 20 Dec 2009 13:52:01 +0000

Hola!

He creado un cliente de Twitter, es un cliente sencillito que he hecho con el proposito de aprender y de divertirme un poco.

Os dejo una screen:

Mi primera intención era la de crear un artículo explicando paso por paso como crear un cliente Twitter, pero la verdad es que aunque simple el cliente, ha terminado con más código del que pensaba.

Aun así os daré algunos detalles para que cuando mirés el código pues sepais más o menos qué hace cada cosa.

No he usado ninguna librería concreta para desarrollar esta primera versión del cliente de Twitter. Simplemente he usado el REST API el cual es bastante limitado.

La clase TwitterClient es la que nos permitirá descargar nuestros Tweets y cambiar nuestro estado. No hace nada más. Cuando cambie la librería, añadiré más opciones a la interfaz de dicha clase sin modificar las opciones que ya hay.

Podeis observar que la clase lo que hace es descargar un XML con los tweets y parsearlos.

Por otro lado, podéis ver que la estructura del proyecto es MVP aunque le he añadido tambien la clase DelegateCommand para usar comandos siempre que sea posible.

Lo más complejo del proyecto es la UI, en la cual he usado Data Templates, Fake DataContext (Dos cosas que habéis aprendido aquí), además de un botón custom con una pequeña animación.

El código de la UI quizá sea un poco guarrete, pero es la primera aplicación que hago usando Blend 3 como aplicación de diseño principal.

Nada más, os dejo aquí el enlace a la aplicación:

TwitFox

Un saludo!

Patrones de diseño

Fox — Sun, 13 Dec 2009 21:28:40 +0000

Hola!

Tengo pensado hacer una serie de artículos sobre patrones de diseño.

Iré colocando al menos un par de veces al mes, un artículo enfocado a un patrón de diseño en concreto. Escribiré el motivo del patrón con un buen ejemplo y sobre el código, en un principio estará escrito enfocado a C#, usando las herramientas de las que C# nos provee. Eso si, en caso de que la implementación de C# sea tan tan tan especifica, intentaré proveer de un ejemplo más neutral.

Nada más, a ver si pongo uno esta semana

Un saludo,
Fox

Reseña: C# In Depth

Fox — Fri, 11 Dec 2009 18:04:13 +0000

¿Eres un programador de Java y quieres aprender C#? ¿O bien conoces lo básico de C# y quieres conocer todo lo que ofrece?
En ambos casos, bienvenidos a C# In Depth, EL libro avanzado de C# por excelencia.

Este libro tiene una finalidad muy concreta, enseñar qué ofrece C# 2 y 3.
Al ser un libro avanzado, necesita que o bien seáis programadores de Java o bien que conozcáis C# 1 como mínimo.
Como ya he dicho, este libro es maravilla (sí, parece que todos los libros que leo son maravilla, eso o que pierdo mucho tiempo descartando libros para quedarme con uno decente ), aunque son solo 424 páginas, parecerá que son 2 mil, pues es muy denso.

El libro está dividido en 3 partes, cada una dedicada a las 3 versiones de C# que hay .

Parte 1:
Ya he dicho que este libro se centra en la versión 2 y 3 de C#, pero aun así, el autor quiere dedicar un poco de tiempo a hablarnos de lo que nos ofreció C# cuando nació y además de hacernos ver las cosas que se hacían mal en C# 1 y como C# 2 y 3 nos ofrecen una mejor alternativa para esos casos concretos.
Por otro lado, esta parte empieza con lo típico y es que parece que ningún autor es capaz de resistir la tentación de poner la historia de C#, .NET y toda la pesca.
Después de este aburrido capítulo, empieza ya lo interesante.
Nos recordará algunas cosas básicas de C# para posteriormente mostrarnos que esas cosas maravillosas que usábamos, apestan y que ahora tenemos mejores formas de hacerlo. Básicamente lo que el autor quiere aquí es ponerte los dientes largos mostrándote por ejemplo como molan las Lambdas.

Parte 2:
Ésta parte, titulada “Resolviendo los problemas de C# 1” se centrará en C# 2, el cual tiene jugosas novedades que hará que nuestro código C# sea mucho mejor .
Nos hablará de la necesidad de los genéricos aunque también de sus limitaciones.
También abordará sobre los tipos ‘nullables’, lo cual nos ayudará cuando tratemos con bases de datos.
Veremos cómo implementar mejores delegados gracias a los métodos anónimos.
Un poco de iteradores también y para terminar un conjunto de cosas no menos importantes.

Parte 3:
Esta parte es igual a la anterior, más features pero esta vez las de C# 3.
Tipos anónimos, inicialización simplificada, lambda, métodos de extensión (extension methods) y sobre todo…. LINQ.
Ahora es cuando os emocionáis como yo y decís, uhm ¡LINQ!. Después de más de 300 páginas leídas, viene quizá lo más interesante.
Siento desilusionaros, porque para mí, este es el punto flojo del libro. ¿Por qué? Intenta en poco menos de 100 páginas, explicarnos todo LINQ to Objects, SQL, XML, DataSet pero intenta hacerlo de forma muy bruta ya que intenta meterte ahí con calzador toda la teoría detrás de LINQ la cual no es fácil de digerir.
Yo entiendo que en 100 páginas no se puede explicar todo LINQ, pero yo lo habría dejado en una explicación básica o directamente lo hubiese sacado del libro.
Para aprender LINQ hay otro libro de esta misma casa que ya reseñaré más adelante.

Conclusión:
En conclusión, este libro es la mejor manera para llegar a dominar lo que se dice TODO C#, eso sí, es aburridísimo como habréis podido notar de mi reseña… No deja de ser escupir features una tras otra sin cesar. Aun así, lo hace una forma magistral, fácil de entender y sobretodo fácil de digerir.

Sin más preámbulos:

Positivo:

Nos hace ver lo que hacemos mal y cómo mejorarlo.
Explica todas las features del lenguaje en su versión 2 y 3.
Los ejemplos de código, aunque de juguete, son muy claros.
No deja nada sin explicar, tiene respuesta a todo.

Negativo:

La parte de LINQ, sobraba, muy difícil de asimilar.
Algunas partes muy concretas son duras y difíciles de entender (Lease expression trees).

La nota será de 9.8. Le habría dado más puntos si hubiese quitado la parte de LINQ, puesto que solo hace confundir, y ya lo hubiese rematado si hubiese encontrado una forma de explicar los ‘Expression trees’ de una forma entendible.
Si os termináis de leer este libro, probablemente el próximo a la cola sería el de Linq In Action, ya que explica LINQ de forma magistral y hasta los ‘Expression trees’ los explica bien jeje.

Bueno, os dejo el enlace a la página oficial del libro:

Link

Un saludo,
Fox

[WPF] Datos en tiempo de diseño (Design-time DataContext)

Fox — Wed, 09 Dec 2009 15:13:22 +0000

¡Hola!

Para seguir este artículo necesitaréis de Microsoft Expression Blend 3 o Visual Studio 2010 Beta 2. Además necesitaréis una copia del proyecto del artículo “Data Templates“.

Antes de explicaros qué significa exactamente eso de Datos en tiempo de diseño quiero que veais el problema en vuestras carnes y así buscarle una solución idónea.

Yo usaré Blend 3 así que las imágenes y las instrucciones serán usando este soft, pero se pueden aplicar con Visual Studio 2010 sin ningún problema.

Imaginad esta situación:

Queréis modificar el Data Template que habíamos creado del ejemplo citado. No sé, el borde ese verde que tiene cada item no os gusta y queréis ir probando colores hasta encontrar uno que os guste más. Ningún problema, abres el proyecto con el Blend 3 y….

Vaya tela, nos sale una bonita ventana en blanco… ¿Por qué no sale el contenido? No nos sale porque ni Blend ni Visual studio ni nadie sabe qué ha de representar ahí, o mejor dicho, nosotros estamos ‘bindeando’ ese contenido a una propiedad del DataContext, o sea del ViewModel. Blend no sabe nada sobre ese DataContext que hemos establecido en código, así que el no sabe que ha de mostrar ahi ni nada. Si bien sabe como dibujar el Data Template, no sabe qué ‘Data’ tiene que reprentar ahi.

Entonces con Blend 3 llegó una nueva cosita llamada Datos en tiempo de diseño, o lo que es lo mismo, ofrecerle unos datos ‘de mentira’ a Blend 3 a fin de que los use para dibujar los Data Template en la ventana.

¿Qué quiero decir con eso de ofrecerle unos datos de mentira? Fácil, el ItemsControl está asociado a una lista llamada ListaPersonas, pero dicha lista ‘viene’ del DataContext y como ya os he dicho, el editor visual no puede mostrar nada que venga de ahi, por eso nos aparece la ventana en blanco, porque ignora el DataContext.

Aquí es donde entra el Datos en tiempo de diseño (Design-time Data). es digamos un DataContext especial sólo para diseñar, así podemos mostrar datos ‘Fake’ y ver como quedaría sin ejecutar la aplicación ni nada. Por ejemplo:

Imaginad que estais haciendo una aplicación de Twitter. Cuando la aplicación se conecta a la red, descarga tus tweets, y crea una instancia de la clase Tweet por cada tweet que recoja. ¿Cómo diseñarías la ventana principal del programa? ¿Creas un no sé, ItemsControl y creas un DataTemplate para los Tweet? Es una idea, pero es un coñazo, tienes que crear un template, abrir el programa, conectarte a tu Twitter, que descargue tus Tweets y ver que… oh mierda, ese borde no moooola nada. Cierras la aplicación, modifica el borde y otra vez a probarlo. Si tienes que hacer eso 50 veces para dejar el estilo a tu gusto, mueres.

¿Qué hacer entonces? Creas una clase llamada… FakeTweets por ejemplo que herede de la clase que usa tu ventana de DataContext, ahí instancias la lista del datacontext, creas unos cuantos tweets de mentira y usas la técnica que explicaré a continuación

Este ejemplo es algo muy común, porque donde dices Twitter, dices aplicación de msn y su ventana de contactos, etc.

Vamos a nuestra aplicación que ya está abierta en Blend, y añadimos lo siguiente dentro del Tag de la ventana…

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:DataTemplates"
mc:Ignorable="d"

Con lo que quedaría así:

Voy a detallar para qué sirve cada uno:

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:DataTemplates"

Los 3 son namespace como podeis ver, cada uno con una idea en mente.

El primero es el que añade todo el tema de Datos en tiempo de diseño.
El tercero es para importar el namespace de nuestra aplicación (luego veremos por qué)
El segundo va en conjunto con:

mc:Ignorable="d"

El namespace ‘mc’ que hemos importando antes nos sirve para usar el Ignorable. ¿Para qué sirve esto? Sirve para excluir todo lo que sea del namespace indicado a la hora de compilar. ¿Por qué ignoramos el namespace ‘d’? Porque lo que nos ofrece son cosas que nos facilitan la vida a la hora de diseñar la aplicación, pero que a la hora de ejecutarla ya no nos sirve. Así que la aplicación compilada no contendrá nada de lo que coloquemos de cara a ayudarnos a diseñar.

¿Y ahora qué? Ahora tenemos que cargar en el XAML la clase con los datos ‘fake’ (como por ejemplo la clase con tweets de mentira), en nuestro caso nos basta con cargar el Presenter ya que trae datos de ejemplos que nos servirá para el caso.

Para esto podemos usar por ejemplo un ObjectDataProvider:

Como ves, he cargado el Presenter (usando el namespace local que cargué antes) y le he dado el nombre de FakeVM.

Ya solo nos quedaría cargar dicho objeto dentro del Data Context en tiempo de diseño, el cual está en el namcespace ‘d’.

En nuestro ejemplo, se lo asignaremos al ItemsControl como era de esperar:

NOTA: El método que he descrito aquí, inclusive los namespaces de blend, sirve tanto para Blend 3 como para Visual Studio 2010 (Beta 2 en adelante)

ahora, si vamos al modo diseño…

Ya se ve!! Pero dirás… ¿Y ahora qué? ¿Puedo modificar el template en modo diseño y en ver los resultados en tiempo real? Claro que sí!

En Blend 3, abajo a la izquierda nos aparecerá el arbol de objetos de nuestra aplicación:

Screenshot

Ahi hacemos click derecho en ItemsControl y luego Edit Aditional Templates -> Edit Generated Items (ItemTemplate) -> Edit Current. Al hacer esto vemos como se señala el primer objeto del ItemsControl (ya que realmente editando uno, cambian todos).

Ya solo nos queda hacer los cambios pertinentes, por ejemplo cambiando el borde de cada objeto por uno con gradiente Negro <-> Blanco. Comprobareis con alegría que mientras moveis el cursor en la paleta de colores, el resultado se va viendo en tiempo real, y no necesitaréis ejecutar la aplicación con cada cambio.

Así que en resumen, teneis una manera de poder diseñar los Data Templates de forma visual usando datos ‘fake’ y que no afectará para nada a la aplicación compilada.

Espero vuestros comentarios

Nueva versión de Apunta Notas 2

Fox — Thu, 17 Sep 2009 21:27:35 +0000

Hola!

Siento no escribir tanto como me gustaría, pero estuve de exámenes hace poco, y ahora he empezado a trabajar.

Bueno, antes de dichos exámenes escribí una nueva versión del Apunta Notas y la anucio por aquí para que la probeis.

Dicha versión tiene:

Ahora al borrar una categoría te da la opción de borrar todas las notas asociadas a ella.
Si decides no borrar dichas notas, se enviarán a una categoría oculta llamada “Papelera”.
Ahora al pulsar intro se añadirá la nota automaticamente (antes no me funcionaba por un pequeño bug que no veía)
Los rectangulos de los colores también son botones para seleccionar el color
Algun bug solucionado

Quizá se me olvide algo, pero ahora no caigo, realmente metí muchas mejoras a lo largo de 2 dias de trabajo con el.

Los enlaces están donde siempre

A ver si este fin de semana puedo hacer algo más interesante.

Apunta notas 2

Fox — Sat, 22 Aug 2009 17:24:08 +0000

¿Os acordais del Apunta notas? Seguro que sí

Pues aquí estoy orgulloso de presentaros la nueva versión de mi programa de notas. Como veréis a continuación, el cambio es significativo:

Como podéis ver, ahora soporta distintas categorías y estas, distintos colores.

No sólo eso, si no que además podeis ampliar el tamaño de las notas por si quereis verla desde lejos del monitor[1]:

También tiene un editor de categorías donde podrás modificar todos los apartados de éstas como podéis ver aquí:

Como veis, podeis cambiar el nombre, color de fondo, color de texto… y además podéis ver una vista prévia de la nota para ver como quedará.

Para más detalles y descarga podéis visitar la página de Apunta Notas 2.

[1]: Yo personalmente apunto las cosas que le quiero comentar a mi novia y cuando la llamo me tumbo en la cama, así que pongo las notas bien grandecitas y así las veo desde allí

[WPF] Data Templates

Fox — Sun, 16 Aug 2009 21:07:05 +0000

Hola buenas!

Estáis deseosos de aprender más maravillas de WPF, ¿verdad? Pues nada, aquí os traigo algo muy util que os podría venir bien para vuestros propios desarrollos.

Empezamos con la gran pregunta:

¿Qué son los Data Templates?

Imagina que tienes una clase llamada Persona, Animales, etc. y queréis representar instancias de dichas clases visualmente en vuestro programa, el problema como ya sabes es que dichas clases no tienen ninguna representación visual, con lo cual el resultado de ligar una instancia (o una lista de instancias) a un control como por ejemplo un ItemsControl sería el de llamar al método ToString de la instancia lo que nos da un resultado pésimo.

¿Qué podemos al respecto? Pues lo que estabas pensando si, usar Data Templates.

¡Al turrón!

Creamos un nuevo proyecto llamado Data Templates y creamos una clase llamada Personas, dicha clase contendrá este código:

public class Persona
{
    public string Nombre {get; set; }
    public string Direccion { get; set; }
    public string Telefono { get; set; }
    public int Edad { get; set; }
    public string Sexo { get; set; }
    public string UrlImagen { get; set; }
    public string Color { get; set; }

    public Persona(string nombre, string direccion, string telefono,
                    int edad, string sexo)
    {
        Nombre = nombre;
        Direccion = direccion;
        Telefono = telefono;
        Edad = edad;
        Sexo = sexo;

        if (Sexo.Equals("Hombre"))
        {
            Color = "#bcebf9";
            UrlImagen = "Imagenes\\hombre.png";
        }
        else
        {
            Color = "#f8c2cd";
            UrlImagen = "Imagenes\\mujer.png";
        }
    }

    public override string ToString()
    {
        return string.Format("Hola me llamo {0}, vivo en {1}, mi telefono es {2}, tengo {3} años y soy {4}", Nombre, Direccion, Telefono, Edad, Sexo);
    }
}

Nada aquí que os vaya a sorprender, una clase Persona, que aunque bastante mejorable, va de sobra para nuestro ejemplo. Puntualizo un par de cosas:

Ignorad por ahora el tema de las imagenes y el color, eso se usará más adelante (también meteremos las imagenes más adelante en el proyecto)
El método ToString solo es para ver como quedaría la cosa sin Data Templates y luego se borrará.

Ahora creamos una clase llamada Presenter y le añadimos el siguiente código:

class Presenter
{
    private List listaPersonas;

    public Presenter()
    {
        listaPersonas = new List();

        listaPersonas.Add(new Persona("Jesus", "Calle 13", "132456789", 23, "Hombre"));
        listaPersonas.Add(new Persona("Rosi", "Big street 15", "987654321", 27, "Mujer"));
        listaPersonas.Add(new Persona("Álvaro", "To lejos street", "147258369", 24, "Hombre"));
    }

    public List ListaPersonas
    {
        get { return listaPersonas; }
        set { listaPersonas = value; }
    }
}

Una clase normal y corriente, simplemente creamos una lista de personas y añadimos algunos ejemplos de personas.

Ahora abrimos el code-behind de la ventana (Windows1.xaml) y modificamos el constructor para que quede de esta manera:

public Window1()
{
    InitializeComponent();
    DataContext = new Presenter();
}

Y ahora, abrimos la ventana en sí y colocamos este markup:

Aquí simplemente añadimos un ItemsControl vacío al que le ligamos la lista que hemos creado anteriormente.

Ahora ejecutamos la aplicación y vemos el resultado:

Como podeis ver, apesta, es lo más cutre “ever seen”, así que vamos a arreglarlo usando los Data Templates.

Antes que nada, me gustaría explicar una cosilla para que no os lieis tanto:

Hay 2 clases bases para los controles, por un lado tenemos la clase ContentControl de la cual heredarán aquellos controles que solo tienen una pieza de contenido, como button, Label, etc.
Por otro lado tenemos la clase ItemsControl de la cual heredarán aquellos controles que muestran una colección de items, como TreeView, ListBox, etc.

Si con la funcionalidad básica que nos ofrecen dichas clases bases vamos bien, no tenemos por qué usar ninguna hija, y en este caso como habeis visto, hemos usado simplemente un ItemsControl pues es todo lo que necesitamos.

Bueno, al grano, si queremos usar los Data Templates, lo unico que debemos hacer es decirle al control, en este caso el ItemsControl, que vamos a definir el aspecto de cada item del control, ¿Cómo? Así:

...

Ahí, donde están los puntos suspensivos pues añadimos todo el xaml necesario para lograr el aspecto que queramos. Recordad que estamos definiendo el aspecto de UN solo item y no de toda la colección a la vez, así que ahi escribimos como queremos que se vea cada item y ya se aplicará para todos los items de la lista.

Así que sabiendo esto, vamos a modificar nuestro ejemplo.

Para empezar, puedes borrar el ToString de la clase Personas que ya no nos vale, una vez hecho esto, creamos el directorio Imagenes dentro del proyecto y ahi metemos las dos imágenes que voy a adjuntar a continuación (boton derecho -> guardar como):

[Imagen hombre]

[Imagen mujer]

Ya lo único que nos queda es modificar el ItemsControl añadiendole el template de cómo queremos que se represente cada instancia de la clase.

El código de la ventana quedaría así:

Bueno, aunque os de miedo al principio, el código es bastante facilón.

Añadimos un borde y dentro pues un grid y dentro de dicho grid colocamos los controles para representar los datos.

Aquí muy importante decir, que el DataContext dentro del DataTemplate será la instancia del objeto con el que estamos tratando, así que por ejemplo:

Aqui con Nombre no nos estamos refiriendo a una propiedad llamada Nombre dentro de Presenter (el DataContext de la ventana), si no a la propiedad Nombre de las instancias de Persona que tiene la lista.

Ahora estáis viendo el uso que le doy a la propiedad Color dentro de la clase Persona, lo uso para definir el color de fondo del item. Sé que no debería añadir esta propiedad dentro de la clase, pero lo hago con motivos ilustrativos simplemente.

Creo que aquí no hay más nada que requiera de una explicación, aunque si os dejaré una screenshot para aquellos que no estén escribiendo el ejemplo en sus ordenadores.

Bueno, creo que no se me olvida nada, ahora solo queda esperar vuestros comentarios para ver que os ha parecido el artículo.

Os adjunto el proyecto : DataTemplates.rar

Silverlight & HTML & Apache

Fox — Fri, 24 Jul 2009 13:56:26 +0000

Buenas!

Mucha gente piensa, de hecho, yo también lo pensaba en su día, que para poder usar Silverlight necesitaríamos un servidor Windows corriendo IIS y una aplicación web usando ASP.NET.

Investigando descubrí que podía embeber una aplicación Silverlight dentro de un simple HTML. Gracias a esto, podemos embeber dicha aplicación en cualquier tipo de página, ya sea PHP u otra cosa.

No solo eso, si no que podemos correr dicha página web bajo un servidor Apache ya sea en Windows o Linux. Ahora te surgirán las dos típicas preguntas: ¿Cómo?, ¿Por qué funciona?. Paso a contestarlas:

¿Por qué funciona en algo que no sea Windows e IIS?

Silverlight no se ejecuta en el servidor, Silverlight se ejecuta en el cliente, es un plugin del navegador, así que somos nosotros quienes necesitamos tener Silverlight instalado.

Así que al ser nosotros quienes ejecutemos la aplicación, el servidor simplemente necesita conocer los ficheros de Silverlight y nada más.

¿Cómo lo hago?

Tendremos que modificar el fichero .htaccess e insertar estos MimeTypes:

AddType application/x-silverlight-app xap
AddType application/x-silverlight-2 xap

Realmente con uno nada más funciona, pero mejor insertamos ambos y nos quitamos de tener que editar luego el html para cambiar el MimeType.

Y bueno, ya que estamos, podriamos insertar todos estos:

AddType application/x-ms-application application
AddType application/x-ms-manifest manifest
AddType application/octet-stream deploy
AddType application/vnd.ms-xpsdocument xps
AddType application/xaml+xml xaml
AddType application/x-ms-xbap xbap
AddType application/x-silverlight-app xap
AddType application/x-silverlight-2 xap

Con todos estos, podremos hacer uso del ClickOnce que nos ofrece el Visual Studio para distribuir nuestras aplicaciones de forma más comoda, en este caso, desde nuestra web.

Y nada más, con esto ya podemos usar alojar nuestra aplicación Silverlight en un servidor Linux con Apache.

Vale, y… ¿Ahora como incrusto la aplicación en el HTML?

Más facil todavía.

Si creamos una aplicación Silverlight en el Visual Studio, nos dará la opción de crear un proyecto ASP.NET, pero si le decimos que no, nos creará un .html básico con el objeto ya embebido.

Básicamente, al compilar una aplicación Silverlight, se creará un fichero .xap que no es más que un .zip que contiene los ficheros .xaml, los dll necesarios… Vamos, algo parecido a los .jar de Java.

Ahora con este .xap, solo necesitaremos embeberlo en el .html usando un código como este:

Con esto, dentro de ese div tendremos nuestra aplicación Silverlight embebida.

Esto sería un ejemplo completo de página HTML que contiene simplemente el Silverlight.




    SilverlightApplication1

Con el CSS ajusto el tamaño de la aplicación Silverlight. Imagino que no será la mejor forma para hacerlo, pero todavía estoy verde con la programación web

Ejemplo de aplicación Silverlight embebida aquí en el artículo

Eso es todo amigos.

¿Por qué mola WPF?

Fox — Fri, 05 Jun 2009 16:11:53 +0000

Hola!!

Lo prometido es deuda, así que vamos a escribir el por qué mola WPF.

¿Por qué mola WPF?

Microsoft ha estado analizando qué cosas hacia falta mejorar y hacer más cómodas en la programación de escritorio y con esos datos pues creó WPF, una librería que automatiza y nos pone fácil muchas de esas cosas que con otra librería sería difícil de conseguir.

Así que me gustaría hacer un pequeño tour mostrando las features más llamativas de WPF y transmitiros la misma sensación que yo tuve cuando las descubrí.

XAML

XAML, pronunciado “Zammel” es el nuevo lenguaje creado por Microsoft para la creación de interfaces de usuario en WPF y Silverlight.

XAML es muy parecido al XML de toda la vida y además la creación de interfaces nos recordará mucho a crear una web con XHTML.

Por ejemplo, crear un botón sería tan fácil como esto:

Como podéis ver, es bastante sencillo de entender, hemos creado un botón y establecido propiedades y eventos. Vamos, sería algo del tipo:

Podéis asignar cualquier número de propiedades y eventos, o ninguno vaya.

También podéis crear objetos de la siguiente forma:

Ésta forma es para tener más control de lo que hace el botón, pero eso ya está fuera del alcance de este tour.

La idea de XAML es buena porque un diseñador no tiene que saber nada de programación. Simplemente conociendo XAML podrá crear cualquier tipo de interfaz gráfica sin saber nada de C# o VB.NET (o IronPython, etc)

Otra cosa importante de XAML, aunque no es nuevo, viene bien recordarlo, y es que los hijos de los elementos pueden heredar cosas del padre, así que si el padre implementa cualquier cosa, el hijo también lo hará, aunque si al hijo le vuelves a implementar la misma cosa, se aplicará este último (Luego lo veremos con más detalle).

Layouts y Attached Properties

Si habéis creado interfaces por ejemplo con Swing alguna vez, ya conoceréis los layouts, o sea, esa manera que tenemos de organizar los controles por la interfaz.

WPF tiene menos layouts que Swing por ejemplo, pero si son más potentes gracias a las features que nos da WPF.

Voy a presentar algunos para que los conozcáis:

DockPanel: Es probablemente mi layout favorito. Con este layout podremos asignar controles a distintas partes de una ventana, por ejemplo un menú en la parte de arriba, un statusbar en la parte de abajo, una barra a la izquierda… Con la particularidad, que el último elemento que añadamos podrá usar el espacio restante de la ventana si así lo deseamos.

También podemos añadir varios controles al mismo lado de la ventana.

Veamos un ejemplo:

Aquí como podéis ver, el hijo de la ventana es un DockPanel y dentro hemos creado 3 cosas diferentes:

Un Menu

Un StatusBar

Un TextBlock

El menú lo hemos anclado a la parte superior de la ventana, el statusbar en la parte inferior, y en la parte que sobra, hemos puesto un textblock con un mensajito.

Aquí es donde entran en juego las attached properties, ésto es uno de los nuevos features de WPF y es bastante interesante y da mucho juego.

Las attached properties son una forma de “propagar” las propiedades de una clase a otra clase distinta, o sea, es una forma de usar ciertas propiedades en una clase que de otra forma sería imposible.

Por ejemplo, si tenemos una lista y cada elemento de una lista tiene un botón en el cual todos hacen la misma función (borrar el elemento de la lista), podríamos decirle a cada botón que escuche el evento clicked y que todos apunten al mismo controlador del evento. Es una buena solución, pero con las attached properties podemos decirle a la lista en si, que implemente el evento clicked del botón y que borre el elemento seleccionado. Así solo tendríamos un controlador y el evento puesto en un solo lado y no en cada botón que creemos. ¿Cómo hacemos esto? Simplemente “propagamos” el evento clicked de la clase Button y ya todos sus hijos pues lo implementarán por lo que dije antes de heredar lo del padre.

Esa lista en concreto se podría haber creado así:

...

Como veis, le digo que implemente una attached properties, en concreto el evento clicked de un botón.

Volviendo a nuestro ejemplo del DockPanel, podeis ver que los distintos hijos de éste, usan una attached properties del propio DockPanel, en este caso, dicha attached properties nos sirve para colocar los controles en las distintas partes de la ventana. ¿Mola verdad? Así no hay que ir diciendole al DockPanel que añada tales controles en tales partes, ya son los propios controles los que lo deciden.

Vamos a ver ahora algún layout más, por ejemplo el StackPanel. El StackPanel como su nombre indica, es un tipo de layout donde los elementos que vayamos añadiendo se irán colocando unos debajo de otro. Veamos un ejemplo:

Nada nuevo por aquí. Creamos el StackPanel y dentro de este vamos colocando controles los cuales se irán colocando uno debajo del otro.

Por último vamos a enseñar el que probablemente es el layout más flexible. El Grid.

Veamos el ejemplo primero:

En el Grid, tenemos que definir el numero de columnas y filas, además de establecer alguna de sus propiedades (opcional).

El Grid es bastante flexible y personalizable. Es este caso he creado una tabla 2×2 como podeis ver. Lo interesante es que podemos definir el tamaño de cada fila/columna de la forma que queramos. En este caso casi todas están en auto, lo que quiere decir es que tendrán el tamaño exacto que ocupe el elemento más grande que contiene, lo cual está bastante bien. Una de las columnas tiene el tamaño puesto en “*” eso quiere decir que use el espacio restante, o sea, si la ventana ocupa 300 pixeles de ancho y en la otra columna el elemento más ancho ocupa 50 pixeles, la otra columna ocupará pues 250 pixeles, que es pues el espacio restante.

El resto de código ya no es tan complicado, como podéis ver, hacemos uso de las attached properties para colocar cada control dentro de la zona del Grid que queramos.

Aparte de estos layouts existen otros varios, pero ya se sale del este tour.

La propiedad Content

Ésta es probablemente una de mis features favoritas de WPF y sin duda una de las más alabadas.

Muchos de los controles de WPF tienen una propiedad llamada Content. Ésta propiedad es la que usamos para describir lo que hay dentro de los controles.

Por ejemplo, en un botón, la propiedad Content la usaremos para especificar el texto que usará el botón, o sea:

También podría ser escrito de la siguiente forma:

Este ultimo funciona bien gracias a una feature de WPF llamada Type Converters que convierte esa cadena en un elemento del tipo TextBlock, pero vamos, eso lo explicaré en su dia en otro artículo pues está fuera del alcance de este. Además, lo que pongas entre la etiqueta de abrir y la de cerrar, será el Content del objeto.

Ustedes os preguntaréis, ¿Cual es la parte que mola? Pues esto lo hacen todos los “rivales” de WPF.

Faaaaacil, la propiedad Content de los controles, es del tipo Object lo cual nos permitirá poner CUALQUIER COSA como contenido de ese control.

Ya os veo imaginando las posibilidades de esto, no sé, para poner alguna disparatada… Un navegador dentro de un botón, una lista en la que cada elemento sea como tu quieras, un menú que muestre videos como iconos…

Y sobretodo, poder poner un panel como la propiedad Content y así tener mucha más flexibilidad.

Imaginad que estais haciendo un reproductor de audio o video (que dicho sea de paso, es algo trivial en WPF) y quereis personalizar un poco los botones, y por ejemplo, un botón que ponga “Stop” asi a pelo pues no mola tanto:

Sin embargo molaría más que además tuviera el icono del stop, así que podríamos hacer:

¿Mejor verdad? Hemos creado un boton donde su Content sea un StackPanel (orientado horizontalmente) y ahi meter un cuadradito negro y un texto. Podeis cambiar el cuadradito por otra cosa más sotisficada como una imagen o lo que querais.

Ejemplos más completos requieren de features que desconoceis, así que después pondré un ejemplo más chulo sobre este tema.

Data Binding

Otra de las features clave de WPF. Los Data Binding no son una cosa nueva de WPF ni mucho menos, pero WPF las lleva a otro nivel y son suuuuuuper sencillas de usar.

Para los nuevos, ¿Qué son los Data Bindings?. Son básicamente una forma de enlazar una propiedad de un objeto con la propiedad de otro objeto. Puede ser entre controles, entre un control y una clase nueva…

Vaaamos con un ejemplo que será lo mejor:

Aqui un siiiiiimple ejemplo, tenemos una ventana con 2 Sliders y un Elipse, el elipse irá creciendo variando en tamaño conforme movamos los sliders (¡Y todo esto sin código!). ¿Cómo? Pues con los Data bindings

Lo interesante del XAML es el elipse en si:

Ahi podéis ver las propiedades Width y Height con una sintaxis más extraña de la que ya conoceis.

Lo que está dentro de las llaves se llama Markup Extensions y que básicamente son una forma de extender la expresividad de XAML hasta limites insospechados. Las cadenas que metemos son evaluadas en tiempo de ejecución (casi todas) lo cual pues está bien. Iremos viendo ejemplos de Markup Extensions más adelante.

En este caso, el Binding es un markup extension y su sintaxis es básica:

Propiedad=”{Binding Propiedad, ElementName=elementoABindear}”

Bueno, realmente no es una sintaxis fija, puedes ignorar el ElementName si el contexto donde esté el control sea el objeto a usar y bla bla, vamos, esto es más bien para presenter el binding en si, hablar de todo su poder lleva unas 30 páginas de un libro o más.

Errr a lo que iba… En este caso, podeis ver que anclamos el ancho del elipse a la propiedad Value del elemento ancho (el slider de abajo). Lo mismo con la propiedad alto pero con el otro slider.

Entonces, cada vez que deslizo los sliders, las propiedades del elipse van cambiando también.

Estilos

¡Las interfaces WPF pueden ser estilizadas como si con CSS se tratase! Pero eso si, esto es más potente que el CSS .

Por ejemplo, basándonos en el ejemplo anterior del elipse con los sliders, vamos al fichero app.xaml del proyecto y lo dejamos así:

Los estilos se crean con la etiqueta Style y en dicha etiqueta definimos el TargetType donde usando un markup extension podemos especificar el control concreto en el que se aplicará el estilo. Con esto, todos los elementos de ese tipo, que estén dentro del “foco” de donde hayamos creado el estilo (al crearlo en el app.xaml, el estilo es aplicado en toooooda la aplicación, pero podriamos haberlo creado en una ventana y solo se aplicaría a dicha ventana.)

Además, podriamos crear un estilo que solo se aplicara a los elementos que nosotros quisieramos, simplemente añadiendo la propiedad Key con un nombre y usar dicho nombre para aplicar los estilos manualmente, pero ya sabes, eso está fuera del ambito de este artículo.

Bueno, siguiendo con el estilo. Crear un estilo es fácil. Simplemente es ir colocando Setters para cada propiedad que queramos. Cada setter lleva 2 propiedades, en property especificamos la propiedad a modificar, y en value el valor que queramos darle.

Como podeis ver, el valor no tiene por que ser simple. Puede ser tan complejo como quieras, y ahi en el ejemplo podeis ver como a la propiedad Fill le metemos un degradado ahi majo en vez de un color liso.

Luego, el elipse de la aplicación no deberá hacer nada para aplicar el estilo, así que quedaría así:

Si ahi colocamos por ejemplo la propiedad Fill, se sobreescribiria la del estilo.

Los estilos son herramientas MUY potentes que nos permiten crear estilos para nuestras aplicaciones de forma fácil como si fuese el CSS de una web. Realmente se puede hacer muchisimo más de lo aqui expuesto, pero eso se deja para otro artículo.

Triggers

Los Triggers son una especie de lanzadores que se ejecutan cuando se dan ciertos casos.

Por ejemplo, podría crear uno para que cuando pase el raton por uno de los sliders, aparece un brillo rojo alrededor de el y que cuando saque el ratón de ahi se quite. Se podría crear un evento para el “mouseenter” y el “mouseleft” para poner o quitar el brillo respectivamente. También se podrían utilizar triggers.

Abre el app.xaml y justo debajo del estilo del elipse, escribe:

La sintaxis es como la de los estilos, solo que esta vez meteremos el setter dentro de un Trigger.

No me voy a marear demasiado en explicar su sintaxis, puesto que seria mejor hacerlo en otro artículo, pero básicamente comprueba si el ratón está encima del control y si está aplica un brillo de color rojo.

Como verás, con los triggers se pueden hacer muchas cositas como girar un boton cuando lo selecciones, o que de vueltas o no sé, ahi entra tu imaginación.

Resumen

Ésta es la punta del iceberg de WPF. Éstas son algunas de las cosas que hace que WPF sea GRANDE.

Hay más cosas que me he dejado en el tintero, ya sean porque todavia no las conozco lo suficiente como para haberlas incluido y otras porque sería complicar mucho el artículo.

Pero aun así, espero que este artículo os haya hecho ver lo que es WPF y lo que puede hacer por vosotros.

Por otro lado, cada aspecto aquí presentado lo está de una forma básica y cada una de esas cosas dan mucho más de si.

Además WPF permite hacer dibujos 2D, 3D, animaciones, transformar elementos para girarlos o doblarlos…

Pero vamos, la gracia es la que está aqui presentada.

Si habeis llegado hasta aquí, dejad un comentario que no tardareis mucho

Reseña: Teach Yourself WPF in 24 Hours

Fox — Wed, 27 May 2009 19:31:14 +0000

Si quieres iniciarte en el mundo de WPF, tienes una pareja de libros que son idóneos para esta tarea.

Así que vamos a empezar analizando uno de ellos: Teach Yourself WPF in 24 Hours.

No os dejéis llevar por el título del libro, ya que estamos ante una grandiosa obra maestra.

Sé que la serie de libros de Teach Yourself XXX in YY días / horas (e incluso en minutos lo he visto) no tiene buena fama, ya que la gente opina que es imposible aprender a usar lo que el libro explica en el tiempo que el libro dice que tardarás en aprenderlo.

Si bien esto es cierto en algunos casos, en este no lo es, ya que te aseguro que cuando termines de leer todos los capítulos, tendrás la base suficiente como para empezar a hacer tus propias creaciones con WPF.

El libro como habréis podido deducir está dividido en 24 capítulos de 1 hora de duración aproximada. Bueno, la mayoría si lo son, algunos duran algo más y otros algo menos, pero la media está en 24 horas si.

Estos 24 capítulos están a su vez divididos en 4 partes. ¿Por qué pongo tanto énfasis en como está divido el libro? Fácil, este es un libro orientado a proyectos, ¿Qué quiero decir con esto? Pues que en cada parte de libro se desarrollará un programa 100% funcional.

No solo es bueno porque vayamos a practicar con ejemplos reales, sino que además la curva de aprendizaje es digna de elogio y es la curva más asequible que existe actualmente en un libro de WPF.

Parte 1:

El libro empieza con una ligera introducción a XAML (pronunciado ‘Zammel’) que es el lenguaje que se usa para crear las interfaces en WPF, también explica un poco el como organizar los controles por la ventana (layouts) y una pequeña introducción a los “Data Bindings” en WPF.

Iremos aprendiendo estas cosas a la par que construimos un visor de fuentes escrito 100% usando XAML, o sea, nada de código C# (o VB.NET, ironPython…).

Como primer ejemplo, el visor de fuentes no está mal, muestra todas las fuentes instaladas en el sistema y te deja probarlas con cualquier frase que elijas y te la muestra en distintos tamaños.

Parte 2:

Aquí ya se va introduciendo la colaboración entre XAML y tu lenguaje de programación favorito, además introduce algunos nuevos conceptos como los “Commands”. También te explica como definir los eventos de la interfaz, pero nada nuevo para los que ya han usado Windows Forms u otra librería por el estilo.

Aquí ya se introduce un programa más complejo, un editor de texto clon a WordPad, permitiendo formateado de texto.

Aquí ya empezareis a ver las maravillas de WPF, puesto que con los Commands no tendrás que picar nada de código para implementar cosas tales como el undo, redo, copiar, pegar,guardar, abrir, nuevo… Vamos, una virguería esto de los Commands, además podremos crear los nuestros propios, algo que sin duda amareis cuando tengáis más practica con WPF.

El editor de texto además nos permitirá imprimir e incluso nos mostrará una vista previa del texto para ver como quedará imprimido.

Parte 3:

Si con la parte 2 os quedasteis sorprendidos, con esta os quedareis sin palabras, os lo prometo.

Se introducen temas como los estilos, algo así como el CSS pero mucho más potente y flexible. También se aprenderá más sobre los Data Bindings y un poco de Data Templates.

Lo realmente BUENO de esta parte es el programa que se crea, que aunque no muy útil, tiene tal cantidad de buen código, que no pararás de aprender cosas con el.

El programa en si es una pequeña agenda de contactos. Lo particularmente bueno con la aplicación es que está construida usando MVP (vamos fue de aquí donde aprendí yo a usarlo) y bueno, es más bonita que las anteriores, ya que se añaden estilos a la ventana y mejora muchísimo visualmente.

También podréis ver las maravillas de usar los Data Bindings; Actualizas el nombre de un contacto en la parte principal de la aplicación y mágicamente se actualiza en la barra superior, en la lateral y en todos lo sitios donde aparezca, y eso con 0 líneas de código.

En resumen, una aplicación bonita visualmente, haciendo un buen uso de lo que ofrece WPF y con una buena estructura de código.

Parte 4:

Y es aquí la ultima parte del libro, con la aplicación más espectacular de todas. También la más larga.

Una pequeñita introducción al 2D creando todo tipo de figuras y líneas. También se profundiza en los temas de estilos, pero esta vez enfocados al tema de transformaciones, efectos, controles personalizados, animaciones, triggers (también para efectos). Vamos, un tema muy muy visual, puesto que estamos ante una aplicación que lo necesita.

Ya tendréis curiosidad de saber que tipo de aplicación se hará aquí. Nada más y nada menos que un programa multimedia donde podemos ver imágenes, vídeos u oír música. Tendrá una interfaz bastante maja y bien cuidada.

Bueno, una vez analizado el libro, vamos a ver los aspectos positivos y negativos:

Positivo:

Curva de aprendizaje muy baja

Orientado a proyectos

A todo color, tanto código como imágenes.

Cubre casi todo lo que ofrece WPF

Negativo:

No se profundiza al 100% en cada aspecto importante de WPF, solo habla de lo que necesita para cada aplicación concreta, aun así, es mucho.

Alguna errata en el libro, pero nada demasiado grave.

Como nota final, debo deciros que el código está en C#.

La nota que le daré a este libro será de 9.5 / 10. Te preguntarás que como es que no le pongo un 10 con lo emocionado que parezco con este libro, y la razón la puse en la primera oración de ésta reseña. Es uno de 2 libros para aprender WPF, ya que hay muchas cosas de WPF que se quedan en el tintero en este libro, cosas que el otro libro si explican, pero es más aburrido que este.

Por si tenéis curiosidad, el otro libro es el de “WPF Unleashed” de Adam Nathan, considerado el mejor libro de WPF del mercado (aunque yo considero que es necesario ambos libros), del cual hablaré más adelante

Os dejo un enlace:

Web oficial