Marcos de Desarrollo - SABIA-Groupsabia.tic.udc.es/docencia/mad/pdf/04.01.06_MasterPages.pdf ·...
Transcript of Marcos de Desarrollo - SABIA-Groupsabia.tic.udc.es/docencia/mad/pdf/04.01.06_MasterPages.pdf ·...
![Page 1: Marcos de Desarrollo - SABIA-Groupsabia.tic.udc.es/docencia/mad/pdf/04.01.06_MasterPages.pdf · Diseño e implementación de aplicaciones Web con .NET. Objetivos ... Las páginas](https://reader036.fdocuments.ec/reader036/viewer/2022062601/5bb853ce09d3f2751e8c9a27/html5/thumbnails/1.jpg)
Marcos de DesarrolloDiseño e implementación de aplicaciones Web con .NET
![Page 2: Marcos de Desarrollo - SABIA-Groupsabia.tic.udc.es/docencia/mad/pdf/04.01.06_MasterPages.pdf · Diseño e implementación de aplicaciones Web con .NET. Objetivos ... Las páginas](https://reader036.fdocuments.ec/reader036/viewer/2022062601/5bb853ce09d3f2751e8c9a27/html5/thumbnails/2.jpg)
Objetivos
Conocer la solución de ASP.NET para crear "plantillas" de páginas Web
![Page 3: Marcos de Desarrollo - SABIA-Groupsabia.tic.udc.es/docencia/mad/pdf/04.01.06_MasterPages.pdf · Diseño e implementación de aplicaciones Web con .NET. Objetivos ... Las páginas](https://reader036.fdocuments.ec/reader036/viewer/2022062601/5bb853ce09d3f2751e8c9a27/html5/thumbnails/3.jpg)
Master Pages ASP.NET 1.x carecía de sistema de plantillas
Solución: controles de usuario, que permiten agrupar varios controles
ASP.NET 2.0: Master Pages
Las Master Pages (páginas maestras) permiten crear un diseño común, que será compartido por varias Content Pages(páginas de contenido)
Solución más elegante al problema de definir un "look and feel" común
Herencia visual
![Page 4: Marcos de Desarrollo - SABIA-Groupsabia.tic.udc.es/docencia/mad/pdf/04.01.06_MasterPages.pdf · Diseño e implementación de aplicaciones Web con .NET. Objetivos ... Las páginas](https://reader036.fdocuments.ec/reader036/viewer/2022062601/5bb853ce09d3f2751e8c9a27/html5/thumbnails/4.jpg)
Master PagesPágina Maestra (Master Page)
Página de Contenido
(Content Page)
![Page 5: Marcos de Desarrollo - SABIA-Groupsabia.tic.udc.es/docencia/mad/pdf/04.01.06_MasterPages.pdf · Diseño e implementación de aplicaciones Web con .NET. Objetivos ... Las páginas](https://reader036.fdocuments.ec/reader036/viewer/2022062601/5bb853ce09d3f2751e8c9a27/html5/thumbnails/5.jpg)
Master Pages Las páginas maestras definen las zonas de contenido variable, con el control
<asp:ContentPlaceHolder>
Es posible definir varias zonas de contenido variable en una misma página maestra (varios ContentPlaceHolders)
Las páginas de contenido hacen referencia a las páginas maestras y rellenan las zonas de contenido variable con el control <asp:Content>
Todo contenido de una página de contenido debe aparecer entre controles Content
<%@ Master ...
<asp:ContentPlaceHolder
ID="Main"
runat="server" />
<%@ Page ...
MasterPageFile=
"~/Site.master" %>
<asp:Content
ID="Content1"
ContentPlaceHolderID=
"Main" runat="server" />
</asp:Content>
Site.master default.aspx http://... /default.aspx
![Page 6: Marcos de Desarrollo - SABIA-Groupsabia.tic.udc.es/docencia/mad/pdf/04.01.06_MasterPages.pdf · Diseño e implementación de aplicaciones Web con .NET. Objetivos ... Las páginas](https://reader036.fdocuments.ec/reader036/viewer/2022062601/5bb853ce09d3f2751e8c9a27/html5/thumbnails/6.jpg)
Crear una página maestra
![Page 7: Marcos de Desarrollo - SABIA-Groupsabia.tic.udc.es/docencia/mad/pdf/04.01.06_MasterPages.pdf · Diseño e implementación de aplicaciones Web con .NET. Objetivos ... Las páginas](https://reader036.fdocuments.ec/reader036/viewer/2022062601/5bb853ce09d3f2751e8c9a27/html5/thumbnails/7.jpg)
Master pages. Página maestra (.Master)
<%@ Master Language="C#" AutoEventWireup="true" Codebehind="MyMasterPage.master.cs" Inherits="AspDotNetTutorial.MyMasterPage" %>
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">
<title>ASP.NET Tutorial</title><link href="Styles.css" rel="stylesheet" type="text/css" />
</head><body>
<div id="window"><!-- Body content. --><div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder></div><!-- Footer. --><div id="footer">© Universidad de A Coruña - 2012</div>
</div></body></html>
MyMasterPage.Master
Identifica el espacio
para el contenido
![Page 8: Marcos de Desarrollo - SABIA-Groupsabia.tic.udc.es/docencia/mad/pdf/04.01.06_MasterPages.pdf · Diseño e implementación de aplicaciones Web con .NET. Objetivos ... Las páginas](https://reader036.fdocuments.ec/reader036/viewer/2022062601/5bb853ce09d3f2751e8c9a27/html5/thumbnails/8.jpg)
Crear una página de contenido
![Page 9: Marcos de Desarrollo - SABIA-Groupsabia.tic.udc.es/docencia/mad/pdf/04.01.06_MasterPages.pdf · Diseño e implementación de aplicaciones Web con .NET. Objetivos ... Las páginas](https://reader036.fdocuments.ec/reader036/viewer/2022062601/5bb853ce09d3f2751e8c9a27/html5/thumbnails/9.jpg)
Master pages. Página de contenido (.aspx)
<%@ Page Language="C#" MasterPageFile="~/MyPageMaster.Master" AutoEventWireup="true"
Codebehind="MyContentPage.aspx.cs"
Inherits="AspDotNetTutorial.MyContentPage"
Title="My Content Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
</form>
</asp:Content>
MyContentPage.aspx
Indica qué
contenedor rellena
![Page 10: Marcos de Desarrollo - SABIA-Groupsabia.tic.udc.es/docencia/mad/pdf/04.01.06_MasterPages.pdf · Diseño e implementación de aplicaciones Web con .NET. Objetivos ... Las páginas](https://reader036.fdocuments.ec/reader036/viewer/2022062601/5bb853ce09d3f2751e8c9a27/html5/thumbnails/10.jpg)
Contenido por defecto Los controles ContentPlaceHolder pueden definir
contenido por defecto
El contenido por defecto se muestra únicamente si la página de contenido no lo sobrescribe
<%@ Master ... %>
...
<asp:ContentPlaceHolder ID="Main" runat="server">
Este es el contenido por defecto, que aparecera si no hay
ningun control <asp:content> que le proporcione contenido
en una página de contenido hija
<asp:ContentPlaceHolder>
![Page 11: Marcos de Desarrollo - SABIA-Groupsabia.tic.udc.es/docencia/mad/pdf/04.01.06_MasterPages.pdf · Diseño e implementación de aplicaciones Web con .NET. Objetivos ... Las páginas](https://reader036.fdocuments.ec/reader036/viewer/2022062601/5bb853ce09d3f2751e8c9a27/html5/thumbnails/11.jpg)
Páginas maestras anidadas Es posible crear una página maestra que haga
referencia a una página maestra ya existente
Una página maestra (padre) define la apariencia general del sitio
Otra página maestra basada en la primera (hija) extiende la apariencia visual del sitio Web
De utilidad en grandes sitios Web en los que existen subconjuntos de páginas que comparten apariencia visual
![Page 12: Marcos de Desarrollo - SABIA-Groupsabia.tic.udc.es/docencia/mad/pdf/04.01.06_MasterPages.pdf · Diseño e implementación de aplicaciones Web con .NET. Objetivos ... Las páginas](https://reader036.fdocuments.ec/reader036/viewer/2022062601/5bb853ce09d3f2751e8c9a27/html5/thumbnails/12.jpg)
Páginas maestras anidadas Página maestra "padre"
<%@ Master Language="C#" AutoEventWireup="true"
Codebehind="ParentMaster.master.cs" Inherits="WebApplication1.ParentMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>New Website</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>This is parent master code</h1>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
![Page 13: Marcos de Desarrollo - SABIA-Groupsabia.tic.udc.es/docencia/mad/pdf/04.01.06_MasterPages.pdf · Diseño e implementación de aplicaciones Web con .NET. Objetivos ... Las páginas](https://reader036.fdocuments.ec/reader036/viewer/2022062601/5bb853ce09d3f2751e8c9a27/html5/thumbnails/13.jpg)
Páginas maestras anidadas Página maestra "hija"
<%@ Master Language="C#" MasterPageFile="~/ParentMaster.Master"
AutoEventWireup="true"
Codebehind="ChildMaster.master.cs" Inherits="WebApplication1.ChildMaster" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"
runat="server">
<h2>This is child master code</h2>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</asp:Content>
![Page 14: Marcos de Desarrollo - SABIA-Groupsabia.tic.udc.es/docencia/mad/pdf/04.01.06_MasterPages.pdf · Diseño e implementación de aplicaciones Web con .NET. Objetivos ... Las páginas](https://reader036.fdocuments.ec/reader036/viewer/2022062601/5bb853ce09d3f2751e8c9a27/html5/thumbnails/14.jpg)
Páginas maestras anidadas Página de contenido
<%@ Page Language="C#" MasterPageFile="~/ChildMaster.Master"
AutoEventWireup="true" Codebehind="WebForm1.aspx.cs"
Inherits="WebApplication1.WebForm1" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"
runat="server">
<p>This is content code</p>
</asp:Content>
![Page 15: Marcos de Desarrollo - SABIA-Groupsabia.tic.udc.es/docencia/mad/pdf/04.01.06_MasterPages.pdf · Diseño e implementación de aplicaciones Web con .NET. Objetivos ... Las páginas](https://reader036.fdocuments.ec/reader036/viewer/2022062601/5bb853ce09d3f2751e8c9a27/html5/thumbnails/15.jpg)
Páginas maestras anidadas Resultado
![Page 16: Marcos de Desarrollo - SABIA-Groupsabia.tic.udc.es/docencia/mad/pdf/04.01.06_MasterPages.pdf · Diseño e implementación de aplicaciones Web con .NET. Objetivos ... Las páginas](https://reader036.fdocuments.ec/reader036/viewer/2022062601/5bb853ce09d3f2751e8c9a27/html5/thumbnails/16.jpg)
Aplicar una página maestra a un sitio Web Es posible designar la página maestra de todas las páginas pertenecientes a un
mismo sitio Web Archivo Web.config
Todas las páginas que tengan controles Content se combinarán con la página principal especificada
Se asegura que todas las páginas del sitio Web seguirán el diseño de la página maestra, incluso aquéllas que carezcan del atributo MasterPageFile en la directiva <%@ Page
La definición a nivel de página tiene preferencia sobre la definición a nivel de aplicación
<configuration>
<system.web>
<pages masterPageFile="~/MasterPage.master" />
</system.web>
</configuration>
![Page 17: Marcos de Desarrollo - SABIA-Groupsabia.tic.udc.es/docencia/mad/pdf/04.01.06_MasterPages.pdf · Diseño e implementación de aplicaciones Web con .NET. Objetivos ... Las páginas](https://reader036.fdocuments.ec/reader036/viewer/2022062601/5bb853ce09d3f2751e8c9a27/html5/thumbnails/17.jpg)
La propiedad Page.Master En ocasiones, puede ser necesario acceder desde una página de contenido a
controles definidos en la página maestra
La propiedad Page.Master devuelve una referencia a la página maestra
Instancia de clase derivada de System.Web.UI.MasterPage Null si la página no está asociada a una página maestra
Permite acceder a contenido definido en la página maestra. Opciones:
Weak Typing, utilizando FindControl()
Strong Typing, utilizando propiedad pública (más recomendable)
![Page 18: Marcos de Desarrollo - SABIA-Groupsabia.tic.udc.es/docencia/mad/pdf/04.01.06_MasterPages.pdf · Diseño e implementación de aplicaciones Web con .NET. Objetivos ... Las páginas](https://reader036.fdocuments.ec/reader036/viewer/2022062601/5bb853ce09d3f2751e8c9a27/html5/thumbnails/18.jpg)
La propiedad Page.Master Weak Typing, utilizando FindControl()
Pág. Maestra, .aspx:
Pág. Contenido, .aspx.cs:
<asp: Label ID="Title" runat="server"/>
((Label)Page.Master.FindControl("Title")).Text = "Orders";
![Page 19: Marcos de Desarrollo - SABIA-Groupsabia.tic.udc.es/docencia/mad/pdf/04.01.06_MasterPages.pdf · Diseño e implementación de aplicaciones Web con .NET. Objetivos ... Las páginas](https://reader036.fdocuments.ec/reader036/viewer/2022062601/5bb853ce09d3f2751e8c9a27/html5/thumbnails/19.jpg)
La propiedad Page.Master Strong Typing, utilizando propiedad pública (más recomendable)
Pág. Maestra, .aspx:
Pág. Maestra, .aspx.cs:
Pág. Contenido, .aspx.cs:
public String TitleText {get { return Title.Text; }set { Title.Text = value; }
}
<asp: Label ID="Title" runat="server"/>
Page.Master.TitleText = "Orders";
![Page 20: Marcos de Desarrollo - SABIA-Groupsabia.tic.udc.es/docencia/mad/pdf/04.01.06_MasterPages.pdf · Diseño e implementación de aplicaciones Web con .NET. Objetivos ... Las páginas](https://reader036.fdocuments.ec/reader036/viewer/2022062601/5bb853ce09d3f2751e8c9a27/html5/thumbnails/20.jpg)
Página maestra según el navegador Es posible seleccionar automáticamente una página
maestra dependiendo del navegador
Ejemplo:
Lista de navegadores disponibles (en el servidor de producción): C:\Windows\Microsoft.NET\Framework\[Version]\Config\Browsers
Algunos ejemplos: blackberry, chrome, firefox, ie, iemobile, iphone, opera, safari
Se pueden añadir archivos .browser si es necesario
<%@ Page Language="C#" MasterPageFile="~/General.Master"
Chrome:MasterPageFile="~/Chrome.Master"
Opera:MasterPageFile="~/Opera.Master" ... %>
![Page 21: Marcos de Desarrollo - SABIA-Groupsabia.tic.udc.es/docencia/mad/pdf/04.01.06_MasterPages.pdf · Diseño e implementación de aplicaciones Web con .NET. Objetivos ... Las páginas](https://reader036.fdocuments.ec/reader036/viewer/2022062601/5bb853ce09d3f2751e8c9a27/html5/thumbnails/21.jpg)
Bibliografía Recomendada:
M. MacDonald, A. Freeman, M. Szpuszta. Pro ASP.Net4 in C# 2010. 4th Ed. Apress. 2010.