1) Crie um Dynamic web project (File -> New -> Dynamic web project).
O nome do projeto será JSF2HelloWorld. Já selecione o "Apache Tomcat v8.0" em Target runtime. Vá dando next até não poder mais. Na última tela marque a checkbox "Generate web.xml deployment descriptor". Clique em finish e o projeto estará criado.
Outra forma de adiconar o tomcat seria clicando com o botão direito em cima do projeto, indo em "Properties" > "Java Build Path" > "Add Library" > Selecionar "Server Runtime" e dar next e, então selecionaria o Tomcat. Mas para que ele possa aparecer em "Server Runtime" é necessário que ele tenha antes sido baixado da internet, seja descompactado (não precisa instalá-lo) e que seja indicado o seu caminho na aba "Servers" do Eclipse Java EE.
2) Baixando e configurando o JSF2.
Clique com o botão direito do mouse sobre o projeto criado. Vá em "Properties" e depois em "Project facets". Marque o checkbox "JavaServer Faces". Irá aparece abaixo "Further configuration required...". Clique nele. Ao abrir a tela "Modify Faceted Project" clique no botão Download library que tem o desenho de um disquete. Faça o download da JSF Mojarra, que é o criado pela Oracle e que serve de referência para as demais. Feito o download, coloque no URL Mapping Patterns: *.jsf e clique em OK.
Perceba agora que em seu projeto foi criado um arquivo chamado "faces-config.xml" e o seu "web.xml" foi criado com o seguinte código:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
<display-name>JSF2HelloWorld</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<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>
<context-param>
<description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<context-param>
<param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
<param-value>resources.application</param-value>
</context-param>
<listener>
<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
</listener>
</web-app>
3) Criando um arquivo xhtml
O JSF2 é utilizado junto com xhtml. Por isso, vamos criar um "helloWorld.xhtml". Clique com o botão direito sobre "WebContent" > "New" > "HTML File". Ponha o nome do arquivo de "helloWorld.xhtml", dê um "next" e escolha um template "New XHTML File (1.0 strict)" e clique em finish. Cole no seu xhtml o código abaixo:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:c="http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:h = "http://java.sun.com/jsf/html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
</head>
<h:body>
<h:outputLabel value="Hello World"></h:outputLabel>
</h:body>
</html>
Para que esse seu "helloWorld.xhtml" seja a primeira página a aparecer ao executar o projeto é necessário fazer uma pequena modificação no seu arquivo web.xml. Basta modificar o conteúdo da sua tag welcome-file, como no código abaixo:
<display-name>JSF2HelloWorld</display-name>
<welcome-file-list>
<welcome-file>helloWorld.xhtml</welcome-file>
</welcome-file-list>
Rode a sua aplicação pelo servidor e então veja o seu resultado pelo link:
http://localhost:8080/JSF2HelloWorld/faces/helloWorld.xhtml
Se você tiver posto URL Mapping Patterns: *.jsf na hora de configurar o jsf, então o link será:
http://localhost:8080/JSF2HelloWorld/index.jsf
O hello world de JSF2 está feito. Mas, caso queira produzir algo mais elaborado é preciso ter em mente os seguinte pontos:
1) Criando as Beans
As classes do java que irão de comunicar com as páginas jsf (xhtml) deverão estar no padrão Java Bean, ou seja:
- Variáveis de instância devem ser private e só podem ser acessadas por getters e setters.
- Exemplo: se a classe tiver um variável "String nome", deve ser criado um getNome() e setNome(). Se for um boolean, deve ser usado "is" em vez de "get", como em "isLigada()" para um variável "boolean ligada", por exemplo. Seguir esse padrão Java Bean para o uso do JSF é imprescindível!
- Deve ser criado um construtor sem parâmetros.
- A classe deve implementar java.io.Serializable.
Beans gerenciados (Managed beans) são beans que pode ser acessados a partir de uma página JSF. Devem ter um nome e um escopo. Existem alguns escopos, como "@ApplicationSocoped", "@SessionScoped", "@RequestScoped", entre outros. O escopo determina o tempo de existência da instância do objeto, se a instância irá existir durante toda a aplicação, ou apenas durante a sessão ou apenas o tempo de duração de uma requisição.
2) Mapeando a classe Bean
Após criada, a classe Bean ainda não pode ser acessada, mesmo que tenha seguido todos os padrões de nomenclatura. Para isso é necessário mapeá-la. O mapeamento pode ser feito pelo arquivo "faces-config.xml" ou via anotações (annotations).
Uma opção de anotação é a @Named que pertence ao pacote javax.inject.Named. Veja o exemplo abaixo:
@Named("usuario")
public class UsuarioBean implements Serializable { ... }
Outra opção é a anotação @ManagedBean do pacote javax.faces.bean. Se nenhum parâmetro for informado, o nome utilizado será o mesmo da classe, porém com a 1ª letra minúscula. Também podemos utilizar o parâmetro name para especificar um nome qualquer, como no exemplo abaixo:
@ManagedBean(name="usuario")
public class UsuarioBean implements Serializable { ... }
Veja abaixo um exemplo:
@ManagedBean
public class UsuarioBean implements Serializable {
private int idade;
public UsuarioBean() { }
public int getIdade() { return this.idade; }
public void setIdade(int idade) { this.idade = idade; }
public void incrementaIdade() { this.idade = this.idade + 1; }
}
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h = "http://java.sun.com/jsf/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Exemplo JSF</title>
</h:head>
<h:body>
Idade: #{usuarioBean.idade}
<h:form>
<h:inputText value="#{usuarioBean.idade}" />
<h:commandButton value="Altera" />
<h:commandButton value="Incrementa" action="#{usuarioBean.incrementaIdade}" />
</h:form>
</h:body>
</html>
A expression language #{usuarioBean.idade} serve tanto para pegar o valor da idade, como para mudar. Portanto, é usado tanto como um set e um get dependendo da ação que é feita. Se for só mostrar, funciona como um get, se for para enviar um valor por meio de uma submissão de uma requisição, então funciona como um set.
A expression language #{usuarioBean.incrementaIdade} serve para utilizar o método incrementaIdade que existe no objeto.
That's all.
Nenhum comentário:
Postar um comentário