Responsive Aeon, framework para Responsive Design


Hoy a caído en mis manos un framework para diseñar proyectos web, de forma que sean adaptables a cualquier dispositivo sobre el que se esté visualizando. Como reza el título, se trata de ResposiveAeon.

Como en la mayoría de los casos mediante la descarga de unos archivos básicos, podremos diseñar nuestros proyectos web sin preocuparnos del dispositivo.

Al igual que otros sistemas de maquetación, está basado en columnas, pero lo que me ha llamado la atención es lo simple de su estructura y programación.

Aquí están algunas de sus características:
• Distribuye los contenidos en columnas, con un ID propio y el CSS se encarga del resto.
• Permite el uso de etiquetas HTML5.
• Establece la carga de archivos de forma paralela, optimizando la visualización de la página.
• Tiene plantillas para diseñar contenidos, que se instalan en Photoshop, Illustrator,...
• Por supuesto, funciona en todos los navegadores.

Y cómo no, está a nuestra disposición en GitHub.

Creo que va siendo hora de probarlo.
¿Y vosotros, qué opinais de él?

Referencias:
http://www.newaeonweb.com.br/responsiveaeon/
GitHub Proyect
Demo
[...]

Leer más >>

Internet Explorer se suma a las Actualizaciones Automáticas 'IMPORTANTES'

He de reconocer que aunque la siguiente noticia es antigua, tiene la suficiente entidad como para remarcarla ahora que ha llegado a mis manos. Tal y como reza el título, Microsoft ha decidido 'animar a sus usuarios' ha actualizar su versión del navegador a las últimas versiones, dependiendo de los Sistemas Operativos instalados en sus máquinas - con acutalizaciones automáticas IMPORTANTES

Esto es una gran noticia para los desarrolladores que al igual que yo, tienen que realizar trabajos web, y se ven forzados a efectuar el mismo trabajo con soporte visual para distintos navegadores .... entre los que se incluye I.Explorer 7.

El problema de tener que trabajar para diferentes versiones de un mismo navegador, sobre todo con Internet Explorer, es que las diferencias con respecto a las nuevas versiones son tan grandes, que casi nos vemos obligados a realizar distintas implementaciones para un mismo proyecto web, con la consiguiente carga de trabajo y tiempo.

Pues bien, parece que Microsoft ha oido nuestras plegarias, y aquellos clientes que aún trabajen con navegadores antiguos, tendrán una nueva actualización en su Windows Update, de caracter IMPORTANTE (esto es, de actualización directa), para que instalen la última versión del navegador en sus S.Operativos.

Tal y como indica Paul Irish en su blog, los usuarios tendrán unas actualizaciones para el navegador de la siguiente manera:
· Usuarios de Windows XP, verán la opción de actualización de su navegador de IE6 - IE7 a IE8,
· Usuarios de Windows Vista y W7, verán una actualización a IE9

Esperemos que con este sistema, nuestros clientes y usuarios web se actualicen a las versiónes más modernas del navegador y puedan disfrutar de los beneficios que ofrecen éstos, como JQuery, animaciones, HTML5, CSS3... etc.

NOTITA APARTE:
Por cierto, JQuery lanzó un aviso hace poco.... la versión 2.0 de sus librerías ya no tendrá soporte para  las versiones de IE6,7 y 8.
Pero esa es otra historia... (que puedes leer aquí)

¡Un saludo a todos!

Y como siempre, las referencias:
Windows Team Blog
Paul Irish Blog
[...]

Leer más >>

OnClick Event not fired first in custom control

Tal y como indica el título de este post, voy a explicar porque a veces no se ejecuta el evento 'OnClick' a la primera, dentro de nuestros Custom controls, y sí a la segunda.

El problema supuesto se puede reproducir insertando en una página aspx, varios controles personalizados, que a su vez tienen subcontroles hijos personalizados con botones que deben ejecutar un postback a la página padre.

Contemos con el supuesto inicial:
· Una página padre, con un UpdatePanel de Ajax.
· Un control principal, que se inserta 5 veces en la página padre.
· Unos controles hijos que se insertan dinámicamente en el control padre (segun la interaccion del usuario), hasta un total de 3.
· Estos controles hijos tienen un botón que permite eliminarlos de la lista del control padre.

El proceso es el siguiente:
Cuando se carga la página principal, el usuario puede añadir los controles padre según le convenga. Además, según se van cargando los controles padres, el usuario puede ir insertando en ellos, los controles hijos. Si en algún momento se encuentra en la necesidad de borrar un subcontrol hijo de la lista de uno de los padres, debe pulsar su botón para eliminarlo... y es en este punto donde falla el sistema si se han añadido más de un control hijo.

Después de mucho buscar en "San Google" (más adelante pondré algunas referencias) en la mayoría de los supuestos, se hablaba de un conflicto con los postback, y la carga de los controles de forma asíncrona. O bien, trataban el tema desde la generación de los controles en el Page_Load.

Teniendo en cuenta las anteriores soluciones y confirmando que todo estaba en su sitio, encontré mi propia solución y tuve que darme golpes contra la pared porque se trataba de un tema tan simple como abrumador.

SOLUCION:

El propio compilador de ASP.NET, genera un ID automático y único para cada componente insertado en la página, sin importar cuando o donde se genere. Ahora bien, si se insertan dinámicamente los controles, es posible que por el orden de inserción, dichos controles no contengan el mismo ID entre un postback y otro.

Esto supone, que si insertamos un primer control e inmediatamente después, realizamos un postback sobre él, el sistema es capaz de reconocer de dónde viene, y por tanto ejecutarlo. Pero si por el contrario, insertamos un primer elemento y posteriormente un segundo, es posible que los ID autogenerados entren en conflicto y al intentar realizar un postback desde el primero, éste no encuentre el ID inicial y no ejecute el evento.

NOTA CURIOSA: En este punto la página ha vuelto a reenviarse y cada subcontrol se ha vuelto a generar con un nuevo ID. Por tanto si se vuelve a ejecutar el postback del botón, esta vez SÍ encontrará el control y lo realizará correctamente.

COMO EVITAR ENTONCES este problema...
Tan sencillo como estúpido. Asigna directamente un ID único a tu subcontrol cuando lo generes. De esta forma mantendrá siempre un identificador unico por muchos controles que insertes en la página.

Entiendo que algunos me podréis decir que es "Good Practice" asignar directamente el ID y sí, así es. Pero el problema es que muchas veces necesitamos trabajar tan rápido, y estamos tan acostumbrados a las bondades de Visual Studio, que nos olvidamos de estos pequeños detalles (tan importantes).

Así que no lo olvides, toma como buena práctica identificar cada control que generes con un ID propio, y evitarás este molesto ¿problemilla?.

Espero que os ayude.
¡Un saludo a todos!

Referencias:
StackOverflow Questions: 2765815
PostBack forced on UpdatePanel
Programmatically adding ASP.net User Control to Partial Page Update / UpdatePanel
[...]

Leer más >>

EVENTO: Webcast MSDN - ASP.NET MVC

Webcast MSDN: ¿TODAVÍA NO CONOCES ASP.NET MVC?



Gracias a Microsoft y sus World Wide Events, en colaboración con DesarrolloWeb, tenemos a nuestra disposición la posibilidad de participar en un gran evento de ASP.NET.

Si aún no conocéis ASP.NET MVC, o queréis conocer más sobre esta nueva tecnología, no debéis dejar pasar esta oportunidad de participar en este evento.

La fecha del mismo es el Miércoles, 14 de marzo de 2012 a las 19:00 

Para apuntaros y tener toda la información de primera mano, entrar en Webcast MSDN: ¿TODAVÍA NO CONOCES ASP.NET MVC?


desarrolloweb.com
[...]

Leer más >>

R# ReSharper 6 - The most Intelligent Extension for VS

Hace algún tiempo descubrí un interesante plugin para Visual Studio, que ampliaba las capacidades propias del IntelliSense. Hoy quiero desgranar un poquito más este plugin, y comentarios las bondades del mismo. Un pequeño granito de arena para difundir este complemento realizado por el equipo de JetBRAINS

Indudablemente detrás de este plugin, se encuentra un gran trabajo de investigación y desarrollo, que puede seguir creciendo y evolucionando gracias a todos aquellos que participan del mismo.



Para aquellos que aún no lo conozcáis, ReSharper es un plugin que otorga, al igual que el IntelliSense, ayudas visuales durante el desarrollo del código fuente. Entre sus virtudes, se pueden destacar:

· Análisis del código en tiempo real, con indicaciones de errores.
· Actualización automática del código.
· Inserción de partes de código predefinido.
· Refactorización
· Reescritura de código en formato correcto.
...



Además, en la última actualización, se ha incluido soporte a Javascript y Razor para MVC, control de código CSS y HTML, ampliación del sistema de navegación y búsqueda, ... y muchas cosas más.
Aquí puedes ver las nuevas y mejoradas funcionalidades.

REFERENCIAS:
JetBRAINS
ReSharper

[...]

Leer más >>

Customize GridViewColumn: Personalizando columnas de gridview por código con controles

Muchas veces he tenido la necesidad de incluir información concreta en una columna de un GridView, y me ha costado mucho encontrar referencias que explicaran en profundidad cómo realizar la “customización” de una columna (sobre todo en castellano, porque no encontraba documentación al respecto).

En este post, vamos a explicar paso a paso cómo se puede personalizar completamente una columna de un GridView por código. En concreto, lo que realizaremos una personalización de una columna con un CheckBox  (que permita su edición), y una cabecera que seleccione todas las filas del grid.

Para ello debemos crear  una plantilla para la columna y una vez realizada, referenciarla desde la página del CodeBehind, indicándole así al grid cómo debe mostrar la información.

Dado que sería muy largo, lo he dividido en dos partes:
Parte I: Generación de la plantilla
    PASO 1: Generación de la plantilla ITemplate
    PASO 2: Control de eventos
Parte II: Construcción del GridView


PREVIO:
En este ejemplo, vamos a construir una columna de  CheckBox que controla un listado de test realizados por usuarios. El nombre de cada columna hará referencia al campo equivalente en la DDBB (así, Test1 sería la columna de los datos para el Test1). Además vamos a incluir en la cabecera una imagen que al pulsar, seleccionará todos los checks del gridview.


Parte I: Generación de la plantilla

PASO 1: Generación de la clase ITemplate
Para poder referenciar nuestra columna desde el GridView, necesitamos proporcionarle al sistema una forma de generar nuestra columna de CheckBox. Para ello hay que crear una clase que implemente el interfaz ITemplate. En nuestro ejemplo, denominaremos a la clase GridViewCheckboxTemplate.

public class GridViewCheckboxTemplate : ITemplate
{
    //Event handler - boton Header para “Seleccionar Todos”
    public event EventHandler ImageClick;

    //atributo para almacenar el ListItemType.
    ListItemType _templateType;

    //Atributo con el nombre identificador de la columna.
    private string _columnName;

    //Constructor donde definimos el tipo y nombre.
    public GridViewCheckboxTemplate(ListItemType type, string colname)
    {
        _templateType = type;
        _columnName = colname;
    }
 }

El ListItemType es el que nos indicará que parte del GridViewColumn estamos editando. Los valores que puede tomar son Header, Item, EditItem y Footer.

NOTA: En este caso, estamos generando una columna a partir de un constructor con 2 parametros. Podríamos crear otros constructores con más parámetros, en función de las necesidades.

Una vez implementados los atributos y el constructor, debemos indicar al sistema cómo ha de generar la vista de la columna en el GridView. Para ello, implementaremos el método ITemplate.InstantiateIn:

void ITemplate.InstantiateIn(System.Web.UI.Control container)
{
    switch (_templateType)
    {
        case ListItemType.Header:
            //TODO – elementos de la cabecera.
            break;
        case ListItemType.Item:
            //TODO – CheckBox en formato PRESENTACIÓN.
            break;
        case ListItemType.EditItem:
            //TODO –  CheckBox en formato EDICIÓN.
            break;
        case ListItemType.Footer:
            //TODO – elementos del footer.
            break;
    }
}

En la definición del método anterior podemos observar que, en función del tipo de ítem que estemos solicitando, el sistema generará unos controles u otros para el render de la columna completa. Por tanto, ya podemos incluir los controles necesarios para nuestra personalización:

HEADER:

Vamos a incluir un control ImageButton, de forma que aparezca un selector multiple que actualice todas las filas, y un Label con el nombre de la fila: 

case ListItemType.Header:
    ImageButton imgButton = new ImageButton();
    imgButton.ID = "imgHeader_" + _columnName;
    imgButton.ImageUrl = "~/images/ico/check_all.png";
    imgButton.ImageAlign = ImageAlign.AbsMiddle;
    imgButton.ToolTip = "Activar TODOS ";
    imgButton.Click += new ImageClickEventHandler(imgHeader_ClickEventHandler);
    imgButton.Attributes.Add("onclick", "return confirm('¿Seguro que desea activar todas las filas?');");
    container.Controls.Add(imgButton);

    //Creamos el label que indica en qué columna estamos.
    Label lbl = new Label();
    lbl.Text = " "+_columnName;
    container.Controls.Add(lbl);
    break;

Como se puede observar, para cada control establecemos todas sus propiedades, entre las que cabe destacar:
· La Url relativa a la raíz del proyecto la imagen que vamos a mostrar:
    imgButton.ImageUrl = "~/images/ico/check_all.png";  ->
· El evento que se disparará cuando se pulse sobre la imagen. Más adelante veremos cómo programar esta función:
        imgButton.Click += new ImageClickEventHandler(imgHeader_ClickEventHandler);
· Una confirmación de activación para todos los elementos:
        imgButton.Attributes.Add("onclick", "return confirm('¿Seguro que desea activar todas las filas?');");

ITEM y EDITITEM:
Como sólo vamos a mostrar un checkBox, simplemente debemos añadir dicho control a la columna:

case ListItemType.Item:
    //Creamos el checkBox.
    CheckBox chk = new CheckBox();
    chk.EnableViewState = true;
    chk.Enabled = false; //en vista, NO PERMITIMOS la modificación del valor.
    chk.ID = "chkItem_" + _columnName;
    chk.DataBinding += new EventHandler(CB1_DataBinding); //enlace a datos.
    container.Controls.Add(chk);
    break;

case ListItemType.EditItem:
    // Creamos el checkbox para edición
    CheckBox chkEdit = new CheckBox();
    chkEdit.EnableViewState = true;
    chkEdit.Enabled = true; //en edición, PERMITIMOS la modificación del valor
    chkEdit.ID = "chkEditItem_" + _columnName;
    chkEdit.DataBinding += new EventHandler(CB1_DataBinding);   //enlace a datos.
    container.Controls.Add(chkEdit);
    break;

A destacar el DataBinding que se encargará de mostrar la información al generar el GridView (ver paso 2 ‘Control de Eventos’), y la opción Enabled que es la que permite la modificación del estado del checkbox.

FOOTER:
En este ejemplo, no añadimos ningún elemento al footer, pero se podría personalizar con cualquier control que necesitaramos. Como ejemplos; un botón para añadir un nuevo ítem, ó un Label con información del total de registros, o ubicar aquí el selector multiple, etc.


NOTA: Recordar que si incluimos aquí cualquier control, en vista de diseño deberemos marcar el atributo ShowFooter a true.

PASO 2: Control de eventos
Una vez generado el método para construir la columna debemos controlar los eventos de datos y, en este ejemplo, del botón header para ‘Seleccionar todos’.

Control del click sobre la imagen
    void imgHeader_ClickEventHandler(object sender, ImageClickEventArgs e)
    {
        if (ImageClick != null) { ImageClick(sender, EventArgs.Empty); }
    }
Aquí simplemente verificamos que existe un EventHandler asociado a la imagen y en caso afirmativo, llamamos al delegado. Éste será el encargado de modificar los datos y actualizar el grid.

Control de los datos a mostrar
    void CB1_DataBinding(object sender, EventArgs e)
    {
        CheckBox chk = (CheckBox)sender; //Obtenemos el control
        GridViewRow container = (GridViewRow)chk.NamingContainer; //contenedor con datos
        object dataValue = DataBinder.Eval(container.DataItem, _columnName); //valor obtenido
        chk.Checked = (dataValue.ToString() == "1"); //actualización del check
    }

Aquí obtendremos el valor a mostrar en el CheckBox. Dado que en este ejemplo, en la DDBB tenemos una columna ‘Bit’, deberemos marcar la selección en función de si el valor es ‘0’ ó ‘1’.



Llegados a este punto, ya tenemos configurada nuestra plantilla completa para la columna del gridView. Recordad que en este ejemplo estamos trabajando con un CheckBox, pero se podría personalizar para cualquier tipo de control e información que os hiciese falta.

En el próximo post indicaré cómo hacer uso de esta clase, para generar nuestro grid personalizado.


Referencias:
MSDN Microsoft

Un saludo a todos!
[...]

Leer más >>

Microsoft lanza un sistema de logros en Visual Studio

Vamos con una entrada de juegos..... pero juegos para programadores.

Microsoft ha sacado "aún en versión beta" un plugin que nos ofrece una lista de "LOGROS" para todos aquellos que utilicemos Visual Studio. Es una forma de obtener un reconocimiento a nuestra forma de trabajar, y que este sea visible a todo el mundo (Achievements Visual Studio).

En concreto, se trata de un plugin para Visual Studio que obtiene información sobre tu metodología de trabajo en una solución y el análisis del código, y en función de esos datos, te irá desbloqueando distintos logros.



En principio los logros están dividios en seis secciones:
· Customizing Visual Studio
· Don't Try This At Home
· Good Housekeeping
· Just For Fun
· Power Coder
· Unleashing Visual Studio

(Ojo!! no todos los logros podrían estar bien vistos,.. el logro de Go To Hell me encanta!! - XD)

Pero no acaba ahí la historia. Dado que generas un registro en channel9.msdn.com, tus logros adquiridos pasarán a estar permanentemente publicados, con lo que podrás compararte con otros programadores del mundo... además permite su publicación en blogs y social media.

A qué estás esperando, conviértete en un Gamer del Visual Studio!
...¿a que no puedes probar sólo una? ...


REFERENCIAS

Announcing Visual Studio Achievements Beta
Achievements Visual Studio
[...]

Leer más >>