| // |
| // 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. |
| // |
| |
| = Introdução ao JavaServer Faces 2.x |
| :jbake-type: tutorial |
| :jbake-tags: tutorials |
| :jbake-status: published |
| :icons: font |
| :syntax: true |
| :source-highlighter: pygments |
| :toc: left |
| :toc-title: |
| :description: Introdução ao JavaServer Faces 2.x - Apache NetBeans |
| :keywords: Apache NetBeans, Tutorials, Introdução ao JavaServer Faces 2.x |
| |
| O JavaServer Faces (JSF) é um framework de interface de usuário (IU) para aplicações Java Web. Foi projetado para facilitar significativamente a trabalhosa tarefa de escrever e manter os aplicações que são executadas em um servidor de aplicações Java e renderizar as IUs de volta a um cliente de destino. O JSF oferece facilidade de uso das seguintes formas: |
| |
| * Facilita a construção de uma IU usando um conjunto de componentes de IU reutilizáveis |
| * Simplifica a migração de dados da aplicação para a IU e provenientes dela |
| * Ajuda a gerenciar o estado da IU nas solicitações do servidor |
| * Oferece um modelo simples para conectar os eventos gerados pelo cliente ao código da aplicação do servidor |
| * Permite personalizar os componentes de UI para que sejam facilmente construídos e reutilizados |
| |
| Para obter uma descrição mais completa do framework JSF, consulte o link:http://docs.oracle.com/javaee/7/tutorial/doc/jsf-develop.htm[+Tutorial do Java EE 7, Capítulo 12: Desenvolvendo Tecnologia do JavaServer Faces+]. |
| |
| Este tutorial demonstra como você pode aplicar o suporte do JSF 2.x a uma aplicação Web utilizando o NetBeans IDE. Comece adicionando o suporte ao framework JSF 2.x a uma aplicação Web básica e continue para executar as seguintes tarefas: |
| |
| * crie um bean gerenciado pelo JSF para manipular os dados solicitados, |
| * conecte o bean gerenciado às páginas Web da aplicação e |
| * converta as páginas Web em arquivos de modelo de Facelets. |
| |
| O NetBeans IDE oferece, há muito tempo, suporte ao JavaServer Faces. A partir da release JSF 2.0 e Java EE 6, O NetBeans IDE oferece suporte para JSF 2.0 e JSF 2.1. Para obter mais informações, consulte link:jsf20-support.html[+Suporte JSF 2.x no NetBeans IDE+]. |
| |
| |
| Para concluir este tutorial, você precisa dos seguintes recursos e softwares. |
| |
| |=== |
| |Software ou Recurso |Versão Necessária |
| |
| |link:https://netbeans.org/downloads/index.html[+NetBeans IDE+] |Pacote Java EE 7.2, 7.3, 7.4, 8.0 |
| |
| |link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+JDK (Java Development Kit)+] |7 ou 8 |
| |
| |link:http://glassfish.dev.java.net/[+GlassFish Server+] |Open Source Edition 3.x ou 4 |
| |
| |link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaEE%252FjsfDemo.zip[+`jsfDemo` projeto de aplicação Web+] |n/d |
| |=== |
| |
| *Observações:* |
| |
| * O pacote Java do NetBeans IDE também inclui o GlassFish Server, um servidor compatível com Java EE necessário para este tutorial. |
| * Para comparar seu projeto a uma solução que funcione, faça o download do link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaEE%252FjsfDemoCompleted.zip[+projeto de amostra completo+]. |
| |
| |
| |
| [[support]] |
| == Adicionando Suporte JSF 2.x a uma Aplicação Web |
| |
| Comece abrindo o <<requiredSoftware,`jsfDemo` projeto da aplicação Web>> no IDE. Depois de abrir o projeto no IDE, você pode adicionar suporte ao framework utilizando a janela Propriedades do projeto. |
| |
| O IDE também permite criar novos projetos com o suporte JSF 2.x. Para obter mais informações, consulte link:jsf20-support.html#creatingSupport[+Criando um Novo Projeto com o Suporte a JSF 2.x+]. |
| |
| 1. Clique no botão ( image:images/open-project-btn.png[] ) para Abrir o Projeto na barra de ferramentas principal do IDE ou pressione Ctrl-Shift-O (⌘-Shift-O no Mac). |
| 2. Na caixa de diálogo Abrir Projeto, navegue até o local do computador onde você armazenou o projeto descompactado do tutorial. Selecione-o e clique em Abrir Projeto para abri-lo no IDE. |
| |
| *Observação.* Você será solicitado a resolver a referência às bibliotecas JUnit quando abrir o projeto NetBeans, caso não tiver instalado o plug-in JUnit quando instalou o IDE. |
| |
| |
| |
| . Execute o projeto para ver como ele é em um browser. Clique com o botão direito do mouse no nó `jsfDemo` do projeto, na janela Projetos e selecione Executar ou clique no botão ( image:images/run-project-btn.png[] ) Executar Projeto na barra de ferramentas principal. O projeto é encapsulado e implantado no GlassFish Server e o browser é aberto para exibir a página de boas-vindas (`index.xhtml`). |
| |
| image::images/run-project.png[title="Executar o projeto para exibi-lo em um browser"] |
| |
| |
| . Clique no botão Submeter. A página de resposta (`response.xhtml`) é exibida desta forma: |
| |
| image::images/response.png[title="A página de boas-vindas e de resposta, atualmente, são páginas estáticas"] |
| |
| No momento, as páginas de boas-vindas e resposta são estáticas e, juntamente com o arquivo `stylesheet.css` e a imagem `duke.png`, são os únicos arquivos da aplicação acessíveis do browser. |
| |
| |
| |
| . Na janela Projetos (Ctrl-1; ⌘-1 no Mac), clique com o botão direito do mouse no nó do projeto e escolha Propriedades para abrir a janela Propriedades do Projeto. |
| |
| |
| . Selecione a categoria Frameworks e, em seguida e clique no botão Adicionar. |
| |
| |
| . 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 ficarão disponíveis. Na guia Bibliotecas, você pode especificar como o projeto acessa as bibliotecas JSF 2.x. A versão de JFS disponível dependerá da versão do IDE e do GlassFish Server. A opção default é utilizar as bibliotecas fornecidas com o servidor (o GlassFish Server). No entanto, o IDE também integra as bibliotecas JSF 2.x. (É possível selecionar a opção Bibliotecas Registradas se desejar que seu projeto as utilize.) |
| |
| image::images/libraries-tab.png[title="Especificar o acesso a bibliotecas do JSF 2.x"] |
| |
| |
| . Clique na guia Configuração. É possível especificar como o servlet Faces é registrado no descritor de implantação do projeto. Também é possível indicar se você deseja utilizar Facelets ou páginas JSP no projeto. |
| |
| image::images/jsf-configuration.png[title="Especificar idioma preferencial e opções de servlet do Faces"] |
| |
| Você também pode configurar facilmente seus projetos para usar vários conjuntos de componentes do JSF, na guia Componentes. Para usar um conjunto de componentes, é preciso fazer o download das bibliotecas necessárias e usar o Gerenciador de bibliotecas Ant para criar uma nova biblioteca contendo as bibliotecas do conjunto de componentes. |
| |
| image::images/jsf-components.png[title="Especificar idioma preferencial e opções de servlet do Faces"] |
| |
| |
| . Clique em OK para concluir as alterações e sair da janela Propriedades do Projeto. |
| |
| Depois de adicionar o suporte JSF ao seu projeto, o descritor de implantação `web.xml` do projeto é modificado para que tenha a aparência a seguir: (Alterações em *negrito*.) |
| |
| |
| [source,xml] |
| ---- |
| |
| <web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"> |
| *<context-param> |
| <param-name>javax.faces.PROJECT_STAGE</param-name> |
| <param-value>Development</param-value> |
| </context-param> |
| <servlet> |
| <servlet-name>Faces Servlet</servlet-name> |
| <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> |
| <load-on-startup>1</load-on-startup> |
| </servlet> |
| <servlet-mapping> |
| <servlet-name>Faces Servlet</servlet-name> |
| <url-pattern>/faces/*</url-pattern> |
| </servlet-mapping>* |
| <welcome-file-list> |
| <welcome-file>*faces/*index.xhtml</welcome-file> |
| </welcome-file-list> |
| </web-app> |
| ---- |
| |
| *Importante:* confirme se `web.xml` contém só uma entrada `<welcome-file>` e se a entrada contém '`faces/`' conforme mostrado no exemplo. Isso assegura que a página de boas-vindas do projeto (`index.xhtml`) passe pelo servlet do Faces antes de ser exibida no browser. Isso é necessário para renderizar apropriadamente os componentes da biblioteca de tags do Facelets. |
| |
| O servlet do Faces é registrado no projeto e a página de boas-vindas `index.xhtml` passa pelo servlet do Faces quando é solicitada. Observe também que foi adicionada uma entrada no parâmetro de contexto `PROJECT_STAGE`. A definição desse parâmetro como '`Desenvolvimento`' fornece informações úteis quando a aplicação é depurado. Consulte link:http://blogs.oracle.com/rlubke/entry/jsf_2_0_new_feature2[+http://blogs.oracle.com/rlubke/entry/jsf_2_0_new_feature2+] para obter mais informações. |
| |
| É possível localizar as bibliotecas JSF expandindo o nó Bibliotecas do projeto na janela Projetos. Se você estiver usando as bibliotecas default incluídas com o GlassFish Server 3.1.2 ou GlassFish Server 4, este será o `javax.faces.jar` visível no nó GlassFish Server. (Se você estiver usando uma versão mais antiga do GlassFish, verá as bibliotecas `jsf-api.jar` e `jsf-impl.jar` em vez de `javax.faces.jar`.) |
| |
| O suporte JSF 2.x do IDE inclui principalmente vários assistentes específicos do JSF e a funcionalidade especial fornecida pelo editor de Facelets. Você ira explorar esses recursos funcionais nas etapas a seguir. Para obter mais informações, consulte link:jsf20-support.html[+Suporte JSF 2.x no NetBeans IDE+]. |
| |
| |
| [[managedBean]] |
| == Criando um Bean Gerenciado |
| |
| É possível utilizar os beans gerenciados do JSF para processar dados do usuário e retê-los entre as solicitações. Um bean gerenciado é um link:http://en.wikipedia.org/wiki/Plain_Old_Java_Object[+POJO+] (Objeto Java Simples Antigo) que pode ser utilizado para armazenar dados e é gerenciado pelo contêiner (por exemplo, o GlassFish Server) utilizando o framework JSF. |
| |
| Um POJO é essencialmente uma classe Java que contém um construtor público sem argumentos e está em conformidade com as convenções de nomenclatura do link:http://download.oracle.com/javase/tutorial/javabeans/[+JavaBeans+] para suas propriedades. |
| |
| Ao observar a <<staticPage,página estática>> produzida ao executar o projeto, você precisará de um mecanismo que determine que o número inserido pelo usuário corresponde ao número selecionado atualmente e que ele retorne uma view apropriada para esse resultado. Utilize o link:jsf20-support.html#managedBean[+assistente de Bean Gerenciado+] para criar um bean gerenciado para essa finalidade. As páginas de Facelets que você criará na próxima seção precisarão acessar o número digitado pelo usuário e a resposta gerada. Para ativar esta opção, adicione as propriedades `userNumber` e `response` ao Bean gerenciado. |
| |
| * <<usingManagedBean,Utilizando o Assistente de Bean Gerenciado>> |
| * <<creatingConstructor,Criando um Construtor>> |
| * <<addingProperties,Adicionando Propriedades>> |
| |
| |
| [[usingManagedBean]] |
| === Utilizando o Assistente de Bean Gerenciado |
| |
| 1. Na janela Projetos, clique com o botão direito do mouse no nó do projeto `jsfDemo` e selecione Novo > Bean Gerenciado pelo JSF. (Se o Bean Gerenciado não estiver listado, selecione Outros. Em seguida, selecione a opção Bean Gerenciado pelo JSF na categoria JavaServer Faces. Clique em Próximo.) |
| 2. No assistente, informe o seguinte: |
| * *Nome da Classe:* UserNumberBean |
| * *Pacote:* guessNumber |
| * *Nome:* UserNumberBean |
| * *Escopo:* Session |
| |
| image::images/managed-bean.png[title="Utilizar o Ben Gerenciado pelo JSF para criar um novo Bean gerenciado"] |
| |
| |
| . Clique em Finalizar. A classe `UserNumberBean` é gerada e aberta no editor. Observe as anotações a seguir (mostradas em *negrito*): |
| |
| [source,java] |
| ---- |
| |
| package guessNumber; |
| |
| import javax.faces.bean.ManagedBean; |
| import javax.faces.bean.SessionScoped; |
| |
| /** |
| * |
| * @author nbuser |
| */ |
| *@ManagedBean(name="UserNumberBean") |
| @SessionScoped* |
| public class UserNumberBean { |
| |
| /** Creates a new instance of UserNumberBean */ |
| public UserNumberBean() { |
| } |
| |
| } |
| ---- |
| |
| Como você está utilizando o JSF 2.x, você pode declarar todos os componentes específicos do JSF utilizando as anotações. Nas versões anteriores, era necessário declará-los no arquivo de configuração do Faces (`faces-config.xml`). |
| |
| [tips]#Para exibir o Javadoc para todas as anotações JSF 2.1, consulte link:http://javaserverfaces.java.net/nonav/docs/2.1/managed-bean-javadocs/index.html[+Especificações de Anotações de Bean Gerenciado pelo Faces+].# |
| |
| |
| [[creatingConstructor]] |
| === Criando um Construtor |
| |
| O construtor `UserNumberBean` deve gerar um número aleatório entre 0 e 10 e armazená-lo em uma variável de instância. Isso forma parcialmente a lógica de negócios da aplicação. |
| |
| 1. Defina um construtor para a classe `UserNumberBean`. Insira o código a seguir (alterações exibidas em *negrito*). |
| |
| [source,java] |
| ---- |
| |
| public class UserNumberBean { |
| |
| *Integer randomInt;* |
| |
| /** Creates a new instance of UserNumberBean */ |
| public UserNumberBean() { |
| *link:http://docs.oracle.com/javase/7/docs/api/java/util/Random.html[+Random+] randomGR = new Random(); |
| randomInt = new Integer(randomGR.link:http://docs.oracle.com/javase/7/docs/api/java/util/Random.html#nextInt%28int%29[+nextInt+](10)); |
| System.out.println("Duke's number: " + randomInt);* |
| } |
| |
| } |
| ---- |
| |
| O código acima gera um número aleatório entre 0 e 10, e o número é exibido no log do servidor. |
| |
| |
| |
| . Corrigir importações. Para isso, clique no indicador de dica ( image:images/hint-icon.png[] ) exibido na margem esquerda do editor, em seguida, selecione a opção para importar `java.util.Random` para a classe. |
| |
| |
| . Execute o projeto novamente (clique no botão ( image:images/run-project-btn.png[] ) Executar Projeto ou pressione F6; fn-F6 no Mac). Quando você executa seu projeto, o arquivo de log do servidor é aberto automaticamente na janela de Saída. |
| |
| image::images/output1.png[title="O arquivo de log do servidor é aberto automaticamente na janela de Saída"] |
| |
| Observe que você não vê o "`número do Duke: `" listado na saída (como deveria ser indicado no construtor). Um objeto `UserNumberBean` não foi criado porque o JSF utiliza _instanciação lenta_ por default. Ou seja, os Beans em determinados escopos são criados e inicializados somente quando a aplicação precisa deles. |
| |
| O link:http://javaserverfaces.java.net/nonav/docs/2.1/managed-bean-javadocs/index.html[+Javadoc da anotação`@ManagedBean`+] afirma: |
| |
| _Se o valor do atributo `eager()` for `true` e o valor de `managed-bean-scope` for "application", o runtime deverá instanciar essa classe quando a aplicação for iniciada. Essa instanciação e o armazenamento da instância devem ocorrer antes das solicitações serem processadas. Se _eager_ não estiver especificado ou for `false`, ou se o `managed-bean-scope` for diferente de "application", ocorrerá a instanciação "lenta" default e o armazenamento com escopo do Bean gerenciado._ |
| |
| |
| . Como o `UserNumberBean` está no escopo da sessão, implemente-o na interface `Serializable`. |
| |
| [source,java] |
| ---- |
| |
| @ManagedBean(name="UserNumberBean") |
| @SessionScoped |
| public class UserNumberBean *implements Serializable* { |
| ---- |
| Utilize o indicador de dica ( image:images/hint-icon.png[] ) para importar `java.io.Serializable` para a classe. |
| |
| |
| [[addingProperties]] |
| === Adicionando Propriedades |
| |
| As páginas de Facelets que você criará na próxima seção precisarão acessar o número digitado pelo usuário e a resposta gerada. Para facilitar essa tarefa, adicione as propriedades `userNumber` e `response` à classe. |
| |
| 1. Comece declarando um `Integer` denominado `userNumber`. |
| |
| [source,java] |
| ---- |
| |
| @ManagedBean(name="UserNumberBean") |
| @SessionScoped |
| public class UserNumberBean implements Serializable { |
| |
| Integer randomInt; |
| *Integer userNumber;* |
| ---- |
| |
| |
| . Clique com o botão direito do mouse no editor e selecione Inserir Código (Alt-Insert; Ctrl-I no Mac). Escolha Getter e Setter. |
| |
| image::images/getter-setter.png[title="Utilizar o IDE para gerar métodos de acesso para as propriedades"] |
| |
| |
| . Selecione a opção `userNumber` : `Integer`. Clique em Gerar. |
| |
| image::images/generate-getters-setters.png[title="Utilizar o IDE para gerar métodos de acesso para as propriedades"] |
| |
| Observe que os métodos `getUserNumber()` e `setUserNumber(Integer userNumber)` são adicionados à classe. |
| |
| |
| |
| . Crie uma propriedade `response`. Declare uma `String` denominada `response`. |
| |
| [source,java] |
| ---- |
| |
| @ManagedBean(name="UserNumberBean") |
| @SessionScoped |
| public class UserNumberBean implements Serializable { |
| |
| Integer randomInt; |
| Integer userNumber; |
| *String response;* |
| ---- |
| |
| |
| . Crie um método getter para `response`. (Esta aplicação não precisará de um setter.) Você pode utilizar a janela pop-up Gerar código do IDE mostrada acima, na etapa 2, para gerar o código do modelo. Neste tutorial, basta colar o método a seguir na classe. |
| |
| [source,html] |
| ---- |
| |
| public String getResponse() { |
| if ((userNumber != null) && (userNumber.link:http://download.oracle.com/javase/6/docs/api/java/lang/Integer.html#compareTo(java.lang.Integer)[+compareTo+](randomInt) == 0)) { |
| |
| //invalidate user session |
| FacesContext context = FacesContext.getCurrentInstance(); |
| HttpSession session = (HttpSession) context.getExternalContext().getSession(false); |
| session.invalidate(); |
| |
| return "Yay! You got it!"; |
| } else { |
| |
| return "<p>Sorry, " + userNumber + " isn't it.</p>" |
| + "<p>Guess again...</p>"; |
| } |
| } |
| ---- |
| O método acima realiza duas funções: |
| 1. Testa se o número informado pelo usuário (`userNumber`) é igual ao número aleatório gerado para a sessão (`randomInt`) e retorna uma resposta `String` apropriada. |
| 2. Isso invalida a sessão do usuário se o usuário adivinhar o número correto (isto é, se `userNumber` for igual a `randomInt`). Isso é necessário para que um novo número seja gerado, caso o usuário queira jogar novamente. |
| |
| |
| . Clique com o botão direito do mouse no editor e selecione Corrigir Importações (Alt-Shift-I; &#8984-Shift-I no Mac). As instruções de importação são criadas automaticamente para: |
| * `javax.servlet.http.HttpSession` |
| * `javax.faces.context.FacesContext` |
| |
| Você pode pressionar Ctrl-Espaço nos itens do editor para chamar as sugestões da funcionalidade autocompletar código e o suporte da documentação. Pressione Ctrl-Espaço no `FacesContext` para exibir a descrição da classe do Javadoc. |
| |
| |
| image::images/documentation-support.png[title="Pressione Ctrl-Espaço para chamar a funcionalidade autocompletar código e o suporte à documentação"] |
| |
| Clique no ícone ( image:images/web-browser-icon.png[] ) do Web browser na janela da documentação para abrir o Javadoc em um Web browser externo. |
| |
| |
| |
| [[wire]] |
| == Conectando Beans Gerenciados às Páginas |
| |
| Uma das principais finalidades do JSF é remover a necessidade de escrever códigos clichês para gerenciar <<pojo,POJOs>> e suas interações com views da aplicação. Você viu um exemplo disso na seção anterior, na qual o JSF instanciou um objeto `UserNumberBean` quando a aplicação foi executada. Este conceito é denominado link:http://martinfowler.com/articles/injection.html[+Inversão de Controle+] (IoC), que permite que o contêiner se responsabilize pelo gerenciamento de partes da aplicação que, do contrário, exigiriam que o desenvolvedor escrevesse códigos repetitivos. |
| |
| Na seção anterior, você criou um bean gerenciado que gera um número aleatório entre 0 e 10. Você também criou duas propriedades, `userNumber` e `response`, que representam o número informado pelo usuário e a resposta a uma tentativa do usuário, respectivamente. |
| |
| Nesta seção, você irá explorar como é possível utilizar `UserNumberBean` e suas propriedades em páginas Web. O JSF permite que você faça isso utilizando a sua linguagem de expressão (EL). A linguagem de expressão é utilizada para vincular os valores da propriedade aos componentes da IU do JSF contidos nas páginas Web da aplicação. Esta seção demonstra como você pode aproveitar a funcionalidade de navegação implícita do JSF 2.x para navegar entre o índice e as páginas de resposta. |
| |
| O IDE oferece suporte a esta tarefa por meio das funcionalidades autocompletar código e documentação, que podem ser chamadas pressionando Ctrl-Espaço nos itens do editor. |
| |
| Comece fazendo alterações em `index.xhtml` e, em seguida, em `response.xhtml`. Em ambas as páginas, substitua os elementos do form HTML por seus equivalente JSF, conforme estão definidos na link:http://javaserverfaces.java.net/nonav/docs/2.1/vdldocs/facelets/index.html[+biblioteca de tags HTML JSF+]. Em seguida, utilize a linguagem de expressão JSF para vincular os valores da propriedade aos componentes da IU selecionada. |
| |
| * <<index,index.xhtml>> |
| * <<response,response.xhtml>> |
| |
| |
| [[index]] |
| === index.xhtml |
| |
| 1. Abra a página `index.xhtml` no editor. Clique duas vezes no nó `index.xhtml` da janela Projetos, ou pressione Alt-Shift-O para utilizar a caixa de diálogo Ir para Arquivo. |
| |
| As páginas de índice e resposta já contêm os componentes de IU do JSF necessários para este exercício. Basta eliminar os comentários existentes e fazer comentários nos elementos HTML que estiverem sendo usados. |
| |
| |
| . Comente no elemento do form HTML. Para isso, realce o elemento de form HTML, como na imagem a seguir, e pressione Ctrl-/ (&#8984-/ no Mac). |
| |
| *Observação: *para realçar, clique e arraste o elemento no editor com o mouse ou, utilizando o teclado, mantenha Shift pressionado e pressione as teclas de seta. |
| |
| image::images/comment-out.png[title="Realce o código, em seguida, pressione Ctrl-/ para comentá-lo"] |
| |
| Utilize Ctrl-/ (&#8984-/ no Mac) para alternar entre comentários no editor. É possível aplicar esse atalho do teclado em outros tipos de arquivo, como Java e CSS. |
| |
| |
| |
| . Elimine o comentário do componente do form HTML JSF. Realce o componente, conforme indicado na imagem a seguir, e pressione Ctrl-/ (&#8984-/ no Mac). |
| |
| *Observação.* Pode ser necessário pressionar Ctrl-/ duas vezes para remover os comentários do código. |
| |
| |
| image::images/comment.png[title="Realce o código comentado e, em seguida, pressione Ctrl-/ para eliminar o comentário"] |
| |
| Após eliminar o comentário do componente de form HTML JSF, o editor indicará que as tags `<h:form>`, `<h:inputText>` e `<h:commandButton>` não foram declaradas. |
| |
| image::images/undeclared-component.png[title="O editor fornecerá mensagens de erro para os componentes não declarados"] |
| |
| |
| . Para declarar esses componentes, utilize a funcionalidade autocompletar código do IDE para adicionar o namespace da biblioteca de tag à tag `<html>` da página. Coloque o cursor em qualquer uma das tags não declaradas, pressione Alt-Enter e clique em Inserir para adicionar a biblioteca de tags sugerida. (Se houver várias opções, certifique-se de selecionar a tag exibida no editor antes de clicar em Inserir.) O namespace da biblioteca de tags HTML JSF será adicionado à tag `<html>` (mostrado em *negrito* abaixo), e os indicadores de erro desaparecerão. |
| |
| *Observação.* Se o IDE não fornecer a opção de adicionar a biblioteca de tags, será necessário modificar manualmente o elemento ``<html>`` . |
| |
| |
| [source,java] |
| ---- |
| |
| <html xmlns="http://www.w3.org/1999/xhtml" |
| *xmlns:h="http://xmlns.jcp.org/jsf/html"*> |
| ---- |
| |
| |
| . Utilize a linguagem de expressão JSF para vincular a propriedade `userNumber` do `UserNumberBean` ao componente `inputText`. O atributo `value` pode ser utilizado para especificar o valor atual do componente renderizado. Digite o código exibido em *negrito* abaixo. |
| |
| [source,java] |
| ---- |
| |
| <h:form> |
| <h:inputText id="userNumber" size="2" maxlength="2" *value="#{UserNumberBean.userNumber}"* /> |
| ---- |
| |
| A linguagem de expressão JSF utiliza a sintaxe `#{}`. Dentro desses delimitadores, especifique o nome do bean gerenciado e a propriedade do Bean que deseja aplicar, separados por um ponto (`.`). Agora, quando os dados do form forem enviados ao servidor, o valor será salvo automaticamente na propriedade `userNumber` utilizando o setter da propriedade (`setUserNumber()`). Além disso, quando a página for solicitada e um valor para `userNumber` já tiver sido definido, o valor será exibido automaticamente no componente `inputText` renderizado. Para obter mais informações, consulte o link:http://docs.oracle.com/javaee/7/tutorial/doc/jsf-develop001.htm#BNAQP[+Tutorial do Java EE 7: 12.1.2 Usando o EL para Beans Gerenciados de Referência+]. |
| |
| |
| |
| . Especifique o destino da solicitação chamada ao clicar no botão do form. Na versão HTML do form, você pode fazer isso utilizando o atributo `action` da tag `<form>`. Com o JSF, você pode utilizar o atributo `action` do `commandButton`. Além disso, devido à funcionalidade de navegação implícita do JSF 2.x, basta especificar apenas o nome do arquivo de destino, sem a sua extensão. |
| |
| Digite o código exibido em *negrito* abaixo. |
| |
| |
| [source,xml] |
| ---- |
| |
| <h:form> |
| <h:inputText id="userNumber" size="2" maxlength="2" value="#{UserNumberBean.userNumber}" /> |
| <h:commandButton id="submit" value="submit" *action="response"* /> |
| </h:form> |
| ---- |
| |
| O runtime do JSF procura um arquivo denominado `response`. Ele supõe que a extensão do arquivo é a mesma utilizada pelo arquivo que originou a solicitação (`index*.xhtml*`) e procura o arquivo `response.xhtml` no mesmo diretório do arquivo de origem (por exemplo, webroot). |
| |
| *Observação: *o JSF 2.x tem o objetivo de tornar as tarefas dos desenvolvedores muito mais fácil. Se você utilizou o JSF 1.2 para este projeto, você teria que declarar uma regra de navegação em um arquivo de configuração do Faces que tem a seguinte aparência: |
| |
| |
| [source,xml] |
| ---- |
| |
| <navigation-rule> |
| <from-view-id>/index.xhtml</from-view-id> |
| |
| <navigation-case> |
| <from-outcome>response</from-outcome> |
| <to-view-id>/response.xhtml</to-view-id> |
| </navigation-case> |
| </navigation-rule> |
| ---- |
| |
| As etapas de 7 a 12 a seguir são opcionais. Se quiser construir o projeto rapidamente, passe para <<response,`response.xhtml`>>. |
| |
| |
| |
| . Verifique se a expressão EL acima chama o método `setUserNumber()` quando a solicitação é processada. Para isso, utilize o depurador Java do IDE. |
| |
| Alterne para a classe `UserNumberBean` (Pressione Ctrl-Tab e selecione o arquivo na lista.) Defina um ponto de interrupção na assinatura do método `setUserNumber()`. É possível fazer isso clicando na margem esquerda. É exibido um indicador vermelho, mostrando que um ponto de interrupção do método foi definido. |
| |
| image::images/set-breakpoint.png[title="Clique no margem esquerda do editor para definir pontos de interrupção"] |
| |
| |
| . Clique no botão Depurar Projeto (image:images/breakpoint-btn.png[]) na barra de ferramentas principal do IDE. A sessão de depuração é iniciada, e a página de boas-vindas do projeto é aberta no browser. |
| |
| *Observações.* |
| |
| * Talvez seja necessário confirmar a porta do servidor para depurar a aplicação. |
| * Se uma caixa de diálogo Depurar Projeto for exibida, selecione a opção 'Java do Servidor' default e clique em Depurar. |
| |
| |
| . No browser, digite um número no form e clique no botão "Submeter". |
| |
| |
| . Volte ao IDE e inspecione a classe `UserNumberBean`. O depurador será interrompido no método `setUserNumber()`. |
| |
| image::images/debugger-suspended.png[title="O depurador é suspenso de acordo com pontos de interrupção"] |
| |
| |
| . Abra a janela Variáveis do Depurador (Selecione Janela > Depuração > Variáveis, ou pressione Ctrl-Shift-1). Você verá os valores das variáveis no ponto em que o depurador foi suspenso. |
| |
| image::images/variables-window.png[title="Monitorar valores das variáveis utilizando a janela Variáveis do Depurador"] |
| |
| Na imagem acima, o valor '`4`' foi fornecido à variável `userNumber` na assinatura `setUserNumber()`. (O número 4 foi inserido no form.) '`this`' se refere ao objeto `UserNumberBean` criado para a sessão do usuário. Abaixo dele, você verá que o valor da propriedade `userNumber` é atualmente `null`. |
| |
| |
| |
| . Na barra de ferramentas do Depurador, clique no botão Fazer Step Into (image:images/step-into-btn.png[]). O depurador executará a linha na qual ele está atualmente suspenso. A janela Variáveis se será atualiza, indicando as alterações na execução. |
| |
| image::images/variables-window2.png[title="A janela de variáveis é atualizada ao percorrer o código"] |
| |
| A propriedade `userNumber` agora está definida com o valor inserido no form. |
| |
| |
| |
| . Escolha Depurar > Finalizar Sessão do Depurador (Shift-F5; Shift-Fn-F5 no Mac) no menu principal para interromper o depurador. |
| |
| |
| [[response]] |
| === response.xhtml |
| |
| 1. Abra a página `response.xhtml` no editor. Clique duas vezes no nó `response.xhtml` da janela Projetos ou pressione Alt-Shift-O para utilizar a caixa de diálogo Ir para Arquivo. |
| 2. Comente no elemento do form HTML. Realce as tags HTML `<form>` de abertura e fechamento e o código entre elas, depois pressione Ctrl-/ (&#8984-/ no Mac). |
| |
| *Observação: *Para realçar, clique e arraste o mouse no editor ou, utilizando o teclado, mantenha Shift pressionado e utilize as teclas de seta. |
| |
| |
| |
| . Elimine o comentário do componente do form HTML JSF. Realce as tags `<h:form>` de abertura e fechamento e o código entre elas, depois pressione Ctrl-/ (&#8984-/ no Mac). |
| |
| Neste estágio, o código entre as tags `<body>` terão a seguinte aparência: |
| |
| |
| [source,html] |
| ---- |
| |
| <body> |
| <div id="mainContainer"> |
| |
| <div id="left" class="subContainer greyBox"> |
| |
| <h4>[ response here ]</h4> |
| |
| <!--<form action="index.xhtml"> |
| |
| <input type="submit" id="backButton" value="Back"/> |
| |
| </form>--> |
| |
| <h:form> |
| |
| <h:commandButton id="backButton" value="Back" /> |
| |
| </h:form> |
| |
| </div> |
| |
| <div id="right" class="subContainer"> |
| |
| <img src="duke.png" alt="Duke waving" /> |
| <!--<h:graphicImage url="/duke.png" alt="Duke waving" />--> |
| |
| </div> |
| </div> |
| </body> |
| ---- |
| |
| Após eliminar o comentário do componente de form HTML JSF, o editor indicará que as tags `<h:form>` e `<h:commandButton>` não foram declaradas. |
| |
| |
| |
| . Para declarar esses componentes, utilize a funcionalidade autocompletar código do IDE para adicionar o namespace da biblioteca de tag à tag `<html>` da página. |
| |
| Utilize o suporte para a funcionalidade autocompletar código do editor para adicionar os namespaces JSF necessários ao arquivo. Quando você seleciona uma tag JSF ou Facelets por meio da funcionalidade autocompletar código, o namespace necessário é automaticamente adicionado ao elemento raiz do documento. Para obter mais informações, consulte link:jsf20-support.html#facelets[+Suporte JSF 2.x no NetBeans IDE+]. |
| |
| Coloque o cursor em qualquer uma das tags não declaradas e pressione Ctrl-Espaço. As sugestões da funcionalidade autocompletar código e o suporte da documentação serão exibidos. |
| |
| image::images/code-completion2.png[title="Pressione Ctrl-Espaço para chamar uma janela pop-up com as sugestões da funcionalidade autocompletar código e a documentação"] |
| |
| Clique em Inserir. (Se houver várias opções, certifique-se de selecionar a tag exibida no editor antes de clicar em Inserir.) O namespace da biblioteca de tags HTML JSF será adicionado à tag `<html>` (mostrado em *negrito* abaixo), e os indicadores de erro desaparecerão. |
| |
| |
| [source,java] |
| ---- |
| |
| <html xmlns="http://www.w3.org/1999/xhtml" |
| *xmlns:h="http://xmlns.jcp.org/jsf/html"*> |
| ---- |
| |
| |
| . Especifique o destino da solicitação que é chamada quando o usuário clica no botão do form. Você deseja definir o botão para que um usuário retorne à página de índice ao clicar nele. Para isso, utilize, o atributo `action` do `commandButton`. Digite o código exibido em *negrito*. |
| |
| [source,xml] |
| ---- |
| |
| <h:form> |
| |
| <h:commandButton id="backButton" value="Back" *action="index"* /> |
| |
| </h:form> |
| ---- |
| |
| *Observação: *Ao digitar `action="index"`, você estará confiando na funcionalidade de navegação implícita do JSF. Quando um usuário clica no botão do form, o runtime do JSF procura um arquivo denominado `índice`. Ele supõe que a extensão do arquivo é a mesma extensão utilizada pelo arquivo que originou a solicitação (`response*.xhtml*`) e procura o arquivo `index.xhtml` no mesmo diretório do arquivo de origem (por exemplo, webroot). |
| |
| |
| |
| . Substitua o texto estático "[ response here ]" pelo valor da propriedade `response` do `UserNumberBean`. Para isso, utilize a linguagem de expressão JSF. Digite (em *negrito*): |
| |
| [source,html] |
| ---- |
| |
| <div id="left" class="subContainer greyBox"> |
| |
| <h4>*<h:outputText value="#{UserNumberBean.response}"/>*</h4> |
| ---- |
| |
| |
| . Execute o projeto (clique no botão ( image:images/run-project-btn.png[] ) Executar Projeto ou pressione F6; fn-F6 no Mac). Quando a página de boas-vindas for exibida no browser, informe um número e clique em `submeter`. Você verá a página de resposta com uma aparência semelhante à seguinte (contanto que você não adivinhe o número correto): |
| |
| image::images/response2.png[title="Exibir o status atual do projeto em um browser"] |
| |
| Há duas coisas erradas no status atual da página de resposta: |
| |
| 1. As tags html `<p>` são exibidas na mensagem de resposta. |
| 2. O botão Voltar não está sendo exibido no lugar correto. (Compare-a à <<originalVersion,versão original>>.) |
| |
| As duas etapas a seguir corrigirão estes pontos, respectivamente. |
| |
| |
| |
| . Defina o atributo `escape` da tag `<h:outputText>` como `false`. Coloque o cursor entre `outputText` e `value`, insira um espaço e pressione Ctrl-Espaço para chamar a funcionalidade autocompletar código. Role para baixo para selecionar o atributo `escape` e inspecione a documentação. |
| |
| image::images/escape-false.png[title="Pressione Ctrl-Espaço para exibir possíveis valores do atributo e a documentação"] |
| |
| Conforme indicado pela documentação, o valor `escape` está definido como `true` por default. Isso significa que os caracteres que normalmente são submetidos a parse como html serão incluídos na string, conforme ilustrado acima. Definir o valor como `false` permite aos caracteres que podem ser submetidos a parse como html sejam renderizados como tal. |
| |
| Clique em Inserir e digite `false` como valor. |
| |
| |
| [source,xml] |
| ---- |
| |
| <h4><h:outputText *escape="false"* value="#{UserNumberBean.response}"/></h4> |
| ---- |
| |
| |
| . Defina, o atributo `prependId` da tag `<h:form>` como `false`. Coloque o cursor logo depois de '`m`' em `<h:form>`, insira um espaço, em seguida, pressione Ctrl-Espaço para chamar a funcionalidade autocompletar código. Role para baixo para selecionar o atributo `prependId` e inspecione a documentação. Clique em Inserir e digite `false` como valor. |
| |
| [source,java] |
| ---- |
| |
| <h:form *prependId="false"*> |
| ---- |
| |
| O JSF aplica IDs internos para manter o controle dos componentes da IU. No exemplo atual, se você inspecionar o código-fonte da página renderizada, você verá algo semelhante ao seguinte: |
| |
| |
| [source,xml] |
| ---- |
| |
| <form id="j_idt5" name="j_idt5" method="post" action="/jsfDemo/faces/response.xhtml" enctype="application/x-www-form-urlencoded"> |
| <input type="hidden" name="j_idt5" value="j_idt5" /> |
| <input *id="j_idt5:backButton"* type="submit" name="j_idt5:backButton" value="Back" /> |
| <input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="7464469350430442643:-8628336969383888926" autocomplete="off" /> |
| </form> |
| ---- |
| |
| O ID do elemento do form é `j_idt5` e esse ID é _precedido_ pelo ID do botão Voltar incluído no form (mostrado em *negrito* acima). Como o botão Voltar depende da regra de estilo do `#backButton` (definido em `stylesheet.css`), essa regra se torna um empecilho quando o ID do JSF é inserido como prefixo. Isso pode ser evitado ao definir `prependId` como `false`. |
| |
| |
| |
| . Execute o projeto novamente (clique no botão ( image:images/run-project-btn.png[] ) Executar Projeto ou pressione F6; fn-F6 no Mac). Insira um número na página de boas-vindas e clique em Submeter. A página de resposta agora exibe a mensagem de resposta sem as tags `<p>` e o botão Voltar está no lugar correto. |
| |
| image::images/response3.png[title="Exibir o status atual do projeto em um browser"] |
| |
| |
| . Clique no botão Voltar. Como o valor atual da propriedade `userNumber` do `UserNumberBean` está vinculado ao componente JSF `inputText`, o número inserido anteriormente agora será exibido no campo de texto. |
| |
| |
| . Inspecione o log do servidor na janela de Saída do IDE (Ctrl-4; &#8984-4 no Mac) para determinar qual é o suposto número correto. |
| |
| Se, por alguma razão, você não puder ver o log do servidor, você poderá abri-lo alternando para a janela Serviços (Ctrl-5; &#8984-5 no Mac) e expandindo o nó Servidores. Em seguida, clique com o botão direito do mouse no GlassFish Server no qual o projeto está implantado e selecione Exibir Log do Servidor. Se você não conseguir ver o número no log do servidor, tente construir novamente a aplicação clicando com o botão direito do mouse no nó do projeto e selecionando Limpar e Construir Projeto. |
| |
| |
| |
| . Digite o número correto e clique em Submeter. A aplicação irá comparar a sua entrada com o número atualmente salvo e exibirá a mensagem apropriada. |
| |
| image::images/yay.png[title="A resposta correta será exibida ao inserir o número correspondente"] |
| |
| |
| . Clique novamente no botão Voltar. Observe que o número inserido anteriormente não será mais exibido no campo de texto. Lembre-se de que o método `getResponse()` do `UserNumberBean` <<getResponse,invalida a sessão atual do usuário>> quando o número correto é descoberto. |
| |
| |
| |
| [[template]] |
| == Aplicando um Modelo de Facelets |
| |
| O Facelets se tornou a tecnologia padrão de exibição para o JSF 2.x. O Facelets é um framework de modelos leve que suporta todos os componentes de IU do JSF e é usado para compilar e renderizar a árvore de componentes do JSF para views da aplicação. Também oferece suporte ao desenvolvimento quando ocorrem erros de EL, permitindo que você inspecione o rastreamento de pilha, a árvore de componentes e as variáveis com escopo. |
| |
| Embora você talvez não tenha percebido, os arquivos `index.xhtml` e `response.xhtml` com os quais você está trabalhando até o momento no tutorial são páginas de Facelets. As páginas de Facelets utilizam a extensão `.xhtml` e, desde que você esteja trabalhando em um projeto JSF 2.x (As bibliotecas JSF 2.x incluem arquivos JAR Facelets.), as views poderão renderizar apropriadamente a árvore de componentes JSF. |
| |
| O objetivo desta seção é familiarizar você com modelos de Facelets. Em projetos que contêm várias views, geralmente é mais vantajoso aplicar um arquivo de modelo que defina a estrutura e a aparência das diversas views. Quando você atende às solicitações, a aplicação insere dinamicamente o conteúdo preparado no arquivo de modelo e envia o resultado de volta ao cliente. Embora esse projeto contenha somente duas views (a página de boas-vindas e página de resposta), é fácil ver que elas contêm uma grande quantidade de conteúdo duplicado. É possível fatorar esse conteúdo duplicado em um modelo de Facelets e criar arquivos do cliente de modelo para manipular o conteúdo específico das páginas de boas-vindas e resposta. |
| |
| O IDE oferece um link:jsf20-support.html#faceletsTemplate[+assistente de Modelo de Facelets+] para a criação de modelos de Facelets e um assistente de Cliente de modelo de Facelets para a criação de arquivos que dependem de um modelo. Esta seção utiliza esses assistentes. |
| |
| *Observação:* O IDE também oferece um assistente de Página JSF que permite criar páginas de Facelets individuais para seu projeto. Para obter mais informações, consulte link:jsf20-support.html#jsfPage[+Suporte JSF 2.x no NetBeans IDE+]. |
| |
| * <<templateFile,Criando o Arquivo de Modelo de Facelets>> |
| * <<templateClient,Criando Arquivos Clientes de Modelo>> |
| |
| |
| [[templateFile]] |
| === Criando o Arquivo de Modelo de Facelets |
| |
| 1. Crie um arquivo de modelo de Facelets. Pressione Ctrl-N (&#8984-N no Mac) para abrir o assistente Arquivo. Selecione a categoria JavaServer Faces e, em seguida, Modelo de Facelets. Clique em Próximo. |
| 2. Digite `template` como nome do arquivo. |
| 3. Escolha um dos oito estilos de layout e clique em Finalizar. (Você utilizará a folha de estilo existente, portanto, não importa qual estilo de layout você escolherá.) |
| |
| image::images/layout-style.png[title="O assistente de Modelo de Facelets permite selecionar entre estilos de layout comuns"] |
| |
| O assistente gera o arquivo `template.xhtml` e as folhas de estilo relacionadas com base na seleção feita, a seguir, coloca-as em uma pasta `resources` > `css` dentro da raiz da Web do projeto. |
| |
| Depois de concluir o assistente, o arquivo de modelo é aberto no editor. Para exibir o modelo em um browser, clique com o botão direito do mouse no Editor e selecione Exibir. |
| |
| |
| |
| . Examine a marcação do arquivo de modelo. Observe os pontos a seguir: |
| * A biblioteca de tags `facelets` é declarada na tag `<html>` da página. A biblioteca de tags possui o prefixo `ui`. |
| |
| [source,java] |
| ---- |
| |
| <html xmlns="http://www.w3.org/1999/xhtml" |
| *xmlns:ui="http://xmlns.jcp.org/jsf/facelets"* |
| xmlns:h="http://xmlns.jcp.org/jsf/html"> |
| ---- |
| * A página de Facelets utiliza as tags `<h:head>` e `<h:body>` em vez das tags `<head>` e `<body>`. Quando você utiliza essas tags, o Facelets pode construir uma árvore de componentes que abrange toda a página. |
| * A página faz referência às folhas de estilo que também foram criadas ao concluir o assistente. |
| |
| [source,xml] |
| ---- |
| |
| <h:head> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
| *<link href="./resources/css/default.css" rel="stylesheet" type="text/css" />* |
| *<link href="./resources/css/cssLayout.css" rel="stylesheet" type="text/css" />* |
| <title>Facelets Template</title> |
| </h:head> |
| ---- |
| * As tags `<ui:insert>` são utilizadas no corpo da página em todos os compartimentos associados ao estilo de layout que você escolheu. Cada tag `<ui:insert>` possui um atributo `name` que identifica o compartimento. Por exemplo: |
| |
| [source,html] |
| ---- |
| |
| <div id="top"> |
| *<ui:insert name="top">Top</ui:insert>* |
| </div> |
| ---- |
| |
| |
| . Examine novamente as páginas de <<staticPage,boas-vindas>> e de <<responsePage,resposta>>. O único conteúdo que é alterado nas duas páginas é o título e o texto contido no quadro cinza. O modelo, portanto, pode fornecer todo o conteúdo restante. |
| |
| |
| . Substitua todo o conteúdo de seu arquivo de modelo pelo conteúdo abaixo. |
| |
| [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:ui="http://xmlns.jcp.org/jsf/facelets" |
| xmlns:h="http://xmlns.jcp.org/jsf/html"> |
| |
| <h:head> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
| <link href="css/stylesheet.css" rel="stylesheet" type="text/css" /> |
| |
| <title><ui:insert name="title">Facelets Template</ui:insert></title> |
| </h:head> |
| |
| <h:body> |
| |
| <div id="left"> |
| <ui:insert name="box">Box Content Here</ui:insert> |
| </div> |
| |
| </h:body> |
| |
| </html> |
| ---- |
| O código acima implementa as seguintes alterações: |
| * O arquivo `stylesheet.css` do projeto substitui as referências da folha de estilo do modelo criadas pelo assistente. |
| * Todas as tags `<ui:insert>` (e suas tags `<div>`) foram removidas, exceto uma denominada `box`. |
| * Um par de tags `<ui:insert>` foi colocado no título da página e foi denominado `title`. |
| |
| |
| . Copie o código relevante do arquivo `index.xhtml` ou `response.xhtml` para o modelo. Adicione o conteúdo mostrado em *negrito* abaixo das tags `<h:body>` do arquivo de modelo. |
| |
| [source,html] |
| ---- |
| |
| <h:body> |
| *<div id="mainContainer">* |
| <div id="left" *class="subContainer greyBox"*> |
| <ui:insert name="box">Box Content Here</ui:insert> |
| </div> |
| *<div id="right" class="subContainer"> |
| <img src="duke.png" alt="Duke waving" /> |
| </div> |
| </div>* |
| </h:body> |
| ---- |
| |
| |
| . Execute o projeto. Quando a página de boas-vindas abrir no browser, modifique o URL para o seguinte: |
| |
| [source,java] |
| ---- |
| |
| http://localhost:8080/jsfDemo/faces/template.xhtml |
| ---- |
| O arquivo de modelo é exibido da seguinte forma: |
| |
| image::images/facelets-template.png[title="Exibir o modelo de Facelets em um browser"] |
| |
| O projeto agora contém um arquivo de modelo que fornece a aparência e a estrutura de todas as views. Agora é possível criar arquivos de clientes que chamem o modelo. |
| |
| |
| [[templateClient]] |
| === Criando Arquivos de Clientes de Modelo |
| |
| Crie os arquivos de clientes de modelo das páginas de boas-vindas e resposta. Nomeie o arquivo de cliente de modelo da página de boas-vindas `greeting.xhtml`. Para a página de resposta, o arquivo será `response.xhtml`. |
| |
| |
| ==== greeting.xhtml |
| |
| 1. Pressione Ctrl-N (⌘-N no Mac) para abrir o assistente de Novo Arquivo. Selecione a categoria JavaServer Faces e, em seguida, Cliente de Modelo de Facelets. Clique em Próximo. |
| 2. Digite `greeting` como nome do arquivo. |
| 3. Clique no botão Procurar ao lado do campo Modelo e, em seguida, utilize a caixa de diálogo exibida para navegar até o arquivo `template.xhtml` criado na seção anterior. |
| |
| image::images/template-client.png[title="Assistente de Cliente de Modelo de Facelets"] |
| |
| |
| . Clique em Finalizar. O novo arquivo de cliente de modelo `greeting.xhtml` é gerado e exibido no editor. |
| |
| |
| . Examine a marcação. Observe o conteúdo realçado em *negrito*. |
| |
| [source,xml] |
| ---- |
| |
| <html xmlns="http://www.w3.org/1999/xhtml" |
| xmlns:ui="http://xmlns.jcp.org/jsf/facelets"> |
| |
| <body> |
| |
| <ui:composition *template="./template.xhtml"*> |
| |
| <ui:define *name="title"*> |
| title |
| </ui:define> |
| |
| <ui:define *name="box"*> |
| box |
| </ui:define> |
| |
| </ui:composition> |
| |
| </body> |
| </html> |
| ---- |
| O arquivo de cliente de modelo faz referência a um modelo utilizando o atributo `template` da tag `<ui:composition>`. Como o modelo contém tags `<ui:insert>` de `title` e `box`, esse cliente de modelo contém as tags `<ui:define>` desses dois nomes. O conteúdo especificado entre as tags `<ui:define>` será o conteúdo inserido no modelo entre as tags `<ui:insert>` do nome correspondente. |
| |
| |
| . Especifique `greeting` como o título do arquivo. Faça a seguinte alteração em *negrito*. |
| |
| [source,xml] |
| ---- |
| |
| <ui:define name="title"> |
| *Greeting* |
| </ui:define> |
| ---- |
| |
| |
| . Alterne para o arquivo `index.xhtml` (pressione Ctrl-Tab) e copie o conteúdo que normalmente aparece no quadro cinza exibido na página renderizada. Em seguida, volte ao `greeting.xhtml` e cole-o no arquivo de cliente de modelo. (Alterações em *negrito*.) |
| |
| [source,xml] |
| ---- |
| |
| <ui:define name="box"> |
| *<h4>Hi, my name is Duke!</h4> |
| |
| <h5>I'm thinking of a number |
| |
| <br/> |
| between |
| <span class="highlight">0</span> and |
| <span class="highlight">10</span>.</h5> |
| |
| <h5>Can you guess it?</h5> |
| |
| <h:form> |
| <h:inputText size="2" maxlength="2" value="#{UserNumberBean.userNumber}" /> |
| <h:commandButton id="submit" value="submit" action="response" /> |
| </h:form>* |
| </ui:define> |
| ---- |
| |
| |
| . Declare a biblioteca de tags HTML JSF do arquivo. Coloque o cursor em qualquer um das tags sinalizadas com um erro (qualquer tag com o prefixo `h`') e pressione Ctrl-Espaço. Em seguida, selecione a tag na lista de sugestões da funcionalidade autocompletar código. O namespace da biblioteca de tags será adicionado à tag `<html>` do arquivo (mostrado em *negrito* abaixo) e os indicadores de erro desaparecerão. |
| |
| [source,java] |
| ---- |
| |
| <html xmlns="http://www.w3.org/1999/xhtml" |
| xmlns:ui="http://xmlns.jcp.org/jsf/facelets" |
| *xmlns:h="http://xmlns.jcp.org/jsf/html"*> |
| ---- |
| |
| Se você colocar o cursor depois de '`m`' no `<h:form>` e pressionar Ctrl-Espaço, o namespace será automaticamente adicionado ao arquivo. Se somente uma opção lógica estiver disponível ao pressionar Ctrl-Espaço, ela será imediatamente aplicada ao arquivo. As bibliotecas de tags JSF são automaticamente declaradas ao chamar a funcionalidade autocompletar código nas tags. |
| |
| |
| ==== response.xhtml |
| |
| Como o projeto já contém um arquivo com o nome `response.xhtml`, e visto que você já sabe qual é a aparência do arquivo de cliente de modelo, modifique o arquivo `response.xhtml` para que se torne o arquivo de cliente de modelo. (Neste tutorial, basta copiar e colar o código fornecido.) |
| |
| 1. Abra `response.xhtml` no editor. (Se já estiver aberto, pressione Ctrl-Tab e selecione-o.) Substitua o conteúdo de todo o arquivo pelo código abaixo. |
| |
| [source,xml] |
| ---- |
| |
| <?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:ui="http://xmlns.jcp.org/jsf/facelets" |
| xmlns:h="http://xmlns.jcp.org/jsf/html"> |
| |
| <body> |
| |
| <ui:composition template="./template.xhtml"> |
| |
| <ui:define name="title"> |
| Response |
| </ui:define> |
| |
| <ui:define name="box"> |
| <h4><h:outputText escape="false" value="#{UserNumberBean.response}"/></h4> |
| |
| <h:form prependId="false"> |
| |
| <h:commandButton id="backButton" value="Back" action="greeting" /> |
| |
| </h:form> |
| </ui:define> |
| |
| </ui:composition> |
| |
| </body> |
| </html> |
| ---- |
| Observe que o arquivo é idêntico a `greeting.xhtml`, exceto pelo conteúdo especificado entre as tags `<ui:define>` de `title` e `box`. |
| |
| |
| . No descritor de implantação `web.xml` do projeto, modifique a entrada do arquivo de boas-vindas para que `greeting.xhtml` seja a página exibida quando a aplicação for executada. |
| |
| Na janela Projetos, clique duas vezes em Arquivos de Configuração > `web.xml` para abri-lo no editor. Na guia Páginas, altere o campo Arquivos de Boas-Vindas para `faces/greeting.xhtml`. |
| |
| image::images/welcome-files.png[title="Alterar a entrada de Arquivos de Boas-Vindas no descritor de implantação"] |
| |
| |
| . Execute o projeto para ver como ele é em um browser. Pressione F6 (fn-F6 no Mac) ou clique no botão (image:images/run-project-btn.png[]) Executar Projeto na barra de ferramentas principal. O projeto será implantado no GlassFish Server e aberto em um browser. |
| |
| Quando você utiliza o modelo de Facelets e os arquivos de clientes de modelo, a aplicação se comportará exatamente da mesma forma que antes. Fatorando o código duplicado nas páginas de boas-vindas e de resposta da aplicação, você consegue reduzir o tamanho da aplicação e eliminar a possibilidade de escrever mais códigos duplicados, caso mais páginas sejam adicionadas posteriormente. Isso pode tornar o desenvolvimento mais fácil e eficiente ao trabalhar em grandes projetos. |
| |
| link:/about/contact_form.html?to=3&subject=Feedback:%20Introduction%20to%20JSF%202.0[+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-support.html[+Suporte a JSF 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://docs.oracle.com/javaee/7/tutorial/doc/jsf-develop.htm[+O Tutorial do Java EE 7, Capítulo 12: Desenvolvendo a Tecnologia JavaServer Faces+] |
| * link:http://javaserverfaces.dev.java.net/[+Projeto Mojarra GlassFish+] (Implementação oficial de referência do 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+] |
