Exercício 1.6: Realizando a Navegação Dinâmica do Web Site

Mostre-me

Você deve concluir o Exercício 1.5: Aplicando um Gabarito de Página ao Web Site antes de começar a realizar a navegação dinâmica do Web site.

Quando você projetou a estrutura de seu Web site no Exercício 1.2, tomou algumas decisões sobre os relacionamentos entre as páginas. Recorde a forma como organizou os ícones de página com linhas conectando-os:

Estrutura do site.

Há várias maneiras diferentes de relacionar uma página a outra. Esses relacionamentos são referidos como os relacionamentos em uma família. Neste exemplo, Visualizar Todos os Classificados é a página-pai e as outras três páginas são suas páginas-filhas. Além disso, essas três páginas são páginas-irmãs umas das outras.

Esses relacionamentos de páginas são utilizados para gerar links de navegação como barras de navegação e guias. Cada página cria automaticamente os seus links de navegação com base nas páginas às quais ela está relacionada. Esse processo é chamado de navegação dinâmica.

Verificando a Estrutura do Site

Você deseja se assegurar de que a sua estrutura de site tenha sido configurada para especificar quais páginas devem ser incluídas na navegação. Você pode especificar no Web Site Designer quais páginas devem ser incluídas como links na navegação dinâmica, quais páginas devem ser incluídas nos mapas do site, bem como algumas outras opções de navegação que estão baseadas na estrutura do site e nos relacionamentos de página. Isso é útil quando você tem páginas que precisam ser incluídas no site, mas que não fazem sentido como parte dos recursos de navegação. Por exemplo, você poderá ter uma página de erro que aparece quando o site encontra um problema; no entanto, você poderá não desejar mostrar a página de erro como parte da navegação.
  1. Dê um clique duplo em Navegação do Web Site na visualização Explorador de Projetos para visualizar a estrutura do site.
  2. Você pode ver que todas as páginas têm a opção Mostrar na Navegação selecionada por padrão porque o ícone Mostrar na Navegação () está visível. Esta opção deve ser selecionada para cada página que você deseja que apareça em uma barra da navegação. Você pode também desativar uma página, portanto, ela não aparecerá na navegação. Você precisa desativar a página de resultados da procura, Listagens Filtradas, na navegação porque o usuário será enviado para lá a partir da opção de procura na página Visualizar Todos os Classificados.
    1. Clique com o botão direito do mouse no ícone de página Listagens Filtradas.
    2. Selecione Navegação > Mostrar na Navegação para desmarcá-lo. O ícone Mostrar na Navegação agora deve estar indisponível no ícone de página Listagens Filtradas.
  3. Você também precisa desativar a página Atualizar Listagem porque o usuário será enviado para lá a partir da opção de atualização na página Visualizar Todos os Classificados. Clique com o botão direito do mouse no ícone de página Atualizar Listagem. Em seguida, selecione Navegação > Mostrar na Navegação para desmarcá-la. O ícone Mostrar na Navegação agora deve estar indisponível no ícone de página Atualizar Listagem.
  4. Você precisa definir uma Raiz de Navegação para seu site. A página superior, normalmente a primeira página criada no site, é freqüentemente definida como a Raiz de Navegação. Clique com o botão direito do mouse no ícone de página Visualizar Todos os Classificados e clique em Navegação > Definir Raiz de Navegação. O ícone () na  parte superior do ícone de página é o ícone Raiz. A raiz de navegação é importante porque ela determina os níveis de link utilizados ao gerar a navegação do Web site, como barras de navegação.
    Nota: As opções padrão definidas pela navegação do site para a página Visualizar Todos os Classificados e a página Publicar uma Listagem devem permanecer selecionadas.
  5. Pressione Ctrl+S para salvar as alterações.

Incluindo um Componente de Navegação no Gabarito de Página

  1. Retorne ao gabarito de página dando um clique duplo em template.jtpl na visualização Explorador de Projetos.
  2. Na visualização Paleta, clique em Navegação do Web Site para abrir a gaveta que contém os componentes de navegação. Existem vários tipos diferentes de componentes de navegação dinâmica que você pode incluir no Web site, incluindo um mapa do site. O componente mais básico é a Barra Horizontal, que compreende uma fila de links baseados na estrutura do site.
  3. Embora você saiba que precisa de uma fila de links na parte superior de cada página para permitir que os usuários acessem as outras páginas no site, você também deseja incluir algum interesse visual na navegação. Arraste o componente Guias Horizontais para a segunda fila no gabarito de página; esse componente cria os links dinâmicos em uma fila tabulada. O assistente Inserir Guias Horizontais é aberto.
  4. Aceite o padrão para utilizar um componente de navegação de Amostra.
  5. Aceite o padrão nas imagens em Miniatura (horizontal-tab01.jsp) e observe que o campo Nome do arquivo é automaticamente preenchido. Clique em Avançar.
  6. Selecione o tipo de links que deseja que apareçam na barra de navegação, com base nos relacionamentos de página. Para especificar que a página superior do site e todos os irmãos e filhos de cada página apareçam na navegação, assegure-se de que as seguintes páginas estejam selecionadas: Observe que se você selecionar os links anteriores ou seguintes, poderá fornecer uma etiqueta que apareça para esses links, como Voltar e Avançar.
  7. Clique em Avançar. Aceite os padrões nas Definições Opcionais para a página Arquivo de Especificação do assistente. Se você desejar gerar os links no tempo de execução utilizando as tags personalizadas da JSP, selecionará Navegação da JSP. Se você desejar gerar os links no tempo de design utilizando as tags personalizadas HTML, selecione Navegação HTML. Se estiver incluindo uma tag personalizada HTML em uma página JSP do Faces, clique na caixa de opções Utilizar link do Faces para criar uma tag outputLink para o Faces.
  8. Clique em Concluir. O ícone Componente de Navegação () é exibido no gabarito de página.
  9. Salve suas alterações no gabarito de página. Quando você salva o gabarito de página, as alterações da navegação dinâmica são aplicadas a todas as páginas no site.
  10. Dê um clique duplo em Navegação do Web Site na visualização Explorador de Projetos para visualizar a estrutura do site. Como as páginas da Web agora têm um componente de navegação, o ícone () indicando que a página não tem uma navegação do Web site não aparece no ícone de página.
    Navegação do Web Site com componente de navegação.

O componente de navegação inclui vários arquivos no projeto da Web. Depois de salvar o gabarito, observe que a visualização Explorador de Projetos contém um novo .jsp e vários arquivos .gif. Esses arquivos são exibidos nas guias de suas páginas:

Explorador de Projetos com navegação

Visualizando sua Navegação

Se desejar ver um exemplo de como a navegação aparece nas páginas em vez de no gabarito, dê um clique duplo em all_records.jsp na visualização Explorador de Projetos e, em seguida, clique na guia Visualizar no Page Designer. Você pode ver que os nomes que aparecem nas guias são as etiquetas de navegação para as páginas, em vez dos nomes de arquivo. Além disso, observe que a página atual é exibida como a guia realçada; conforme você navega através do site, a página atual sempre será a guia realçada na parte superior.

Dica: Se você alterar a estrutura de seu site na visualização Navegação, os links da navegação dinâmica serão automaticamente atualizados para refletir a nova estrutura.

Guias de navegação

Agora que configurou a navegação dinâmica, você está pronto para começar o Exercício 1.7: Visualizando o Web Site.

Termos de Utilização | Feedback

(C) Copyright IBM Corporation 2000, 2005. Todos os Direitos Reservados.