ASP.NET Chart Controls y ASP.NET MVC

Hace ya más de un año apareció una nueva librería para la creación de gráficos, tanto para Web Forms como Win Forms, con una enorme cantidad de posibilidades. Hoy en día se nos puede plantear la posibilidad de utilizar estos mismos controles para una aplicación ASP.NET MVC y cómo sería la forma más sencilla de adaptarlo.
Si bien he leído y probado varias opciones, voy a escribir sobre la que me ha parecido más sencilla y más práctica.

INSTALACIÓN DE LIBRERÍAS Y COMPONENTES 

Para poder trabajar con estos controles, es necesario descargar dos ejecutables:

La librería que nos permite la creación de un gráfico se llama System.Web.DataVisualization, la cual está disponible instalando el primero de los paquetes. El segundo de ellos es interesante instalarlo para poder visualizar en el cuadro de herramientas el control de tipo Chart. Existen numerosas combinaciones y propiedades configurables para este tipo de controles, por lo que hay veces que es más práctico crear una aplicación Web Forms de prueba, en modo diseño arrastrar el control y personalizarlo. De esta forma podemos ver el código generado en el aspx y las propiedades utilizadas para ese chart en concreto. Otra de las posibilidades es descargar el proyecto de ejemplos y localizar alguno que ya esté definido y adaptarlo.

CREACIÓN DEL GRÁFICO

Para entender mejor el código, podríamos decir que un chart se compone de 4 partes principalmente: Chart, que es el control principal, Legend, encargado de la leyenda del gráfico, ChartArea, el cual representa el área donde se mostrarán los valores y las Series que son los valores en sí.

El primer paso es agregar una referencia a la librería System.Web.DataVisualization. Una vez añadida, creamos una nueva acción donde se instanciarán los controles necesarios y, finalmente, nos devolverá la imagen generada según las propiedades establecidas.

public ActionResult GetChart()
{
const string legend = "Legend";
const string chartArea = "chartArea";

var chart = ChartFactory.CreateChart("ASP.NET MVC and MSChart by GiS!");


ChartFactory.CreateSerie(chart, "januarySeries", chartArea,
legend, "Emboss", Color.ForestGreen,
ChartValueType.DateTime, ChartValueType.Double,
_repository.GetMonthData(1));

ChartFactory.CreateSerie(chart, "februarySeries", chartArea,
legend, "Cylinder", Color.DodgerBlue,
ChartValueType.DateTime, ChartValueType.Double,
_repository.GetMonthData(1));

ChartFactory.CreateSerie(chart, "marchSeries", chartArea,
legend, "Wedge", Color.DarkViolet,
ChartValueType.DateTime, ChartValueType.Double,
_repository.GetMonthData(3));

var memoryStream = new MemoryStream();
chart.SaveImage(memoryStream);

return File(memoryStream.GetBuffer(), @"image/png");
}

Para intentar refactorizar parte del código necesario para generar el gráfico, he creado una clase llamada ChartFactory en la cual podemos formar tanto el chart, la leyenda, el chartArea y las series que se mostrarán.

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Web.UI.DataVisualization.Charting;
using ChartControlASPNETMVC.Models;

namespace ChartControlASPNETMVC
{
public static class ChartFactory
{
public static Chart CreateChart(string chartTitle)
{
//Chart
var chart = new Chart
{
Height = 296,
Width = 412,
BorderWidth = 2,
ImageType = ChartImageType.Png,
BackColor = ColorTranslator.FromHtml("#F3DFC1"),
BorderlineDashStyle = ChartDashStyle.Solid,
BackGradientStyle = GradientStyle.LeftRight,
BorderColor = Color.FromArgb(181, 64, 1),
BorderSkin = { SkinStyle = BorderSkinStyle.Sunken },
};

//Title
var title = chart.Titles.Add("chartTitle");
title.ShadowColor = Color.FromArgb(32, 0, 0, 0);
title.ShadowOffset = 3;
title.ForeColor = Color.FromArgb(26, 59, 105);
title.Font = new Font("Trebuchet MS", 14, FontStyle.Bold);
title.Text = chartTitle;
title.Alignment = ContentAlignment.TopLeft;

//Legend
var legend = chart.Legends.Add("chartLegend");
legend.LegendStyle = LegendStyle.Row;
legend.Font = new Font("Trebuchet MS", 10, FontStyle.Bold);
legend.Enabled = true;
legend.Name = "Legend";
legend.BackColor = Color.Transparent;
legend.Position.Y = 95;
legend.Position.X = 5;
legend.Position.Height = 20;
legend.Position.Width = 100;

//Chart Area
var chartArea = chart.ChartAreas.Add("chartArea");
chartArea.BorderColor = Color.FromArgb(64, 64, 64, 64);
chartArea.BackSecondaryColor = Color.White;
chartArea.BackColor = Color.OldLace;
chartArea.ShadowColor = Color.Transparent;

//Chart Area 3D Style
chartArea.Area3DStyle.Enable3D = true;
chartArea.Area3DStyle.Rotation = -20;
chartArea.Area3DStyle.Perspective = 8;
chartArea.Area3DStyle.Inclination = 18;
chartArea.Area3DStyle.IsRightAngleAxes = false;
chartArea.Area3DStyle.WallWidth = 0;
chartArea.Area3DStyle.IsClustered = false;
chartArea.Area3DStyle.PointDepth = 50;
chartArea.Area3DStyle.PointGapDepth = 200;

chartArea.AxisY.LineColor = Color.FromArgb(64, 64, 64, 64);
chartArea.AxisY.IsLabelAutoFit = false;
chartArea.AxisY.LabelStyle.Font = new Font("Trebuchet MS", 8, FontStyle.Bold);
chartArea.AxisY.MajorGrid.LineColor = Color.FromArgb(64, 64, 64, 64);

chartArea.AxisX.LineColor = Color.FromArgb(64, 64, 64, 64);
chartArea.AxisX.IsLabelAutoFit = false;
chartArea.AxisX.LabelStyle.Font = new Font("Trebuchet MS", 8, FontStyle.Bold);
chartArea.AxisX.MajorGrid.LineColor = Color.FromArgb(64, 64, 64, 64);

return chart;
}


public static void CreateSerie(Chart chart, string serieName, string chartAreaName, string legendName, string drawingStyle, Color color, ChartValueType xValue, ChartValueType yValue, List<TableSample> monthData)
{
var newSerie = chart.Series.Add(serieName);
newSerie.ChartArea = chartAreaName;
newSerie.XValueType = xValue;
newSerie.YValueType = yValue;
newSerie.Name = serieName;
newSerie.ShadowColor = Color.Transparent;
newSerie.BorderColor = color;
newSerie.Color = color;
newSerie.Legend = legendName;

/**** Drawing Style ****/
/*Cylinder - Data points are drawn as cylinders.
Emboss - Data points are drawn with an embossed effect.
LightToDark - Data points are drawn with a light-to-dark effect.
Wedge - Data points are drawn with a wedge effect.
Default - Data points are drawn as cubes.*/

newSerie["DrawingStyle"] = drawingStyle;
newSerie["PointWidth"] = "0.8";

WriteSeries(newSerie, monthData);
}

private static void WriteSeries(Series serie, IEnumerable<TableSample> list)
{
foreach (TableSample t in list)
{
serie.Points.Add(new DataPoint
{
YValues = new Double[] { t.Amount },
LegendText = t.Date.Day.ToString(),
AxisLabel = t.Date.Day.ToString()
});
}
}
}
}

Seguramente podremos refactorizar aún más y hacer una librería que nos permita mayor flexibilidad, pero el objetivo de este post es mostrar que existe la posibilidad de utilizar este tipo de controles.

La función de este control, a fin de cuentas, es generar una imagen con las propiedades y los datos obtenidos. Para llamar a la acción GetChart desde nuestra vista únicamente debemos asignar la misma al source de una imagen.

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Home Page
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>
<%= Html.Encode(ViewData["Message"]) %></h2>
<div id="container">
<img src="<%=Url.Action("GetChart") %>" alt="Chart Sample" />
</div>
</asp:Content>

 Si arrancamos la aplicación, el resultado sería el siguiente:

Y, lo mejor de todo, el renderizado de la página:



!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><title>

Home Page

/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">

[ <a href="/Account/LogOn">Log On</a> ]

</div>
<div id="menucontainer">
<ul id="menu">
<li>
<a href="/">Home</a></li>
<li>
<a href="/Home/About">About</a></li>
</ul>
</div>
</div>
<div id="main">

<h2>
Chart Control Sample!</h2>
<div id="container">
<img src="/Home/GetChart" alt="Chart Sample" />
</div>

<div id="footer">
</div>
</div>
</div>
/body>
/html>

Por último, debido a que esta librería es adicional al framework, sería recomendable modificar las propiedades de la misma para tener una copia en el paquete final.

Adjunto el proyecto por si fuera de utilidad.

¡Saludos!

Subir una aplicación ASP.NET MVC a IIS 5.1

Si todavía tenemos que trabajar con Windows XP y estamos utilizando proyectos en ASP.NET MVC es posible que queramos publicar los mismos en el IIS local para realizar las pruebas necesarias. En este caso, vamos a aprovecharnos de un bug de la versión 5.1 de Internet Information Server para hacer funcionar nuestro proyecto:

  1. Accedemos a las propiedades del directorio virtual donde tengamos alojada la aplicación.
  2. Nos aseguramos de que tenemos permisos para ejecutar sólo secuencias de comandos.

  3. Pulsamos sobre el botón Configuración… y, en la pestaña Asignaciones, pulsamos en Agregar.

  4. Rellenamos la ventana con los siguientes datos:
    • En el campo Ejecutable debemos seleccionar la DLL aspnet_isapi.dll, ubicada en la siguiente ruta: C:WINDOWSMicrosoft.NETFrameworkv2.0.50727aspnet_isapi.dll.
    • En el campo Extensión escribimos .*
    • Por último, eliminamos el check en Comprobar si el archivo existe.
  5. Al hacer estos pasos nos daremos cuenta de que el botón de Aceptar aparece deshabilitado debido a que la extensión proporcionada no es válida.
  6. Para poder aceptar los cambios, hacemos click sobre el campo Ejecutable y … ¡magia! 😛

Espero que sea de utilidad.

Fuente

¡Saludos!

Los controles de Telerik para ASP.NET MVC

Si bien es cierto que ASP.NET MVC te da mayor control sobre la vista que genera, puede resultar un retraso en nuestro proyecto el intentar generar controles algo más elaborados si no disponemos de unos conocimientos previos como diseñadores.

Para evitarnos esta búsqueda y aprendizaje, os propongo el uso de los controles de Telerik para ASP.NET MVC. Existen dos tipos de licencia: Una Open Source que está diseñada para el público en general, en la que podemos visualizar y modificar el código de los controles y, por otro lado, existe una licencia comercial para recibir más beneficios y soporte. En este post me centro en la versión Open Source.

Para crear estos controles, disponemos de una serie de Helpers:

  • Grid

    <%= Html.Telerik().Grid(Model)
            .Name("Grid")       
            .Pageable()
    %>
  • PanelBar

    <%= Html.Telerik().PanelBar()
           .Name("PanelBar")
           .Items(items =>
           {
               items.Add().Text("Item 1");
               items.Add().Text("Item 2");
           })
    %>
  • Calendar

    <%= Html.Telerik().Calendar()
           .Name("Calendar")
    %>
  • DatePicker

    <%= Html.Telerik().DatePicker()
            .Name("DatePicker")
    %>
  • Menu 

    <%= Html.Telerik().Menu()
            .Name("Menu")
            .Items(items =>
            {
                items.Add().Text("Item 1");
                items.Add().Text("Item 2");
            })
    %>
  • Numeric Textbox 

    <%= Html.Telerik().NumberTextBox()
                      .Name("NumberTextBox")
                      .Value(12.10)
    %>
  • TabStrip

    <%
         Html.Telerik().TabStrip()
             .Name("TabStrip")
             .Items(items =>
             {
                 items.Add().Text("Item 1")
                      .Content(()=>
                      {%>
                          <p>Content</p>
                      <%});
                 items.Add().Text("Item 2");
             })
             .Render();
     %>
  • TreeView

    <%= Html.Telerik().TreeView()
            .Name("TreeView")
            .Items(items =>
            {           items.Add().Text("Item 1");
                        items.Add().Text("Item 2");
             })
    %>

Todos los controles que requieran una carga de datos, tales como menús o el grid, podemos realizar el bindeo a través de Ajax, del objeto Model del cual hereda nuestra vista, a través de un web service, utilizando el ViewData, utilizando SiteMap o bien personalizar la información de una forma más manual.
Cada uno de ellos dispone de una serie de funcionalidades diferentes. En el caso del Grid podemos paginar, filtrar, agrupar, etcétera de una forma bastante sencilla y clara.

Para utilizarlos, solamente debemos registrarnos en la página y posteriormente bajar el ejecutable. Tiene una documentación lo bastante clara y organizada para no tener problemas a la hora de querer usar cualquiera de los controles. Por otro lado comentar que disponen de una comunidad muy activa que conviene visitar.
Espero que sirvan de utilidad y ayuden a ganar tiempo 😉

¡Saludos!

 

MAD.NUG: Desarrollando software para entregar valor al cliente

El próximo 23 de Marzo tendremos la suerte de poder contar con Hadi Hariri, evangelista tecnológico en JetBrains, que nos hablará de BDD (Behaviour Driven Development) como metodología ágil de desarrollo.
En esta charla tendremos la oportunidad de conocer las ideas detrás de BDD y ver de qué forma nos ayuda a lidiar a los desarrolladores con las especificaciones del cliente.

Como siempre, el evento tendrá lugar en el edificio de Microsoft Ibérica en Madrid. Para más información os facilito el enlace.

¡Saludos!

¿Qué es Sharepoint?

Muchas de las personas que no han tenido aún la oportunidad de pelearse con este producto desconocen qué es Sharepoint o cuál es su finalidad. Sé que en Geeks.ms muchas personas trabajan con ello y han tenido que lidiar con algunas de sus «peculiaridades», pero voy a intentar simplificarlo a mi manera para aquellos que justo ahora comienzan con este mundo.

Antiguamente, cuando las personas de una organización necesitaban compartir ficheros entre ellos, existían varias posibilidades:

  1. Se mandaba un correo con el archivo adjunto y una vez enviado no se sabía nada más o bien podían existir unas idas y venidas de correos con distintas versiones del mismo archivo con el riesgo que aquello suponía.
  2. Se compartía una carpeta en el pc de turno y la gente depositaba los documentos que creían convenientes para el resto de la empresa. Si al menos se tenía en cuenta una serie de permisos sobre esa carpeta, la cosa no terminaba en catástrofe… Si por el contrario existía el libre albedrío esperemos que, al menos, existiera un backup 😉
  3. […]

Obviamente estas alternativas y otras que podemos suponer nos «ayudan» a descentralizar la información, no tener un control real de las versiones de esos documentos, no saber siquiera si tenemos todos los documentos que realmente deberíamos, etcétera.

¿Qué es Sharepoint?

Sharepoint se encarga de aquellos puntos que no conseguíamos de una forma eficaz con otros sistemas:

  • Centralizar la información de la organización.
  • Control de versiones de la documentación.
  • Compartir los recursos con otros miembros.
  • Control de acceso a la información.
  • Buscar personas dentro de la empresa.
  • Etcétera. (Más información aquí)

¿Cómo se consigue?

Gracias a los conceptos Portal y sitios podemos disponer de la información de la empresa a través de la intranet y la extranet utilizando nuestras credenciales.

Este producto consta actualmente de dos partes para sacar el mayor provecho posible:

  • Windows Sharepoint Services (WSS) es la base para la creación de portales y los sitios web dentro de los mismos. Gracias a él podemos almacenar la información, controlar el acceso a la misma, administrar los usuarios, hacer uso del control de versiones, flujo de trabajo y el motor de búsqueda.
  • Microsoft Office Sharepoint Services 2007 (MOSS) se trata de una extensión de WSS, la cual nos aporta mayor funcionalidad en nuestros portales. Gracias a MOSS podemos crear formularios de InfoPath dinámicamente, integración con Reporting Services, BI, podemos hacer uso de bases de datos externas al sistema, utilizar Excel como un servidor cálculo, permitir  a los usuarios generar sitios individuales, etcétera. 

A día de hoy ya se está trabajando en Sharepoint 2010 y está prevista su fecha de lanzamiento para el día 12 de mayo de este año.

A medida que vaya conociendo cada una de las funcionalidades intentaré dedicarle el tiempo que se merezcan 🙂
Como desarrolladora, mi intención es dedicar la mayor parte de mi tiempo a descubrir las posibilidades que ofrece la plataforma para que los desarrolladores podamos extender aún más su funcionalidad.

Herramientas para el desarrollo

El entorno de trabajo es Visual Studio para el cual disponemos un SDK con las plantillas de Sharepoint. Están disponibles desde Visual Studio 2005 en adelante. Para poder descargar la versión oportuna podemos hacerlo a través de este link. En Visual Studio 2010 RC dichas plantillas ya están incluidas.

¿Os acordáis de FrontPage? Para aquellos que pensabais como yo que se había extinguido os comunico que para nada, su nombre actual es Sharepoint Designer y será nuestro aliado a la hora de diseñar 😉

Requisitos mínimos para una instalación stand-alone

  • Procesador: 2.5 GHz
  • RAM: 1 GB
  • Disco duro: 3 GB
  • Software: Windows Server 2003/2003 R2/2008
  • Visual Studio 2005/2008/2010
  • SQL Server 2005 (En la instalación de Sharepoint nos proporciona un SQL Server)

Más información.

Existe una máquina virtual ofrecida por Microsoft en el siguiente enlace. La misma está compuesta de veinte partes y se hace bastante pesada su descarga. Comentaros que yo intenté hacer uso de ella pero, desconozco si fue por un problema puntual, al intentar descomprimir la máquina me avisó de que una de las partes estaba corrupta y no pude continuar 🙁

La instalación es bien sencilla pero debemos tener en cuenta el siguiente orden para no volvernos loc@s. En este caso estamos suponiendo que la instalación es para un entorno de desarrollo:

  1. Una vez que tengamos preparado un Windows Server, debemos añadir el rol de Servidor Web para dejar preparado el IIS.
  2. Iniciamos la instalación de Sharepoint (Dentro de las opciones avanzadas, mantuve la instalación Independiente). Cuando la misma finaliza, podremos configurar Sharepoint en ese momento o ejecutar el asistente más adelante a través del acceso directo Sharepoint Products and Technologies. Por otro lado, para crear y configurar nuevos portales existe otro acceso directo llamado Sharepoint 3.0 Central Administration. Por el momento, para la serie de post que pretendo realizar, he creado un nuevo portal con un sitio de tipo Team Site.
  3. Instalamos Visual Studio y el SDK indicado para su versión.

A partir de este momento, estamos listos para comenzar a trastear con Sharepoint 🙂

¡Comencemos!

MAD.NUG: XRM: Una plataforma para unificarlas a todas

¿Qué es XRM? ¿Cómo puedo sacarle partido como herramienta de negocio? Estas preguntas y muchas más podremos discutir en el evento que se llevará a cabo el día 11 de Marzo en el edificio de Microsoft Ibérica en Madrid.

Gracias a la colaboración de Marco Amoedo, MVP de CRM, en Mad.Nug tendremos la posibilidad de conocer los conceptos básicos de XRM, técnicas de desarrollo, etcétera.

Para más información y acceder al registro tenemos el siguiente enlace.

¡Os esperamos!