| // |
| // 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; &#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; &#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 (&#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; &#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; &#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 (&#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+] |
| |
| |
| |
