Los elementos y eventos en Silverlight

Hace ya algunos días estuve definiendo el primer layout con Silverlight, donde teníamos una primera toma de contacto con XAML. En esta ocasión pretendo dar una visión un poco más amplia acerca de algunos de los elementos que podemos usar en el diseño de la UI y cómo es posible enlazar los eventos a los mismos.

Tenemos tres entornos a nuestra disposición a la hora de diseñar la interfaz de usuario con XAML:

  • Visual Studio 2008: Podemos utilizar la ventana de Herramientas (Toolbox) para arrastrar los elementos pero directamente en el código XAML. En esta versión de Visual Studio no tenemos vista de diseño para XAML.

    Por otro lado, existe la ventana Document Outline para poder visualizar el esquema de la página que estamos creando.

  • Visual Studio 2010: En la nueva versión de VS tenemos una vista previa del código XAML implementado, lo cual facilita bastante su codificación. Actualmente podemos hacer uso de la versión Release Candidate.

  • Expression Blend: Es la herramienta por excelencia para trabajar con las UI de Silverlight y WPF. Si bien para la creación de elementos nos podemos apañar con Visual Studio, en el caso de las animaciones la cosa resulta algo más compleja de realizar codificando.

    Desde Visual Studio podemos seleccionar cualquier archivo XAML y, con el botón derecho sobre él, podemos dar la orden de abrirlo en Expression Blend y poder trabajar de forma paralela con uno y otro (Expression Blend para el diseño y Visual Studio para el desarrollo).

ALGUNAS DIFERENCIAS RESPECTO A ASP.NET

  1. Para asignar un ID a un elemento utilizamos x:Name
  2. Si queremos posicionar un elemento dentro de un contenedor debemos tener en cuenta lo siguiente:
    1. Si estamos utilizando un contenedor de tipo Grid necesitamos establecer en primer lugar la estructura del mismo para poder posicionarlos dentro de él. De lo contrario no visualizaremos los elementos.
    2. Para los contenedores Canvas, podemos ubicarlos a través de Canvas.Top, Canvas.Left y Canvas.ZIndex.
    3. En el caso de los StackPanels, podemos apilar varios y darle una orientación horizontal o vertical al contenedor a través de la propiedad Orientation.
  3. En lugar de utilizar la propiedad Text para algunos controles como en Web Forms, para definir el texto que aparece en los elementos que lo requiera, utilizaremos Content.
  4. En ASP.NET la mayoría de los controles tienen un alto y ancho predeterminado que, en ocasiones, no es necesario alterar. En Silverlight es necesario especificarlo para obtener un tamaño considerable. Si no se especifica, se adaptará al tamaño del texto del Content si lo tiene.

ALGUNOS ELEMENTOS BÁSICOS

Al igual que en ASP.NET disponemos de elementos tales como :

Button

<Button x:Name="myButton" Content="Click me!" 
Canvas
.Left="100" Canvas.Top="120" Width="100" Height="25"></Button>

Textbox

<TextBox x:Name="myTextbox" Text="Write your name here" 
Canvas
.Left="100" Canvas.Top="150" Height="25"/>

Calendar

<controls:Calendar x:Name="myCalendar" Canvas.Left="280" Canvas.Top="120" 
ToolTipService
.ToolTip="Select your birthday" Cursor="Arrow"/>

Combobox

<ComboBox x:Name="myCombobox" Canvas.Left="100" Canvas.Top="195" Width="130"  >
<ComboBoxItem Background="#FF0200FF" Foreground="White" Content="Blue"/>
<ComboBoxItem Background="#FFFF0500" Foreground="White" Content="Red"/>
<ComboBoxItem Background="#FFFF00CA" Foreground="White" Content="Pink" IsSelected="True"/>
</ComboBox>

Listbox

<ListBox Canvas.Left="100" Canvas.Top="250" Width="130" >
<ListBoxItem Background="#FF0200FF" Foreground="White" Content="Blue"/>
<ListBoxItem Background="#FFFF0500" Foreground="White" Content="Red" IsSelected="True"/>
<ListBoxItem Background="#FFFF00CA" Foreground="White" Content="Pink" />
</ListBox>

Label

<dataInput:Label x:Name="myLabel" Content="Common Label" 
Canvas
.Left="100" Canvas.Top="80" Width="130" Height="24"/>

Radiobutton

<StackPanel Orientation="Vertical">
<RadioButton Margin="10,10,0,0" GroupName="Languages" Foreground="Blue" Content="C#"/>
<RadioButton Margin="10,10,0,0" GroupName="Languages" Foreground="Orange" Content="VB.NET"/>
<RadioButton Margin="10,10,0,0" GroupName="Languages" Foreground="Green" Content="Java"/>
<RadioButton Margin="10,10,0,0" GroupName="Languages" Foreground="Purple" Content="PHP"/>
</StackPanel>

Checkbox

<CheckBox x:Name="myCheckBox" Content="I want a million euros" 
Canvas
.Left="100" Canvas.Top="450"></CheckBox>

Datagrid

<data:DataGrid x:Name="myDataGrid" Height="105" 
Canvas.Left="100" Canvas.Top="345" ></data:DataGrid>

Para realizar la carga, en vez de utilizar DataSource sería ItemsSource.

public MainPage()
{
InitializeComponent();

var person = new Person { Name = "Gisela", LastName = "Torres", Location = "Madrid", Web = "http://geeks.ms/blogs/gtorres/" };
var persons = new List<Person> {person};
myDataGrid.ItemsSource = persons;
}

[…]

Existen más controles de los que aquí se indican y, además, podemos hacer uso de Silverlight Toolkit, de forma gratuita, descargándolo desde su sitio en Codeplex para ampliar el repertorio.

LOS EVENTOS EN SILVERLIGHT

Por último, para asociar un evento a un elemento de nuestra interfaz existen distintos procedimientos según el entorno:

Visual Studio 2008

Deberemos seleccionar el evento que necesitemos a través del Intellisense y, una vez añadido al elemento, nos dará la posibilidad de asociar uno existente o crear uno nuevo.

Visual Studio 2010

Si estamos trabajando con la vista previa, podemos hacer doble click sobre el elemento para autogenerar el evento click (De la misma forma que en Web Forms) o bien haciendo doble click sobre el evento que queramos en la ventana propiedades.

Expression Blend

En este último entorno, al igual que en Visual Studio 2010, disponemos de la pestaña Eventos dentro de propiedades del elemento seleccionando el icono que señalo en la imagen.

Hasta aquí la primera toma de contacto con los elementos XAML para Silverlight 🙂

¡Saludos!

Expresiones lambda

Dado que hoy en día lo que se estila es el uso de las expresiones lambda, voy a intentar resumir en un solo post qué son y cómo se utilizan. Sobre todo voy a procurar simplificarlo lo más posible 🙂

Las expresiones lambda se utilizan para crear funciones anónimas las cuales pueden ser asignadas a delegados o a árboles de expresión.

¿Por qué anónimas?

Porque no necesitamos asignarles un nombre para referirnos a ellas.

¿Qué es un delegado?

Es un objeto que hace referencia a uno o más métodos. Más información aquí.

¿Qué es un árbol de expresión?

Un árbol de expresión representa una estructura en forma de árbol de las expresiones lambda en memoria. Generalmente se potencia su uso en LINQ.

¿Cómo se utilizan?

Para saber cómo utilizar y/o leer una expresión lambda debemos tener en cuenta los siguientes puntos:

  • Parte izquierda: Representa los parámetros  que intervienen en la expresión.
  • Parte central: Se trata del operador lambda, necesario en todas las expresiones de este tipo.
  • Parte derecha: Se definen las acciones a realizar.

 

Puntos importantes:

  1. Las expresiones lambda no utiliza la instrucción return, excepto aquellas que utilicen un bloque encerrado entre llaves.
    suma = (a, b) =>
    {
    return a + b;
    };

  2. No es necesario especificar el tipo de los parámetros, ya que siempre van asociados a un delegado que ya contiene esta información.
    delegate string Delegado(int edad);

    [...]

    Delegado edad = e => string.Format("Tu edad es {0}", e);

  3. Se pueden usar tanto por delegados creados por nosotros como por aquellos definidos por el framework.
    <%= Html.TextBoxFor(m => m.Name) %>

LOS DELEGADOS GENÉRICOS: ACTION Y FUNC

Por otro lado, podemos utilizar los siguientes delegados genéricos en lugar de delegate. Con ellos conseguimos una sintaxis algo más refinada y simple.

Action se utiliza para aquellas expresiones lambda que no retornan ningún valor.

Action<string> saludo = s => Console.Write("Hola {0}!", s);
saludo("Gisela");

Func para aquellas expresiones que retornen un valor.

Func<int, int, int> suma = (a, b) => a + b;
int resultado = suma(3, 5);

Tanto en el caso de Func como en Action el número máximo de parámetros permitido es cuatro (Func figurará como cinco ya que el último es considerado el valor de retorno).

Espero que haya servido como una pequeña introducción al respecto 😉

¡Saludos!

¿Qué es ViewEngine en ASP.NET MVC?

Uno de los principales beneficios de crear una aplicación con ASP.NET MVC es que obtenemos mayor control en cuanto al código HTML se refiere. Aún así, es posible que al ver una vista generada para este patrón, resulte complicada la lectura para aquellos acostumbrados a trabajar con WebForms.

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%
if (Request.IsAuthenticated) {
%>
Welcome <b><%= Html.Encode(Page.User.Identity.Name) %></b>!
[ <%= Html.ActionLink("Log Off", "LogOff", "Account") %> ]
<%
}
else {
%>
[ <%= Html.ActionLink("Log On", "LogOn", "Account") %> ]
<%
}
%>

Si bien este es un pequeño ejemplo del user control del LogOn que viene con la plantilla de ASP.NET MVC, la cosa se puede llegar a complicar bastante y puede dificultar su lectura y comprensión.

¿QUÉ ES VIEW ENGINE?

ASP.NET MVC utiliza un motor de vistas (View Engine) para reemplazar los métodos de renderizado de las aplicaciones por código HTML. Generalmente se está usando el proporcionado por ASP.NET MVC pero es posible utilizar otras alternativas creadas por la comunidad. Para ver un ejemplo de uno de los más conocidos, vamos a modificar una aplicación para utilizar Spark View Engine.

CONFIGURAR SPARK VIEW ENGINE

Nota: Para este ejemplo he utilizado una plantilla de ASP.NET MVC 1.0 ya que la versión actual de Spark no soporta ASP.NET MVC 2 RC 2.

La configuración es bastante simple. Para ello, debemos bajar la última versión del proyecto de CodePlex y adjuntar las siguientes librerías a nuestro proyecto:

Una vez que tenemos las librerías agregadas, necesitamos añadir Spark como motor de vistas a través del archivo Global.asax.

protected void Application_Start()
{
RegisterRoutes(RouteTable.Routes);
ViewEngines.Engines.Add(new SparkViewFactory());
}

También es necesario generar un archivo donde especificamos las librerías necesarias para el renderizado. Este debe llamarse _global.spark y contedrá los siguientes assemblies (también puede definirse en el web.config).

<use namespace="System" />
<use namespace="System.Web.Mvc.Html" />
<use namespace="System.Collections.Generic" />
<use namespace="System.Linq" />

Esto sería lo mínimo necesario para comenzar a trabajar con Spark View Engine.

LAS VISTAS UTILIZANDO SPARK VIEW ENGINE

Para que el motor de Spark reconozca la vistas como suyas, es necesario que las mismas tengan extensión .spark. Una cosa importante a tener en cuenta es que la master page toma un nombre distinto: Application.spark.  Si modificamos la master page por defecto de la plantilla de ASP.NET MVC quedaría de la siguiente manera:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>
<use content="title">Default title</use>
</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>
My MVC Application</h1>
</div>
<div id="logindisplay">
<LogOnUserControl/>
</div>
<div id="menucontainer">
<ul id="menu">
<li>${Html.ActionLink("Home", "Index", "Home")}</li>
<li>${Html.ActionLink("About", "About", "Home")}</li>

</ul>
</div>
</div>
<div id="main">
<use content="view" />
<div id="footer">
</div>
</div>
</div>
</body>
</html>

Como diferencias podemos encontrar:

  1. Para declarar los ContentPlaceHolder utilizamos use content.
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>

    <title>
    <use content="title">Default title</use>
    </title>

  2. Para incluir un control de usuario utilizamos tags con el nombre del mismo, por ejemplo <LogOnUserControl />
    <div id="logindisplay">
    <% Html.RenderPartial("LogOnUserControl"); %>
    </div>

    <div id="logindisplay">
    <LogOnUserControl/>
    </div>

  3. En cuanto al uso de helpers, variables y todo aquello relacionado con el servidor, podemos utilizarlo con la misma sintaxis que hasta ahora, a excepción de <% %>. Con Spark View Engine utilizaremos ${} 
    <ul id="menu">
    <li>${Html.ActionLink("Home", "Index", "Home")}</li>
    <li>${Html.ActionLink("About", "About", "Home")}</li>
    </ul>

Si queremos usar varias master pages en nuestra aplicación, basta con incluir la etiqueta <use master=””/> en las vistas que lo requiera.

Los controles de usuarios también tienen extensión .spark y el nombre del archivo debe comenzar con guión bajo para ser reconocidos. Además es case sensitive cuando se utiliza el “modo tag”:

<LogOnUserControl />

Si no se tienen en cuenta estas dos indicaciones, no lo reconocerá y tampoco mostrará ningún tipo de error. Si quisieramos “traducir” el user control a lenguaje Spark quedaría de esta forma:

<if condition="Request.IsAuthenticated">
Welcome <b>${Context.User.Identity.Name}</b>!
[ !{Html.ActionLink("Log Off", "LogOff", "Account")} ]
</if>
<else>
[ !{Html.ActionLink("Log On", "LogOn", "Account")} ]
</else>

Podemos crear condiciones a través de tags e intercalar código HTML con código del servidor de una forma, quizás, más clara.

Por último, comentar que para el caso de las vistas no utilizamos un guión bajo  al inicio para el nombre del archivo y que la extensión sigue siendo .spark, al igual que el resto de archivos.

<content name="title">
Index
</content>
<h2>
Index</h2>
<p>
This is the Message in ViewData: ${ViewData["Message"]}</p>
<p>
${Html.ActionLink("About us", "About")}</p>
<p>
The time is ${DateTime.Now}.</p>

Además de Spark View Engine, disponemos de otros motores como pueden ser Brail, NVelocity, NHaml entre otros. A gusto del consumidor 😉

Adjunto el proyecto  por si fuera de utilidad.

¡Saludos!

Control de excepciones con ASP.NET MVC

Generalmente, el hecho de no controlar las excepciones de una aplicación, y mostrar una página como la siguiente al usuario, supone una pérdida de calidad palpable en el producto.

En ASP.NET MVC podemos controlar estos mensajes redirigiendo al usuario a unas páginas más amigables y mostrando un mensaje menos alarmante de la aplicación. Si lo único que necesitamos es controlar excepciones personalizadas o aquellas que no pertenezcan a la rama de HttpException podríamos realizar los siguientes pasos:

  1. Habilitamos customErrors en el archivo web.config de la aplicación.
    <customErrors mode="On"/>

  2. Utilizamos el action filter HandleError, ofrecido por ASP.NET MVC, en el controlador, el cual redirige todas las excepciones a la página Error.aspx por defecto ubicada en Views/Shared, aunque podemos indicarle otra vista en el atributo.
  3. using System;
    using System.Web.Mvc;

    namespace HandleErrorASPNETMVC2RC2.Controllers
    {
    [HandleError(Order = 2)]
    public class HomeController : BaseController
    {
    public ActionResult Index()
    {
    ViewData["Message"] = "Welcome to ASP.NET MVC!";

    return View();
    }

    [HandleError(ExceptionType = typeof(DivideByZeroException), View = "DivideByZeroError", Order = 1)]
    public ActionResult DivideByZeroExceptionAction()
    {
    throw new DivideByZeroException("DivideByZeroException is handled!");
    }

    }
    }

Si quisiéramos controlar excepciones de tipo HttpException como la siguiente:

public ActionResult NotFoundHttpExcepcion()
{
throw new HttpException(404, "Not Found duh!");
}

No sería posible solamente con el action filter proporcionado.

Tenemos varias alternativas para manejar estas excepciones. En este post, voy a exponer las dos que me han resultado más factibles:

HACIENDO USO DE APPLICATION_ERROR (GLOBAL.ASAX)

Podríamos definir un comportamiento para los errores de la aplicación, a través de Application_Error, de la siguiente manera (obtenido a través de stackoverflow):

protected void Application_Error(object sender, EventArgs e)
{
var exception = Server.GetLastError();

Response.Clear();

var httpException = exception as HttpException;

var routeData = new RouteData();
routeData.Values.Add("controller", "HttpError");

if (httpException == null)
routeData.Values.Add("action", "Index");
else
{
switch (httpException.GetHttpCode())
{
case 404:
routeData.Values.Add("action", "NotFound");
break;
case 403:
routeData.Values.Add("action", "Forbidden");
break;
default:
routeData.Values.Add("action", "Default");
break;
}
}

routeData.Values.Add("error", exception);

Server.ClearError();

IController errorController = new HttpErrorController();
errorController.Execute(new RequestContext(new HttpContextWrapper(Context), routeData));

}

En este caso tenemos un controlador llamado HttpError con una serie de vistas: Index, NotFound, Forbidden y Default. La parte positiva de esta forma es que, además de tener la posibilidad de redirigir a una vista personalizada, podemos realizar alguna acción, a través del controlador, antes de finalizar la petición. Además podemos utilizar este método de forma conjunta con HandleError para cubrir todas las excepciones posibles.

SOBREESCRIBIENDO ONEXCEPTION

Por otro lado, si lo que queremos es utilizar un atributo común para todas las excepciones, incluyendo HttpExceptions, podemos sobrescribir el action filter HandleError ampliando su funcionalidad de la siguiente manera:

using System.Web;
using System.Web.Mvc;

namespace HandleErrorASPNETMVC2RC2
{
public class HandleErrorHttpException : HandleErrorAttribute
{

public override void OnException(ExceptionContext filterContext)
{
if (!filterContext.IsChildAction && (!filterContext.ExceptionHandled && filterContext.HttpContext.IsCustomErrorEnabled))
{
var httpException = filterContext.Exception as HttpException;
if (httpException != null)
{
var controllerName = (string)filterContext.RouteData.Values["controller"];
var actionName = (string)filterContext.RouteData.Values["action"];
var model = new HandleErrorInfo(filterContext.Exception, controllerName, actionName);

var viewResult = new ViewResult
{
ViewName = View,
MasterName = Master,
ViewData = new ViewDataDictionary<HandleErrorInfo>(model),
TempData = filterContext.Controller.TempData
};
filterContext.Result = viewResult;
filterContext.ExceptionHandled = true;
filterContext.HttpContext.Response.Clear();
filterContext.HttpContext.Response.StatusCode = httpException.GetHttpCode();
filterContext.HttpContext.Response.TrySkipIisCustomErrors = true; //Deshabilita el manejo de errores de IIS
}
else
base.OnException(filterContext);
}
}
}
}

De esta manera, todas aquellas excepciones que pertenezca a HttpException pasarán por el primer bloque y  para cualquier otro tipo de excepción utilizará el método de la clase base.

Implementando esta segunda opción, podemos utilizar el nuevo action filter para controlar los errores de nuestros controladores.

using System;
using System.Web;
using System.Web.Mvc;

namespace HandleErrorASPNETMVC2RC2.Controllers
{
[HandleErrorHttpException(Order = 2)]
public class HomeController : BaseController
{
public ActionResult Index()
{
ViewData["Message"] = "Welcome to ASP.NET MVC!";

return View();
}

[HandleErrorHttpException(ExceptionType = typeof(DivideByZeroException), View = "DivideByZeroError", Order = 1)]
public ActionResult DivideByZeroExceptionAction()
{
throw new DivideByZeroException("DivideByZeroException is handled!");
}

public ActionResult Fordibben()
{
throw new HttpException(403, "Forbidden duh!");
}

[HandleErrorHttpException(ExceptionType = typeof(HttpException), View = "NotFound", Order = 1)]
public ActionResult NotFoundHttpExcepcion()
{
throw new HttpException(404, "Not Found duh!");
}

[HandleErrorHttpException(ExceptionType = typeof(InvalidOperationException), View = "InvalidOperationException", Order = 1)]
public ActionResult ViewDoesntExist()
{
return View("Doesnt Exist");
}
}
}

Nota: Cuando intentamos realizar un retorno a una vista que no existe el tipo de excepción es InvalidOperationException como se muestra en el último caso.

Espero que haya sido de utilidad.

¡Saludos!

Definiendo el primer layout con Silverlight

Después de conocer los distintos tipos de proyectos disponibles con Silverlight 3, a día de hoy última versión estable (Silverlight 4 Beta disponible), podemos comenzar a crear una aplicación de lo más sencilla. Antes de comenzar con el layout, vamos a crear un proyecto de tipo Silverlight Application.

Al pulsar en OK nos aparece una nueva ventana:

En este cuadro de diálogo nos están ofreciendo la posibilidad de agregar además un proyecto web a la solución. Toda aplicación Silverlight necesita un soporte web donde insertarse, debido a la plataforma en la que se basa.
Seleccionamos la opción por defecto, que es ASP.NET Web Application Project, y pulsamos OK para que adjunte este proyecto a la solución.

 

Por defecto, la página de inicio en este caso sería PrimeraAppSLTestPage.aspx donde está incrustada la aplicación Silverlight, PrimeraAppSL, para poder mostrarla en el navegador. ¿Dónde está alojada la misma?

Si echamos un vistazo a la página generada observamos lo siguiente:

<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>PrimeraAppSL</title>
<style type="text/css">
html, body {
height: 100%;
overflow: auto;
}
body {
padding: 0;
margin: 0;
}
#silverlightControlHost {
height: 100%;
text-align:center;
}
</style>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript">
function onSilverlightError(sender, args) {
var appSource = "";
if (sender != null && sender != 0) {
appSource = sender.getHost().Source;
}

var errorType = args.ErrorType;
var iErrorCode = args.ErrorCode;

if (errorType == "ImageError" || errorType == "MediaError") {
return;
}

var errMsg = "Unhandled Error in Silverlight Application " + appSource + "n" ;

errMsg += "Code: "+ iErrorCode + " n";
errMsg += "Category: " + errorType + " n";
errMsg += "Message: " + args.ErrorMessage + " n";

if (errorType == "ParserError") {
errMsg += "File: " + args.xamlFile + " n";
errMsg += "Line: " + args.lineNumber + " n";
errMsg += "Position: " + args.charPosition + " n";
}
else if (errorType == "RuntimeError") {
if (args.lineNumber != 0) {
errMsg += "Line: " + args.lineNumber + " n";
errMsg += "Position: " + args.charPosition + " n";
}
errMsg += "MethodName: " + args.methodName + " n";
}

throw new Error(errMsg);
}
</script>
</head>
<body>
<form id="form1" runat="server" style="height:100%">
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/PrimeraAppSL.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="3.0.40818.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>
</object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
</form>
</body>
</html>

A parte de una pequeña definición de estilos y de la creación de una función javascript, que trata los errores que se puedan producir de Silverlight, vemos que se especifica un div dentro del formulario del body, el cual contiene un objeto con los parámetros relativos a nuestra aplicación, tales como el tipo de aplicación y versión, la ubicación de la aplicación, la función a la que debe llamar en caso de error (la función javascript mencionada anteriormente), el color de fondo, si está permitida la actualización del plugin de manera automática y un link de referencia al mismo por si no está instalado en el cliente.

LAYOUT

Para comenzar con algo simple, y suponiendo que tenemos nociones de Web Forms, vamos a enfocarlo de la siguiente manera: Imaginemos que tenemos un formulario con Web Forms de lo más simple con una serie de campos para rellenar y queremos pasarlo a Silverlight.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AppWebForm._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="formulario" runat="server">
<div>
<div>
<asp:Label runat="server" AssociatedControlID="txtName" ID="lblName" Text="Name:" />
<asp:TextBox runat="server" ID="txtName" />
</div>
<div>
<asp:Label runat="server" AssociatedControlID="txtLastName" ID="lblLastName" Text="Last Name:" />
<asp:TextBox runat="server" ID="txtLastName" />
</div>
<div>
<asp:Label runat="server" AssociatedControlID="dddlGenre" ID="lblGenre" Text="Genre:" />
<asp:DropDownList runat="server" ID="dddlGenre">
<asp:ListItem Text="Female" Value="F" />
<asp:ListItem Text="Male" Value="M" />
</asp:DropDownList>
</div>
<div>
<asp:Label runat="server" AssociatedControlID="calBirthday" ID="lblBirthday" Text="Birthday" />
<asp:Calendar runat="server" ID="calBirthday" Caption="Birthday"></asp:Calendar>
</div>
<asp:Button runat="server" ID="btnEnviar" Text="Send" />
</div>
</form>
</body>
</html>

En Silverlight no utilizamos HTML para la creación de la interfaz de usuario sino XAML (eXtensible Application Markup Language), el cuál ya se utilizaba para Windows Presentation Foundation.

En el proyecto de Silverlight tenemos dos archivos con extensión xaml: App.xaml y MainPage.xaml. El primero de ellos se utiliza para declarar recursos compartidos y manejar eventos globales, de la misma manera que un archivo Global.asax en aplicaciones ASP.NET, y el segundo es donde definiremos la interfaz de usuario.

Para comenzar a “dibujar” la UI, abrimos el archivo MainPage.xaml donde inicialmente observamos el siguiente contenido:

<UserControl x:Class="PrimeraAppSL.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot">

</Grid>
</UserControl>

En el primer etiquetado tenemos la defición del control, asociado a una clase que actuará como code behind, una serie de espacios de nombres y por último las medidas del control. Dentro de él, de forma predeterminada, se define un Grid.
Llegados a este punto, conviene hacer una distinción: Existen generalmente dos tipos de elementos dentro del layout: contenedores y controles. Todos ellos están incluidos dentro de System.Windows.Controls. Los que heredan de Panel se consideran contenedores, los cuales nos ayudarán a ubicar a los controles dentro de la interfaz. Los contenedores más comunes son el Grid, Canvas y StackPanel, aunque hay disponibles otros que veremos más adelante.

A grandes rasgos, podemos decir que el Grid posiciona sus elementos a semejanza de una tabla o cuadrilla, el Canvas los ubica de una forma similar a la que acostumbramos con CSS (Top, Left) y en el caso del StackPanel podemos utilizarlo, generalmente, como un conjunto de controles en línea dándole un sentido vertical o horizontal. Para este ejemplo utilizaremos el Grid como contenedor.

Antes de comenzar a añadir los controles, necesitamos definir cómo será nuestro Grid.

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" x:Class="PrimeraAppSL.MainPage"
d:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot" Margin="5" Height="400" Width="400">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="60" />
<RowDefinition Height="Auto" MinHeight="60"/>
<RowDefinition Height="Auto" MinHeight="60"/>
<RowDefinition Height="Auto" MinHeight="60"/>
<RowDefinition Height="Auto" MinHeight="60"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition MinWidth="60"/>
</Grid.ColumnDefinitions>
</Grid>
</UserControl>

En este caso, le estamos pidiendo que el contenedor esté compuesto de 5 líneas con un alto automático y un mínimo de 60 y dos columnas, la primera con un width determinado y la segunda con un mínimo de 60.
Por último, necesitamos añadir y posicionar los controles dentro del grid definido, por ejemplo de la siguiente forma:

<UserControl xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" x:Class="PrimeraAppSL.MainPage"
d:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot" Margin="5" Height="400" Width="400">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="60" />
<RowDefinition Height="Auto" MinHeight="60"/>
<RowDefinition Height="Auto" MinHeight="60"/>
<RowDefinition Height="Auto" MinHeight="60"/>
<RowDefinition Height="Auto" MinHeight="60"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition MinWidth="60"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="ForeName" Text="Name:" Width="50" Height="25" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Right"/>
<TextBox x:Name="txtName" Width="150" Height="25" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Left"/>
<TextBlock x:Name="LastName" Text="Last Name:" Height="25" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Right"/>
<TextBox x:Name="txtLastName" Width="150" Height="25" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left"/>
<TextBlock x:Name="Genre" Text="Gerne:" Height="25" Grid.Row="2" Grid.Column="0" HorizontalAlignment="Right"/>
<ComboBox x:Name="comboGenre" Width="150" Height="25" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Left">
<ComboBoxItem Content="Female"/>
<ComboBoxItem Content="Male"/>
</ComboBox>
<TextBlock x:Name="Calendar" Text="Birthday:" Height="25" Grid.Row="3" Grid.Column="0" HorizontalAlignment="Right"/>
<controls:Calendar x:Name="BirthdayCalendar" Grid.Row="3" Grid.Column="1" HorizontalAlignment="Left"/>
<Button x:Name="buttonGrid" Content="Send" Width="100" Height="25" Grid.Row="4" Grid.Column="1"/>
</Grid>
</UserControl>

Para posicionar los controles dentro del Grid, tomando como primer valor el 0, usamos Grid.Row para indicar la fila y Grid.Colum  para la columna.

Si arrancamos la aplicación para comprobar el resultado, obtendríamos lo siguiente:

En una primera toma de contacto con XAML, hemos comprobado como podemos montar un formulario, bastante similar al anterior mostrado con Web forms, y posiblemente de una forma algo más atractiva sin realizar modificaciones de estilo considerables.

Adjunto el proyecto por si fuera de utilidad.

¡Saludos!

Dropbox

Dropbox se trata de un servicio que te permite almacenar tus archivos de forma remota y, a su vez, que estos mismos estén sincronizados en distintos dispositivos. Actualmente tiene soporte para Windows, Linux, Mac e iPhone.

Lo que más me ha interesado de Dropbox es utilizarlo como un simple controlador de versiones  para proyectillos personales =)  La cuenta gratuita son 2 GB de capacidad y es necesario instalar un cliente en cada uno de los equipos donde queremos realizar la sincronización. El resultado será una carpeta, por defecto en Mis documentos, con el siguiente aspecto:

Una vez instalado, todo lo que arrastremos a esta carpeta será alojado en el servidor remoto y comenzará a sincronizar con todos aquellos dispositivos que tengamos enlazados. 
Como opciones tenemos la posibilidad de obtener el link para poder compartirlo con otras personas, ver el histórico de versiones del archivo y visualizar Dropbox mediante web.

Si por ejemplo tengo una solución dentro de Dropbox y además la tengo compartida con una serie de personas, podría visualizar quién y cuándo modificó un archivo e incluso volver a una versión anterior.

A mi, personalmente, me va a ayudar a dejar algo más de lado el pendrive ¡Me pareció lo más cómodo!

Espero que a alguien más le sirva =)

¡Saludos!

Comenzando con Silverlight

Uno de los objetivos de este año 2010 iba a ser justamente este: Comenzar con Silverlight.
Realmente no creo que sea necesaria una presentación exhaustiva sobre el producto pero, para comenzar con mi tira de post relacionados, comenzaré hablando de los aspectos básicos que nos afectan a los desarrolladores en el modo de trabajar. 

En primer lugar, para comenzar a trabajar con Silverlight, es necesario descargar las herramientas para Visual Studio. Podemos usar Web Platform Installer o bien realizar una descarga directa a través de este enlace para la versión 3.

TIPOS DE PROYECTOS PARA SILVERLIGHT

Si arrancamos Visual Studio y comprobamos las nuevas posibilidades observamos que existen 3 tipos distintos dentro de la pestaña Silverlight:

  • Silverlight Application: Se utiliza para generar una aplicación desde cero con Silverlight.

    El archivo de entrada de la aplicación es App.xaml el cual tiene un archivo cs ligado que actúa como code behind. La extensión del mismo proviene de XAML utilizado en Windows Presentation Foundation para definir la interfaz de usuario. A través de él comienza la aplicación y se determina qué control de usuario se iniciará en primer instancia.

    private void Application_Startup(object sender, StartupEventArgs e)
    {
    this.RootVisual = new MainPage();
    }

    Por defecto, se genera un archivo llamado MainPage.xaml que corresponde a un control de usuario en XAML. 

    <UserControl x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
    <Grid x:Name="LayoutRoot">

    </Grid>
    </UserControl>
  • Silverlight Class Library: Se utiliza para generar librerías relacionadas con Silverlight.

    En este punto, es posible que nos preguntemos cuál es la diferencia entre un proyecto de librería para Silverlight y uno tradicional, puesto que las diferencias (a parte de las referencias) no parecen para nada visibles. Si vemos las propiedades de proyecto de ambas, veríamos lo siguiente:

    Class Library
     

    Class Library For Silverlight 

    1. No permite referenciar ningún objeto de inicio ni especificar opciones de build.
    2. El CRL de Silverlight es diferente al de .NET. 
    3. Algunas de las referencias habituales de .NET no son soportadas por el pluging de Silverlight. 

     

  • Silverlight Navigation Application: Este último proyecto tiene como cometido las aplicaciones RIA (Aplicaciones de Internet Enriquecidas)

 

Según vayamos viendo cada uno de los proyectos, se intentará profundizar más en cada uno de ellos. Por el momento, me parecía interesante ver qué tipos están disponibles y ponernos manos a la obra en los que, espero, sean unos muy entretenidos posts =)

¡Saludos!

ReSharper 5 y ASP.NET MVC

En el día de hoy, se ha puesto a nuestra disposición la nueva versión de Resharper 5 Beta (Build 1612), compatible con Visual Studio 2010 RC. Si bien es cierto que llevamos disfrutando de distintas versiones desde el pasado mes de Octubre, voy a aprovechar esta ocasión para comentar algunas de las novedades que presenta esta gran herramienta en cuanto a ASP.NET MVC se refiere.

Todas las versiones publicadas están disponibles en el siguiente enlace

EN LAS VISTAS

Si no utilizamos plantillas T4 en nuestros proyectos con ASP.NET MVC, tenemos el inconveniente de no poder navegar de las vistas a los controladores, acciones, etcétera a menos que usemos Resharper 🙂

 

En aquellos links que aparezcan subrayados dentro de nuestras vistas, tendremos la posibilidad de navegar a su implementación pulsando Control + click izquierdo sobre el link o bien posicionándonos sobre el texto subrayado y pulsando F12.
Por otro lado, tenemos la capacidad de generar código a través de estos mismos literales utilizando el mismo sistema que para cualquier otro método, propiedad, etcétera que no esté implementado.

Nota: Para mostrar el popup de Resharper, basta con seleccionar el link resaltado en rojo y pulsar sobre la bombilla o bien Alt + Intro.

EN LOS CONTROLADORES

Para seguir la misma línea, podemos navegar desde las acciones a las vistas pulsando Control + click sobre View o bien F12.


.

En este caso, además, nos presenta dos posibilidades: Acudir a la vista como tal, en este caso Index.aspx, o bien acceder a la implementación del método View que se encuentra en System.Web.Mvc.

Por último, podemos localizar tipos, comprobar los usos, mostrar intellisense para la localización de vistas, etcétera de la misma forma que lo hacíamos con el resto de proyectos.

Control + T (Localización de tipos)

.

Shift + F12 (Encontrar usos)

Control + space (Intellisense)

Tanto en controladores:

Como en las vistas:

Sin duda alguna, para todos aquellos que usemos Resharper, ya podemos empezar a contar con sus consejos para aplicaciones ASP.NET MVC.

¡Saludos!

Intellisense para archivos .skin

Hoy estuve trasteando con los archivos .skin y me sorprendió el hecho de que el intellisense no estuviera habilitado. Este va a ser un post muy corto pero creo que estoy muy mal acostumbrada y sin intellisense no puedo vivir =P

Para habilitarlo sólo debemos seguir los siguientes pasos:

  1. En el menú de Visual Studio seleccionamos Tools > Options y, dentro del apartado Text Editor, nos ubicamos en File Extension

  2. En la parte superior de este apartado, tenemos un recuadro donde podemos escribir la extensión y seleccionar el editor. En este caso, escribimos skin y seleccionamos User Control Editor. Para finalizar pulsamos en Add y OK. 

  3. Para que el cambio tenga efecto, es necesario cerrar todos los archivos de skins.

      

 

¡Y esto es todo! Ya podemos disfrutar de intellisense en estos archivos. ¡Uf! Necesitaba comentarlo para la gente que sufre por estas cosas como yo =D

¡Saludos!