Suporte ao JSF 2.0 no NetBeans IDE
O NetBeans IDE fornece vários recursos que habilitam suporte embutido para JavaServer Faces 2.0. O novo suporte JSF 2.0 do IDE constrói no suporte anterior para JavaServer Faces e inclui aprimoramentos de edição versátil para páginas Facelets, várias facilidades para trabalhar com classes de entidade e uma suíte de assistentes JSF para tarefas de desenvolvimento comuns, como criar beans gerenciados JSF, modelos Facelets e componentes de composição.
Os tópicos a seguir demonstram os recursos do JSF 2.0 que estão a sua disposição ao trabalhar no NetBeans IDE. Para testar os novos recursos JSF, baixe o conjunto Java para NetBeans IDE, que inclui tecnologias Java Web e EE. O conjunto de download também inclui o GlassFish Server Open Source Edition, que é a implementação de referência da especificação de plataforma Java EE 6 (JSR 316).
Conteúdo
Suporte JSF 2.0 para projetos
O suporte JSF para projetos pode ser categorizado como segue.
- Os arquivos de modelos Facelets estão incluídos no projeto
- A bibliotecas JSF 2.0 são adicionadas ao classpath do projeto
- O servlet Faces e o mapeamento de servlet são adicionados no descritor de implementação do projeto
Utilizando o servidor GlassFish ou qualquer outro servidor compatível, é possível criar projetos com suporte JSF 2.0 ou adicionar suporte JSF 2.0 em um projeto existente.
Criando um novo projeto com suporte JSF 2.0
Utilize o assistente Projeto do IDE para criar um novo aplicativo Java Web. Para fazer isso, clique no botão Novo projeto ( 
) na barra de ferramentas principal do IDE ou pressione Ctrl-Shift-N (⌘-Shift-N no Mac). Quando chegar na Etapa 4: Estruturas, selecione JavaServer Faces.
Após selecionar o JavaServer Faces, diversas opções de configuração se tornam disponíveis, como mostrado na imagem acima. É possível determinar como seu projeto tem acesso às bibliotecas JSF 2.0. Clique na aba Configuração para especificar como o servlet Faces será registrado no descritor de implementação do projeto.
Adicionando o suporte JSF 2.0 a um projeto existente
Se você deseja adicionar o suporte JSF 2.0 para uma aplicativo Web Java existente, poderá fazê-lo a partir da janela Propriedades.
- Na janela Projetos (Ctrl-1; ⌘-1 no Mac), clique com o botão direito do mouse no nó do projeto e escolha Propriedades. A janela Propriedades do projeto é exibida.
- Selecione a categoria Frameworks e, em seguida, clique no botão Adicionar. Na caixa de diálogo que é exibida, selecione JavaServer Faces.
Após selecionar JavaServer Faces, diversas opções de configuração se tornam disponíveis, tais como a especificação do caminho para bibliotecas JSF 2.0, e o registro de servlet Faces no descritor de implementação do projeto.
Utilizando o Editor
O editor do IDE é específico em linguagem e fornece o suporte dependendo do tipo de arquivo no qual você está trabalhando. Falando em termos gerais, é possível pressionar Ctrl-Espaço em um elemento do arquivo para chamar o autocompletar de código e a documentação API. Você também pode tirar vantagem dos atalhos de teclado e dos modelos de código.
Escolha Ajuda > Cartão de atalhos de teclado no menu principal do IDE para visualizar atalhos de teclado comuns e modelos de código. Para obter a lista completa, consulte Especificação de atalhos de teclado do NetBeans IDE 6.x.
O IDE fornece suporte Javadoc incorporado para o JSF 2.0 API, assim como a Documentação de biblioteca de marcações do JSF. Para tirar vantagem destes recursos nos quais trabalha, basta pressionar Ctrl-Espaço em um determinado elemento no Editor.
Se preferir ter contínuo acesso à documentação do Javadoc, você pode abrir a janela Javadoc do IDE (Janela > Outro > Javadoc). A janela Javadoc é automaticamente atualizada dependendo da localização de seu cursor no Editor.
Ao trabalhar em um projeto JSF, seus esforços de edição serão principalmente gastos nos arquivos Facelets, beans gerenciados JSF e no arquivo de configuração Faces (faces-config.xml). A seguir demonstramos um pouco o suporte do Editor que está a sua disposição.
Editor Facelets
O Editor Facelets do IDE fornece diversos recursos que facilitam o desenvolvimento JSF, incluindo o realce de sintaxe e a verificação de erros para identificadores JSF, suporte para documentação, e conclusão de código para expressões EL, bibliotecas Facelets núcleo e namespaces.
É possível pressionar Ctrl-Espaço para chamar o autocompletar de código e o suporte de documentação, onde for aplicável.
Você também pode digitar um prefixo antes de pressionar Ctrl-Espaço, e.g., jsf, para filtrar itens.
É possível pressionar Ctrl-Espaço para chamar o autocompletar de código para namespaces Facelets.
De forma similar, se você digita em um identificador JSF, cujo namespace não foi declarado na página, o IDE o adiciona automaticamente no identificador <html> da página.
O editor fornece o suporte autocompletar de código para a sintaxe da Linguagem de expressão (EL). Pressione Ctrl-Espaço no código EL para chamar sugestões para objetos implícitos, beans gerenciados JSF, e suas propriedades.
Você também pode realçar trechos do código no editor e selecionar Converter para componente composto para criar componentes compostos JSF. Consulte o assistente Componente composto para obter mais detalhes.
O editor fornece capacidades de verificação básica de erros. Um erro é exibido com um sublinhado vermelho e o identificador correspondente na margem esquerda. Os avisos são sublinhados em amarelo e são indicados por um identificador amarelo na margem esquerda. É possível passar o mouse sobre o identificador ou texto sublinhado para ver uma descrição do erro.
Quando você insere marcações JSF, diversas verificações são efetuadas. Estas incluem se:
- a biblioteca declarada existe
- se a biblioteca correspondida pelo prefixo do identificador contém tal componente ou identificador
- se o identificador contém todos os atributos requeridos
- se todos os atributos inseridos estão definidos na interface do componente
O Editor também verifica:
- a existência de componentes não-declarados
- a presença de declarações taglib sem utilizações
Editor de configuração Faces XML
Se você inclui um arquivo faces-config.xml em seu projeto JSF, poderá pressionar Ctrl-Espaço ao definir regras de navegação ou ao declarar beans gerenciados para trazer a conclusão de código e o suporte para documentação.
Se preferir inserir regras de navegação e beans gerenciados utilizando caixas de diálogo ao invés de codifica-las manualmente, o IDE fornece diversas caixas de diálogo específicas do JSF para esse fim. Estas estão acessíveis a partir do menu de clicar com o botão direito do mouse do Editor.
O IDE fornece duas vistas distintas para o arquivo faces-config.xml : a vista XML, que exibe o código-fonte XML, e a vista PageFlow, que é uma interface gráfica que descreve as regras de navegação JSF definidas no arquivo faces-config.xml.
Por exemplo, se seu arquivo contém a seguinte regra de navegação:
<navigation-rule>
<from-view-id>/greeting.xhtml</from-view-id>
<navigation-case>
<from-outcome>response</from-outcome>
<to-view-id>/success.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
A vista PageFlow exibe o seguinte relacionamento, indicando a navegação de greeting.xhtml para success.xhtml que ocorre quando "response" é para o NavigationHandler do JSF.
Ao clicar duas vezes nos componentes da visualização PageFlow, é possível navegar diretamente para o arquivo de código-fonte. Por exemplo, quando você clica duas vezes no componente greeting.xhtml, o arquivo greeting.xhtml é aberto no editor. Da mesma forma, se você clica duas vezes na seta entre os dois componentes, o Editor irá focar na regra de navegação definida na vista XLM faces-config.xml.
Assistentes do JSF
O NetBeans IDE fornece diversos assistentes que facilitam o desenvolvimento com JSF 2.0. É possível criar novas páginas Facelets, modelos Facelets, beans gerenciados JSF, componentes compostos, arquivos de configuração Faces e mais.
Todos os assistentes são acessíveis através do assistente Arquivo genérico do IDE. Para acessar o assistente Arquivo, pressione o botão Novo arquivo ( 
), ou escolha Arquivo > Novo arquivo no menu principal (ou pressione Ctrl-N; ⌘-N no Mac). Os assistentes específicos do JSF são listados na categoria JavaServer Faces.
Os seguintes assistentes estão disponíveis ao trabalhar em um projeto Java Web com suporte JSF.
Assistente Página JSF
Utilize o assistente Página JSF para criar páginas Facelets e JSP para seu projeto. No assistente Arquivo do IDE, selecione a categoria JavaServer Faces e, em seguida, selecione Página JSF. No JSF 2.0, Facelets é a forma preferida para declarar páginas JSF. A opção Facelets no assistente é selecionada por padrão. Selecione a opção Arquivo JSF se deseja criar novas páginas JSF ou fragmentos JSF (arquivos.jspf).
Assistente Bean gerenciado
É possível criar beans gerenciados JSF para seu aplicativo utilizando o assistente Bean gerenciado do IDE. Na categoria JavaServer Faces no assistente Arquivo do IDE, selecione Bean gerenciado JSF.
Como padrão, quaisquer metadados que você especifica são traduzidos em anotações que são aplicadas ao bean gerenciado após ele ser gerado. Por exemplo, na imagem abaixo, você pode criar uma nova classe com escopo na sessão denominada NewJSFManagedBean e nomeá-la como myManagedBean.
Quando o bean gerenciado é gerado, ele aparece como segue com anotações apropriadas.
package my.org;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name="myManagedBean")
@SessionScoped
public class NewJSFManagedBean {
/** Creates a new instance of NewJSFManagedBean */
public NewJSFManagedBean() {
}
}
Também, se seu projeto já contém um arquivo faces-config.xml, a opção "Adicionar dados no arquivo de configuração' do assistente se torna ativa, permitindo declarar o bean gerenciado no arquivo de configurações Faces, ou ter qualquer meta-dados especificado através de anotações no bean gerenciado.
Assistente Configuração de Faces
O JSF 2.0 introduz anotações como uma alternativa ao arquivo de configurações Faces padrão (faces-config.xml) para configurar seu aplicativo. Portanto, ao adicionar o suporte JSF 2.0 a um projeto, o IDE não gera um arquivo faces-config.xml padrão (como acontecia no JSF 1.2). Naturalmente, você pode desejar adicionar um arquivo faces-config.xml para seu projeto, a fim de definir determinadas definições de configuração. Para fazer isso, utilize o assistente Configuração de Faces do IDE.
Na categoria JavaServer Faces no assistente Arquivo do IDE, selecione Configuração de Faces JSF do IDE. Isso permite criar um novo arquivo faces-config.xml, que é colocado por padrão na pasta WEB-INF de seu projeto.
Consulte Editor de configuração XML de Faces para obter uma descrição do suporte do Editor do IDE para faces-config.xml.
Assistente Componente composto
O JSF 2.0 simplificou o processo de criar componentes compostos da interface do usuário (UI), que podem ser reutilizados em páginas da Web. É possível utilizar o assistente Componente composto do IDE para gerar um modelo Facelets para um componente composto JSF.
Como com todos os assistentes relativos ao JSF, você pode acessar o assistente Componente composto a partir da categoria JavaServer Faces no assistente Arquivodo IDE. No entanto, uma forma mais intuitiva de solicitar pelo assistente é a de realçar a parte do código de uma página Facelets no Editor, e a seguir escolher Converter para componente composto a partir do menu de clicar com o botão direito do mouse.
O exemplo a seguir descreve as ações que ocorrem, e os recursos a sua disposição, ao chamar o assistente Componente composto na parte do código, '<p>This is the composite component.</p>'.
O assistente Componente composto é aberto, contendo a parte do código selecionada em seu painel Seção de implementação.
Por padrão, o assistente cria uma pasta ezcomp para conter os componentes compostos. Por exemplo, se você estiver criando um novo componente denominadomyComponent, o assistente gera uma página Facelets myComponent.xhtml , residindo na pasta resources/ezcomp da raiz Web de seu aplicativo.
Quando você completa o assistente, o arquivo de código-fonte do componente composto é gerado para o trecho de código fornecido. O modelo inclui uma referência para a biblioteca de identificador composite do JSF 2.9.
<?xml version='1.0' encoding='UTF-8' ?>
<!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"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:composite="http://java.sun.com/jsf/composite">
<!-- INTERFACE -->
<composite:interface>
</composite:interface>
<!-- IMPLEMENTATION -->
<composite:implementation>
<p>This is the composite component.</p>
</composite:implementation>
</html>
Também, uma nova marcação de componente é inserida na localização do editor onde você realçou o trecho de código. Nesse caso, a marcação gerada é: <ez:myComponent/>. Observe que o IDE automaticamente adiciona o namespace onde o componente composto reside para o identificador <html> da página.
O IDE também suporta o hiperlink para os arquivos de código-fonte do componente composto. É possível navegar para o componente composto a partir de uma página Facelets ao pressionar Ctrl (⌘ no Mac), ao passar o mouse sobre a marcação do componente. Ao clicar no hiperlink, o arquivo de código-fonte do componente composto é aberto no Editor.
Para obter mais informações sobre componentes compostos no JSF 2.0, consulte Abstração verdadeira: Componentes de IU compostos no JSF 2.0.
Assistente Páginas JSF de classes de entidade
Consulte o tópico Criando páginas JSF a partir de classes de entidade em Suporte para classes de entidade.
Assistente Modelo Facelets
Utilize o assistente Modelo Facelets para gerar um modelo Facelets. Na categoria JavaServer Faces no assistente Arquivo do IDE, selecione Modelo Facelets. É possível escolher entre oito estilos de layout únicos e especificar se o layout é implementado utilizando a marcação <table> CSS ou HTML.
O assistente cria um arquivo modelo XHTML utilizando as marcações <h:head> e <h:body> e coloca os estilos de folha associados na pasta resources/css da raiz Web do aplicativo. O assistente gera um arquivo default.css , e um arquivo cssLayout.css ou tableLayout.css , dependendo de sua seleção de layout.
Para visualizar o modelo em um navegador, clique com o botão direito do mouse no editor e escolha Visualizar. É aberta uma janela do navegador para exibir o modelo.
Suporte para classes de entidade
Se você estiver utilizando a persistência Java em seu aplicativo e tem classes de entidade com base em seu esquema de banco de dados, o IDE fornece a funcionalidade que permite trabalhar com eficiência com dados da classe de entidade.
Nota: para criar classes de entidade a partir de uma tabela de banco de dados, utilize o assistente Classes de entidade do banco de dados do IDE, acessível a partir da categoria Persistência no assistente Arquivodo IDE.
Criando páginas JSF a partir de classes de entidade
Após ter classes de entidade em seu aplicativo, você pode utilizar Páginas JSF do IDE a partir do assistente Classes de entidade para criar uma interface da Web a fim de exibir e modificar dados da classe de entidade. O código gerado pelo assistente tem base nas anotações de persistência contidas nas classes de entidade.
Para cada classe de entidade o assistente gera o seguinte:
- um bean de sessão sem estado para a criação, recuperação, modificação e remoção de instâncias de entidade
- um bean gerenciado no escopo da sessão JSF
- um diretório contendo quatro arquivos Facelets para os recursos CRUD (
Create.xhtml, Edit.xhtml, List.xhtml e View.xhtml)
- classes de utilitário utilizadas pelos beans gerenciados JSF (
JsfUtil, PaginationHelper)
- um conjunto de propriedades para mensagens localizadas e uma entrada correspondente no arquivo de configuração Faces do projeto (um arquivo
faces-config.xml é criado, caso um já não exista).
- arquivos Web auxiliares, incluindo um estilo de folha padrão para componentes convertidos e um arquivo de modelo Facelets
Para utilizar as Páginas JSF do assistente Classes de entidade, acesse o assistente Arquivo do IDE. Selecione a categoria JavaServer Faces, e a seguir selecione Páginas JSF das Classes de entidade.
Quando você alcançar a Etapa 3: Gerar Páginas e Classes JSF, poderá especificar as localizações dos arquivos que serão gerados.
Por exemplo, se você estiver aplicando o assistente para uma classe de entidade Customer , as configurações mostradas na imagem acima irão gerar os seguintes arquivos:
É possível utilizar o formulário partir da caixa de diálogo Entidade para gerar um formulário JSF que contém campos para todas as propriedades contidas na classe de entidade. É preciso já ter um bean gerenciado JSF criado para manusear quaisquer dados do usuário associados com o formulário.
Nota: se você utiliza essa caixa de diálogo sem ter um bean gerenciado associado, é possível inserir um nome para o bean gerenciado na caixa de diálogo e aquele nome será utilizado na página independente de ser ou não válido. É possível, então, criar um bean gerenciado utilizando o assistente Bean gerenciado do IDE ou, se você utilizar o assistente Página JSF de Classes de entidade, os beans gerenciados são gerados para todas as classes de entidade selecionadas.
É possível acessar o formulário a partir da caixa de diálogo Entidade pressionando Ctrl-Espaço no editor de uma página Facelets e, em seguida, escolhendo Formulário JSF a partir da Entidade ou clicando duas vezes no item Formulário a partir da entidade listada na Paleta do IDE (Ctrl-Shift-8; ⌘-Shift-8 no Mac).
Por exemplo, na imagem a seguir, uma classe de entidade Customer já existe no pacote my.org do projeto fornecido. Um bean gerenciado customerController também já existe no determinado projeto, e o bean gerenciado contém uma propriedade denominada selected que retorna um objeto Customer.
Nota: selecione a opção 'Gerar uma visualização de somente leitura' para criar um formulário que contenha campos de somente leitura. Quando esta opção é selecionada, o IDE aplica os identificadores <h:outputText> para campos do formulário, enquanto os identificadores <h:inputText> são aplicados quando a opção não é selecionada.
Quando você completa a caixa de diálogo, o IDE gera o código para sua página Facelets. Por exemplo, uma classe de entidade Customer contendo uma propriedade customerId é exibida no seguinte formato:
<f:view>
<h:form>
<h1><h:outputText value="Create/Edit"/></h1>
<h:panelGrid columns="2">
<h:outputLabel value="CustomerId:" for="customerId" />
<h:inputText id="customerId" value="#{customerController.selected.customerId}" title="CustomerId" required="true" requiredMessage="The CustomerId field is required."/>
...
[ Other fields added here. ]
...
</h:panelGrid>
</h:form>
</f:view>
Para modificar o modelo utilizado para o código gerado, clique no link Personalizar modelo dentro do Formulário da caixa de diálogo Entidade.
Criando uma tabela de dados JSF para dados da entidade
É possível utilizar a Tabela de dados a partir da caixa de diálogo Entidade para gerar uma tabela de dados JSF que contenha colunas para todas as propriedades contidas na classe de entidade. Para poder utilizar essa facilidade, é preciso já ter um bean gerenciado JSF criado para manipular quaisquer back-end associados com a classe de entidade.
Nota: se você utiliza essa caixa de diálogo sem ter um bean gerenciado associado, é possível inserir um nome para o bean gerenciado na caixa de diálogo e esse nome será utilizado na página independente de ser ou não válido. Quando você cria um bean gerenciado utilizando o assistente Bean gerenciado do IDE, ou se utiliza as Páginas JSF a partir do assistente Classes de entidade, os beans gerenciados serão gerados para todas as classes de entidade selecionadas.
É possível acessar a Tabela de dados a partir da caixa de diálogo Entidade pressionando Ctrl-Espaço no editor de uma página Facelets e escolhendo Tabela de dados JSF da entidade ou ao clicar duas vezes no item Tabela de dados da entidade listado na Paleta do IDE (Ctrl-Shift-8; ⌘-Shift-8 no Mac).
Por exemplo, na imagem a seguir, uma classe de entidade Produto já existe no pacote my.org.entity do projeto fornecido. Um bean gerenciado productController também já existe no projeto, e o bean gerenciado contém um método denominado getProductItens() que retorna um objeto List ou Product.
Quando você completa a caixa de diálogo, o IDE gera o código para sua página Facelets. Por exemplo, uma classe de entidade Product contendo uma propriedade productId é exibida no seguinte formato:
<f:view>
<h:form>
<h1><h:outputText value="List"/></h1>
<h:dataTable value="#{productController.productItems}" var="item">
<h:column>
<f:facet name="header">
<h:outputText value="ProductId"/>
</f:facet>
<h:outputText value="#{item.productId}"/>
</h:column>
...
[ Other columns added here. ]
...
</h:dataTable>
</h:form>
</f:view>
Para modificar o modelo utilizado para o código gerado, clique no link Personalizar modelo dentro do Formulário a partir da caixa de diálogo Tabela de dados.
Componentes da paleta JSF
Ao trabalhar na página Facelets, você poderá obter vantagens da paleta do IDE para arrastar e soltar marcações JSF na página. É possível acessar a paleta ao escolher Janela > Paleta no menu principal ou pressionar Ctrl-Shift-8 (⌘-Shift-8 no Mac).
Você também pode escolher Fonte > Inserir código (Alt-Insert; Ctrl-I no Mac) a partir do menu principal do IDE para chamar uma lista suspensa que contenha componentes específicos do JSF contidos na paleta.
A paleta fornece cinco componentes específicos relativos ao JSF:
- Metadados: chama uma caixa de diálogo para adicionar pares de valores de nome dentro das marcações de metadados JSF. Por exemplo, se você especifica '
myId' e 'myValue' como o par de valores de nomes, a seguinte parte de código é produzida:
<f:metadata>
<f:viewParam id='myId' value='myValue'/>
</f:metadata>
- Formulário JSF: adiciona a seguinte parte do código na página.
<f:view>
<h:form>
</h:form>
</f:view>
- Formulário JSF da entidade: chama uma caixa de diálogo que permite associar dados de uma classe de entidade para campos contidos em um formulário JSF. Criando um formulário JSF para dados da entidade
- Tabela de dados JSF: adiciona a seguinte parte do código na página.
<f:view>
<h:form>
<h:dataTable value="#{}" var="item">
</h:dataTable>
</h:form>
</f:view>
- Tabela de dados JSF da entidade: chama uma caixa de diálogo que permite associar dados de uma classe de entidade para campos contidos na tabela de dados JSF. Criando uma tabela de dados JSF para dados da entidade
Consulte também
Para mais informações sobre o JSF 2.0, consulte os recursos a seguir.
Tutoriais e artigos NetBeans
Recursos externos
Blogs
