Soporte de Master Pages jerarquizadas en VS 2008

El soporte de Master Pages fué una de las características más populares que se introdujeron con ASP.NET 2.0, y una de esas características que casi todos los proyectos ASP.NET usan para mostrar una interfaz consistente en todo un sitio web.

Uno de los escenarios más interesantes es el soporte que ASP.NET 2.0 tiene para permitir “jerarquizar master pages” – de forma que podemos crear una master raíz para un sitio web, y crear master pages jerarquizadas basadas en la raíz y personalizarla (por ejemplo: podríamos crear una master SingleColumn.Master y otra TwoColumn.Master que definan dos estructuras generales de una y dos columnas para visualizar el sitio basadas en el template raíz). Esta jerarquía de master pages es realemente flexible, y permite a los desarrolladores y diseñadores para realizar cambios rápidamente a la visualización y a la organización del sitio con cambios mínimos en el código y sin duplicación contenidos. El único ( y gran) problema, es que VS 2005 no soporta realmente el uso de master pages jerarquizadas, y páginas basadas en estas jerarquías de master pages no pueden ser editadas con el diseñador WYSIWYG de VS 2005.

Las buenas noticias son que VS 2008 soporta esta jerarquía de master pages, y hace que su uso sea realmente fácil. Volviendo atrás, recomiendo que casi todos los proyectos ASP.NET deberían usar esta características – ya que da unas posibilidades increíbles para las interfaces de nuestros proyectos.

Uso de jerarquías de master pages con VS 2008

Os recomiendo que le veáis esta web http://www.opensourcetemplates.org/. Es un respositorio online y gratuito de templates HTML que podéis ver, descargar y usar. Los templates del sitio son HTML puros ( es decir, podéis usarlos con cualquier tecnología de servidor), fueron creados con CSS limpios y marcas XHTML:

Para ayudar a escribir este post, he cogido uno de los templates que me gustaban. Podéis verlo online aquí, y descargarlo aquí.

Como la mayoría de los web-sites, este template tiene páginas que usan diferentes layouts parar mostrar los contenidos. Por ejemplo, incluye una página que usa varias columnas para mostrar los contenidos:

También hay páginas que usan una sola columna que llena todo el ancho de la página para mostrar el contenido:

Usando el template HTML/CSS anterior con master pages jerarquizadas.

Convertir el template anterior con ASP.NET y el soporte para master pages jerarquizadas es realmente fácil con VS 2008.

Paso 1: Crear el template Site.Master

Para empezar tenemos que crear una master page que usaremos para definir toda la estructura para todas las páginas del sitio. La llamaremos “Site.Master” y copiaremos/pegaremos el HTML “outer chrome” del template que nos descargamos. Añadiremos un en la seccion de contenido en la mitad que llenaremos con el contenido específico de la página. Llamaremos a este control “MainContent”:

Paso 2: Creación del template SingleColumn.Master

Usamos el template Site.Master para definir el “template outer chrome” del sitio en el que estamos trabajando. Ahora vamos a crear unas cuantas master pages jerarquizadas para permitir la personalización de la sección “MainContent”.

Para ello hacemos clic con el boton derecho en el explorador de soluciones y elegimos “Add new item”. Crearemos una nueva master page llamada “SingleColumn.Master” y marcamos la casilla de que queremos que esta master tenga una master también:

VS 2008 nos permitirá seleccionar una master en la que basar nuestro template SingleColumn.master:

VS 2008 creará un archivo SingleColumn.master como el siguiente:

VS 2008 ha tomado el control de Site.Master que llamamos “MainContent” – y ha añadido automáticamente un control en blanco en esta master page jerarquizada de forma que podemos sobreescribir y personalizar la región de contenido.

También podemos usar el nuevo soporte de “Split View” de VS2008 para poder ver tanto el código HTML y el diseñador WYSIWYG a la vez. Podemos hacer cambios en una de esas dos vistas y ver los cambios en la otra (nota: aseguraos de enseñarle esto a vuestro jefe cuando le pidáis un nuevo monitor).

Va a ser muy sencillo usar nuestro template SingleColumn.Master para empezar a trabajar, y añadirán las reglas CSS para definir el ancho de la columna de contenido – y entonces añadir su propio control para que las páginas que se basen en esta master la puedan rellenar:

Paso 3: Crear el template TwoColumn.Master

A parte de tener el template SingleColumn.Master, crearemos una segunda master para tener dos columnas. Repetiremos los pasos anteriores – pero esta vez llamaremos al archivo: “TwoColumn.Master”. Definiremos el layout del archivo e la siguiente forma:

Fijáos cómo hamos añadido los dos controles – uno llamado “MainColumn” (como en SingleColumn.Master), y el otro llamado “LeftColumn” (para mostrar una columna menor a la izquierda). Usaremos HTML estándar y CSS para posicionar estas dos columnas.

Paso 4: Crear páginas con contenido usando las master pages jerárquiquas.

Ahora que hemos definido las master paginas para controlar la estructura de nuestro sitio, podemos empezar a añadir páginas al sitio.

Vamos a crear una nueva página que llamaremos “HomePage.aspx” - y le indicaremos que queremos basarla en una master page:

Y ahora elegiremos la master page en la que queremos basarnos. Para la página de inicio usaremos la de dos columnas:

VS 2008 basará la página HomePage.aspx en esta master jerárquica, y añadiremos dos controles que nos permitan rellenar las columnas izquierda y la principal de la página:

No sólo tenemos soporte WYSIWYG, sino que también tenemos la vista split-view.

Podemos rellenar el contenido específico que de cada región , y añadir cualquier código que queramos al code-behind:

Y ya podemos añadir más páginas al proyecto, y basarlas en cualquiera de las dos master que tenemos.

Ya que ambos templates están basados en la raíz Site.Master, si hacemos cualquier cambio en esa master (por ejemplo: si queremos cambiar el logo o la estructura de la navegación), se aplicará automáticamente a todas las páginas del sitio sin tener que modificarlas.

También tenemos la flexibilidad de cambiar el layout de los templates SingleColumn o TwoColumn (por ejemplo: ajustar el ancho) y todas las páginas que se basen en esas masters también cambiarán.

Resumen

VS 2008 tiene soporte completo para master pages jerárquicas (también está soportado en Visual Web Developer Express 2008). Esto hará que crear interfaces web sea mucho más fácil.

Lo mejor de todo es que VS 2008 tiene soporte multi-targeting seremos capaces de usar esta característica sin tener que instalar la versión 3.5 en nuestros servidores. Podemos abrir proyectos existentes de ASP.NET 2.0 con VS 2008, y aprovecharnos de esta característica.

Espero que sirva.

Scott.

Traducido por: Juan María Laó Ramos. Microsoft Student Partner.

Fuente: http://thinkingindotnet.wordpress.com/2007/07/10/soporte-de-master-pages-jerarquizadas-en-vs-2008/