JSF – Hello World, AutoComplete

Olá, tudo bem?

Vamos tratar sobre um framework que tem sido uma mão na roda como “front end” para web: “JSF – Java Server Faces”.

Veremos aqui um tutorial do JSF 2.0 e ao final como fazer um “autocompletar” do eclipse. Lembro que, exceto pelo autocompletar ao final, esse exemplo pode ser feito em um bloco de notas.

Caso você tenha dúvidas de como criar um WebServer básico, você pode visitar esse link: Criando um WebServer. Existem também outros assuntos tratados para WebServer que você pode encontrar aqui: Tratando Exceções em uma Aplicação Web, Autenticação de Usuários (Filter/Servlet).

Vamos começar pelos downloads?

Vamos criar um novo projeto do tipo Dynamic Web Project já adicionando como servidor o Tomcat 6.0. Caso você tenha alguma dúvida de como instalar o container Tomcat você poderá ver o passo a passo aqui: Criando um WebServer. New Dynamic Project

Precisamos também copiar os arquivos “*.jar” que nós acabamos de baixar para dentro da pasta “WebContent/WEB-INF/lib”. Você irá encontrar os arquivos do JSF Mojarra dentro do arquivo que você baixou, pelo seguinte caminho “mojarra-2.0.3-FCS/lib”. Ao final teremos dentro da pasta “WebContent/WEB-INF/lib” três arquivos do tipo jar: “jsf-api.jar“, “jsf-impl.jar“, “jstl-1.2.jar“.

Vamos alterar o arquivo “web.xml”.

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
    version="2.5">
    <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>*.jsf</url-pattern>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
    <welcome-file-list>
        <welcome-file>faces/index.xhtml</welcome-file>
    </welcome-file-list>
</web-app>

Mesmo que não utilizemos o “faces-config.xml”, será necessária sua criação.

<?xml version="1.0"?>
<faces-config 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-facesconfig_2_0.xsd"

   version="2.0">
  <!--  
      Let's keep it empty. In JSF 2.0 we use annotations. 
  -->
</faces-config>

Vamos criar a classe Java que funcionará como nosso controlador. Nela iremos colocar uma mensagem de boas vindas. Em uma aplicação de grande porte, poderia ser o nome do usuário, alguma mensagem do banco de dados, etc. Nossa classe será colocada em um pacote chamado “com” e terá o nome de “Hello”:

package com;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean
@RequestScoped
public class Hello {
    
    private final String youAreWelcome = "You finished a simple hello world. Let's navigate?";

    public String getYouAreWelcome() {
        return youAreWelcome;
    }    
}

E por último vamos criar uma página chamada “WebContent/index.xhtml”:

<!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:h="http://java.sun.com/jsf/html">
    
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />        
        <title>Hellow World JSF 2.0</title>
    </h:head>
    
    
    <h:body>
            <h:form>
                    <h:outputText value="#{hello.youAreWelcome}"/>
            </h:form>
    </h:body>
</html>

Atenção, nossa página tem que ficar dentro da pasta WebContent.

Após adicionar nosso sistema ao Tomcat, basta iniciá-lo para acessar nosso programa pelo link: “http://localhost:8080/ProjectJSF/index.jsf”. Caso você tenha alguma dúvida de como manejar o Tomcat, visite esse link: Criando um WebServer. Eu estou fazendo o passo a passo enquanto escrevo esse tutorial, então caso você não tenha conseguido visualizar a página inicial, volte e revise seu código.

E por último, vamos simular uma navegação? Vamos realizar uma soma simples, iremos alterar nossa classe “Hello” adicionando dois números onde iremos realizar uma soma. Outro campo irá registrar o nome do usuário:

package com;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean
@RequestScoped
public class Hello {
    private String userName;
    private int valueA;
    private int valueB;
    private int total;

    private final String youAreWelcome = "You finished a simple hello world. Let's navigate?";

    public String getYouAreWelcome() {
        return youAreWelcome;
    }
    
    public String mathIt(){
        total = valueA + valueB;
        
        return "result.xhtml";
    }
    
    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public int getValueA() {
        return valueA;
    }

    public void setValueA(int valueA) {
        this.valueA = valueA;
    }

    public int getValueB() {
        return valueB;
    }

    public void setValueB(int valueB) {
        this.valueB = valueB;
    }

    public void setTotal(int total) {
        this.total = total;
    }

    public int getTotal() {
        return total;
    }    
}

Precisamos também alterar nossa JSP inicial “index.xhtml”:

<!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:h="http://java.sun.com/jsf/html">
    
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />        
        <title>Hellow World JSF 2.0</title>
    </h:head>
    
    
    <h:body>
            <h:form>
                <h:outputText value="#{hello.youAreWelcome}"/><br/>
                Your Name: <h:inputText id="userName" value="#{hello.userName}"/><br/>
                First Value: <h:inputText id="valueA" value="#{hello.valueA}"/><br/>
                Second Value: <h:inputText id="valueB" value="#{hello.valueB}"/><br/>
                  <h:commandButton value="Math It" title="Math It" action="#{hello.mathIt}"/>                
            </h:form>
    </h:body>
</html>

E vamos criar uma página para exibir nosso resultado “result.xhtml” (que deve ficar dentro da pasta WebContent).

<!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:h="http://java.sun.com/jsf/html">
    
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />        
        <title>Hellow World JSF 2.0</title>
    </h:head>
        
    <h:body>
        <h:form>
            Thanks for passing by: <h:outputText value="#{hello.userName}"/><br/>
            Total: <h:outputText value="#{hello.total}"/>
        </h:form>
    </h:body>
</html>

Acessando novamente a página inicial veremos que a navegação está pronta. “http://localhost:8080/ProjectJSF/index.jsf

Um recurso que pesa muito é o “autocompletar”. E enquanto criava esse artigo eu notei que pelo fato do JSF utilizar o tipo de arquivo “xhtml” o eclipse não ativou o autocompletar. Achei diversas soluções que funcionavam para uns e não para outros. Encontrei uma bem simples que funcionou em diversos lugares que testei. Clique botão direito em cima do projeto e vá em “Properties > Project Facets”.Project properties Project Facetes Marque a opção JavaServer Faces, e pronto. Pode ir para a página index ou result que você já terá seu autocompletar funcionando. Project Facetes Autocompletar

Nos próximos posts sobre JSF iremos ver Ajax, validações, PrimeFaces, etc. O assunto é longo.

Espero que o post de hoje possa ter lhe ajudado.

Qualquer coisa, poste sua dúvida/comentário que irei responder.

Até a próxima.

10 thoughts on “JSF – Hello World, AutoComplete

  1. Olá,

    estou tendo um problema na hora de alterar no Eclipse Helio -Project Facets – ao clicar no item JavaServer faces 2.0 apareceu a mensagem Further configuration required …o que fazer ??

    • Olá Paulo, obrigado pela visita.

      Realmente não tenho como te ajudar nesse erro pois a mensagem está muito estranha e “abstrata”.

      Você poderia coloca sua dúvida no http://www.guj.com.br. O pessoal lá ajuda muito.

      Até a próxima e obrigado pela visita.

    • Paulo provavelmente vc já resolveu esse problema, mas para outros q venham aqui e acabem enfrentando o mesmo problema q aconteceu com vc e comigo também eu resolvi da seguinte forma: quando vc clica no Further tem la entre as opções quando vc coloca pra buscar as libs o ícone de um pequeno disquete, vc clica ali e o eclipse já faz o download das libs necessárias para o autocomplete pra vc, comigo resolveu o problema.

  2. Muito bom! Eu tive o memso problema que o Paulo. O caso é que criei as bibliotecas no Java Build Path para mojarra e jstl, mas não importei direito as libs. Copiei e colei elas pelo eclipse na pasta libs apenas, e esse erro ocorreu por isso. Clique no Further configuration required e marque as biliotecas criadas para usar as libs no projeto.
    Aqui usei:
    -jstl.rar (para jstl)
    -standart.jar
    -jsf-api.rar (para mojarra)
    -jsf.impl.rar

    Abraços!

  3. Olá! Estou com problema quando copio os arquivos “jsf-api.jar“ e “jsf-impl.jar“ para WebContent/WEB-INF/lib.

    Ocorre o seguinte erro:
    java.lang.IllegalStateException: O aplicativo não foi iniciado corretamente na inicialização. Não foi possível encontrar Fábrica: javax.faces.application.ApplicationFactory

    Poderiam me ajudar?

    • Olá Laila, boa tarde.

      Não se te falar algo sobre esse erro, tem pouca informação.

      Qualquer coisa, baixe a aplicação completa que existe aqui no blog.

      Desculpe não poder te ajudar com uma resposta pontual.

      Até mais.

Leave a Comment