Usando os fragmentos de página

Conteúdo -  Sobre os fragmentos de página -  Desenhando uma página que inclua fragmentos de página -  Criando um fragmento de cabeçalho -  Criando um fragmento de navegação -  Adicionando fragmentos a uma segunda página -  Desativando o link da página atual -  Fazendo mais: Adicionando um fragmento de rodapé -  Dicas de uso dos fragmentos de página

Este tutorial funciona com as tecnologias e os recursos seguintes:

Componentes JavaServer Faces/ Plataforma Java EE	1.2 com Java EE 5* 1.1 com J2EE 1.4
Banco de dados Viagem	Não é necessário
Biblioteca de componentes BluePrints Ajax	Não é necessário

* Na data da publicação deste tutorial, somente o servidor de aplicativos Sun Java System oferecia suporte ao Java EE 5.

Este tutorial foi adaptado para ser usado com o Servidor de aplicativos Sun Java System PE 9.0, versão atualizada 1, e o Tomcat 5.5.17. Se você estiver usando um servidor diferente, consulte as Notas de versão e as Perguntas freqüentes para obter informações sobre problemas conhecidos e soluções sugeridas. Para obter informações detalhadas sobre os servidores suportados e a plataforma Java EE, consulte as Notas de versão.

Sobre os fragmentos de página

Um fragmento de página é uma parte de uma página, como o cabeçalho, o rodapé ou a barra de navegação, que pode ser reutilizada em outras páginas. Por exemplo, você pode colocar um elemento comum, como um gráfico ou um campo Pesquisa, em um fragmento de página e inclui-lo como um cabeçalho em todas as páginas do aplicativo. Você pode também incluir o nome da sua companhia e informações sobre direitos autorais em um fragmento de página e usar tal fragmento como o rodapé do seu aplicativo. Assim como a página principal, o fragmento de página é uma página JSP com seu próprio Bean de página associado. Entretanto, a extensão de arquivo de um fragmento de página é jspf em vez de jsp.

Desenhando uma página que inclua fragmentos de página

1. Crie um novo projeto de aplicativo da Web visual e nomeie-o de ExemploFragmento.

   A Figura 1 ilustra a página que você criará nas etapas a seguir:

   Figura 1: Página de início do aplicativo

2. Arraste, a partir da seção Layout da Paleta de componentes, um componente Caixa de fragmento de página para o canto superior esquerdo da página.

   A caixa de diálogo Selecionar fragmento de página é aberta.

3. Clique em Criar novo fragmento de página. Digite LogoCompanhia no campo Nome e clique em OK.

   O fragmento de página é exibido na página. Além disso, o fragmento de página é adicionado à janela Projetos e a um bloco <div> na janela Esboço.

4. Clique em Fechar para fechar a caixa de diálogo Selecionar fragmento de página.

   Uma linha pontilhada mostra, no Visual Designer, o tamanho do fragmento de página. O tamanho padrão é de 400 pixels de extensão por 200 pixels de altura.
5. Coloque o segundo componente Caixa de fragmento de página no lado esquerdo da página, embaixo do fragmento de página LogoCompanhia. Nomeie este fragmento de página de Navegação.
6. Arraste um componente Texto estático da seção Básico da Paleta para a página e solte-o à direita do fragmento de página Navegação. Certifique-se de soltar o componente na página e não no fragmento de página. Altere o texto deste componente para Bem-vindo à companhia Sky.
7. Clique em uma parte do Visual Designer que não tenha nenhum componente. Na janela Propriedades, altere a propriedade Title para Página inicial da companhia Sky.

Criando o fragmento de cabeçalho

Agora você define o conteúdo do fragmento LogoComapnhia, como mostrado na Figura 2. Quaisquer alterações feitas em um fragmento devem ser feitas no próprio fragmento, e não na página.

Figura 2: Fragmento da página LogoCompanhia

1. Se ainda tiver salvado o arquivo JPEG do logotipo de amostra da companhia, salve-o no seu sistema de arquivos.

2. Abra o fragmento LogoCompanhia clicando duas vezes no componente no Visual Designer.

   O plano de fundo branco mostra o tamanho do fragmento de página.
3. Na janela Propriedades, defina a propriedade Width como 720px e a propriedade Height como 120px.
4. Arraste o componente Imagem da seção Básico da Paleta para o fragmento de página do canto superior esquerdo.

5. Na janela Propriedades, clique no botão de reticências (...) na propriedade url da imagem. Adicione o logotipo da companhia ao fragmento de página da seguinte forma:

   1. Na caixa de diálogo, clique em Adicionar arquivo.
   2. Vá até a pasta na qual armazenou o logotipo da companhia, sky.jpg, e selecione a imagem.
   3. Clique em Adicionar arquivo. O IDE copia a imagem para o diretório de recursos do projeto e exibe a URL relativa da imagem.
   4. Clique em OK.
6. Se necessário, clique e arraste sky.jpg para posicioná-la dentro das bordas do fragmento de página.
7. Clique na guia Page1 para exibir as atualizações do fragmento LogoCompanhia. Ajuste o layout dos componentes na página conforme necessário.

Criando o fragmento de navegação

A seguir, você define o conteúdo do fragmento de navegação, como mostrado na Figura 3.

Figura 3: Fragmento de navegação

1. Abra o fragmento Navegação clicando duas vezes no componente no Visual Designer.
2. Na janela Propriedades, defina a propriedade Width como 150px e a propriedade Height como 100px.
3. Arraste o componente Hyperlink da seção Básico da Paleta e solte-o no fragmento de página. Defina o texto do hyperlink como Início.
4. Na janela Propriedades, defina a propriedade id do Hyperlink como homeLink e a propriedade url como /faces/Page1.jsp.
5. Solte um segundo componente Hyperlink no fragmento de página. Defina o texto deste componente como Notícias da companhia.

6. Defina a propriedade id do Hyperlink como newsLink e a propriedade url como /faces/News.jsp.

   Você criará a página Notícias na próxima seção.

Adicionando fragmentos a uma segunda página

1. Na janela Projetos, clique com o botão direito do mouse no nó ExemploFragmento > Páginas da Web e escolha Novo > Página. Nomeie a nova página Notícias e clique em Finalizar.

   A página Notícias se abre no Visual Designer. Você desenhará a página ilustrada na Figura 4.

   Figura 4: Página Notícias

2. Clique na guia Page1. Você copiará os componentes Fragmento de página e Texto estático desta página para a página Notícias.
3. Na janela Esboço, mantenha a tecla Control pressionada e selecione os elementos div e o componente Texto estático. Certifique-se de ter selecionado os próprios elementos div e não apenas seus elementos filhos jsp:directive.include.
4. Clique com o botão direito do mouse na seleção e escolha Copiar no menu pop-up.
5. Clique na guia Notícias.
6. Na janela Esboço, expanda o nó Notícias > page1 > html1 > body1. Clique com o botão direito do mouse em form1 e selecione Colar. Os componentes copiados de Page1.jsp são exibidos no Visual Designer.
7. Altere o texto do Texto estático para Temos um novo Diretor executivo.
8. Clique em um espaço em branco da página Notícias. Na janela Propriedades, altere a propriedade Title para Notícias da companhia Sky.

9. Clique no botão de reticências (...) para ver a propriedade Background e use o seletor de cores para definir a cor como amarelo claro.

   Os fragmentos LogoCompanhia e Navegação herdam a cor do plano de fundo da página Notícias.

Desativando o link da página atual

1. Clique na guia Page1 e, em seguida, abra o código-fonte Java da página.

2. Adicione o seguinte código ao método prerender:

   Amostra de código 1: Código para desativar o link da página atual

   public void prerender() { Navigation navigationFragmentBean = (Navigation)getBean("Navegação"); Hyperlink homeLink = navigationFragmentBean.getHomeLink(); homeLink.setDisabled(true); }

3. Clique com o botão direito do mouse no editor de Java e escolha Corrigir importações. O IDE adiciona a seguinte instrução importante:

   import com.sun.webui.jsf.component.Hyperlink;
4. Clique na guia Notícias e abra o código-fonte Java da página.

5. Adicione o seguinte código ao método prerender.

   Amostra de código 2: Código para desativar o link da página atual

   public void prerender() { Navigation navigationFragmentBean = (Navigation)getBean("Navegação"); Hyperlink newsLink = navigationFragmentBean.getNewsLink(); newsLink.setDisabled(true); }

6. Clique com o botão direito do mouse no editor de Java e escolha Corrigir importações. O IDE adiciona a seguinte instrução importante:

   import com.sun.webui.jsf.component.Hyperlink;

7. Execute o aplicativo.

   Verifique se os links Início e Notícias da companhia funcionam corretamente.

Fazendo mais: Adicionando um fragmento de rodapé

Este tutorial demonstra como usar os fragmentos de página em um aplicativo simples de duas páginas. Um aplicativo real geralmente tem mais páginas.

Experimente.  Adicione uma terceira página ao aplicativo ExemploFragmento. Certifique-se de adicionar outro componente Hyperlink na página Navegação e defina a propriedade url do Hyperlink.

Experimente.  Outro uso comum de um fragmento de página é incluir informações sobre os direitos autorais da companhia. Adicione um fragmento de página na parte inferior de cada página com 720px de largura e 100px de altura. Inclua as informações sobre direitos autorais como Copyright 1994-2006 Companhia Sky.

Dicas de uso dos fragmentos de página

Abaixo encontram-se alguns detalhes que devem ser levados em consideração ao usar os fragmentos de página:

• O exemplo deste tutorial apresenta componentes Hyperlink com a propriedade url definida. Recomenda-se esta abordagem pela sua simplicidade, pois não requer que você defina a propriedade immediate ou configure a navegação de página. Outra alternativa é criar um fragmento de página que contém um componente Botão ou Hyperlink com a propriedade action definida. Neste caso, você deve definir a propriedade immediate e, também, configurar a navegação de página de todas as páginas que usam o fragmento.

  Se tiver um grande número de páginas e os resultados da navegação do Botão e do Hyperlink são os mesmos para cada página, como opção, você pode editar o arquivo de origem da navegação de página em vez de usar o Editor de navegação de página. Para isso, clique no botão XML na barra de ferramentas Navegação de página. No editor de fontes, substitua o nome de página específico depois da marca <from-view-id> (por exemplo /Page1.jsp) por um curinga como /*.
• De acordo com o ilustrado neste tutorial, é melhor usar pixels (por exemplo, 100px) para definir a altura e a largura de um fragmento de página. As porcentagens (por exemplo, 100%) funcionam bem no navegador Firefox, mas falham no Internet Explorer 6.0.