Hay varias formas de animar, pero quizás una de las más sencilla y potente sea la animación de transformaciones con el método BeginAnimation.

Las transformaciones.

En WPF existen varios tipos de transformaciones:

• RotateTransform. Cambia la orientación de un elemento.
• ScaleTransform. Cambia el tamaño de un elemento.
• TranslateTransform. Cambia la posición de un elemento.
• TransformGroup. Es un tipo de transformación especial, ya que consiste en una combinación de las tres anteriores.

Animar transformaciones.

La idea es simple: Una animación consiste en modificar progresivamente el valor de una propiedad durante un periodo de tiempo. En principio, se puede animar cualquier propiedad de dependencia del API de WPF.

Concretamente, las transformaciones usan propiedades de dependencia para modificar el aspecto del elemento en el que se aplican; así que si aplicamos una animación sobre una propiedad de una transformación de cualquier tipo, el resultado será una animación sobre el elemento.

El código para aplicar una transformación es sencillo. Se puede aplicar desde XAML o desde C#, pero en lo personal prefiero hacerlo en XAML:

	<Image x:Name="MyImage" Source="images/myimage.png" Width="100" Height="100">
		<Image.RenderTransform>
			<TransformGroup>
				<TranslateTransform x:Name="Translacion" X="85" />
				<RotateTransform x:Name="Rotacion" Angle="0" CenterX="15" CenterY="15" />
			</TransformGroup>
		</Image.RenderTransform>
	</Image>

Fijaos que al usar el nodo “TransformGroup” podemos aplicar más de una transformación. De no usarlo sólo podríamos aplicar una, ya que el nodo “Image.RenderTransform” sólo admite un nodo hijo. Notad también que las transformaciones se aplican desde la última a la primera. No es lo mismo mover y rotar, que rotar y mover.

Las animaciones y el método BeginAnimation.

A nivel práctico, una animación es un objeto con una serie de propiedades configuradas, como por ejemplo la duración de la animación, la aceleración, el valor inicial y final de la propiedad, etc. Dependiendo del tipo de dato que queramos animar, el objeto de animación cambia. No es lo mismo animar un color (ColorAnimation) que una orientación (DoubleAnimation). Se pueden ver todos los tipos de animación posible en la especificación de la clase madre: AnimationTimeLine.

Para aplicar una animación sobre una transformación, contamos con un potente aliado: el método BeginAnimation, presente en todas las transformaciones. Al método BeginAnimation se le pasan dos parámetros: la propiedad de dependencia a animar, y la animación. La animación deberemos construirla en base a lo que queremos animar, la propiedad de dependencia es una propiedad estática de la clase a la que pertenece el elemento que queremos animar. Por ejemplo, si queremos animar el ángulo de un RotateTransform, tendremos una propiedad estática “RotateTransform.AngleProperty“. Más fácil con un poco de código C#:

	DoubleAnimation animacion = new DoubleAnimation();

	animacion.To = 180;
	animacion.Duration = new Duration(TimeSpan.FromMilliseconds(1000));

	Rotacion.BeginAnimation(RotateTransform.AngleProperty, animacion);

Es todo por el momento.

Y en realidad no hay mucho más que decir sobre animaciones. Sólo destacar que, como imagináis, el objeto animación tiene eventos que informarán del estado del proceso, y que no son bloqueantes (es decir, mientras una animación se ejecuta, el flujo del programa no se detiene, por lo que necesitan una gestión asíncrona). También destacar que la animación se iniciará en el instante en que se ejecute el método BeginAnimation.

Si queréis aprender sobre animaciones más complejas, os recomiendo que miréis el objeto StoryBoard.

Hablamos un poco de todo lo que implica la Surface y el desarrollo de aplicaciones para este dispositivo. Fue una experiencia muy gratificante.

Dejo la descarga del Power Point que redacté para la ocasión, por si os interesa.

Microsoft Surface.

1. El control ScatterViewItem es la base de toda aplicación.
2. La mayoría de las veces, no queremos que el ScatterViewItem tenga la apariencia tan horrible que tiene por defecto, es más, nos interesará que sea “invisible”.
3. El control ScatterViewItem no proporciona ningun sistema simple para volverse invisible.

Así que despues de trastear un poco con Microsoft Expression Blend, conseguí montar un pequeño estilo que podemos aplicar a nuestros ScatterViewItem para que estos sean invisibles. Esto es, inapreciables para el usuario. Por lo tanto, el contenido se verá perfectamente, pero las sombras, reflejos, destellos y demás tonterías, no.

Este es el estilo en cuestión:

<Style x:Key="InvisibleScatterViewItem" TargetType="{x:Type s:ScatterViewItem}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type s:ScatterViewItem}">
                <ContentPresenter />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Espero que os sirva tanto como a mí.

El componente ScatterView es quizás uno de los mejores ejemplos de esto. Este es el primero de varios artículos en el que veremos cómo se usan y qué posiblides nos ofrecen.

Sobre el componente ScatterView

Un ScatterView representa un elemento que reacciona a los contactos sobre Surface y que se puede mover, rotar o redimensionar.

El ejemplo más clásico sería un puñado de fotografías. Cada una de esas fotografías puede ser un ScatterView.

Preparamos el proyecto

Antes de iniciar el Visual Studio, debemos haber iniciado el emulador de Surface que viene con el SDK. Si no lo has hecho así, cierra el Visual Studio y inícialo todo en el orden correcto.

Creamos el proyecto

Nuestro proyecto va a ser una aplicación para Surface basada en WPF. Lo llamaremos HelloScatterView.

Al crear nuestro proyecto se nos ha creado una ventana por defecto: SurfaceWindow1. La renombraremos, y le pondremos el nombre de “XamlSample“.

Añadimos unas imágenes

Para poder trabajar con los ScatterViews, necesitaremos algunas imágenes.

Dentro de nuestro proyecto Surface tenemos una carpeta llamada Resources. Crearemos otra carpeta en su interior llamada Img y ubicaremos ahí nuestras imágenes.

Añadir ScatterViews desde XAML

ScatterView simple con XAML

Comenzaremos usando los ScatterViews desde XAML. En realidad añadir un ScatterView es muy simple:

<s:ScatterView>
    <Image Source="Resources/Img/fuente_tres_chorros.jpg"/>
</s:ScatterView>

Este es el código que añade un ScatterView. Fijaos en un detalle: añadir un ScatterView no es sólo añadir el nodo ScatterView, también es añadir el recurso que se manejará, en este caso la imagen. Y es que un ScatterView no es una imagen, sino la capacidad que tiene un elemento (en este caso una imagen) de ser rotado, redimensionado y movido.

El XAML completo de la ventana es este:

<s:SurfaceWindow
    x:Class="HelloScatterView.SurfaceWindow1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:s="http://schemas.microsoft.com/surface/2008"
    Title="HelloScatterView">
    <s:SurfaceWindow.Resources>
        <ImageBrush x:Key="WindowBackground"
                  Stretch="None" Opacity="0.6"
                  ImageSource="pack://application:,,,/Resources/WindowBackground.jpg"/>
    </s:SurfaceWindow.Resources>
    <s:ScatterView>
        <Image Source="Resources/Img/fuente_tres_chorros.jpg"/>
    </s:ScatterView>
</s:SurfaceWindow>

Si ahora compilamos nuestro proyecto, podremos jugar un poco con nuestra foto sobre el emulador de Surface. Incluso, si conectas dos ratones por USB puedes simular multitouch.

Vamos a hacerlo un poco más espectacular añadiendo varias imágenes:

<s:ScatterView>
    <Image Source="Resources/Img/fuente_tres_chorros.jpg"/>
    <Image Source="Resources/Img/kiyoumizu_dera.jpg"/>
    <Image Source="Resources/Img/laputa_robot.jpg"/>
    <Image Source="Resources/Img/fuente_tres_chorros.jpg"/>
    <Image Source="Resources/Img/kiyoumizu_dera.jpg"/>
    <Image Source="Resources/Img/laputa_robot.jpg"/>
</s:ScatterView>

Scatterviews complejos con XAML

Probablemente ya te estés preguntando lo siguiente: ¿cómo determinar los parámetros por defecto de nuestro ScatterView? Vamos a ello.

La clave está en que la estructura que hemos usado ahora no acaba de ser la mejor. En realidad, nos está faltando crear un ScatterViewItem, que hasta el momento se estaba creando de forma automática para cada elemento en el ScatterView.

<s:ScatterView>
	<s:ScatterViewItem>
		<Image Source="Resources/Img/fuente_tres_chorros.jpg"/>
	</s:ScatterViewItem>
</s:ScatterView>

En el nodo ScatterViewItem podemos establecer muchas propiedades que afectarán al comportamiento de nuestro ScatterView.

Algunas de esas propiedades son:

• MinWidth, MaxWidth, MinHeight, MaxHeight: Máximos y mínimos de anchura y altura.
• CanMove, CanRotate, CanScale: Activan o desactivan las capacidades de mover, rotar y redimensionar.
• Width, Height, Center, Orientation: Valores iniciales para el ancho, el alto, la posición, y la rotación.
• BorderBrush, BorderThikness: Color y grosor del borde.

Un ejemplo sencillo:

<s:ScatterView>
	<s:ScatterViewItem Center="512,384" Orientation="0">
		<Image Source="Resources/Img/fuente_tres_chorros.jpg"/>
	</s:ScatterViewItem>

	<s:ScatterViewItem Center="512,384" Orientation="60">
		<Image Source="Resources/Img/kiyoumizu_dera.jpg"/>
	</s:ScatterViewItem>

	<s:ScatterViewItem Center="512,384" Orientation="180">
		<Image Source="Resources/Img/laputa_robot.jpg"/>
	</s:ScatterViewItem>

	<s:ScatterViewItem Center="512,384" Orientation="240">
		<Image Source="Resources/Img/fuente_tres_chorros.jpg"/>
	</s:ScatterViewItem>

	<s:ScatterViewItem Center="512,384" Orientation="300">
		<Image Source="Resources/Img/kiyoumizu_dera.jpg"/>
	</s:ScatterViewItem>

	<s:ScatterViewItem Center="512,384" Orientation="360">
		<Image Source="Resources/Img/laputa_robot.jpg"/>
	</s:ScatterViewItem>
</s:ScatterView>

Aunque de hecho, podemos centralizar la mayoría de estas propiedades en un único nodo, como un estilo:

<s:ScatterView>
	<s:ScatterView.ItemContainerStyle>
		<Style TargetType="{x:Type s:ScatterViewItem}">
			<Setter Property="Center" Value="512,384"/>
			<Setter Property="BorderBrush" Value="Black"/>
			<Setter Property="BorderThickness" Value="3"/>
		</Style>
	</s:ScatterView.ItemContainerStyle>

	<s:ScatterViewItem Orientation="0">
		<Image Source="Resources/Img/fuente_tres_chorros.jpg"/>
	</s:ScatterViewItem>

	<s:ScatterViewItem Orientation="60">
		<Image Source="Resources/Img/kiyoumizu_dera.jpg"/>
	</s:ScatterViewItem>

	<s:ScatterViewItem Orientation="180">
		<Image Source="Resources/Img/laputa_robot.jpg"/>
	</s:ScatterViewItem>

	<s:ScatterViewItem Orientation="240">
		<Image Source="Resources/Img/fuente_tres_chorros.jpg"/>
	</s:ScatterViewItem>

	<s:ScatterViewItem Orientation="300">
		<Image Source="Resources/Img/kiyoumizu_dera.jpg"/>
	</s:ScatterViewItem>

	<s:ScatterViewItem Orientation="360">
		<Image Source="Resources/Img/laputa_robot.jpg"/>
	</s:ScatterViewItem>
</s:ScatterView>

Es todo por hoy

El componente ScatterView es sencillo de usar y proporciona una característica muy interesante a nuestras aplicaciones.

Cuando se trabaja para Surface, hay que tener muy en cuenta que los diversos usuarios se colocan alrededor de la mesa, por lo que no existe el derecho ni el revés. Los ScatterViews nos solucionarán este problema más de una vez.

En la siguiente parte del artículo, veremos cómo trabajar con ScatterViews desde C#.

Editado 7/5/2010:

Me comentaron que los códigos fuente en XAML tenían mal la sintaxis, y efectívamente; cuando he pasado a revisarlo así era. Ni idea de que pudo pasar… Bueno, ya están arreglados.

Es de sentido común que la URL de una página tenga que tener cierta relación con lo que contiene. A nadie le dice nada una URL de tipo http://www.dominio.com?seccion=5, pero la cosa es más interesante si es algo del tipo http://www.dominio.com/contacto. La propia URL de este artículo es un buen ejemplo.

En este artículo veremos un pequeño ejemplo de como podemos crear Friendly URLs en asp.Net

¿En que consisten técnicamente las Friendly URL?

La idea es interceptar las peticiones por URL que se realizan a nuestro sitio web antes de que se sirva ningún contenido, de forma que podamos analizar la ruta y servir un archivo u otro en consecuencia. También podemos considerar que parte de la URL es un parámetro de entrada.

Por ejemplo, la URL de este artículo podría ser una como http://www.dominio.com/articulos/enrutamiento-friendly-url/, donde la parte “enrutamiento-friendly-url” es la que determina qué artículo se está mostrando.

¿Cómo montamos el nuevo sistema de direccionamiento?

Cada tecnología de servidor tiene su forma de hacerlo. En este artículo veremos un ejemplo sobre asp.Net.

La clave es el archivo Global.asax. Este es un archivo que proporciona manejadores para una serie de eventos producidos por la aplicación. A nosotros nos interesará el evento Application_BeginRequest: es ahí donde podemos interceptar las peticiones antes de que se sirva ningún contenido, y donde analizaremos las URL para reprogramar el direccionamiento a donde nos interese. Obviamente, el archivo Global.asax tiene más utilidades que el enrutamiento, pero de momento no nos interesan.

Un ejemplo

Vamos a programar un pequeño ejemplo que nos serviría para gestionar los direccionamientos de una red social.

Haremos una dirección para las secciones principales, y una dirección que será dinámica para cada usuario miembro de la red social.

Diseñamos el nuevo enrutamiento

Como siempre, antes de empezar a hacer nada; necesitamos tener claro qué queremos hacer. Vamos a considerar todas las rutas que tendremos.

1. /inicio/
   Todos los sitios web, las redes sociales también; necesitan una página de inicio.
2. /buscar/
   Toda red social necesita un buscador.
3. /usuarios/
   Lo más importante de una red social son los usuarios. Esta es la página genérica de usuarios, que podría ser por ejemplo un formulario de Login.
4. /usuarios/<nombre de usuario>/
   Todos los usuarios tienen un perfil con su nombre, su foto, las cosas que hacen los domingos… Fijaos en que ya incluímos un parámetro, el nombre del usuario.
5. /usuarios/<nombre de usuario>/contacto/
   La gracia de una red social es poder contactar con los usuarios. Esta página proporcionaría funcionalidad a una red de mensajería interna. Tambien tenemos el parámetro de nombre de usuario.

Creamos el proyecto

Vamos a crear un proyecto web normal y corrente desde el Visual Studio.

Crearemos cuatro .aspx, uno para cada una de nuestras rutas, excepto para /inicio/, que será el Default.aspx que se ha creado por defecto. Tambien crearemos una clase .cs para simular el origen de datos de los usuarios.

• Buscar.aspx
• Usuarios.aspx
• UsuariosPerfil.aspx
• UsuariosContacto.aspx
• Datos/Usuarios.cs

Algo de código para los .aspx

Vamos a añadir algo de código en los .aspx. Para diferenciarlos, más que nada; y para probar unos links.

Default.aspx

	<head runat="server">
		<title>Inicio</title>
	</head>
	<body>
		<form id="form1" runat="server">
		<div>
			<h1>Inicio</h1>

			<ul>
				<li><asp:LinkButton runat="server" ID="lbBuscar" PostBackUrl="~/buscar/">Buscar</asp:LinkButton></li>
				<li><asp:LinkButton runat="server" ID="lbUsuarios" PostBackUrl="~/usuarios/">Usuarios</asp:LinkButton></li>
			</ul>
		</div>
		</form>
	</body>

Buscar.aspx

	<head runat="server">
		<title>Buscar</title>
	</head>
	<body>
		<form id="form1" runat="server">
		<div>
			<h1>Buscar</h1>

			<ul>
				<li><asp:LinkButton ID="lbInicio" runat="server" PostBackUrl="~/inicio/">Inicio</asp:LinkButton></li>
				<li><asp:LinkButton ID="lbUsuarios" runat="server" PostBackUrl="~/usuarios/">Usuarios</asp:LinkButton></li>
			</ul>
		</div>
		</form>
	</body>

Usuarios.aspx

	<head runat="server">
		<title>Usuarios</title>
	</head>
	<body>
		<form id="form1" runat="server">
		<div>
			<h1>Usuarios</h1>

			<ul>
				<li><asp:LinkButton ID="lbInicio" runat="server" PostBackUrl="~/inicio/">Inicio</asp:LinkButton></li>
				<li><asp:LinkButton ID="lbBuscar" runat="server" PostBackUrl="~/buscar/">Buscar</asp:LinkButton></li>
			</ul>
		</div>
		</form>
	</body>

UsuariosPerfil.aspx

	<head runat="server">
		<title>Perfil de </title>
	</head>
	<body>
		<form id="form1" runat="server">
		<div>
			<h1 runat="server" id="hTitle"></h1>

			<ul>
				<li><asp:LinkButton ID="lbInicio" runat="server" PostBackUrl="~/inicio/">Inicio</asp:LinkButton></li>
				<li><asp:LinkButton ID="lbUsuariosContacto" runat="server">Perfíl de </asp:LinkButton></li>
			</ul>
		</div>
		</form>
	</body>

UsuariosContacto.aspx

	<head runat="server">
		<title>Contactar con </title>
	</head>
	<body>
		<form id="form1" runat="server">
		<div>
			<h1 runat="server" id="hTitle">Contactar con </h1>

			<ul>
				<li><asp:LinkButton ID="lbinicio" runat="server" PostBackUrl="~/inicio/">Inicio</asp:LinkButton></li>
				<li><asp:LinkButton ID="lbUsuariosPerfil" runat="server">Perfíl de <%= getUserName() %></asp:LinkButton></li>
			</ul>
		</div>
		</form>
	</body>

Debemos considerar, además, un poco de código en los .cs:

Datos/Usuarios.cs

Este será nuestro origen de datos. Normalmente será una tabla en base de datos, un xml, o algo por el estilo; pero para nuestro ejemplo nos basta una clase que extienda de List. Le hemos programado además dos nuevos métodos: uno para convertir un valor de la lista al formato que usamos en las URL, y otro para encontrar valores. Destacar que el algoritmo de búsqueda podría ser bastante mejor, pero para el caso ya nos sirve.

	using System;
	using System.Collections.Generic;

	namespace JuanmaSantoyoSeoFriendly.Datos
	{
		public class Usuarios : List<string>
		{
			public Usuarios()
			{
				this.Add("John Travolta");
				this.Add("Samuel L Jackson");
				this.Add("Bruce Willis");
				this.Add("Uma Thurman");
				this.Add("Quentin Tarantino");
			}
		}

		private string urlFormat(string str)
        {
            return str.ToLowerInvariant().Replace(" ", "-");
        }

        public int search(string username)
        {
            int userid = -1;
            int i = 0;

            while(this.Count > i)
            {
                if (urlFormat(this[i]) == username)
                {
                    userid = i;
                    break;
                }

                i  ;
            }

            return userid;
        }
	}

UsuariosPerfil.aspx.cs

En este .cs daremos valores a algunos elementos del .aspx, y además proporcionaremos métodos que rescatarán de sesión el ID del usuario y devolverán su nombre. Hay dos versiones para este método, uno devolverá el nombre tal cual, y el otro nos dará la posiblidad de devolver el nombre formateado para URL.

	protected void Page_Load(object sender, EventArgs e)
	{
		this.hTitle.InnerText = this.getUserName();

		Page.Title  = this.getUserName();

		lbUsuariosContacto.PostBackUrl = "~/usuarios/"   this.getUserName(true)   "/contacto/";
		lbUsuariosContacto.Text  = this.getUserName();
	}

	public string getUserName()
	{
		Datos.Usuarios usu = new Datos.Usuarios();

		if (HttpContext.Current.Items.Contains("userid") && HttpContext.Current.Items["userid"].ToString() != "-1")
		{
			return usu[Convert.ToInt32(HttpContext.Current.Items["userid"])];
		}
		else
		{
			return "user not found";
		}
	}

	public string getUserName(bool encode)
	{
		Datos.Usuarios usu = new Datos.Usuarios();

		if (HttpContext.Current.Items.Contains("userid"))
		{
			return usu[Convert.ToInt32(HttpContext.Current.Items["userid"])].ToLowerInvariant().Replace(" ", "-");
		}
		else
		{
			return "user not found";
		}
	}

UsuariosContacto.cs

Este .cs es bastante similar al anterior, así que no merece demasiados comentarios:

	protected void Page_Load(object sender, EventArgs e)
	{
		hTitle.InnerHtml  = getUserName();

		Page.Title  = this.getUserName();

		lbUsuariosPerfil.PostBackUrl = "~/usuarios/"   getUserName(true)   "/";
		lbUsuariosPerfil.Text  = getUserName();
	}

	public string getUserName()
	{
		Datos.Usuarios usu = new Datos.Usuarios();

		if (HttpContext.Current.Items.Contains("userid"))
		{
			return usu[Convert.ToInt32(HttpContext.Current.Items["userid"])];
		}
		else
		{
			return "user not found";
		}
	}

	public string getUserName(bool encode)
	{
		Datos.Usuarios usu = new Datos.Usuarios();

		if (HttpContext.Current.Items.Contains("userid") && HttpContext.Current.Items["userid"].ToString() != "-1")
		{
			return usu[Convert.ToInt32(HttpContext.Current.Items["userid"])].ToLowerInvariant().Replace(" ", "-");
		}
		else
		{
			return "user not found";
		}
	}

Añadimos el Global.asax

Añadimos un nuevo elemento en el proyecto. El nuevo elemento será un Artchivo de aplicación global. No le cambiaremos el nombre: lo dejaremos como “Global.asax”.

Configuramos las nuevas rutas

Antes que nada, debemos agregar la librería “System.Web.Routing”.

Programaremos nuestra propia función para aplicar el enrutamiento. La llamaremos “ApplyRouting”:

	private void ApplyRouting(RouteCollection Routes)
	{
		Routes.Add(new Route("", new RouteHandler("~/Default.aspx")));
		Routes.Add(new Route("inicio/", new RouteHandler("~/Default.aspx")));
		Routes.Add(new Route("buscar/", new RouteHandler("~/Buscar.aspx")));
		Routes.Add(new Route("usuarios/", new RouteHandler("~/Usuarios.aspx")));
		Routes.Add(new Route("usuarios/{username}/", new RouteHandler("~/UsuariosPerfil.aspx")));
		Routes.Add(new Route("usuarios/{username}/contacto/", new RouteHandler("~/UsuariosContacto.aspx")));
	}

Y la llamaremos desde el evento Application_BeginRequest:

	protected void Application_BeginRequest(object sender, EventArgs e)
	{
		ApplyRouting(RouteTable.Routes);
	}

Lo que hacemos es, básicamente; añadir nuevas rutas creadas por nosotros a la tabla de rutas de nuestra aplicación. Hay varias cosas destacables:

1. El primer parámetro es la nueva ruta. Si escribimos el valor entre llaves, será un parámetro. Los parámetros que antes enviábamos por GET deberían ser sustituídos por estos.
2. Estamos creando instancias de RouteHandler. Esta clase no existe en la Api de C#, la tenemos que programar nosotros y será donde añadiremos toda la lógica de redireccionamiento.
3. Como la clase RouteHandler la programamos nosotros, tenemos ciertas ventajas. En este caso, pasamos como parámetro del constructor el archivo al cual redirigimos. No tendría por qué ser así, pero como una de las características de nuestras URL es que siempre redirigen a un único archivo; este sistema nos viene bastante bien.

Programamos la lógica de redireccionamiento

Vamos a crear ahora la clase Routing/RouteHandler.cs. Esta clase, deberá heredar de IRouteHandler y por tanto deberá incorporar un método público llamado GetHttpHandler, que recibirá un único parámetro que es un RequestContext y que retornará un IHttpHandler.

En este método pasaran escencialmente dos cosas: por una parte, se meterán los parámetros recibidos en sesión. Por otra, se retornará un IHttpHandler que construiremos usando la ruta del .aspx al que queremos redirigir.

	public IHttpHandler GetHttpHandler(RequestContext requestContext)
	{
		/*
		 * Tratamos los parámetros de la URL:
		 * Si es el nombre de usuario, buscamos su ID y lo metemos en sesión.
		 * Si no, símplemente lo metemos en sesión
		 */
		foreach (KeyValuePair<string, object> val in requestContext.RouteData.Values)
		{
			if (val.Key == "username")
			{
				Datos.Usuarios usu = new Datos.Usuarios();
				int userid = usu.search(val.Value.ToString());
				requestContext.HttpContext.Items["userid"] = userid;
			}

			requestContext.HttpContext.Items[val.Key] = val.Value;
		}

		return (Page) BuildManager.CreateInstanceFromVirtualPath(VirtualPath, typeof(Page));
	}

Añadimos además un constructor y una variable global para el parámetro que indica el archivo al que redirigimos.

	string VirtualPath = string.Empty;

	public RouteHandler(string path)
	{
		this.VirtualPath = path;
	}

Hecho esto, nuestras nuevas rutas ya deberían estar funcionando. Sólo nos queda un detalle.

Ignorando rutas

Generalmente, no sólo nos va a interesar añadir rutas a nuestra aplicación, sino tambien quitarlas. Por ejemplo, no es una mala idea que se ignoren las rutas directas a un .aspx, o aquellas rutas que no acaben con el carácter “/” (para tener un sistema de rutas uniforme). Vamos a programar una función en Global.asax, a la cual llamaremos justo antes de ApplyRouting y que se encargará de comprobar si nuestra ruta debe ser ignorada y, en ese caso, redirigir a /inicio/.

El método Application_BeginRequest en Global.asax queraría de la siguiente forma:

	protected void Application_BeginRequest(object sender, EventArgs e)
	{
		Redirect();
		ApplyRouting(RouteTable.Routes);
	}

El método Redirect:

	private void Redirect()
	{
		string url = Request.Url.ToString();

		if (url.Contains(".aspx"))
		{
			Response.Redirect("~/inicio/");
		}

		if (url[url.Length - 1] != '/' && !url.Contains("?"))
		{
			Response.Redirect(url + "/");
		}
	}

Descarga el código fuente

Sé que me odias por no haber puesto este archivo al principio, pero más vale tarde que nunca ¿no?.

Código fuente.

¡Hemos acabado!

Como véis, en asp.Net el enrutamiento Seo Friendly se reduce a dos clases: Global.asax y el manejador de rutas. Es bastante simple, y no requiere demasiado tiempo de implementación. Los beneficios de usar este tipo de enrutamiento son múltiples, desde aspectos de seguridad, hasta aspectos de usuabilidad y posicionamiento en buscadores. ¡Ya no hay excusa para no implementarlo!.

En este artículo, pretendo dos cosas: por una parte, informarte de qué necesitas para comenzar a desarrollar y cómo obtenerlo. Por otra parte, facilitarte esa documentación que a todos nos va tan bien para empezar con una nueva tecnología. Así que vamos a ello.

Lo primero que debes saber, es que una aplicación para Surface no es más que una aplicación WPF o XNA. Por si no lo sabías, WPF es un entorno muy potente para desarrollar aplicaciones de escritorio orientadas a los nuevos entornos gráficos de Windows Vista y Windows 7. XNA es un entorno para desarrollo de videojuegos también facilitado por Microsoft. Si has jugado con la Xbox 360 te habrás preguntado ¿de dónde salen los tantísimos juegos del bazar? Pues bien, la mayoría están desarrollados por compañías independientes con XNA.

Obviamente, optar por WPF o XNA dependerá de nuestra aplicación. Si necesitamos un motor rico en controles de usuario, optaríamos por WPF. Si necesitamos un motor potente en la renderización de gráficos 3D, optaríamos por XNA. Depende de las necesidades de nuestra aplicación.

En este artículo, pretendo dos cosas: por una parte, informarte de qué necesitas para comenzar a desarrollar y cómo obtenerlo. Por otra parte, facilitarte esa documentación que a todos nos va tan bien para empezar con una nueva tecnología. Así que vamos a ello.

Lo primero que debes saber, es que una aplicación para Surface no es más que una aplicación WPF o XNA. Por si no lo sabías, WPF es un entorno muy potente para desarrollar aplicaciones de escritorio orientadas a los nuevos entornos gráficos de Windows Vista y Windows 7. XNA es un entorno para desarrollo de videojuegos también facilitado por Microsoft. Si has jugado con la Xbox 360 te habrás preguntado ¿de dónde salen los tantísimos juegos del bazar? Pues bien, la mayoría están desarrollados por compañías independientes con XNA.Obviamente, optar por WPF o XNA dependerá de nuestra aplicación. Si necesitamos un motor rico en controles de usuario, optaríamos por WPF. Si necesitamos un motor potente en la renderización de gráficos 3D, optaríamos por XNA. Depende de las necesidades de nuestra aplicación.

Instalación del entorno de desarrollo

Para empezar, un detalle importante es nuestro sistema operativo: El SDK de Surface no funcionará en Windows XP, necesitaremos Windows Vista o superior.

Bien, empecemos a instalar los programas necesarios. Antes de empezar, no estaría mal asegurarse de que tenemos instalada la última versión del .Net Framework (3.5 SP1 en estos momentos).

La primera herramienta que debemos conseguir es un Visual Studio. Como sabrás, Visual Studio es un IDE desarrollado por Microsoft y orientado al desarrollo de aplicaciones en .Net. Si no lo tienes y eres estudiante universitario, puedes hacerte con una licencia de estudiante. Esta licencia es totalmente gratuita y sólo necesitaras proporcionar tu identificación como estudiante. Puedes obtenerla aquí: Microsoft Visual Studio.

Cuando tengamos el Visual Studio instalado, deberemos instalar el Framework de XNA (independientemente de que queramos desarrollar con WPF). Lo podemos obtener de aquí: Microsoft XNA Framework.

Finalmente, instalamos el SDK de Surface. Lo encontramos aquí: Microsoft Surface SDK.

Con este software instalado, ya estamos listos para abrir el Visual Studio y crear un nuevo proyecto de Surface, no sin antes ejecutar el emulador de Surface que viene con el SDK. De esta forma, al depurar proyectos desde Visual Studio, se ejecutarán en el emulador.

Debes saber, además; que si conectas más de un ratón por USB el emulador los considerará dedos diferentes. ¡Eso es, soporte multitáctil en tu ordenador!.

Recursos de documentación para empezar

Ya tenemos todo lo necesario para empezar a desarrollar aplicaciones de Surface. Ahora, sólo nos falta algo de documentación que nos oriente para empezar a hacer cosas.

Developing for Microsoft Surface

Pero ¿dónde nos estamos metiendo realmente? En esta conferencia de Microsoft se ilustra cómo es el desarrollo de aplicaciones en Surface.
Developing for Microsoft Surface.

Hola Mundo Surface con WPF

Siguiendo en la línea anterior, este artículo me ha aclarado algunos conceptos generales más a la hora de afrontar el desarrollo con Surface. Interesante sobre todo porque habla algo de los nuevos eventos de contacto de Surface.
Hola Mundo Surface con WPF.

MSDN .Net Framework Developer Center

Pero vamos, ya está bien de conceptos generales, ¿verdad? Seguro que ya tienes ganas de meterle mano a Surface.

En MSDN nos facilitan información y ejemplos varios para empezar a programar algunas cosas. ¡Suerte!.
MSDN .Net Framework Developer Center.

Pues bien, hace un par de días me surgió la necesidad y investigué un poco al respecto. En realidad, la solución que nos propone .Net no está nada mal: un archivo .asmx que actúa como WebService.

Sobre los .asmx

De la misma forma que podemos añadir archivos .aspx a un proyecto web, también podemos añadir archivos .asmx. Estos archivos son la base de cualquier proyecto de WebService que desarrollemos en .Net, pero también podemos usarlos en los proyectos web normales.

¿Cómo se usan los .asmx?

El uso de los .asmx es simple: básicamente, lo que debemos hacer es crear un método, que devuelva un valor y que tenga la etiqueta [WebMethod]. Al final, la llamada a servidor: “http://<ruta al asmx>/<nombre del método>/<parámetros get si hay>” nos devolverá el resultado devuelto por el método.

Por supuesto, el método puede tener parámetros, que enviaremos por GET o por POST; en cuyo caso, al hacer la llamada los parámetros enviados deberán tener el mismo nombre que el parámetro en el método.

Es importante destacar que si queremos enviar parámetros por GET o POST, deberemos activar ambos protocolos en el Web.config de nuestra aplicación.

Un ejemplo

La mejor forma de ver cómo funciona un .asmx es viendo un pequeño ejemplo. Con poco esfuerzo podremos hacer algunas pruebas.

Crear el proyecto

Sólo necesitaremos crear un nuevo proyecto web en nuestro Visual Studio. Nos creará por defecto un .aspx, pero no nos interesa demasiado.

Crear el asmx

Añadiremos en el proyecto web un nuevo elemento, que será un Servicio web. Lo encontrarás entre los posibles elementos de la categoría “Web”. Lo llamaremos “test.asmx“.

Cuando tengamos nuestro .asmx creado, lo estableceremos como la página inicial de nuestro proyecto (es una opción que aparecerá si clicamos con el botón derecho en el .asmx).

Un nuevo método en el .asmx

En el .asmx ya tenemos un método creado: HelloWorld. Es muy ilustrativo, ya que nos indica dos cosas: la primera, que nuestros métodos deberán tener al principio la etiqueta [WebMethod]. La segunda, que el valor retornado será lo que mostrará nuestro WebService al realizar una petición al método.

Vamos a programar un método más bien absurdo, pero que nos permitirá ver cómo funciona el envío de parámetros:

	[WebMethod]
	public string ReturnThisString(string str)
	{
		return str;

	}

Hay dos cosas a destacar:

1. El parámetro que recibe este método se llama str.
2. El resultado que genera este método, es un string.

Activamos los protocolos GET y POST

Como dije unas líneas más arriba, debemos activar los protocolos de envío GET y POST si queremos usarlos en nuestro WebService. Todo lo que debemos hacer es incluir dentro del nodo <system.web/> de nuestro Web.config las siguientes líneas:

	<webServices>
		<protocols>
			<add name="HttpGet" />
			<add name="HttpPost" />
		</protocols>
	</webServices>

Probamos el WebService

Y toca inicar una depuración. La primera vez que lo hagamos nos pedirá que activemos el modo debug. Le decimos que sí, y arrancará el .asmx.

Lo que veremos, será un resumen de los métodos que tiene el .asmx (esto no se vería en un entorno de producción). Podemos clicar en el nombre de nuestro método “ReturnThisString” para que nos muestre un pequeño formulario donde indicaremos el valor del parámetro “str“. Al enviarlo, veremos el resultado de nuestro método de WebService.

Hay varias cosas interesantes en las que fijarse ahora:

1. El resultado devuelto es un XML.

   Sea cual sea el resultado, el asmx siempre nos dará una respuesta XML.

2. La ruta de la página.

   Como ves, la url de este xml es: “http://<ruta al asmx>/<nombre del método>/<parámetros get si hay>”. Esta es la dirección a la que accederemos para obtener resultados de nuestro WebService, ya sea con Ajax o con otra tecnología.

3. El nodo string.

   El resultado del método viene, en realidad, dentro de un nodo llamado string. Esto es, efectívamente, el tipo del dato devuelto. ¿imaginas lo que pasaría si en vez de un string, devolvemos una lista de strings? Efectivamente, el XML resultante sería una lista de nodos string.

   

Generamos un XML como respuesta del método

Como ves, los WebServices .asmx no son demasiado complicados, aunque por el momento seguimos teniendo un pequeño problema: los XML que generamos como resultado son generados automáticamente y no tenemos control sobre ellos. Vamos a poner solución a esto.

La cuestión es que si en lugar de un string, devolvemos un objeto XmlDocument, el resultado devuelto por el WebService será el contenido del XmlDocument tal cual. Por lo tanto, se podría decir que el proceso para generar respuestas XML personalizadas (la razón de este artículo) es el siguiente:

1. Creamos un método en el .asmx que devuelva un objeto XmlDocument.
2. Obtenemos todos los datos que queramos devolver.
3. Los metemos en un XmlDocument.
4. Retornamos el XmlDocument.

Un último ejemplo

Vamos a crear un último ejemplo: un pequeño método que nos introducirá en la creación de XML dinámicos:

	[WebMethod]
	public XmlDocument ReturnXml()
	{
		XmlDocument xml = new XmlDocument();

		XmlNode rootNode = xml.CreateElement("RespuestaXml");
		XmlNode txtNode = xml.CreateTextNode("Xml generado automáticamente");
		XmlNode subNode = xml.CreateElement("HolaMundo");
		XmlNode commentNode = xml.CreateComment("Esto es un comentario");

		subNode.AppendChild(commentNode);
		rootNode.AppendChild(txtNode);
		rootNode.AppendChild(subNode);
		xml.AppendChild(rootNode);

		return xml;
	}

Esto generaría el siguiente resultado:

Descargar el ejemplo

Puedes descargar el ejemplo si algo no te ha quedado claro. Recuerda también que puedes dejar comentarios.

JuanmaSantoyoXmlDinamicos

¡Hemos terminado!

Y de momento no hay mucho más que decir. Con este ejemplo, hemos tocado un tema especialmente importante para la mayoría de proyectos web, ya que los XML dinámicos son importantes para las funcionalidades Ajax y para comunicarnos con otras aplicaciones externas. ¿Aún no tienes RSS en tu sitio web? ¡A qué esperas!.

Pero, a pesar de que el api proporciona dos métodos diferentes de acceso a las AppSettings, ambos tienen algunos inconvenientes. Lo que haremos, es crear una pequeña clase que nos permitirá tratar las AppSettings de una forma más simple y con una funcionalidad mejorada.

Clase AppSettings

Los inconvenientes

Los inconvenientes a la hora de trabajar con las variables de AppSettings son varios. Se podría decir que hay dos formas de acceder. Comentemos las dos formas:

Primera forma: la clase ConfigurationManager

La clase ConfigurationManager nos proporciona un diccionario estático que contiene los valores definidos en AppSettings:

ConfigurationManager.AppSettings["clave"];

A mi modo de ver, más largo de lo necesario y poco intuitivo (escribid “Configuration” en un VisualStudio y mirad cuantas entradas muestra el intellisense). Prometo que me costó un par de intentos memorizar esta línea.

Por otra parte, lo más grave es que el dato devuelto es siempre un string, lo cual nos obliga a hacer una conversión del dato inmediatamente después si queremos otro formato.

Segunda forma: la clase AppSettingsReader

Esta segunda clase, tiene algunas ventajas respecto a la anterior, pero también es mejorable.

Por una parte, su uso requiere de una instancia de AppSettingsReader y la posterior invocación a un método:

AppSettingsReader settings = new AppSettingsReader();
string valor = (string) settings.GetValue("clave", typeof(string));

Por no mencionar el casting obligatorio.

Por otra parte, aunque en principio se puede especificar el tipo del dato devuelto, hay poco control sobre él. ¿Qué pasa si es una fecha? Sinceramente, ni lo he probado.

Una posible solución

Yendo al grano, lo cierto es que el acceso a las AppSettings es mejorable. Vamos a considerar y a anotar algunas cosas sobre una posible alternativa que nos solucione los inconvenientes comentados:

• Se accede desde una clase estática, pero más simple que la vista en la primera forma de acceder. No debería ser mucho más complejo que AppSettings.GetValue(“clave”).
• Se ofrecen varios tipos básicos (pocos, pero controlados) como posibles retornos. Nuestra clase se encarga de hacer la conversión.
• Además, la clase será capaz de realizar un tratamiento avanzado del contenido de las AppSettings: podrá retornar listas y diccionarios de los tipos básicos.

Definimos los diferentes tipos básicos de AppSettings

Serán solamente cuatro, pero a cambio ganaremos el control absoluto sobre los valores que retornamos.

Los tipos serán:

• string
• int
• bool
• DateTime

Definimos los diferentes formatos de las claves del AppSettings

Vamos a estipular como deberán ser escritos los datos en el WebConfig. A partir de ahora, deberemos escribir los valores en AppSettings siguiendo uno de los formatos siguientes. aunque ante cualquier excepción, siempre podremos obtener los datos como un tipo básico string (que será como si no aplicásemos ninguna conversión).

Datos básicos

No consideraremos un formato para los datos básicos porque no lo necesitan (excepto las fechas, que las vemos ahora mismo). Las cadenas se escribirán como cadenas, los números como números, y los booleanos como “true” y “false”.

Fechas

Las fechas seguirán un formato típicamente español:

dia/mes/año

Donde los días van del 1 al 31, los meses del 1 al 12, y los años tienen cuatro cifras.

Listas

Separaremos los diferentes elementos con comas.

valor1, valor2, valor3, valor4

Los espacios en blanco entre los valores y las comas serán indiferentes.

Diccionarios

Separaremos los pares con comas, y los clave valor con dos puntos.

clave1: valor1, clave2: valor2, clave3: valor3

Al igual que antes, los espacios en blanco entre los separadores y los valores son indiferentes.

Programamos la clase AppSettings

Ya sabemos que formatos tenemos que considerar. Ahora vamos a programar nuestra clase.

Antes que nada, debemos tener más o menos claro cómo queremos hacerlo. Lo haremos así:

• Tendremos un método privado, llamado Get; que se encargará simplemente de obtener el dato de WebConfig como un string.
• Tendremos tres métodos privados que se encargarán de convertir un string al resto de formatos. Se llamarán ToInt, ToBool y ToDate.
• Tendremos varios métodos públicos, cada uno devolverá un tipo de dato. Los métodos se llamarán GetAsString, GetAsStringList, GetAsStringDict, GetAsInt, etc.

El método Get

private static string Get(string key)
{
	AppSettingsReader settings = new AppSettingsReader();            

	return (string) settings.GetValue(key, typeof(string));
}

En este método tenemos la única instancia de AppSettingsReader que vamos a usar. El resto de métodos de la clase se apoyarán en este para obtener la información del WebConfig.

Los métodos conversores

Serán tres. Uno convertirá un string a int, otro a bool y el último a DateTime.

private static int ToInt(string value)
{
	int v = 0;

	if (int.TryParse(value, out v))
	{
		return v;
	}

	return 0;
}

private static bool ToBool(string value)
{
	bool v = false;

	if (bool.TryParse(value, out v))
	{
		return v;
	}

	return false;
}

private static DateTime ToDateTime(string value)
{
	DateTime v = DateTime.Today;

	if (DateTime.TryParseExact(value, "dd/MM/yyyy", new CultureInfo("es-ES"), DateTimeStyles.None, out v))
	{
		return v;
	}

	else return new DateTime();
}

Los métodos que retornarán los datos

Estos métodos se apoyarán en los anteriores para obtener los valores, darles un formato de salida y devolverlos. Hay uno por tipo de dato y tipo de salida (normal, lista o diccionario).

Además, a los métodos que requieran de un separador (los que devuelven listas y diccionarios) les haremos una sobrecarga que permita indicar un separador distinto. De esta forma podremos reaccionar ante posibles conflictos entre nuestros separadores por defecto y los valores que contengan las AppSettings.

public static string GetAsString(string key)
{
	string value = Get(key);

	return value;
}

public static int GetAsInt(string key)
{
	string value = Get(key);

	return ToInt(value);
}

public static bool GetAsBool(string key)
{
	string value = Get(key);

	return ToBool(value);
}

public static DateTime GetAsDateTime(string key)
{
	string value = Get(key);

	return ToDateTime(value);
}

public static List<string> GetAsStringList(string key, char sep)
{
	string value = Get(key);
	List<string> list = new List<string>();

	foreach (string s in value.Split(new char[] { sep }))
	{
		list.Add(s.Trim());
	}

	return list;
}

public static List<string> GetAsStringList(string key)
{
	return GetAsStringList(key, '|');
}

public static List<int> GetAsIntList(string key, char sep)
{
	string value = Get(key);
	List<int> list = new List<int>();

	foreach (string s in value.Split(new char[] { sep }))
	{
		list.Add(ToInt(s.Trim()));
	}

	return list;
}

public static List<int> GetAsIntList(string key)
{
	return GetAsIntList(key, '|');
}

public static List<bool> GetAsBoolList(string key, char sep)
{
	string value = Get(key);
	List<bool> list = new List<bool>();

	foreach (string s in value.Split(new char[] { sep }))
	{
		list.Add(ToBool(s.Trim()));
	}

	return list;
}

public static List<bool> GetAsBoolList(string key)
{
	return GetAsBoolList(key, '|');
}

public static List<DateTime> GetAsDateTimeList(string key, char sep)
{
	string value = Get(key);
	List<DateTime> list = new List<DateTime>();

	foreach (string s in value.Split(new char[] { sep }))
	{
		list.Add(ToDateTime(s.Trim()));
	}

	return list;
}

public static List<DateTime> GetAsDateTimeList(string key)
{
	return GetAsDateTimeList(key, '|');
}

public static Dictionary<string, string> GetAsStringDict(string key, char itemSep, char valueSep)
{
	string raw = Get(key);
	Dictionary<string, string> dict = new Dictionary<string, string>();

	foreach(string i in raw.Split(itemSep))
	{
		string item = i.Trim();

		string[] value = item.Split(valueSep);
		value[0] = value[0].Trim();
		value[1] = value[1].Trim();

		if (!dict.ContainsKey(value[0]))
		{
			dict.Add(value[0], value[1]);
		}
	}

	return dict;
}

public static Dictionary<string, string> GetAsStringDict(string key)
{
	return GetAsStringDict(key, ';', '|');
}

public static Dictionary<string, int> GetAsIntDict(string key, char itemSep, char valueSep)
{
	string raw = Get(key);
	Dictionary<string, int> dict = new Dictionary<string, int>();

	foreach (string i in raw.Split(itemSep))
	{
		string item = i.Trim();

		string[] value = item.Split(valueSep);
		value[0] = value[0].Trim();
		value[1] = value[1].Trim();

		if (!dict.ContainsKey(value[0]))
		{
			dict.Add(value[0], ToInt(value[1]));
		}
	}

	return dict;
}

public static Dictionary<string, int> GetAsIntDict(string key)
{
	return GetAsIntDict(key, ';', '|');
}

public static Dictionary<string, bool> GetAsBoolDict(string key, char itemSep, char valueSep)
{
	string raw = Get(key);
	Dictionary<string, bool> dict = new Dictionary<string, bool>();

	foreach (string i in raw.Split(itemSep))
	{
		string item = i.Trim();

		string[] value = item.Split(valueSep);
		value[0] = value[0].Trim();
		value[1] = value[1].Trim();

		if (!dict.ContainsKey(value[0]))
		{
			dict.Add(value[0], ToBool(value[1]));
		}
	}

	return dict;
}

public static Dictionary<string, bool> GetAsBoolDict(string key)
{
	return GetAsBoolDict(key, ';', '|');
}

public static Dictionary<string, DateTime> GetAsDateTimeDict(string key, char itemSep, char valueSep)
{
	string raw = Get(key);
	Dictionary<string, DateTime> dict = new Dictionary<string, DateTime>();

	foreach (string i in raw.Split(itemSep))
	{
		string item = i.Trim();

		string[] value = item.Split(valueSep);
		value[0] = value[0].Trim();
		value[1] = value[1].Trim();

		if (!dict.ContainsKey(value[0]))
		{
			dict.Add(value[0], ToDateTime(value[1]));
		}
	}

	return dict;
}

public static Dictionary<string, DateTime> GetAsDateTimeDict(string key)
{
	return GetAsDateTimeDict(key, ';', '|');
}

¡Hemos terminado!

Ahora ya tenemos una clase que, además de ser fácilmente utilizable desde cualquier parte del programa, nos proporciona los valores de AppSettings en el formato que necesitemos. Además hemos extendido la funcionalidad respecto al api de asp.Net por que también es capaz de obtener los datos en forma de listas y diccionarios.