| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| <html> |
| <head> |
| <title>Suporte a JSF 2.x no NetBeans IDE</title> |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| <meta name="description" content="An article outlining JSF 2.x support in NetBeans IDE"> |
| <meta name="keywords" content="NetBeans, IDE, integrated development environment, |
| JavaServer Faces, JavaServer Faces 2.0, JSF, JSF 2.1"> |
| |
| <link rel="stylesheet" type="text/css" href="../../../netbeans.css"> |
| |
| <script src="../../../images_www/js/listCollapse.js" type="text/javascript"></script> |
| </head> |
| <body> |
| |
| <!-- Copyright (c) 2009, 2010, 2011, Oracle and/or its affiliates. All rights reserved. --> |
| |
| <h1>Suporte a JSF 2.x no NetBeans IDE</h1> |
| |
| <img alt="O conteúdo desta página se aplica ao NetBeans IDE 7.2, 7.3, 7.4 e 8.0" class="stamp" src="../../../images_www/articles/73/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"> |
| |
| <p>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.</p> |
| |
| <p>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, <a href="https://netbeans.org/downloads/index.html">faça o download do pacote Java do NetBeans IDE</a>, 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).</p> |
| |
| |
| <h3>Conteúdo</h3> |
| |
| <ul id="collapsableList"> |
| <li><a href="#support">Suporte JSF 2.x para Projetos</a> |
| |
| <ul> |
| <li><a href="#creatingSupport">Criando um Novo Projeto com Suporte do JSF 2.x</a></li> |
| <li><a href="#addingSupport">Adicionando Suporte do JSF 2.x a um Projeto Existente</a></li> |
| </ul></li> |
| |
| <li><a href="#editor">Utilizando o Editor</a> |
| |
| <ul> |
| <li><a href="#facelets">Editor Facelets</a></li> |
| <li><a href="#xml"> Editor de Configuração Faces XML</a></li> |
| </ul></li> |
| |
| <li><a href="#wizard">Assistentes do JSF</a> |
| |
| <ul> |
| <li><a href="#jsfPage">Assistente de Página JSF</a></li> |
| <li><a href="#managedBean">Assistente de Bean Gerenciado pelo JSF</a></li> |
| <li><a href="#facesConfig">Assistente de Configuração de Faces</a></li> |
| <li><a href="#composite">Assistente de Componente Composto</a></li> |
| <li><a href="#jsfPagesEntity">Assistente de Páginas JSF de Classes de Entidade</a></li> |
| <li><a href="#faceletsTemplate"> Assistente de Modelo Facelets</a></li> |
| </ul></li> |
| |
| <li><a href="#entity">Suporte para Classes de Entidade</a> |
| |
| <ul> |
| <li><a href="#jsfPages">Criando Páginas JSF Usando Classes de Entidade</a></li> |
| <li><a href="#form">Caixa de Diálogo Form da Entidade</a></li> |
| <li><a href="#dataTable">Caixa de Diálogo Tabela de Dados da Entidade</a></li> |
| </ul></li> |
| |
| <li><a href="#palette">Componentes da Paleta JSF</a></li> |
| |
| <li><a href="#seealso">Consulte Também</a></li> |
| </ul> |
| |
| |
| <h2 id="support">Suporte do JSF 2.x para Projetos</h2> |
| |
| <p>O suporte JSF para projetos pode ser categorizado da seguinte forma:</p> |
| |
| <ul> |
| <li>Os arquivos de modelos Facelets estão incluídos no projeto</li> |
| <li>A bibliotecas JSF 2.x são adicionadas ao classpath do projeto</li> |
| <li>O servlet Faces e o mapeamento de servlet são adicionados no descritor de implantação do projeto</li> |
| </ul> |
| |
| <p>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.</p> |
| |
| <ul> |
| <li><a href="#creatingSupport">Criando um Novo Projeto com Suporte do JSF 2.x</a></li> |
| <li><a href="#addingSupport">Adicionando Suporte do JSF 2.x a um Projeto Existente</a></li> |
| </ul> |
| |
| <div class="indent"> |
| <h3 id="creatingSupport">Criando um Novo Projeto com Suporte do JSF 2.x</h3> |
| |
| <p>Utilize o assistente Projeto do IDE para criar um nova aplicação Java Web. Para isso, clique no botão Novo Projeto ( <img alt="Botão Novo Projeto" src="../../../images_www/articles/72/web/jsf20-support/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.</p> |
| |
| <div class="indent"> |
| <img alt="Assistente de Novo Projeto: Frameworks" class="b-all margin-around" src="../../../images_www/articles/80/web/jsf20-support/new-proj-wizard-framework.png" title="Adiciona suporte ao Framework JSF ao criar um projeto"> |
| </div> |
| |
| <p>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.</p> |
| |
| <div class="indent"> |
| <img alt="Guia Configuração" class="b-all margin-around" src="../../../images_www/articles/80/web/jsf20-support/jsf-configuration.png" title="Especificar definições do servlet Faces na guia Configuração"> |
| </div> |
| |
| |
| <h3 id="addingSupport">Adicionando Suporte JSF 2.x a um Projeto Existente</h3> |
| |
| <p>Se você deseja adicionar o suporte JSF 2.x a uma aplicação Java Web existente, você poderá fazê-lo na janela Propriedades.</p> |
| |
| <ol> |
| <li>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</li> |
| |
| <li>Selecione a categoria Frameworks e, em seguida e clique no botão Adicionar. </li> |
| <li>Selecione JavaServer Faces na caixa de diálogo Adicionar um Framework. Clique em OK. <br> <img alt="Janela Propriedades do Projeto: Caixa de diálogo Adicionar Framework" class="b-all margin-around" src="../../../images_www/articles/80/web/jsf20-intro/add-framework.png" title="Adicionar suporte JSF a um projeto existente"> |
| |
| <p> |
| 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.</p></li> |
| </ol> |
| </div> |
| |
| |
| <br> |
| <h2 id="editor">Utilizando o Editor</h2> |
| |
| <p>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.</p> |
| |
| <p class="tips">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 <a href="http://wiki.netbeans.org/KeymapProfileFor60">Especificação de Atalhos do Teclado do NetBeans IDE 6.x</a>.</p> |
| |
| <p>O IDE fornece suporte Javadoc incorporado para o <a href="http://javaserverfaces.java.net/nonav/docs/2.0/javadocs/index.html">JSF 2.0 API</a> e <a href="http://javaserverfaces.java.net/nonav/docs/2.1/javadocs/index.html">JSF 2.1 API</a>, bem como para a <a href="http://javaserverfaces.java.net/nonav/docs/2.1/vdldocs/facelets/index.html">Documentação de Biblioteca de Tags</a> de JSF. Para aproveitar esses recursos em seu trabalho, basta pressionar Ctrl-Espaço em um determinado elemento do Editor.</p> |
| |
| <p class="tips">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.</p> |
| |
| <p>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 (<code>faces-config.xml</code>). A seguir, demonstramos rapidamente o suporte do Editor que está à sua disposição.</p> |
| |
| <ul> |
| <li><a href="#facelets">Editor Facelets</a></li> |
| <li><a href="#xml"> Editor de configuração Faces XML</a></li> |
| </ul> |
| |
| <div class="indent"> |
| |
| <h3 id="facelets">Editor Facelets</h3> |
| |
| <p>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.</p> |
| |
| <p>É possível pressionar Ctrl-Espaço para chamar a funcionalidade autocompletar código e o suporte à documentação, onde for aplicável.</p> |
| |
| <div class="indent"> |
| <img alt="Editor do IDE exibindo a funcionalidade autocompletar código e o suporte à documentação" class="b-all margin-around" src="../../../images_www/articles/72/web/jsf20-support/doc-support.png" title="Pressione Ctrl-Espaço para chamar a funcionalidade autocompletar código e o suporte à documentação"> |
| </div> |
| |
| <p id="popup">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 <a href="#palette">Paleta</a> do IDE (Ctrl-Shift-8; &#8984-Shift-8 no Mac).</p> |
| |
| <p class="tips">Você também pode digitar um prefixo antes de pressionar Ctrl-Espaço, por exemplo., <code>jsf</code>, para filtrar itens.</p> |
| |
| <div class="indent"> |
| <img alt="Lista pop-up da funcionalidade autocompletar no editor do IDE" class="b-all margin-around" src="../../../images_www/articles/72/web/jsf20-support/code-completion.png" title="Pressione Ctrl-Espaço no editor para chamar uma lista de itens"> |
| </div> |
| |
| <p>É possível pressionar Ctrl-Espaço para chamar a funcionalidade autocompletar código para namespaces Facelets.</p> |
| |
| <div class="indent"> |
| <img alt="Lista pop-up da funcionalidade autocompletar no editor do IDE" class="b-all margin-around" src="../../../images_www/articles/72/web/jsf20-support/namespace.png" title="Pressione Ctrl-Espaço para concluir os namespaces Facelets"> |
| </div> |
| |
| <p>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 <code><html></code> da página.</p> |
| |
| <p>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.</p> |
| |
| <div class="indent"> |
| <img alt="Lista pop-up da funcionalidade autocompletar código para expressões EL" class="b-all margin-around" src="../../../images_www/articles/72/web/jsf20-support/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"> |
| </div> |
| |
| <p>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 <a href="#composite">assistente de Componente Composto</a> para obter mais detalhes.</p> |
| |
| <p>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.</p> |
| |
| <p>Quando você insere tags JSF, diversas verificações são efetuadas. Estas são incluídas se:</p> |
| |
| <ul> |
| <li>a biblioteca declarada existir</li> |
| <li>a biblioteca correspondente ao prefixo da tag contiver tal componente ou tag</li> |
| <li>a tag contiver todos os atributos requeridos</li> |
| <li>todos os atributos inseridos estiverem definidos na interface do componente</li> |
| </ul> |
| |
| <p>O Editor também verifica:</p> |
| |
| <ul> |
| <li>a existência de componentes não declarados</li> |
| <li>a presença de declarações da biblioteca de tags sem utilizações</li> |
| </ul> |
| |
| |
| <h3 id="xml">Editor de Configuração Faces XML</h3> |
| |
| <p>Se você incluir um arquivo <code>faces-config.xml</code> 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.</p> |
| |
| <p>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.</p> |
| |
| <div class="indent"> |
| <img alt="arquivo faces-config.xml - menu contextual" class="b-all margin-around" src="../../../images_www/articles/72/web/jsf20-support/faces-config-menu.png" title="Caixas de diálogo específicas do JSF fornecidas no menu contextual do arquivo faces-config.xml"> |
| </div> |
| |
| <p>O IDE fornece duas <em>views</em> distintas para o arquivo <code>faces-config.xml</code> : 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 <code>faces-config.xml</code>.</p> |
| |
| <p>Por exemplo, se seu arquivo contiver a seguinte regra de navegação:</p> |
| |
| <div class="indent"> |
| <pre class="examplecode"><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></pre> |
| </div> |
| |
| <p>A view em Fluxo de Página exibe a seguinte relação, indicando a navegação de <code>greeting.xhtml</code> para <code>success.xhtml</code> que ocorre quando "<code>response</code>" é transmitida ao <code>NavigationHandler</code> do JSF.</p> |
| |
| <div class="indent"> |
| <img alt="Arquivo faces-config.xml: view em Fluxo de Página" class="b-all margin-around" src="../../../images_www/articles/72/web/jsf20-support/page-flow.png" title="A view em Fluxo de Página mostra as relações de navegação"> |
| </div> |
| |
| <p>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 <code>greeting.xhtml</code>, o arquivo <code>greeting.xhtml</code> é 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 <code>faces-config.xml</code>.</p> |
| </div> |
| |
| |
| <br> |
| <h2 id="wizard">Assistentes do JSF</h2> |
| |
| <p>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.</p> |
| |
| <p id="fileWizard">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 ( <img alt="Botão Novo Arquivo" src="../../../images_www/articles/72/web/jsf20-support/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.</p> |
| |
| <div class="indent"> |
| <img alt="Assistente de Arquivo: Categoria do JavaServer Faces selecionada" class="b-all margin-around" src="../../../images_www/articles/72/web/jsf20-support/file-wizard.png" title="Os assistentes orientados pelo JSF são acessíveis a partir do assistente de Arquivo"> |
| </div> |
| |
| <p>Os seguintes assistentes estão disponíveis ao trabalhar em um projeto Java Web com suporte JSF.</p> |
| |
| <ul> |
| <li><a href="#jsfPage">Assistente de Página JSF</a></li> |
| <li><a href="#managedBean">Assistente de Bean Gerenciado pelo JSF</a></li> |
| <li><a href="#facesConfig">Assistente de Configuração de Faces</a></li> |
| <li><a href="#composite">Assistente de Componente Composto</a></li> |
| <li><a href="#jsfPagesEntity">Assistente de Páginas JSF de Classes de Entidade</a></li> |
| <li><a href="#faceletsTemplate"> Assistente de Modelo Facelets</a></li> |
| <li><a href="#faceletsTemplateClient">Assistente de Cliente de Modelo de Facelets</a></li> |
| </ul> |
| |
| <div class="indent"> |
| <h3 id="jsfPage">Assistente de Página JSF</h3> |
| |
| <p>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<code>.jspf</code>).</p> |
| |
| <div class="indent"> |
| <img alt="Assistente de Arquivo JSF" class="b-all margin-around" src="../../../images_www/articles/72/web/jsf20-support/jsf-file-wizard.png" title="Criar páginas de Facelets utilizando o assistente de Arquivo JSF do IDE"> |
| </div> |
| |
| |
| <h3 id="managedBean">Assistente de Bean Gerenciado</h3> |
| |
| <p>É possível criar beans gerenciados pelo JSF para sua aplicação utilizando o assistente de Bean Gerenciado do IDE. Na categoria JavaServer Faces no <a href="#fileWizard">assistente de Arquivo</a> do IDE, selecione Bean gerenciado pelo JSF.</p> |
| |
| <p>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 <code>NewJSFManagedBean</code> e nomeá-la como <code>myManagedBean</code>.</p> |
| |
| <div class="indent"> |
| <img alt="Assistente de Bean Gerenciado" class="b-all margin-around" src="../../../images_www/articles/72/web/jsf20-support/managed-bean.png" title="Criar beans gerenciado pelo JSF utilizando o assistente de Bens Gerenciado do IDE"> |
| </div> |
| |
| <p>Quando o bean gerenciado é gerado, ele aparece da seguinte forma com anotações apropriadas.</p> |
| |
| <pre class="examplecode">package my.org; |
| |
| import javax.faces.bean.ManagedBean; |
| import javax.faces.bean.SessionScoped; |
| |
| <strong>@ManagedBean(name="myManagedBean")</strong> |
| <strong>@SessionScoped</strong> |
| public class NewJSFManagedBean { |
| |
| /** Creates a new instance of NewJSFManagedBean */ |
| public NewJSFManagedBean() { |
| } |
| |
| }</pre> |
| |
| <p>Se o seu projeto já contiver um arquivo <code>faces-config.xml</code>, 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.</p> |
| |
| |
| <h3 id="facesConfig">Assistente de Configuração do Faces</h3> |
| |
| <p>O JSF 2.x introduz anotações como uma alternativa ao arquivo de configuração padrão do Faces (<code>faces-config.xml</code>) para configurar sua aplicação. Portanto, ao adicionar o suporte JSF 2.x a um projeto, o IDE <em>não</em> gera um arquivo <code>faces-config.xml</code> default (como acontecia no JSF 1.2). Naturalmente, você pode querer adicionar um arquivo <code>faces-config.xml</code> 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.</p> |
| |
| <p>Na categoria JavaServer Faces do <a href="#fileWizard">assistente de Arquivo</a> do IDE, selecione Configuração do JSF Faces. Isso permite criar um novo arquivo <code>faces-config.xml</code>, que será colocado por default na pasta <code>WEB-INF</code> de seu projeto.</p> |
| |
| <p class="tips">Consulte <a href="#xml">Editor de configuração XML do Faces</a> para obter uma descrição do suporte do Editor do IDE para <code>faces-config.xml</code>.</p> |
| |
| |
| <h3 id="composite">Assistente de Componente Composto</h3> |
| |
| <p>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.</p> |
| |
| <p>Como com todos os assistentes relativos ao JSF, você pode acessar o assistente de Componente Composto a partir da categoria JavaServer Faces no <a href="#fileWizard">assistente de Arquivo</a>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.</p> |
| |
| <p>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, '<code><p>This is the composite component.</p></code>'.</p> |
| |
| <div class="indent"> |
| <img alt="Editor de Facelets - opção do menu Converter para Componente Composto" class="b-all margin-around" src="../../../images_www/articles/72/web/jsf20-support/convert-comp-component.png" title="Realce um snippet e selecione Converter para Componente Composto no menu contextual"> |
| </div> |
| |
| <p>O assistente de Componente Composto é aberto, contendo o snippet selecionado em seu painel Seção de implementação.</p> |
| |
| <div class="indent"> |
| <img alt="Assistente de Componente Composto" class="b-all margin-around" src="../../../images_www/articles/72/web/jsf20-support/comp-component.png" title="O assistente Componente Composto é exibido contendo o snippet do código selecionado"> |
| </div> |
| |
| <p>Por default, o assistente cria uma pasta <code>ezcomp</code> para conter os componentes compostos. Por exemplo, se você estiver criando um novo componente denominado<code>myComponent</code>, o assistente irá gerar uma página de Facelets <code>myComponent.xhtml</code> , residindo na pasta <code>resources/ezcomp</code> da raiz da Web da sua aplicação.</p> |
| |
| <p>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 <code>composite</code> do JSF 2.x.</p> |
| |
| <pre class="examplecode"><?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" |
| <strong>xmlns:cc="http://xmlns.jcp.org/jsf/composite"</strong>> |
| |
| <!-- INTERFACE --> |
| <cc:interface> |
| </cc:interface> |
| |
| <!-- IMPLEMENTATION --> |
| <cc:implementation> |
| <strong><p>This is the composite component.</p></strong> |
| </cc:implementation> |
| </html></pre> |
| |
| <p>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 é: <code><ez:myComponent/></code>. Observe que o IDE adiciona automaticamente o namespace onde o componente composto reside para a tag <code><html></code> da página.</p> |
| |
| <div class="indent"> |
| <img alt="Assistente de Componente Composto" class="b-all margin-around" src="../../../images_www/articles/80/web/jsf20-support/comp-component-editor.png" title="A tag do componente é automaticamente inserida na sua página"> |
| </div> |
| |
| <p class="tips">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.</p> |
| |
| |
| |
| <p class="tips">Para obter mais informações sobre componentes compostos no JSF 2.x, consulte <a href="http://blogs.oracle.com/enterprisetechtips/entry/true_abstraction_composite_ui_components">Abstração Verdadeira: Componentes de IU Compostos no JSF 2.0</a>.</p> |
| |
| |
| <h3 id="jsfPagesEntity">Assistente de Páginas JSF de Classes de Entidade</h3> |
| |
| <p>Consulte o tópico <a href="#jsfPages">Criando Páginas JSF de Classes de Entidade</a> em <a href="#entity">Suporte para Classes de Entidade</a>.</p> |
| |
| |
| <h3 id="faceletsTemplate">Assistente de Modelo de Facelets</h3> |
| |
| <p>Utilize o assistente de Modelo de Facelets para gerar um modelo Facelets. Na categoria JavaServer Faces do <a href="#fileWizard">assistente de Arquivo</a> 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 <code><table></code> CSS ou HTML.</p> |
| |
| <div class="indent"> |
| <img alt="Assistente de Modelo de Facelets" class="b-all margin-around" src="../../../images_www/articles/72/web/jsf20-support/template-wizard.png" title="Criar um modelo de Facelets utilizando o assistente de Modelo de Facelets"> |
| </div> |
| |
| <p>O assistente cria um arquivo de modelo XHTML utilizando as tags <code><h:head></code> e <code><h:body></code> e coloca as folhas de estilos associadas na pasta <code>resources/css</code> da raiz da Web da aplicação. O assistente gera um arquivo <code>default.css</code>, e um arquivo <code>cssLayout.css</code> ou <code>tableLayout.css</code> , dependendo da sua seleção de layout.</p> |
| |
| <p class="tips">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.</p> |
| |
| <h3 id="faceletsTemplate">Assistente de Cliente de Modelo de Facelets</h3> |
| |
| <p>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 <a href="#fileWizard">assistente de Arquivo</a> 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 é <tt><html></tt> ou <tt><ui:composition></tt></p> |
| |
| <div class="indent"> |
| <img alt="Assistente de Cliente de Modelo de Facelets" class="b-all margin-around" src="../../../images_www/articles/72/web/jsf20-support/new-template-client.png" title="Criar um Cliente para um modelo de Facelets utilizando o assistente de Cliente de Modelo de Facelets"> |
| </div> |
| <p>Para obter mais detalhes sobre como utilizar modelos e clientes de Facelets, consulte a seção <a href="jsf20-intro.html#template">Aplicando um Modelo de Facelets</a> em <a href="jsf20-intro.html">Introdução ao JavaServer Faces 2.x no NetBeans IDE</a>.</p> |
| |
| </div> |
| |
| |
| <br> |
| <h2 id="entity">Suporte para Classes de Entidade</h2> |
| |
| <p>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.</p> |
| |
| <p><strong class="notes">Observação: </strong>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 <a href="#fileWizard">assistente de Arquivo</a>do IDE.</p> |
| |
| <ul> |
| <li><a href="#jsfPages">Criando Páginas JSF Usando Classes de Entidade</a></li> |
| <li><a href="#form">Criando um Form JSF para Dados da Entidade</a></li> |
| <li><a href="#dataTable">Criando uma Tabela de Dados JSF para Dados da Entidade</a></li> |
| </ul> |
| |
| <div class="indent"> |
| <h3 id="jsfPages">Criando Páginas JSF de Classes de Entidade</h3> |
| |
| <p>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.</p> |
| |
| <p>Para cada classe de entidade o assistente gera o seguinte:</p> |
| |
| <ul> |
| <li>um bean de sessão stateless para a criação, recuperação, modificação e remoção de instâncias de entidade</li> |
| |
| <li>um bean gerenciado com escopo de sessão JSF</li> |
| |
| <li>um diretório contendo quatro arquivos de Facelets para os recursos CRUD (<code>Create.xhtml</code>, <code>Edit.xhtml</code>, <code>List.xhtml</code> e <code>View.xhtml</code>)</li> |
| |
| <li>classes de utilitário utilizadas pelos beans gerenciados pelo JSF (<code>JsfUtil</code>, <code>PaginationHelper</code>)</li> |
| |
| <li>um conjunto de propriedades para mensagens localizadas e uma entrada correspondente no arquivo de configuração Faces do projeto (será criado um arquivo <code>faces-config.xml</code>, caso já não exista um).</li> |
| |
| <li>arquivos Web auxiliares, incluindo uma folha de estilo default para componentes renderizados e um arquivo de modelo de Facelets</li> |
| </ul> |
| |
| <p>Para utilizar as Páginas JSF do assistente de Classes de Entidade, <a href="#fileWizard">acesse o assistente de Arquivo do IDE</a>. Selecione a categoria JavaServer Faces e, em seguida, selecione Páginas JSF das Classes de Entidade.</p> |
| |
| <p>Quando você chegar à Etapa 3: Gere Páginas e Classes JSF, você poderá especificar as localizações dos arquivos que serão gerados.</p> |
| |
| <div class="indent"> |
| <img alt="Etapa 3: Gerar Páginas e Classes JSF" class="b-all margin-around" src="../../../images_www/articles/72/web/jsf20-support/jsf-entity-wizard.png" title="Especifique as localizações dos arquivos que serão gerados"> |
| </div> |
| |
| <p>Por exemplo, se você estiver aplicando o assistente a uma classe de entidade <code>Customer</code> , as definições mostradas na imagem acima irão gerar os seguintes arquivos:</p> |
| |
| <table class="indent"> |
| <tr> |
| <td> |
| <img alt="Janela Projetos - arquivos gerados a partir do assistente" class="b-all margin-around" src="../../../images_www/articles/72/web/jsf20-support/projects-win-generated-files.png" title="A janela Projetos exibe arquivos recém-gerados"> |
| </td> |
| <td class="valign-top"> |
| <ul style="margin-top:3em"> |
| <li>Um arquivo <code>faces-config.xml</code> para registrar a localização do conjunto de propriedades que contém as mensagens localizadas para as views JSF. Por exemplo, especificar <code>/my/org/Bundle</code> para o Nome do Conjunto de Localizações no assistente irá gerar a seguinte entrada: |
| |
| <pre class="examplecode" style="width:500px"> |
| <application> |
| <resource-bundle> |
| <base-name>/my/org/Bundle</base-name> |
| <var>bundle</var> |
| </resource-bundle> |
| </application></pre></li> |
| |
| <li>Uma pasta <code>customer</code> em sua raiz da Web, que contém quatro arquivos de Facelets para os recursos CRUD: |
| |
| <ul> |
| <li><code>Create.xhtml</code>: Um form JSF para criar um novo cliente.</li> |
| <li><code>Edit.xhtml</code>: um form JSF para editar um cliente.</li> |
| <li><code>List.xhtml</code>: Uma tabela de dados JSF para navegar entre os clientes.</li> |
| <li><code>View.xhtml</code>: Um form JSF para exibir os detalhes do cliente.</li> |
| </ul></li> |
| |
| <li><code>jsfcrud.css</code>: Uma folha de estilo utilizada para renderizar os forms JSF e a tabela de dados.</li> |
| |
| <li><code>template.xhtml</code>: uma página de modelo de Facelets opcional, que inclui uma referência à folha de estilo <code>jsfcrud.css</code> gerada.</li> |
| |
| <li>Um bean (enterprise) de sessão stateless denominado <code>CustomerFacade</code>, que reside no pacote <code>my.org.data</code>. Esta classe também pode ser acessada a partir do nó Enterprise Beans do projeto.</li> |
| |
| <li><code>Bundle.properties</code>: Um conjunto de propriedades que contém as mensagens default localizadas para as views JSF.</li> |
| |
| <li>Um bean gerenciado de escopo de sessão JSF denominado <code>CustomerController</code>, que reside no pacote <code>my.org.ui</code>.</li> |
| |
| <li>Duas classes de utilitário (<code>JsfUtil</code> e <code>PaginationHelper</code>) residindo no pacote <code>my.org.ui.util</code>. Essas são utilizadas pelo bean gerenciado <code>CustomerController</code>.</li> |
| </ul> |
| </td> |
| </tr> |
| </table> |
| |
| |
| <h3 id="form">Criando um Form JSF para Dados da Entidade</h3> |
| |
| <p>É 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.</p> |
| |
| <p><strong class="notes">Observação: </strong>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 <a href="#managedBean">assistente de Bean Gerenciado</a> do IDE, ou se você utilizar o <a href="#jsfPages">assistente de Página JSF de Classes de Entidade</a>, os beans gerenciados serão gerados para todas as classes de entidade selecionadas.</p> |
| |
| <p>É possível acessar o Form a partir da caixa de diálogo Entidade <a href="#popup">pressionando Ctrl-Espaço no editor de uma página de Facelets</a> e, em seguida, escolhendo Form JSF na Entidade ou clicando duas vezes no item Form da Entidade listada na <a href="#palette">Paleta</a> do IDE (Ctrl-Shift-8; &#8984-Shift-8 no Mac).</p> |
| |
| <p>Por exemplo, na imagem a seguir, já existe uma classe de entidade <code>Customer</code> no pacote <code>my.org</code> do projeto fornecido. Um bean gerenciado <code>customerController</code> também já existe no projeto especificado, e o bean gerenciado contém uma propriedade denominada <code>selected</code> que retorna um objeto <code>Customer</code>.</p> |
| |
| <div class="indent"> |
| <img alt="Caixa de diálogo Form JSF da Entidade" class="b-all margin-around" src="../../../images_www/articles/72/web/jsf20-support/jsf-form-from-entity.png" title="Utilizar a caixa de diálogo Form da Entidade para gerar um Form JSF utilizando dados da Entidade"> |
| </div> |
| |
| <p><strong class="notes">Observação: </strong>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 <code><h:outputText></code> a campos do form, ao passo que as tags <code><h:inputText></code> são aplicadas quando a opção não está selecionada.</p> |
| |
| <p>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 <code>Customer</code> contendo uma propriedade <code>customerId</code> é exibida no seguinte formato:</p> |
| |
| <pre class="examplecode"><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."/> |
| ... |
| <em>[ Other fields added here. ]</em> |
| ... |
| </h:panelGrid> |
| </h:form> |
| </f:view></pre> |
| |
| <p class="tips">Para modificar o modelo utilizado para o código gerado, clique no link Personalizar Modelo da caixa de diálogo Form da Entidade.</p> |
| |
| |
| <h3 id="dataTable">Criando uma Tabela de Dados JSF para Dados da Entidade</h3> |
| |
| <p>É 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.</p> |
| |
| <p><strong class="notes">Observação: </strong>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 <a href="#managedBean">assistente de Bean Gerenciado</a> do IDE, ou se você utilizar o <a href="#jsfPages">assistente de Página JSF de Classes de Entidade</a>, os beans gerenciados serão gerados para todas as classes de entidade selecionadas.</p> |
| |
| <p>É possível acessar a Tabela de Dados a partir da caixa de diálogo Entidade <a href="#popup">pressionando Ctrl-Espaço no editor de uma página de Facelets</a> e selecionando Tabela de Dados JSF da Entidade ou clicando duas vezes no item da Tabela de Dados da Entidade listado na <a href="#palette">Paleta</a> do IDE (Ctrl-Shift-8; &#8984-Shift-8 no Mac).</p> |
| |
| <p>Por exemplo, na imagem a seguir, á existe uma classe de entidade <code>Produto</code> no pacote <code>my.org.entity</code> do projeto especificado. Um bean gerenciado <code>productController</code> também já existe no projeto, e o bean gerenciado contém um método denominado <code>getProductItens()</code> que retorna um objeto <code>List</code> ou <code>Product</code>.</p> |
| |
| <div class="indent"> |
| <img alt="Caixa de diálogo Tabela de Dados JSF da Entidade" class="b-all margin-around" src="../../../images_www/articles/72/web/jsf20-support/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"> |
| </div> |
| |
| <p>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 <code>Product</code> contendo uma propriedade <code>productId</code> é exibida no seguinte formato:</p> |
| |
| <pre class="examplecode"><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> |
| ... |
| <em>[ Other columns added here. ]</em> |
| ... |
| </h:dataTable> |
| </h:form> |
| </f:view></pre> |
| |
| <p class="tips">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.</p> |
| </div> |
| |
| |
| <br> |
| <h2 id="palette">Componentes da Paleta JSF</h2> |
| |
| <p>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).</p> |
| |
| <div class="indent"> |
| <img alt="Paleta, com a categoria JSF expandida" class="b-all margin-around" src="../../../images_www/articles/72/web/jsf20-support/palette.png" title="Utilizar a Paleta do IDE para arrastar e soltar componentes comuns do JSF em uma página de Facelets"> |
| </div> |
| |
| <p class="tips">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.</p> |
| |
| <div class="indent"> |
| <img alt="Lista pop-up da funcionalidade autocompletar no editor do IDE" class="b-all margin-around" src="../../../images_www/articles/72/web/jsf20-support/insert-code.png" title="No editor, pressione Alt-Insert (Ctrl-I no Mac) para chamar uma lista de componentes específicos do JSF"> |
| </div> |
| |
| <p>A paleta fornece cinco componentes relativos ao JSF:</p> |
| |
| <ul> |
| <li><strong>Metadados: </strong> Chama uma caixa de diálogo para adicionar pares de valores de nomes nas tags de metadados JSF. Por exemplo, se você especificar '<code>myId</code>' e '<code>myValue</code>' como o par de valores de nomes, o seguinte snippet de código será produzido: |
| |
| <pre class="examplecode"><f:metadata> |
| <f:viewParam id='myId' value='myValue'/> |
| </f:metadata></pre></li> |
| |
| <li><strong>Form JSF: </strong> Adiciona o seguinte snippet do código à página. |
| |
| <pre class="examplecode"><f:view> |
| <h:form> |
| </h:form> |
| </f:view></pre></li> |
| |
| <li><strong>Form JSF da Entidade:</strong> Chama uma caixa de diálogo que permite associar dados de uma classe de entidade a campos contidos em um form JSF. <a href="#form">Criando um Form JSF para Dados da Entidade</a></li> |
| |
| <li><strong>Tabela de Dados JSF: </strong> Adiciona o seguinte snippet do código à página. |
| |
| <pre class="examplecode"><f:view> |
| <h:form> |
| <h:dataTable value="#{}" var="item"> |
| </h:dataTable> |
| </h:form> |
| </f:view></pre></li> |
| |
| <li><strong>Tabela de Dados JSF da Entidade:</strong> Chama uma caixa de diálogo que permite associar dados de uma classe de entidade a campos contidos na tabela de dados JSF. <a href="#dataTable">Criando uma Tabela de Dados JSF para Dados da Entidade</a></li> |
| </ul> |
| |
| <div class="feedback-box"> |
| <a href="/about/contact_form.html?to=3&subject=Feedback:%20JSF%202.x%20Support%20in%20NetBeans%20IDE">Enviar Feedback neste Tutorial</a> |
| </div> |
| |
| <br style="clear:both;"> |
| |
| |
| <h2 id="seealso">Consulte Também</h2> |
| |
| <p>Para obter mais informações sobre o JSF 2.x, consulte os recursos a seguir:</p> |
| |
| <div class="indent"> |
| <h3>Tutoriais e Artigos NetBeans</h3> |
| |
| <ul> |
| <li><a href="jsf20-intro.html">Introdução ao JavaServer Faces 2.x no NetBeans IDE</a></li> |
| <li><a href="jsf20-crud.html">Gerando uma Aplicação CRUD JavaServer Faces 2.x Usando um Banco de Dados</a></li> |
| <li><a href="../../samples/scrum-toys.html">Scrum Toys: A Aplicação de Amostra Completa do JSF 2.0</a></li> |
| <li><a href="../javaee/javaee-gettingstarted.html">Conceitos Básicos sobre Aplicações do Java EE</a></li> |
| <li><a href="../../trails/java-ee.html">Trilha do Aprendizado do Java EE e Java Web</a></li> |
| </ul> |
| |
| <h3>Recursos Externos</h3> |
| |
| <ul> |
| <li><a href="http://www.oracle.com/technetwork/java/javaee/javaserverfaces-139869.html">Tecnologia JavaServer Faces</a> (homepage Oficial)</li> |
| <li><a href="http://jcp.org/aboutJava/communityprocess/final/jsr314/index.html">Especificação do JSR 314 para o JavaServer Faces 2.0</a></li> |
| <li><a href="http://download.oracle.com/javaee/6/tutorial/doc/bnaph.html">Tutorial do Java EE 6, Capítulo 5: Tecnologia JavaServer Faces</a></li> |
| <li><a href="http://javaserverfaces.java.net/">o Project Mojarra para GlassFish Server</a> (Implementação de referência oficial para JSF 2.x)</li> |
| <li><a href="http://forums.oracle.com/forums/forum.jspa?forumID=982">Fóruns de Discussão OTN: JavaServer Faces</a></li> |
| <li><a href="http://www.jsfcentral.com/">Central do JSF</a></li> |
| </ul> |
| |
| <h3>Blogs</h3> |
| |
| <ul> |
| <li><a href="http://www.java.net/blogs/edburns/">Ed Burns</a></li> |
| <li><a href="http://www.java.net/blogs/driscoll/">Jim Driscoll</a></li> |
| </ul> |
| </div> |
| |
| <script type="text/javascript"> |
| <!-- |
| compactMenu('collapsableList', true, '± '); |
| --> |
| </script> |
| </body> |
| </html> |
