HOME / Docs & Support / NetBeans 6.0 / Web Application Documentation

Usando os fragmentos de página

Neste tutorial, você usa o NetBeans IDE 6.0 ou 6.1 para criar um aplicativo que inclui dois componentes de fragmento de página JSF 1.2 (Woodstock). Um fragmento contém o logotipo da aplicação. O segundo fragmento contém os links para navegar entre as páginas da aplicação.

Duração esperada: 20 minutos

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

Logotipo de amostra da companhia usado neste tutorial

» sky.jpg

Para seguir este tutorial, você precisa dos seguintes recursos e softwares.

Software ou recurso	Versão necessária
NetBeans IDE	Web e Java EE versão 6.1 ou 6.0
Java Development Kit (JDK)	versão 6 ou versão 5
Componentes do JavaServer Faces/ Plataforma Java EE	1.2 com Java EE 5* ou 1.1 com J2EE 1.4
Servidor da aplicação GlassFish	V2
Banco de dados Viagem	Não é necessário

* Para tirar vantagem dos recursos Java EE 5 do NetBeans IDE , use um servidor da aplicação que seja totalmente compatível com a especificação Java EE 5, tal como o Servidor da aplicação GlassFish V2 UR2. Se você estiver usando um servidor diferente, consulte as Notas de versão e as Perguntas freqüentes para saber problemas conhecidos e soluções alternativas. Para obter informações detalhadas sobre os servidores suportados e a plataforma Java EE, consulte as Notas de versão.

Observação para usuários do NetBeans IDE 6.1:

Criar um projeto no NetBeans 6.1 inclui novas opções que podem ser deixadas como padrão. Por exemplo, a caixa de verificação Usar pasta dedicada para armazenar bibliotecas pode ficar desmarcada.
Vinculação sob demanda dos recursos do NetBeans IDE 6.1. Onde os componentes requerem codificação de Java, agora você deve adicionar manualmente o atributo de vinculação aos componentes em uma aplicação Visual Web JSF. Para fazê-lo, clique com o botão direito do mouse em cada componente e escolha Adicionar atributo de vinculação. Para obter mais informações, consulte o On-demand Binding Attribute Wiki.

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 incluí-lo como um cabeçalho em todas as páginas da aplicação. 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é da sua aplicação. Como uma página principal, um fragmento de página é uma página JSP com seu próprio bean de página associada; entretanto, a extensão de arquivo de um fragmento de página é jspf em vez de jsp.

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

Você começa este tutorial criando uma página de início para a aplicação. Em seguida, você cria um fragmento de cabeçalho e um fragmento de navegação, e inclui estes fragmentos na página de início.

Crie um novo projeto de aplicação Web e nomeie-o de ExemploFragmento. Ative o framework JavaServer Faces Visual Web.

A figura abaixo mostra a página que você criará nas etapas a seguir:
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.
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 Navegador.
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.
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.
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.
Clique em uma parte do Visual Designer que não tenha nenhum componente. Na janela Propriedades, altere a propriedade Title para Home page da companhia Sky.

Criando o fragmento de cabeçalho

Agora você define o conteúdo do fragmento LogoCompanhia, 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.

Se ainda tiver salvado o arquivo JPEG do logotipo de amostra da companhia, salve-o no seu sistema de arquivos.
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.
Na janela Propriedades, defina a propriedade Width como 720px e a propriedade Height como 120px.
Arraste o componente Imagem da seção Básico da Paleta para o fragmento de página do canto superior esquerdo.
Na janela Propriedades, clique no botão de reticências da 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.
Se necessário, clique e arraste sky.jpg para posicioná-la dentro das bordas do fragmento de página.
Clique na aba 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

Agora você define o conteúdo do fragmento de navegação, como mostrado na figura seguinte.

Observação: Vinculação sob demanda dos recursos do NetBeans IDE 6.1. Onde os componentes requerem codificação de Java, agora você deve adicionar manualmente o atributo de vinculação aos componentes em uma aplicação Visual Web JSF. Para fazê-lo, clique com o botão direito do mouse em cada componente e escolha Adicionar atributo de vinculação. Para obter mais informações, consulte o On-demand Binding Attribute Wiki.

Abra o fragmento Navegação clicando duas vezes no componente no Visual Designer.
Na janela Propriedades, defina a propriedade Width como 150px e a propriedade Height como 100px.
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.
Na janela Propriedades, defina a propriedade id do hyperlink como homeLink e a propriedade url como /faces/Page1.jsp.
Solte um segundo componente Hyperlink no fragmento de página. Defina o texto deste componente como Notícias da companhia.
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

Nesta seção, você cria uma segunda página com os fragmentos de página de cabeçalho e de navegação. Você define uma cor de plano de fundo nesta página para demonstrar como as configurações de estilo da página são herdadas por um fragmento de página.

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

A página Notícias se abre no Visual Designer. Você criará a página mostrada na figura abaixo.
Clique na aba Page1. Você copiará os componentes Fragmento de página e Texto estático desta página para a página Notícias.
Na Página 1 - janela Navegador, mantenha pressionada a tecla Control e selecione ambos elementos div e o componente Texto estático. Garanta a seleção dos próprios elementos div e não apenas de seus elementos filhos jsp:directive.include.
Clique com o botão direito do mouse na seleção e escolha Copiar no menu pop-up.
Clique na aba Notícias.
Na janela Navegador, 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.
Altere o texto do componente Texto estático para Temos um novo CEO.
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.
Clique no botão de reticências da propriedade Background e use o seletor de cores para definir a cor como amarelo claro. No tempo de execução, você poderá ver uma distinção clara entre as páginas Notícias da companhia Sky e Home page da companhia Sky.
Os fragmentos LogoCompanhia e Navegação herdam a cor do plano de fundo da página Notícias.

Observação: Vinculação de atributo sob demanda dos recursos do NetBeans IDE 6.1. Você deve adicionar manualmente um atributo de vinculação aos componentes em uma aplicação JSF Visual Web. Para fazê-lo, clique com o botão direito do mouse em cada componente e escolha Adicionar atributo de vinculação. Para obter mais informações, consulte o On-demand Binding Attribute Wiki.

Desativando o link da página atual

Nesta seção, você adiciona o código para desativar o link Home na página Page1 e o link Notícias da companhia na página Notícias.

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

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("Navigation");
    Hyperlink homeLink = navigationFragmentBean.getHomeLink();
    homeLink.setDisabled(true);
               }

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;
Clique na aba Notícias e abra o código-fonte Java da página.

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("Navigation");
    Hyperlink newsLink = navigationFragmentBean.getNewsLink();
    newsLink.setDisabled(true);
                  }

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;
Clique no botão Executar projeto principal () para executar a aplicação.
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 uma aplicação simples de duas páginas. Uma aplicação real geralmente tem mais páginas.

Experimente. Adicione uma terceira página à aplicação 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 largura de 720px e altura de 100px. Inclua as informações sobre direitos autorais como Copyright 1994-2008 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 código-fonte, substitua o nome da página específica depois da marca <from-view-id> (por exemplo /Page1.jsp) por um valor coringa, 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.