![Introducción a la plataforma - SABIA-Groupsabia.tic.udc.es/docencia/is/docs/transparencias/[2010-03-05]-01... · METADATA: información sobre sí mismos y los recursos de los que](https://static.fdocumento.com/doc/165x107/5b05ac867f8b9ac33f8ba681/introduccin-a-la-plataforma-sabia-2010-03-05-01metadata-informacin-sobre.jpg)
Marcos de Desarrollo - SABIA-Groupsabia.tic.udc.es/docencia/mad/pdf/04.01.06_MasterPages.pdf ·...
21
Marcos de Desarrollo Diseño e implementación de aplicaciones Web con .NET
Transcript of Marcos de Desarrollo - SABIA-Groupsabia.tic.udc.es/docencia/mad/pdf/04.01.06_MasterPages.pdf ·...
Marcos de DesarrolloDiseño e implementación de aplicaciones Web con .NET
Objetivos
Conocer la solución de ASP.NET para crear "plantillas" de páginas Web
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
Master PagesPágina Maestra (Master Page)
Página de Contenido
(Content Page)
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
Crear una página maestra
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
Crear una página de contenido
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
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>
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
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>
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>
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>
Páginas maestras anidadas Resultado
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>
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)
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";
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";
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" ... %>
Bibliografía Recomendada:
M. MacDonald, A. Freeman, M. Szpuszta. Pro ASP.Net4 in C# 2010. 4th Ed. Apress. 2010.
