// 
//     Licensed to the Apache Software Foundation (ASF) under one
//     or more contributor license agreements.  See the NOTICE file
//     distributed with this work for additional information
//     regarding copyright ownership.  The ASF licenses this file
//     to you under the Apache License, Version 2.0 (the
//     "License"); you may not use this file except in compliance
//     with the License.  You may obtain a copy of the License at
// 
//       http://www.apache.org/licenses/LICENSE-2.0
// 
//     Unless required by applicable law or agreed to in writing,
//     software distributed under the License is distributed on an
//     "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
//     KIND, either express or implied.  See the License for the
//     specific language governing permissions and limitations
//     under the License.
//

= Suporte a JSF 2.x no NetBeans IDE
:jbake-type: tutorial
:jbake-tags: tutorials 
:jbake-status: published
:icons: font
:syntax: true
:source-highlighter: pygments
:toc: left
:toc-title:
:description: Suporte a JSF 2.x no NetBeans IDE - Apache NetBeans
:keywords: Apache NetBeans, Tutorials, Suporte a JSF 2.x no NetBeans IDE

image::images/netbeans-stamp-80-74-73.png[title="O conteúdo desta página se aplica ao NetBeans IDE 7.2, 7.3, 7.4 e 8.0"]

O NetBeans IDE fornece diversas funcionalidades que ativam o suporte integrado para o JavaServer Faces (JSF) 2.0 e 2.1. O suporte ao JSF 2.x do IDE baseia-se no suporte anterior do JavaServer Faces e inclui aprimoramentos versáteis do editor para as páginas de Facelets, diversas facilidades para trabalhar com entidades de classe e um conjunto de assistentes do JSF para tarefas comuns de desenvolvimento, como criar beans gerenciados pelo JSF, modelos de Facelets e componentes compostos.

Os tópicos a seguir demonstram as funcionalidades do JSF 2.x à sua disposição ao trabalhar no NetBeans IDE. Para testar as novas funcionalidades JSF, link:https://netbeans.org/downloads/index.html[+faça o download do pacote Java do NetBeans IDE+], que inclui tecnologias Java Web e EE. O pacote de downloads 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).


[[support]]
== Suporte do JSF 2.x para Projetos

O suporte JSF para projetos pode ser categorizado da seguinte forma:

* Os arquivos de modelos Facelets estão incluídos no projeto
* A bibliotecas JSF 2.x são adicionadas ao classpath do projeto
* O servlet Faces e o mapeamento de servlet são adicionados no descritor de implantação do projeto

Usando o GlassFish server ou qualquer outro servidor compatível com Java EE, você pode criar projetos com suporte do JSF 2.x ou adicionar suporte do JSF 2.x a um projeto existente.

* <<creatingSupport,Criando um Novo Projeto com Suporte do JSF 2.x>>
* <<addingSupport,Adicionando Suporte do JSF 2.x a um Projeto Existente>>


[[creatingSupport]]
=== Criando um Novo Projeto com Suporte do JSF 2.x

Utilize o assistente Projeto do IDE para criar um nova aplicação Java Web. Para isso, clique no botão Novo Projeto ( image::images/new-project-btn.png[] ) da barra de ferramentas principal do IDE ou pressione Ctrl-Shift-N (⌘-Shift-N no Mac). Quando chegar na Etapa 4: Frameworks, selecione JavaServer Faces.

image::images/new-proj-wizard-framework.png[title="Adiciona suporte ao Framework JSF ao criar um projeto"]

Após selecionar o JavaServer Faces, diversas opções de configuração se tornarão disponíveis, conforme mostrado na imagem anterior. É possível determinar como seu projeto tem acesso às bibliotecas JSF 2.x. Clique na guia Configuração para especificar como o servlet Faces será registrado no descritor de implantação do projeto.

image::images/jsf-configuration.png[title="Especificar definições do servlet Faces na guia Configuração"]


[[addingSupport]]
=== Adicionando Suporte JSF 2.x a um Projeto Existente

Se você deseja adicionar o suporte JSF 2.x a uma aplicação Java Web existente, você poderá fazê-lo na janela Propriedades.

1. Na janela Projetos (Ctrl-1; &amp;#8984-1 no Mac), clique com o botão direito do mouse no nó do projeto e selecione Propriedades. A Janela Propriedades do Projeto será exibida
2. Selecione a categoria Frameworks e, em seguida e clique no botão Adicionar.
3. Selecione JavaServer Faces na caixa de diálogo Adicionar um Framework. Clique em OK. 
image::images/add-framework.png[title="Adicionar suporte JSF a um projeto existente"]

Após selecionar JavaServer Faces, diversas opções de configuração se tornarão disponíveis, como a especificação do caminho para bibliotecas JSF 2.x, e o registro de servlet Faces no descritor de implantação do projeto.


[[editor]]
== 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. De uma forma geral, é possível pressionar Ctrl-Espaço em um elemento do arquivo para chamar a funcionalidade autocompletar código e a documentação API. Você também pode tirar vantagem dos atalhos do teclado e dos modelos de código.

Selecione Ajuda > Cartão de Atalhos do Teclado, no menu principal do IDE para exibir atalhos comuns do teclado e modelos de código. Para obter a lista completa, consulte link:http://wiki.netbeans.org/KeymapProfileFor60[+Especificação de Atalhos do Teclado do NetBeans IDE 6.x+].

O IDE fornece suporte Javadoc incorporado para o link:http://javaserverfaces.java.net/nonav/docs/2.0/javadocs/index.html[+JSF 2.0 API+] e link:http://javaserverfaces.java.net/nonav/docs/2.1/javadocs/index.html[+JSF 2.1 API+], bem como para a link:http://javaserverfaces.java.net/nonav/docs/2.1/vdldocs/facelets/index.html[+Documentação de Biblioteca de Tags+] de JSF. Para aproveitar esses recursos em seu trabalho, basta pressionar Ctrl-Espaço em um determinado elemento do 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.

Quando você trabalha em um projeto JSF, seus esforços de edição serão gastos principalmente em arquivos Facelets, beans gerenciados pelo JSF e no arquivo de configuração Faces (`faces-config.xml`). A seguir, demonstramos rapidamente o suporte do Editor que está à sua disposição.

* <<facelets,Editor Facelets>>
* <<xml, Editor de configuração Faces XML>>


[[facelets]]
=== Editor Facelets

O Editor Facelets do IDE fornece diversas funcionalidades que facilitam o desenvolvimento JSF, incluindo o realce de sintaxe e a verificação de erros de tags JSF, suporte à documentação e a funcionalidade autocompletar código para expressões EL, bibliotecas Core Facelets núcleo e namespaces.

É possível pressionar Ctrl-Espaço para chamar a funcionalidade autocompletar código e o suporte à documentação, onde for aplicável.

image::images/doc-support.png[title="Pressione Ctrl-Espaço para chamar a funcionalidade autocompletar código e o suporte à documentação"]

Quando seu cursor não estiver posicionado em uma tag, pressionar Ctrl-Espaço irá chamar uma lista pop-up de itens. Estes itens também podem ser acessados a partir da <<palette,Paleta>> do IDE (Ctrl-Shift-8; &amp;#8984-Shift-8 no Mac).

Você também pode digitar um prefixo antes de pressionar Ctrl-Espaço, por exemplo., `jsf`, para filtrar itens.

image::images/code-completion.png[title="Pressione Ctrl-Espaço no editor para chamar uma lista de itens"]

É possível pressionar Ctrl-Espaço para chamar a funcionalidade autocompletar código para namespaces Facelets.

image::images/namespace.png[title="Pressione Ctrl-Espaço para concluir os namespaces Facelets"]

De forma semelhante, se você digitar uma tag JSF, cujo namespace não tenha sido declarado na página, o IDE o adicionará automaticamente à tag `<html>` da página.

O editor fornece o suporte à funcionalidade autocompletar código para a sintaxe de Linguagem da Expressão (EL). Pressione Ctrl-Espaço no código EL para chamar sugestões para objetos implícitos, beans gerenciados pelo JSF e suas propriedades.

image::images/el-code-completion.png[title="Pressione Ctrl-Espaço nas expressões de EL para chamar o suporte da funcionalidade autocompletar código para objetos implícitos, beans gerenciados pelo JSF e suas propriedades"]

Você também pode realçar snippets do código no editor e selecionar Converter para Componente Composto para criar componentes compostos JSF. Consulte o <<composite,assistente de Componente Composto>> para obter mais detalhes.

O editor fornece recursos de verificação básica de erros. Um erro é exibido com um sublinhado vermelho e o indicador correspondente na margem esquerda. As advertências ficam sublinhadas em amarelo e são indicadas por um identificador amarelo na margem esquerda. É possível passar o mouse sobre o indicador ou texto sublinhado para exibir uma descrição do erro.

Quando você insere tags JSF, diversas verificações são efetuadas. Estas são incluídas se:

* a biblioteca declarada existir
* a biblioteca correspondente ao prefixo da tag contiver tal componente ou tag
* a tag contiver todos os atributos requeridos
* todos os atributos inseridos estiverem definidos na interface do componente

O Editor também verifica:

* a existência de componentes não declarados
* a presença de declarações da biblioteca de tags sem utilizações


[[xml]]
=== Editor de Configuração Faces XML

Se você incluir um arquivo `faces-config.xml` em seu projeto JSF, você poderá pressionar Ctrl-Espaço ao definir as regras de navegação ou ao declarar beans gerenciados para apresentar a funcionalidade autocompletar código e o suporte à documentação.

Se preferir inserir regras de navegação e beans gerenciados utilizando caixas de diálogo em vez de codificá-los manualmente, o IDE fornecerá diversas caixas de diálogo específicas do JSF para esse fim. Estas são acessíveis a partir do menu contextual do Editor.

image::images/faces-config-menu.png[title="Caixas de diálogo específicas do JSF fornecidas no menu contextual do arquivo faces-config.xml"]

O IDE fornece duas _views_ distintas para o arquivo `faces-config.xml` : a view Código-fonte, que exibe o código-fonte XML, e a view Fluxo de Página, que é uma interface gráfica que descreve as regras de navegação JSF definidas no arquivo `faces-config.xml`.

Por exemplo, se seu arquivo contiver a seguinte regra de navegação:


[source,xml]
----

<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 view em Fluxo de Página exibe a seguinte relação, indicando a navegação de `greeting.xhtml` para `success.xhtml` que ocorre quando "`response`" é transmitida ao `NavigationHandler` do JSF.

image::images/page-flow.png[title="A view em Fluxo de Página mostra as relações de navegação"]

Ao clicar duas vezes nos componentes da view em Fluxo de Página, você pode navegar diretamente para o arquivo de origem. Por exemplo, quando você clica duas vezes no componente `greeting.xhtml`, o arquivo `greeting.xhtml` é aberto no editor. Da mesma forma, se você clicar duas vezes na seta entre os dois componentes, o Editor irá focar na regra de navegação definida na view em XLM `faces-config.xml`.


[[wizard]]
== Assistentes do JSF

O NetBeans IDE fornece vários assistentes que facilitam o desenvolvimento com o JSF 2.x. Você pode criar novas páginas de Facelets, modelos de Facelets, beans gerenciados de JSF, componentes do composto, arquivos de configuração do Faces e muito mais.

Todos os assistentes são acessíveis por meio do assistente de Arquivo genérico do IDE. Para acessar o assistente de Arquivo, pressione o botão Novo Arquivo ( image::images/new-file-btn.png[] ) ou selecione 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.

image::images/file-wizard.png[title="Os assistentes orientados pelo JSF são acessíveis a partir do assistente de Arquivo"]

Os seguintes assistentes estão disponíveis ao trabalhar em um projeto Java Web com suporte JSF.

* <<jsfPage,Assistente de Página JSF>>
* <<managedBean,Assistente de Bean Gerenciado pelo JSF>>
* <<facesConfig,Assistente de Configuração de Faces>>
* <<composite,Assistente de Componente Composto>>
* <<jsfPagesEntity,Assistente de Páginas JSF de Classes de Entidade>>
* <<faceletsTemplate, Assistente de Modelo Facelets>>
* <<faceletsTemplateClient,Assistente de Cliente de Modelo de Facelets>>


[[jsfPage]]
=== Assistente de Página JSF

Utilize o assistente de Página JSF para criar páginas de Facelets e JSP para seu projeto. No assistente de Arquivo do IDE, selecione a categoria JavaServer Faces e, em seguida, selecione Página JSF. No JSF 2.x, Facelets é a forma preferencial para declarar páginas JSF. A opção Facelets no assistente é selecionada por default. Selecione a opção Arquivo JSP se deseja criar novas páginas JSP ou fragmentos JSP (arquivos`.jspf`).

image::images/jsf-file-wizard.png[title="Criar páginas de Facelets utilizando o assistente de Arquivo JSF do IDE"]


[[managedBean]]
=== Assistente de Bean Gerenciado

É possível criar beans gerenciados pelo JSF para sua aplicação utilizando o assistente de Bean Gerenciado do IDE. Na categoria JavaServer Faces no <<fileWizard,assistente de Arquivo>> do IDE, selecione Bean gerenciado pelo JSF.

Como default, os metadados especificados são traduzidos em anotações que são aplicadas ao bean gerenciado após ele ser gerado. Por exemplo, na imagem a seguir, você pode criar uma nova classe com escopo na sessão denominada `NewJSFManagedBean` e nomeá-la como `myManagedBean`.

image::images/managed-bean.png[title="Criar beans gerenciado pelo JSF utilizando o assistente de Bens Gerenciado do IDE"]

Quando o bean gerenciado é gerado, ele aparece da seguinte forma com anotações apropriadas.


[source,java]
----

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() {
    }

}
----

Se o seu projeto já contiver um arquivo `faces-config.xml`, a opção "Adicionar dados ao arquivo de configuração' do assistente ficará ativa, permitindo declarar o bean gerenciado no arquivo de configurações do Faces ou ter metadados especificados por meio de anotações no bean gerenciado.


[[facesConfig]]
=== Assistente de Configuração do Faces

O JSF 2.x introduz anotações como uma alternativa ao arquivo de configuração padrão do Faces (`faces-config.xml`) para configurar sua aplicação. Portanto, ao adicionar o suporte JSF 2.x a um projeto, o IDE _não_ gera um arquivo `faces-config.xml` default (como acontecia no JSF 1.2). Naturalmente, você pode querer adicionar um arquivo `faces-config.xml` ao seu projeto, a fim de definir determinadas definições de configuração. Para isso, utilize o assistente de Configuração de Faces do IDE.

Na categoria JavaServer Faces do <<fileWizard,assistente de Arquivo>> do IDE, selecione Configuração do JSF Faces. Isso permite criar um novo arquivo `faces-config.xml`, que será colocado por default na pasta `WEB-INF` de seu projeto.

Consulte <<xml,Editor de configuração XML do Faces>> para obter uma descrição do suporte do Editor do IDE para `faces-config.xml`.


[[composite]]
=== Assistente de Componente Composto

O JSF 2.x simplificou o processo de criação de componentes compostos da interface do usuário (UI), que podem ser reutilizados em páginas Web. É possível utilizar o assistente de Componente Composto do IDE para gerar um modelo de Facelets para um componente composto JSF.

Como com todos os assistentes relativos ao JSF, você pode acessar o assistente de Componente Composto a partir da categoria JavaServer Faces no <<fileWizard,assistente de Arquivo>>do IDE. No entanto, uma forma mais intuitiva de solicitar o assistente é realçando o snippet do código de uma página de Facelets no Editor e selecionando Refatorar > Converter para Componente Composto, no menu pop-up.

O exemplo a seguir descreve as ações que ocorrem, e os recursos à sua disposição, ao chamar o assistente de Componente Composto do snippet, '`<p>This is the composite component.</p>`'.

image::images/convert-comp-component.png[title="Realce um snippet e selecione Converter para Componente Composto no menu contextual"]

O assistente de Componente Composto é aberto, contendo o snippet selecionado em seu painel Seção de implementação.

image::images/comp-component.png[title="O assistente Componente Composto é exibido contendo o snippet do código selecionado"]

Por default, o assistente cria uma pasta `ezcomp` para conter os componentes compostos. Por exemplo, se você estiver criando um novo componente denominado`myComponent`, o assistente irá gerar uma página de Facelets `myComponent.xhtml` , residindo na pasta `resources/ezcomp` da raiz da Web da sua aplicação.

Quando você conclui o assistente, o arquivo de origem do componente do composto é gerado para o snippet de código fornecido. O modelo inclui uma referência para a biblioteca de tags `composite` do JSF 2.x.


[source,html]
----

<?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:cc="http://xmlns.jcp.org/jsf/composite"*>

  <!-- INTERFACE -->
  <cc:interface>
  </cc:interface>

  <!-- IMPLEMENTATION -->
  <cc:implementation>
    *<p>This is the composite component.</p>*
  </cc:implementation>
</html>
----

Além disso, uma nova tag de componente é inserida na localização do editor em que você realçou o snippet do código. Nesse caso, a tag gerada é: `<ez:myComponent/>`. Observe que o IDE adiciona automaticamente o namespace onde o componente composto reside para a tag `<html>` da página.

image::images/comp-component-editor.png[title="A tag do componente é automaticamente inserida na sua página"]

O IDE também suporta o hiperlink para os arquivos de origem do componente composto. É possível navegar até o componente composto de uma página de Facelets pressionando Ctrl (&amp;#8984 no Mac) enquanto passa o mouse sobre a tag do componente. Quando você clica no hiperlink, o arquivo de origem do componente do composto é aberto no Editor.

Para obter mais informações sobre componentes compostos no JSF 2.x, consulte link:http://blogs.oracle.com/enterprisetechtips/entry/true_abstraction_composite_ui_components[+Abstração Verdadeira: Componentes de IU Compostos no JSF 2.0+].


[[jsfPagesEntity]]
=== Assistente de Páginas JSF de Classes de Entidade

Consulte o tópico <<jsfPages,Criando Páginas JSF de Classes de Entidade>> em <<entity,Suporte para Classes de Entidade>>.


[[faceletsTemplate]]
=== Assistente de Modelo de Facelets

Utilize o assistente de Modelo de Facelets para gerar um modelo Facelets. Na categoria JavaServer Faces do <<fileWizard,assistente de Arquivo>> do IDE, selecione Modelo de Facelets. É possível escolher entre oito estilos de layout exclusivos e especificar se o layout será implementado utilizando a tag `<table>` CSS ou HTML.

image::images/template-wizard.png[title="Criar um modelo de Facelets utilizando o assistente de Modelo de Facelets"]

O assistente cria um arquivo de modelo XHTML utilizando as tags `<h:head>` e `<h:body>` e coloca as folhas de estilos associadas na pasta `resources/css` da raiz da Web da aplicação. O assistente gera um arquivo `default.css`, e um arquivo `cssLayout.css` ou `tableLayout.css` , dependendo da sua seleção de layout.

Para exibir o modelo em um browser, clique com o botão direito do mouse no editor e selecione Exibir. Será aberta uma janela do browser para exibir o modelo.


[[faceletsTemplate]]
=== Assistente de Cliente de Modelo de Facelets

Utilize o assistente Cliente de Modelo de Facelets para gerar uma página que referencie um modelo de Facelets no seu projeto. Na categoria JavaServer Faces no <<fileWizard,assistente de Arquivo>> do IDE, selecione Cliente de Modelo de Facelets. Você pode especificar o local do Modelo de Facelets utilizado pelo cliente. Você pode especificar se a tag raiz é  ``<html>``  ou  ``<ui:composition>`` 

image::images/new-template-client.png[title="Criar um Cliente para um modelo de Facelets utilizando o assistente de Cliente de Modelo de Facelets"]

Para obter mais detalhes sobre como utilizar modelos e clientes de Facelets, consulte a seção link:jsf20-intro.html#template[+Aplicando um Modelo de Facelets+] em link:jsf20-intro.html[+Introdução ao JavaServer Faces 2.x no NetBeans IDE+].


[[entity]]
== Suporte para Classes de Entidade

Se você estiver utilizando a persistência Java em sua aplicação e tiver classes de entidade com base em seu esquema de banco de dados, o IDE fornecerá a funcionalidade que permitirá trabalhar de forma eficiente com dados da classe de entidade.

*Observação: *para criar classes de entidade de uma tabela de banco de dados, utilize o assistente de Classes de Entidade do Banco de Dados do IDE, acessível a partir da categoria Persistência do <<fileWizard,assistente de Arquivo>>do IDE.

* <<jsfPages,Criando Páginas JSF Usando Classes de Entidade>>
* <<form,Criando um Form JSF para Dados da Entidade>>
* <<dataTable,Criando uma Tabela de Dados JSF para Dados da Entidade>>


[[jsfPages]]
=== Criando Páginas JSF de Classes de Entidade

Após ter classes de entidade em sua aplicação, você pode utilizar Páginas JSF do IDE usando o assistente de Classes de Entidade para criar uma interface Web a fim de exibir e modificar dados da classe de entidade. O código gerado pelo assistente baseia-se 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 stateless para a criação, recuperação, modificação e remoção de instâncias de entidade
* um bean gerenciado com escopo de sessão JSF
* um diretório contendo quatro arquivos de Facelets para os recursos CRUD (`Create.xhtml`, `Edit.xhtml`, `List.xhtml` e `View.xhtml`)
* classes de utilitário utilizadas pelos beans gerenciados pelo JSF (`JsfUtil`, `PaginationHelper`)
* um conjunto de propriedades para mensagens localizadas e uma entrada correspondente no arquivo de configuração Faces do projeto (será criado um arquivo `faces-config.xml`, caso já não exista um).
* arquivos Web auxiliares, incluindo uma folha de estilo default para componentes renderizados e um arquivo de modelo de Facelets

Para utilizar as Páginas JSF do assistente de Classes de Entidade, <<fileWizard,acesse o assistente de Arquivo do IDE>>. Selecione a categoria JavaServer Faces e, em seguida, selecione Páginas JSF das Classes de Entidade.

Quando você chegar à Etapa 3: Gere Páginas e Classes JSF, você poderá especificar as localizações dos arquivos que serão gerados.

image::images/jsf-entity-wizard.png[title="Especifique as localizações dos arquivos que serão gerados"]

Por exemplo, se você estiver aplicando o assistente a uma classe de entidade `Customer` , as definições mostradas na imagem acima irão gerar os seguintes arquivos:

|===
|image::images/projects-win-generated-files.png[title="A janela Projetos exibe arquivos recém-gerados"] |

* Um arquivo `faces-config.xml` para registrar a localização do conjunto de propriedades que contém as mensagens localizadas para as views JSF. Por exemplo, especificar `/my/org/Bundle` para o Nome do Conjunto de Localizações no assistente irá gerar a seguinte entrada:

[source,xml]
----

<application>
    <resource-bundle>
        <base-name>/my/org/Bundle</base-name>
        <var>bundle</var>
    </resource-bundle>
</application>
----
* Uma pasta `customer` em sua raiz da Web, que contém quatro arquivos de Facelets para os recursos CRUD:
* `Create.xhtml`: Um form JSF para criar um novo cliente.
* `Edit.xhtml`: um form JSF para editar um cliente.
* `List.xhtml`: Uma tabela de dados JSF para navegar entre os clientes.
* `View.xhtml`: Um form JSF para exibir os detalhes do cliente.
* `jsfcrud.css`: Uma folha de estilo utilizada para renderizar os forms JSF e a tabela de dados.
* `template.xhtml`: uma página de modelo de Facelets opcional, que inclui uma referência à folha de estilo `jsfcrud.css` gerada.
* Um bean (enterprise) de sessão stateless denominado `CustomerFacade`, que reside no pacote `my.org.data`. Esta classe também pode ser acessada a partir do nó Enterprise Beans do projeto.
* `Bundle.properties`: Um conjunto de propriedades que contém as mensagens default localizadas para as views JSF.
* Um bean gerenciado de escopo de sessão JSF denominado `CustomerController`, que reside no pacote `my.org.ui`.
* Duas classes de utilitário (`JsfUtil` e `PaginationHelper`) residindo no pacote `my.org.ui.util`. Essas são utilizadas pelo bean gerenciado `CustomerController`.
 
|===


[[form]]
=== Criando um Form JSF para Dados da Entidade

É possível utilizar o Form da caixa de diálogo Entidade para gerar um form JSF que contém campos para todas as propriedades contidas na classe de entidade. É preciso já ter um bean gerenciado pelo JSF criado para manipular dados do usuário associados ao form.

*Observação: *Se você utilizar essa caixa de diálogo sem ter um bean gerenciado associado, você poderá inserir um nome para o bean gerenciado na caixa de diálogo e esse nome será utilizado na página independentemente de ser ou não válido. É possível, então, criar um bean gerenciado utilizando o <<managedBean,assistente de Bean Gerenciado>> do IDE, ou se você utilizar o <<jsfPages,assistente de Página JSF de Classes de Entidade>>, os beans gerenciados serão gerados para todas as classes de entidade selecionadas.

É possível acessar o Form a partir da caixa de diálogo Entidade <<popup,pressionando Ctrl-Espaço no editor de uma página de Facelets>> e, em seguida, escolhendo Form JSF na Entidade ou clicando duas vezes no item Form da Entidade listada na <<palette,Paleta>> do IDE (Ctrl-Shift-8; &amp;#8984-Shift-8 no Mac).

Por exemplo, na imagem a seguir, já existe uma classe de entidade `Customer` no pacote `my.org` do projeto fornecido. Um bean gerenciado `customerController` também já existe no projeto especificado, e o bean gerenciado contém uma propriedade denominada `selected` que retorna um objeto `Customer`.

image::images/jsf-form-from-entity.png[title="Utilizar a caixa de diálogo Form da Entidade para gerar um Form JSF utilizando dados da Entidade"]

*Observação: *Selecione a opção 'Gerar uma view somente leitura' para criar um form que contenha campos somente para leitura. Quando esta opção é selecionada, o IDE aplica as tags `<h:outputText>` a campos do form, ao passo que as tags `<h:inputText>` são aplicadas quando a opção não está selecionada.

Quando você preenche 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:


[source,xml]
----

<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 da caixa de diálogo Form da Entidade.


[[dataTable]]
=== 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 pelo JSF criado para manipular dados de backend associados à classe de entidade.

*Observação: *Se você utilizar essa caixa de diálogo sem ter um bean gerenciado associado, você poderá inserir um nome para o bean gerenciado na caixa de diálogo e esse nome será utilizado na página independentemente de ser ou não válido. É possível, então, criar um bean gerenciado utilizando o <<managedBean,assistente de Bean Gerenciado>> do IDE, ou se você utilizar o <<jsfPages,assistente de Página JSF de 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 <<popup,pressionando Ctrl-Espaço no editor de uma página de Facelets>> e selecionando Tabela de Dados JSF da Entidade ou clicando duas vezes no item da Tabela de Dados da Entidade listado na <<palette,Paleta>> do IDE (Ctrl-Shift-8; &amp;#8984-Shift-8 no Mac).

Por exemplo, na imagem a seguir, á existe uma classe de entidade `Produto` no pacote `my.org.entity` do projeto especificado. 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`.

image::images/jsf-data-table-from-entity.png[title="Utilizar a caixa de diálogo Tabela de Dados da Entidade para gerar uma tabela de dados JSF a partir dos dados de uma entidade"]

Quando você preenche 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:


[source,xml]
----

<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 da caixa de diálogo Form da Tabela de Dados.


[[palette]]
== Componentes da Paleta JSF

Ao trabalhar nas páginas de Facelets, você poderá obter vantagens da Paleta do IDE para arrastar e soltar tags JSF na página. É possível acessar a Paleta escolhendo Janela > Paleta no menu principal ou pressionar Ctrl-Shift-8 (&amp;#8984-Shift-8 no Mac).

image::images/palette.png[title="Utilizar a Paleta do IDE para arrastar e soltar componentes comuns do JSF em uma página de Facelets"]

Você também pode selecionar Fonte > Inserir Código (Alt-Insert; Ctrl-I no Mac) a partir do menu principal do IDE para chamar uma lista pop-up que contenha componentes específicos do JSF contidos na Paleta.

image::images/insert-code.png[title="No editor, pressione Alt-Insert (Ctrl-I no Mac) para chamar uma lista de componentes específicos do JSF"]

A paleta fornece cinco componentes relativos ao JSF:

* *Metadados: * Chama uma caixa de diálogo para adicionar pares de valores de nomes nas tags de metadados JSF. Por exemplo, se você especificar '`myId`' e '`myValue`' como o par de valores de nomes, o seguinte snippet de código será produzido:

[source,xml]
----

<f:metadata>
    <f:viewParam id='myId' value='myValue'/>
</f:metadata>
----
* *Form JSF: * Adiciona o seguinte snippet do código à página.

[source,xml]
----

<f:view>
    <h:form>
    </h:form>
</f:view>
----
* *Form JSF da Entidade:* Chama uma caixa de diálogo que permite associar dados de uma classe de entidade a campos contidos em um form JSF. <<form,Criando um Form JSF para Dados da Entidade>>
* *Tabela de Dados JSF: * Adiciona o seguinte snippet do código à página.

[source,xml]
----

<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 a campos contidos na tabela de dados JSF. <<dataTable,Criando uma Tabela de Dados JSF para Dados da Entidade>>
link:/about/contact_form.html?to=3&subject=Feedback:%20JSF%202.x%20Support%20in%20NetBeans%20IDE[+Enviar Feedback neste Tutorial+]


[[seealso]]
== Consulte Também

Para obter mais informações sobre o JSF 2.x, consulte os recursos a seguir:


=== Tutoriais e Artigos NetBeans

* link:jsf20-intro.html[+Introdução ao JavaServer Faces 2.x no NetBeans IDE+]
* link:jsf20-crud.html[+Gerando uma Aplicação CRUD JavaServer Faces 2.x Usando um Banco de Dados+]
* link:../../samples/scrum-toys.html[+Scrum Toys: A Aplicação de Amostra Completa do JSF 2.0+]
* link:../javaee/javaee-gettingstarted.html[+Conceitos Básicos sobre Aplicações do Java EE+]
* link:../../trails/java-ee.html[+Trilha do Aprendizado do Java EE e Java Web+]


=== Recursos Externos

* link:http://www.oracle.com/technetwork/java/javaee/javaserverfaces-139869.html[+Tecnologia JavaServer Faces+] (homepage Oficial)
* link:http://jcp.org/aboutJava/communityprocess/final/jsr314/index.html[+Especificação do JSR 314 para o JavaServer Faces 2.0+]
* link:http://download.oracle.com/javaee/6/tutorial/doc/bnaph.html[+Tutorial do Java EE 6, Capítulo 5: Tecnologia JavaServer Faces+]
* link:http://javaserverfaces.java.net/[+o Project Mojarra para GlassFish Server+] (Implementação de referência oficial para JSF 2.x)
* link:http://forums.oracle.com/forums/forum.jspa?forumID=982[+Fóruns de Discussão OTN: JavaServer Faces+]
* link:http://www.jsfcentral.com/[+Central do JSF+]


=== Blogs

* link:http://www.java.net/blogs/edburns/[+Ed Burns+]
* link:http://www.java.net/blogs/driscoll/[+Jim Driscoll+]