Hello World em JSF2 no Eclipse passo a passo

Usou-se eclipse neon.1 e tomcat 8 para a criação deste hello world.

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
@ViewScoped
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.

O que significa o atributo xmlns em códigos XML?

Para uma introdução às características do XML, sugiro que leia a postagem "Quais as diferenças entre XML e HTML ?". Agora vamos ao entendimento do atributo 'xmlns'.
Veja esse código XML:

<table>
  <tr>
    <td>Melancia</td>
    <td>Carambola</td>
  </tr>
</table>

Agora veja esse outro código XML:

<table>
  <name>Mesa de Café Africana</name>
  <width>80</width>
  <length>120</length>
</table>

O primeiro código utiliza a tag <table> para se referir a uma tabela com suas linhas e colunas, enquanto que o segundo código utiliza a tag <table> para se referir às características de uma mesa. Dessa maneira, pode ser que ocorra conflito entre esses códigos por possuírem tags idênticas que se relacionam a conteúdos diversos. Por isso, faz-se necessário o uso de prefixos, como no código abaixo:

Primeiro código com prefixo:

<h:table>
  <h:tr>
    <h:td>Melancia</h:td>
    <h:td>Carambola</h:td>
  </h:tr>
</h:table>

Segundo código com prefixo:

<f:table>
  <f:name>Mesa de Café Africana</f:name>
  <f:width>80</f:width>
  <f:length>120</f:length>
</f:table>

Após o uso dos prefixos 'h' e 'f' os códigos acima ficam livres de sofrer conflitos. Entretanto, faz-se necessário o uso do atributo 'xmlns' para identificar os atribuitos usados. Quando um 'xmlns' é definido para um prefixo, todos os elementos filhos com o mesmo prefixo terão o mesmo identificador (namespace). Usa-se como identificador uma Uniform Resource Identifier (URI) que é um conjunto de caracteres que representa uma fonte na internet. O propósito da URI é dar um nome único ao identificador. Uma URI pode ser uma URL (Uniform Resource Locator) por exemplo. Veja o próximo exemplo:

<root
xmlns:h="http://www.w3.org/TR/html4/"
xmlns:f="http://www.w3schools.com/furniture">

<h:table>
  <h:tr>
    <h:td>Melancia</h:td>
    <h:td>Carambola</h:td>
  </h:tr>
</h:table>

<f:table>
  <f:name>Mesa de Café Africana</f:name>
  <f:width>80</f:width>
  <f:length>120</f:length>
</f:table>
</root>

Para não ter que usar o prefixo em todos os elementos filhos, é possível criar um xmlns padrão. Assim, todas as tags que não estiverem prefixas assumirão automaticamente o identificar padrão. Como no código abaixo:

<table xmlns="http://www.w3.org/TR/html4/">
  <tr>
    <td>Melancia</td>
    <td>Carambola</td>
  </tr>
</table> 

Quais as diferenças entre XML e HTML ?

O XML é uma linguagem de marcação, assim como o HTML, entretanto possui diferentes objetivos e características. Abaixo listo as diferenças entre essas linguagens para que possa ficar mais claro.

• Quanto aos objetivos da linguagem...

XML: feito para carregar/transportar dados com foco no que o dado representa.
HTML: feito para apresentar os dados visualmente com foco no visual.

• Quanto a pré-definição de tags e estrutura...

XML: não possui tags e nem estrutura pré-definidas, ou seja, o desenvolvedor é que inventa suas próprias tags e estrutura.
HTML: possui tags pré-definidas, como <h1> ou <img> e deve seguir um padrão, por exemplo, as tags <head> e <body> devem estar dentro da tag <html>.

• Quanto às tags de fechamento...

XML: sempre deve existir tag de fechamento.
HTML: algumas tags funcionam bem mesmo sem tag de fechamento.

• Quanto ao "case sensitive"...

XML: as tags são case sensitive.
HTML: não são.

• Quanto ao aninhamento de tags...

XML: tags devem ser aninhadas corretamente. ex. <b><i>texto</i></b>
HTML: pode funcionar mesmo com aninhamento incorreto. ex. <b><i>texto</b></i>

• Quanto ao truncamento de espaços em branco...

XML: não faz truncamento de espaços em branco, ou seja, 3 espaços em branco continuam sendo 3 espaços em branco.
HTML: faz o truncamento de espaço em branco, ou seja, 3 espaços em branco se transformam em um único espaço em branco.

Outras características do XML:

• É auto-descritivo. As tags informam o que significa cada dado.
• XML não faz nada. Caso se queira utilizar essa informação, deve-se criar algum software que leia, carregue, armazene e mostre as informações com base nas tags.
• É extensível. Se adicionar novas ou remover antigas tags, aplicações antigas ainda funcionarão.
• Simplifica o compartilhamento, o transporte, a mudança de plataformas e a disponibilidades dos dados.
• Armaneza dados em formato texto e isso gera uma indepedência de software e de hardware com relação a armanezamento, transporte e compartilhamento de dados.
• Assim como o HTML, o XML também segue uma estrutura de árvore.
• O XML prolog, ou seja, o código <?xml version="1.0" encoding="UTF-8"?> é opcional, mas, se for colocado, deve ser posto logo no início.
• O valor dos atributos sempre deve possuir aspas. Ex. <note date="12/11/2007">, ficaria incorreto caso as aspas não fossem usadas, como a seguir <note date=12/11/2007>.
• Elementos vazio são tags sem conteúdo. Elementos vazio pode ser expressos de duas maneiras: 1. <element></element> ou 2. <element />.