martes, 1 de septiembre de 2009

Trabajando con temas en ASP.NET

Publicadas por Carlos Juan a la/s 10:42 a.m.

Introducción
En este artículo describe cómo trabajar con la carpeta App_Themes. Carpeta App_Themes ha sido introducido desde ASP.NET 2.0 y es generalmente es de baja prioridad, a pesar de que juega un papel muy importante en el desarrollo web. Sin embargo, hay muchas paginas de interés relacionados con App_Themes que cada desarrollador debe saber. Estoy tratando de cubrir algunos de ellos. Por favor, siéntase libre de sugerir algo que no he cubrir en este artículo.

¿Cómo definir un tema?
Para definir un tema, debe hacer clic derecho del proyecto Web Project > Add ASP.NET Folder >Theme. Esto por defecto crear una nueva carpeta llamada App_Themes> Theme1. Puede cambiar el nombre de la carpeta Theme1 pero no la carpeta App_Themes. El nombre de la carpeta en la carpeta App_Themes será considerado como el nombre del tema y todos los archivos .css and .skin deben estar alli. Se Puede crear todos los temas que desee en la carpeta App_Themes.

Un tema puede tener más de un archivo .css y/o .skin

¿Qué es el archivo. Css?
Un archivo .CSS es Cascading Style Sheet que contiene el estilo, el comportamiento de una página html y sus elementos. Estos estilos están escritos en el archivo. Los Css son como un bloque de código y se les conoce como clase css. Esto en términos generales puede contener tres tipos de clases.

1.) Para un elemento en particular - esto define el estilo de cualquier elemento HTML y es nombrado como el nombre de la etiqueta HTML como p, tabla, tr, etc estilo siguiente se aplicará a todos tabla de la página.

table
{
border-collapse:collapse;
border:1px solid #c0c0c0;
}

2.) Para cualquier elemento HTML - define el estilo que pueden aplicarse en todos los elementos HTML.
Esto comienza con un (punto) . y seguido por el nombre de la clase CSS.

.ChangeBackground
{
background-color:#c9c9c9;
}

Atravez de la clase del CSS se puede especificar en cualquier elemento HTML.
Por ejemplo

En la etiqueta HTML:
< span class="ChangeBackground" > Mi texto < / span >
En ASP.NET Control:
< asp:Label ID="lblMessage" runat="server" CssClass="ChangeBackground" / >

3. para un determinado identificador - esto define el estilo de un elemento HTML cuyo ID es específico. Esto empieza con el # seguido por el nombre de la clase CSS.

#divMain
{
width:100%;
border:1px solid #cccccc;
}

La clase CSS se llevará a cabo con el elemento HTML cuyo ID es "divMain".

Este es un ejemplo

¿Qué es el archivo .skin?
Un archivo .skin es un nuevo tipo introducido en ASP.NET 2.0, este puede contener estilo Informacíon de cualquier control de servidor asp.net. Estas informaciones están escritas en este archivo como si están escritas página asp.net pero la propiedad ID no se especifica. por ejemplo,

< asp:Label runat="server" Font-Names="Courier" / >
< asp:Label SkinID="LabelMessage" runat="server" ForeColor="Green" BackColor="Yellow" / >
< asp:Label SkinID="LabelError" runat="server" ForeColor="Red" BackColor="Yellow" / >

Observe que en el código anterior no he speicified el ID del control.

Si usted ha utilizado el tema skin en su proyecto, la 1ra. línea define el estilo de todos los controles Label que se utilizarán en la página ASPX. La 2da. línea define el estilo de sólo los controles de etiqueta cuyo SkinID se especifica como LabelMessage. De esta manera usted tiene la libertad de colocar el número de controles de etiqueta en el archivo. Archivos de la skin con SkinID diferentes para los diferentes tipos de uso. (Como se puede definir un skin para el control Label para mostrar el mensaje de éxito y otro de la skin para mostrar el mensaje de error en la página.

Si desea que el comportamiento exacto del control Label es como se ha definido para SkinID "LabelMessage", debe utilizar el valor SkinID del control Label en el aspx como "LabelMessage".

El comportamiento del control Label en el aspx variará en función de si ha especificado el SkinID del control Label o no, o se ha espesificado en el CssClass o no.

No hay limitación de número de archivos Css y Skin que puede crear en un tema, pero se sugiere limitar el número para facilitar el mantenimiento y seguimiento.

Cómo utilizar el tema
Una vez que haya definido un tema para el proyecto asp.net, se puede utilizar de dos maneras diferentes.

1.Predeterminadamente en la página. Aspx
Se puede definir el nombre del tema que desee utilizar en las directivas de la página aspx (No se puede definir en la página principal). Como a continuación:

< %@ Page Theme="Theme1" Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" % >

O en el WEB Config para todas las paginas.

< configuration>
< system.web >
< pages theme="ThemeName" / >
< /system.web >
< /configuration >

Documentación tecnica:
http://msdn.microsoft.com/en-us/library/0yy5hxdk.aspx

Tenga en cuenta que Theme1 es el nombre de la carpeta dentro de la carpeta App_Themes y se refiere como el nombre del tema.

2.) Una vez que haya utilizado el tema en su página aspx o web config , la página está lista para usar todas los skins definidos y todas las clases definidas en el CSS. Archivos CSS. También puede obtener IntelliSense en el IDE de Visual Studio como este.

IntelliSense para el archivo Skin.