Guía Básica: Visual Web Developer 2005 Express (Entrega 02)

Hola a todos, nuevamente! Esta es la segunda entrega.

Disculpen por la demora de la entrega taba esperando sus mails, para publicar esta entrega. De todas maneras lo iba a publicar pero si mandan sus mails el proceso se acelera, como que quiere decir que leen la Guía :D,....

Cortando un poco el rollo, vamos a nuestro tema de esta entrega Master Pages. Qué tiene de común todos los Sitios Web?, (no vale la respuesta de HTML), nada?, bueno, si se fijan bien todos los Sitios Web poseen un diseño común a través de todo el sitio, visiten terra, o todos los que tengan un menú y cabezera y podrán apreciar que tienen el mismo diseño y formato.

Cuando empezamos a desarrollador un Sitio Web, lo que mas tiempo nos demora es la plantilla base ya que despues de tener nuestra base solo es cosa de copiar y cambiar nuestro HTML especifico de cada página, a través de todas las páginas de nuestro Sitio Web. Y que tiene que ver Master Pages con esto?, no tienen una pista?. Pues ahora con ASP.NET 2.0 podemos crear paginas que nos servirán como plantillas a nuestro Sitio Web. Lo mejor es que en Master Pages, tenemos la misma funcionalidad que en las paginas aspx, es decir, que podemos agregar controles asp, y agregar código del lado de servidor para esos controles. Y lo mejor es que tendremos disponible todo esto en el resto de páginas aspx, también podremos acceder a las propiedades de la Master Pages, mas adelante veremos como hacer esto.

La ventaja que tenemos con Master Pages, es que vamos a crear una plantilla, o mas, con una cabecera, menu, etc, para todo nuestro Sitio Web, esto hará mas fácil el mantenimiento, ya que solo iremos a nuestro Master Page editamos, y autómaticamente los cambios se verán reflejados en todas las páginas que usen el Master Page que se edito. Otra ventaja muy importante es que tendremos soporte en diseño WYSIWYG (lo que ves, es lo que obtienes), en las páginas aspx, y podremos ver como será la presentación final.

Como se puede apreciar en las imágenes tenemos soporte en diseño, a diferencia de los controles de usuario en APS.NET 1.X, y en otras tecnologías, en los cuales  no se veía como quedaría el diseño final, para solucionar esto teniamos que estar ejecutando la página para ver como será el diseño final. Con Master Pages, lo que vemos en edición será lo que veamos en el navegador (WYSIWYG).

Creando una Master Page

Antes de crear un Master Page, debemos crear un nuevo Sitio Web, revisar la entrega anterior. Una vez creado el Sitio Web, hacemos click derecho en nuestro Sitio Web, y seleccionamos Add New Item..., nos aparecerá la siguiente ventana:

Seleccionamos el Item Master Page, como pueden apreciar este tiene extensión master. Podemos escoger el lenguaje y si queremos colocar el código en un archivo separado. Tiene igual manejo que las páginas aspx, estas pueden combinar HTML, controles de Servidor Web, y código. Una Master Page, tiene dos vistas, al igual que las aspx: Vista Source:

Como se puede apreciar la gran diferencia con una aspx, es la directiva Master, pero los atributos Language, CodeFile, etc, son los mismos. Algo importantisimo que resaltar en el HTML, es este control:

<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">

Este control marca que esta parte será la zona configurable en las paginas que usen el Master Page, es decir todo lo que este fuera de este control, no se podra cambiar. Nosotros podemos usar uno o varios ContentPlaceHolder, en nuestro Master Page, si nos vamos a la vista diseño vermos algo como esto: 

Todo lo que este fuera del ContentPlaceHolder, no podrá ser reemplazado. Nosotros tambien podemos colocar contenido dentro del ContentPlaceHolder, pero este contenido será como el contenido por defecto, es decir si el usuario desea lo deja o lo cambia, pero lo que si no podra cambiar en diseño es lo que este fuera del ContentPlaceHolder.

Si jugamos un poco con el HTML, agregamos tablas, una cabecera, un menu de navegación, e informacion a nuestro Master Page, obtendremos algo asi, ustedes pueden hacer mejor el diseño :D:

Ahora ta tenemos nuestro Master Page, listo para poder usar en nuestras páginas aspx.

Agregando una Página usando Master Pages

Hay varios formas de crear una pagina aspx, para usar una Master Page:

1. La primera forma es sencilla, solo seleccionamos nuestra Master Page, y le damos click derecho, seleccionamos Add Content Page, y listo, creara una pagina que hace uso de esa master page.
   
2. La manera mas común es: Agregar un nuevo Item a nuestro Sitio Web. Cuando nos salga la ventana para seleccionar el item, escogemos WebForm, pero antes de hacer click en el boton Add, marcamos el check Select Master Page. A continuación nos saldrá una ventana para escoger un Master Page de nuestro Sitio Web, ya que puede haber mas de uno, y seleccionas el Master Page deseado. La diferencia con la opción 1 es que con esta opción nosotros le damos el nombre a la pagina aspx agregada.
3. La otra opción es hacer que una página existente use un Master Page, hay tres pasos bien simples para hacer esto, miren la figura:
   
   Lo primero que tenemos que hacer es agregar un nuevo atributo a la directiva Page, MasterPageFile, e indicarle cual Master Page del sitio usaremos. El siguiente paso es borrar todo el HTML, que este fuera del tag <body/> y agregar el siguiente control: <asp:Content/>, a este control debemos asignarle un nombre y decirle que corra del lado del servidor. Pero lo mas importante es indicarle a que ContentPlaceHolder reemplazara, recuerden que una Master Page, pueden haber varios, por eso es necesario indicarle el ContentPlaceHolderID. Si tuvimos codigo dentro de nuestra etiqueta <body/>, lo copiamos dentro del control <asp:Content/>. Ahora si nos vamos a diseño y agregamos un poco de código HTML podemos obtener lo siguiente:
   

Hasta el momento ya tenemos lo básico de Master Pages, sabemos como agregar una Master Page y como usar nuestra Master Page en una página aspx. Ahora que pasaría si deseamos modificar algo de nuestra MasterPage, para una página en particular, pues bien tenemos algunas opciones.

Modificando el contenido de una Master Page, en las páginas aspx

Una de las opciones que tenemos es haciendo uso de las propiedades de una MasterPage. Vamos por pasos, primero agregaremos una celda al final de nuestra tabla, y dentro de esta celda agregamos un label, que será nuestro footer:

Recuerden que todo lo que hagamos en la vista Source, se modificará automaticamente en la vista Desing. Ahora ya tenemos nuestro control, vamos a crear una propiedad de solo lectura y agregarla a la clase de nuestro Master Page, en el código de Main.master.cs:

Bien ahora ya hicimos todo lo que teniamos que hacer en nuestro Master Page,  ahora nos vamos al código de la pagina desde donde queramos modificar la propiedad y la modificamos, index.aspx.cs:

Chevere, ahora solo le damos F5, y vamos a poder ver como la pagina index ha cambiado el footer de la Master Page, esa no la podemos cambiar en vista Diseño, pero si desde código por ser una propiedad. Chanfle casi me olvido de algo importantisismo, de lo contrario no funcionaría llamar a la propiedad Footer, tenemos que agregar la directiva MasterType, a nuestra pagina index.aspx:

Despues de agregar la Directiva MasterType, tenemos que asignarle el nombre del Master Page al atributo VirtualPath, y ahora si todo listo no falta mas... ya podemos hacer F5, y ver nuestra página index.aspx :P, con un footer personalizado.

Adicionalmente nosotros de usar propiedades, estas tambien las podemos usar para modificar otras variables. Nosotros también podemos recuperar controles completos, para esto lo único que hay que hacer es agregar dos sentencias al evento load en nuestro codigo de index.aspx.cs:

Ahora ya podemos ver los resultados del Footer al ejecutar la pagina index.aspx, vemos los dos efectos, el efecto de cambiar la propiedad, y el efecto de cambiar directamente una propiedad de un control del Master Page:

Para ir terminando y no aburrirlos más, un último tema quiero tocar, y es el tema de Master Pages aninadas, con esto podemos llamar a una master desde otra master page:

La desventja de esto es que solo hay soporte en la vista Source, solo aca podemos editar. Si queremos ver la vista Design, no nos dejará. Pero con puro html si podemos hacerlo. Por ejemplo despues de crear esta segunda Master Page a partir de otra Master Page, solo tendriamos que agregar una nueva página aspx, que use esta última Master Page. En la pagina aspx que usa la MasterPage aninada tampoco tendra soporte en Design, osea que solo podremos ver los resultados al ejecutar la página. Y por último queda un tema de tarea: Cargar dinámicamente Master Pages, es decir que en tiempo de ejecución nosotros podamos selecionar que Master Page deseamos, esto por ejemplo podriamos usarlo para personalizar nuestro sitio de acuerdo al usuario que inicio sesión, esto lo lograriarimos fácilmente haciendo uso de profiles,... este es tema de otra entrega no me adelanto, ahi lo tocaremos a detalle.

Bueno eso es todo amigos :D, por esta entrega terminamos. Recuerden que pueden visitar los foros mencionados en el índice, ante cualquier duda que tengan mándela al foro por favor, asi aprenden ustedes, los que entren al foro, y yo tambien con las preguntas, es decir aprendemos todos.

sergiotarrillo

---

Fichero con el código de ejemplo: sergiotarrillo_WebEntrega02.zip - Tamaño 57KB

---