1 / 24

Tecnologias Web

Tecnologias Web. Rodrigo Cristiano Silva rodrigo@facens.br. Agenda. O que é uma Master Page? Vantagens da utilização de Master Pages Caraterísticas de Master Pages Demo: Uma simples Master Page Como master pages e content pages são conectadas? Master Pages com múltiplos PlaceHolders.

blythe-garza
Download Presentation

Tecnologias Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Tecnologias Web Rodrigo Cristiano Silva rodrigo@facens.br

  2. Agenda • O que é uma Master Page? • Vantagens da utilização de Master Pages • Caraterísticas de Master Pages • Demo: Uma simples Master Page • Como master pages e content pages são conectadas? • Master Pages com múltiplos PlaceHolders

  3. O que é uma Master Page? • Basicamente, uma master page é um template para um website • Usando uma master page, é possível definir o layout de uma página web, com detalhes usuais tais como cabeçalho, barras de menu, banners, etc. • Uma vez criada a master page, é possível usá-la para criar content pages. Cada content page herda automaticamente o layout e o conteudo da master page associada

  4. Vantagens da utilização de Master Pages • Layout único para todo o website • A interface com o usuário parece ser contínua e totalmente integrada • Facilita a manutenção do website, uma vez que não existe repetição de código • É óbvio que pode-se desenvolver um website sem master pages que gere os mesmos resultados que um desenvolvido pelo ASP.NET, mas também é certo que será mais trabalhoso

  5. Caraterísticas de Master Pages • Master pages são similares às páginas ASP.NET comuns • Assim como páginas comuns, master pages são arquivos texto que podem conter HTML, controles web e código • Master pages têm uma extensão diferente (.master ao invés de .aspx) • Master pages não podem ser exibidas diretamente por um browser • Essencialmente, master pages definem a estrutura da página e as content pages adotam essa estrutura e a preenchem com conteúdo apropriado

  6. ContentPlaceHolder e Content • ContentPlaceHolder é o controle utilizado nas master pages para definir em que ponto da página serão carregadas as content pages • Content é o controle utilizado nas content pages para definir o que será exibido em um ContentPlaceHolder de uma master page

  7. Como master pages e content pages são conectadas? • Quando criamos uma master page, estamos construindo algo que se parece muito com uma página ASP.NET comum • A principal diferença é que master pages começam com a diretiva Master e web forms começam com a diretiva Page. Exemplo:

  8. Como master pages e content pages são conectadas? • O ContentPlaceHolder é declarado como qualquer outro controle. Exemplo:

  9. Como master pages e content pages são conectadas? • Quando criamos uma content page, o ASP.NET conecta essa página com uma master page adicionando o atributo MasterPageFile à sua diretiva Page. Exemplo: • A diretiva Page também tem um outro novo atributo chamado Title. Este atributo pode ser configurado para sobrescrever o título definido na master page, porém isso somente funcionará se a tag <head> da master page tiver o atributo runat="server"

  10. Como master pages e content pages são conectadas? • Uma content page não se parece com um web form comum, isto porque não apresenta os elemntos <html>, <head>, <body>, etc. Uma content page fornece uma tag Content que se conecta à um ContentPlaceHolder de uma master page. Exemplo:

  11. Master Pages com múltiplos PlaceHolders

  12. Website NavigationIntrodução • Conhecemos algumas maneiras de direcionar um visitante de um website de uma página para outra. Podemos: • Adicionar HTML links às páginas • Usar o método Response.Redirect() • Usar o método Response.Transfer() • Mas aplicações web profissionais precisam de um sistema de navegação mais sofisticado! • Aplicações profissionais devem permitir a navegação por uma estrutura hierárquica de páginas, sem a necessidade de repetir código de navegação em todas as páginas. • Felizmente o ASP.NET possui um sistema de navegação que torna essa tarefa mais simples.

  13. Website NavigationIntrodução • Para usar o modelo de navegação do ASP.NET é necessário definir: • A hierarquia do website, ou seja, como as páginas estão logicamente organizadas em grupos. Esta estrutura é definida em um arquivo XML. • Uma vez definida a estrutura, basta associar a informação contida no XML com controles especializados de navegação, tais como TreeView e Menu.

  14. Site Maps • O sistema de navegação do ASP.NET é flexível e configurável. • É composto por três componentes: • XML site map • Definição da estrutura hierárquica do website. Por padrão, o XML é armazenado em um arquivo. • SiteMapDataSource e XmlSiteMapProvider • Classes que permitem ler as informações do arquivo site map e convertê-las para objetos na memória. • Controles de navegação • Utilizam as informações providas pelo SiteMapDataSource e XmlSiteMapProvider para mostrar ao usuário sua posição dentro da estrutura do site e para possibilitar que o usuário facilmente navegue de uma página para outra.

  15. Site Maps • É possível customizar cada um dos componentes apresentados no slide anterior: • Para mudar a aparência dos controles de navegação, basta associar controles personalizados ao SiteMapDataSource. • Ou se quisermos ler as informações da estrutura hierárquica do site de um tipo de arquivo diferente ou de um banco de dados, basta customizar o SiteMapProvider.

  16. Definindo um Site Map • O ASP.NET possui um único provedor para navegação, chamado XmlSiteMapProvider, o qual é capaz de recuperar informações de um arquivo XML. • O XmlSiteMapProvider procura por um arquivo chamado web.sitemap na raiz do diretório virtual. Sua tarefa é extrair as informações do arquivo e criar um objeto SiteMap. • O objeto SiteMap fica disponível para o SiteMapDataSource, o qual pode ser colocado em todas as páginas que utilizam o sistema de navegação. • O SiteMapDataSource, por sua vez, provê informações aos controles de navegação, os quais representam o final da cadeia.

  17. Regras do ASP.NET Site MapRegra 1 • Todo arquivo web.sitemap começa com a declaração do elemento <siteMap> e acaba fechando esse elemento. • Veja um exemplo:

  18. Regras do ASP.NET Site MapRegra 2 • Essencialmente, todo mapa de site define uma estrutura de páginas web. • Para inserir uma página no mapa do site, adicionamos o elemento <siteMapNode> com algumas informações básicas: • Título da página • Uma descrição da página (pode ou não ser usada) • URL da página • Veja um exemplo:

  19. Regras do ASP.NET Site MapRegra 3 • Um elemento <siteMapNode> pode conter outros elementos <siteMapNode>. • Mapas de sites não são simples listas de páginas, normalmente eles organizam as páginas em grupos, ou seja, criam uma estrutura hierárquica. • Veja como criar uma estrutura hierárquica:

  20. Regras do ASP.NET Site MapRegra 4 • Todo mapa de site começa com um único elemento <siteMapNode>. • Veja um exemplo incorreto de mapa:

  21. Regras do ASP.NET Site MapRegra 4 • Veja um exemplo correto de mapa:

  22. Regras do ASP.NET Site MapRegra 5 • URLs duplicadas não são permitidas • Não podemos criar dois elementos <siteMapNode> com a mesma URL • Isto pode significar um problema quando temos o mesmo link em mais de um ponto da estrutura do site. Isso ocorre porque o XmlSiteMapProvider armazena os nós da estrutura em uma coleção, onde cada item é indexado por sua URL. • Veja uma forma de contornar o problema:

  23. Controles de Navegação • TreeView • Menu • SiteMapPath

  24. Master Page + Website Navigation • Demo

More Related