31 de outubro de 2010

JavaEE 5: CRUD em páginas com PrimeFaces 1.1

Esta postagem não difere muito desta: CRUD em JSF, o que difere é que teremos um pouco mais que um HTML puro como visualização, estaremos utilizando o PrimeFaces para criar a tabela com paginação e ter o inserir, alterar e remover dentro de painéis. Então, inicialmente a diferença do link acima é que nesta postagem estaremos utilizando valores como: double e java.util.Date, para mostrar que quando se trata de JSF não há necessidade de converter esses valores (no caso de view para controle) apenas na hora de armazenar no banco de dados é necessário converter o java.util.Date para java.sql.Date e vice-versa.

Iniciando...
Como estamos adicionando um valor(double) e uma data(java.util.Date) na nossa aplicação, segue o código SQL atualizado:
CREATE TABLE Categoria (
  `codigo` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `nome` varchar(45) DEFAULT NULL,
  `valor` double DEFAULT NULL,
  `data` date DEFAULT NULL,
  PRIMARY KEY (`codigo`)
)
Eu criei essa tabela dentro de uma database "tads", caso não seja essa a sua, lembre-se de informar isso ao criar a conexão ;)

Estrutura geral da aplicação:

Crie um JSF Project com o nome de Prime, seguindo a estrutura crie os pacotes: control, dao e model (lembre-se de adicionar o connector do MySQL a aplicação, ensinado nas postagens anteriores). Segue os códigos das classes que foram atualizados: Categoria.java, Categoria_DAO.java :
model
Categoria.java:
public class Categoria {

    private int codigo;
    private String nome;
    private double valor;
    private Date data;
    
    public int getCodigo() {
        return codigo;
    }
    public void setCodigo(int codigo) {
        this.codigo = codigo;
    }
    public String getNome() {
        return nome;
    }
    public void setNome(String nome) {
        this.nome = nome;
    }
    public double getValor() {
        return valor;
    }
    public void setValor(double valor) {
        this.valor = valor;
    }
    public Date getData() {
        return data;
    }
    public void setData(Date data) {
        this.data = data;
    }
    
}

dao
Categoria_DAO.java:
public class Categoria_DAO {
    
    public String inserir(Categoria categoria){
        String retorno = "falha";
        Conexao conn = new Conexao();
        try{
            Date dataSql = new Date(categoria.getData().getTime());
            
            Statement stmt = (Statement) conn.getConn().createStatement();
            stmt.execute("insert into Categoria (nome, valor, data) values ('"+categoria.getNome()+"','"+categoria.getValor()+"','"+dataSql+"')");
            retorno =  "sucesso";
        }catch(Exception e){  
            e.printStackTrace();
        }finally {
            conn.fecharConexao();
        }
        
        return retorno;
    }
    
    public List<Categoria> listar(){
        List<Categoria> categorias = new ArrayList<Categoria>();
        Conexao conn = new Conexao();
        try{
            
            Statement stmt = (Statement) conn.getConn().createStatement();
            ResultSet rs = stmt.executeQuery("Select * from Categoria");
            while(rs.next()){
                Categoria categoria = new Categoria();
                categoria.setCodigo(rs.getInt("codigo"));
                categoria.setNome(rs.getString("nome"));
                categoria.setValor(rs.getDouble("valor"));
                categoria.setData(new SimpleDateFormat("yyyy-MM-dd").parse(rs.getString("data")));
                categorias.add(categoria);
            }
        }catch(Exception e){  
            e.printStackTrace();
        }finally {
            conn.fecharConexao();
        }
        
        return categorias;
    }
    
    public Categoria selecionar(int codigo){
        Categoria categoria = new Categoria();
        Conexao conn = new Conexao();
        try{
            Statement stmt = (Statement) conn.getConn().createStatement();
            ResultSet rs = stmt.executeQuery("Select * from Categoria where codigo = '"+codigo+"'");
            rs.next();
                categoria.setCodigo(rs.getInt("codigo"));
                categoria.setNome(rs.getString("nome"));
                categoria.setValor(rs.getDouble("valor"));
                categoria.setData(new SimpleDateFormat("yyyy-MM-dd").parse(rs.getString("data")));
        }catch(Exception e){  
            e.printStackTrace();
        }finally {
            conn.fecharConexao();
        }
        
        return categoria;
    }
    
    public String alterar(Categoria categoria){
        String retorno = "falha";
        Conexao conn = new Conexao();
        try{
            Date dataSql = new Date(categoria.getData().getTime());
            
            Statement stmt = (Statement) conn.getConn().createStatement();
            stmt.execute("update Categoria set nome = '"+categoria.getNome()+"', " +
                    "valor = '"+categoria.getValor()+"', data = '"+dataSql+"' " +
                            " where codigo = '"+categoria.getCodigo()+"'");
            retorno =  "sucesso";
        }catch(Exception e){  
            e.printStackTrace();
        }finally {
            conn.fecharConexao();
        }
        
        return retorno;
    }
    
    public String remover(int codigo){
        String retorno = "falha";
        Conexao conn = new Conexao();
        try{
            Statement stmt = (Statement) conn.getConn().createStatement();
            stmt.execute("delete from Categoria where codigo = '"+codigo+"'");
            retorno =  "sucesso";
        }catch(Exception e){  
            e.printStackTrace();
        }finally {
            conn.fecharConexao();
        }
        
        return retorno;
    }
}

Quanto as outras classes (CategoriaBean) continuam do mesmo jeito que no CRUD em JSF.
Agora o que muda também são nossos JSP's, para configurar o PrimeFaces 1.1: Clique aqui
Depois de configurado podemos começar a implementação dos nossos JSP's:
index.jsp:



Código-Fonte:
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://primefaces.prime.com.tr/ui" prefix="p"%>

<html>
<f:view>
    <head>
    <title>Categorias</title>
    <p:resources />
    </head>
    <body>
    <h:form>
        <p:commandButton value="Nova" action="#{categoriaBean.nova}"
            ajax="false" />

        <p:dataTable value="#{categoriaBean.categorias}" var="c"
            paginator="true" rows="5" emptyMessage="Categorias não encontradas!">
            <p:column>
                <f:facet name="header">
                    <h:outputText value="Codigo" />
                </f:facet>
                <h:outputText value="#{c.codigo}" />
            </p:column>
            <p:column filterBy="#{c.nome}">
                <f:facet name="header">
                    <h:outputText value="Nome" />
                </f:facet>
                <h:outputText value="#{c.nome}" />
            </p:column>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="Valor" />
                </f:facet>
                <h:outputText value="#{c.valor}" />
            </p:column>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="Data" />
                </f:facet>
                <h:outputText value="#{c.data}">
                    <f:convertDateTime pattern="dd/MM/yyyy" />
                </h:outputText>
            </p:column>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="Ações" />
                </f:facet>
                <h:commandButton value="Editar"
                    actionListener="#{categoriaBean.selecionar(c.codigo)}"
                    action="alterar" image="/imagens/editar.png" />
                <h:commandButton value="Remover"
                    actionListener="#{categoriaBean.selecionar(c.codigo)}"
                    action="remover" image="/imagens/remover.png" />
            </p:column>
        </p:dataTable>
    </h:form>
    </body>
</f:view>
</html>

inserirCategoria.jsp:

Código-Fonte:
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://primefaces.prime.com.tr/ui" prefix="p" %>
<html>
<f:view>
    <head>
        <title>Inserir Categoria</title>
        <p:resources />
    </head>
    <body>
        <p:growl id="aviso" />
    
        <p:panel header="Inserir Categoria" style="width: 320px" >
            <h:form>
                <h:panelGrid columns="2">
                    <h:outputText value="Nome" />
                    <h:inputText value="#{categoriaBean.categoria.nome}" required="true" requiredMessage="Informe o nome" />
                    <h:outputText value="Valor" />
                    <h:inputText value="#{categoriaBean.categoria.valor}" required="true" requiredMessage="Informe o valor" />
                    <h:outputText value="Data" />
                    <p:calendar value="#{categoriaBean.categoria.data}" pattern="dd/MM/yyyy" locale="pt_BR" required="true" requiredMessage="Informe a data" />
                    <p:commandButton value="Salvar" action="#{categoriaBean.inserir}" update="aviso" ajax="false" />
                    <p:commandButton value="Cancelar" action="cancelar" immediate="true" ajax="false" />
                </h:panelGrid>
            </h:form>
        </p:panel>
    </body>
</f:view>    
</html>  

alterarCategoria.jsp
O alterarCategoria é praticamente idêntico ao inserirCategoria, o que muda é o botão de Salvar pois a action passa a ser #{categoriaBean.alterar}, mas mesmo assim segue o código:
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://primefaces.prime.com.tr/ui" prefix="p" %>
<html>
<f:view>
    <head>
        <title>Alterar Categoria</title>
        <p:resources />
    </head>
    <body>
        <p:growl id="aviso" />
    
        <p:panel header="Alterar Categoria" style="width: 320px" >
            <h:form>
                <h:panelGrid columns="2">
                    <h:outputText value="Nome" />
                    <h:inputText value="#{categoriaBean.categoria.nome}" required="true" requiredMessage="Informe o nome" />
                    <h:outputText value="Valor" />
                    <h:inputText value="#{categoriaBean.categoria.valor}" required="true" requiredMessage="Informe o valor" />
                    <h:outputText value="Data" />
                    <p:calendar value="#{categoriaBean.categoria.data}" pattern="dd/MM/yyyy" locale="pt_BR" required="true" requiredMessage="Informe a data" />
                    <p:commandButton value="Salvar" action="#{categoriaBean.alterar}" update="aviso" ajax="false" />
                    <p:commandButton value="Cancelar" action="cancelar" immediate="true" ajax="false" />
                </h:panelGrid>
            </h:form>
        </p:panel>
    </body>
</f:view>    
</html>  

removerCategoria.jsp

Código-Fonte:
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://primefaces.prime.com.tr/ui" prefix="p" %>
<html>
<f:view>
    <head>
        <title>Remover Categoria</title>
        <p:resources />
    </head>
    <body>
            <p:panel header="Remover Categoria" style="width: 400px" >
            <h:form>
                <h:outputText value="Confirma remoção da categoria: #{categoriaBean.categoria.nome} ?" />
                <h:panelGrid columns="2">
                    <p:commandButton value="Sim" action="#{categoriaBean.remover}" ajax="false" />
                    <p:commandButton value="Não" action="cancelar" immediate="true" ajax="false" />
                </h:panelGrid>
            </h:form>
        </p:panel>
    </body>
</f:view>    
</html>  

Para finalizar, o faces-config.xml deve ter essa estrutura de navegação:

24 de outubro de 2010

JavaEE 5: Configuração do PrimeFaces em páginas JSP

Informações: JSF 1.2, PrimeFaces 1.1: Clique para baixar o PrimeFaces 1.1

Porque não utilizar a versão que está no site do PrimeFaces?
Pois a versão que está no site para baixar é para o JSF 2.0, causando assim uma incompatibilidade de versões, atualmente a versão mais atualizada para o JSF 1.2, realmente é a 1.1.

Configurando..
Nessa configuração estou levando em consideração que já tenha um JSF Project criado, caso não saiba como criar: Clique aqui...
Depois de baixar o .jar do PrimeFaces, coloque o mesmo dentro da pasta lib em WebContent - WEB-INF - lib.
Para utilizar o PrimaFaces é necessário configurar a servlet do mesmo no web.xml, então neste insira o seguinte código:
  <servlet>
   <servlet-name>Resource Servlet</servlet-name>
   <servlet-class>org.primefaces.resource.ResourceServlet</servlet-class>
  </servlet>
  <servlet-mapping>
   <servlet-name>Resource Servlet</servlet-name>
   <url-pattern>/primefaces_resource/*</url-pattern>
  </servlet-mapping> 

Agora dentro do WebContent crie um JSP File com o nome que desejar. Para que o PrimeFaces funcione corretamente, é necessário adicionar a seguinte tagLib:
<%@ taglib uri="http://primefaces.prime.com.tr/ui" prefix="p" %>

Além da tagLib é necessário ter outra configuração básica:
<head>
    <p:resources />
</head>

Enfim... uma página JSP precisa ter a seguinte estrutura para funcionar corretamente:
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://primefaces.prime.com.tr/ui" prefix="p" %>

<html>
<f:view>
    <head>
        <p:resources />
    </head>
    <body>
        
    </body>
</f:view>    
</html>  

Para testar se está tudo funcionando, faça um teste com algum componente do PrimeFaces, por exemplo p:editor. Então, a partir da estrutura acima, coloque o seguinte codigo dentro das tags body e /body
<p:editor />

Resultado no navegador:


Caso não apareça este componente, reveja as configurações, pois pode estar faltando alguma coisa. ;)


Links:
http://www.primefaces.org/

Componentes do PrimeFaces (Obs: alguns componentes mostrados podem não conferir com a versão utilizada nesta postagem)
http://www.primefaces.org/showcase/ui/home.jsf

18 de outubro de 2010

JavaEE 5: CRUD em JSF 1.2

Na postagem de hoje iremos fazer um CRUD - uma aplicação simples com as seguintes operações: Create(criar ou inserir), Retrieve(recuperar ou listar), Update(atualizar) e Delete(remover). Antes de começar vamos refrescar a memória: JavaServer Faces ...

Criando o projeto
No Eclipse crie um novo 'JSF Project' como no link acima e coloque o nome de ProjetoJsf. Segue a estrutura do projeto:

 
Nesse post não iremos implementar os pacotes model e dao, estes serão reutilizados das postagens anteriores: Parte I e Parte II, de acordo com esses links implemente as classes: Categoria.java, Conexao.java e Categoria_DAO.java, quanto a essa última classe, ela está implementada em partes nas duas postagens, então garanta que ela tenha os seguintes métodos: inserir, listar, selecionar, alterar e remover
Depois de feito isso, vamos criar nosso pacote  control onde guardamos nossos beans. Nesse caso teremos apenas um bean chamado CategoriaBean.java, a implentação desse bean é o seguinte:
public class CategoriaBean {
    //Atributos
    private Categoria categoria = new Categoria();
    private List<Categoria> categorias;

    //Métodos
    public String nova(){
        categoria = new Categoria();
        
        return "inserir";
    }
    
    public String inserir(){
        Categoria_DAO dao = new Categoria_DAO();
        return dao.inserir(categoria);
    }
    
    public void selecionar(int codigo){
        Categoria_DAO dao = new Categoria_DAO();
        categoria = dao.selecionar(codigo);
    }
    
    public String alterar(){
        Categoria_DAO dao = new Categoria_DAO();
        return dao.alterar(categoria);
    }
    
    public String remover(){
        Categoria_DAO dao = new Categoria_DAO();
        return dao.remover(categoria.getCodigo());
    }
    
    //Getters e Setters
    
    public Categoria getCategoria() {
        return categoria;
    }

    public void setCategoria(Categoria categoria) {
        this.categoria = categoria;
    }

    public List<Categoria> getCategorias() {
        Categoria_DAO dao = new Categoria_DAO();
        categorias = dao.listar();
        return categorias;
    }

    public void setCategorias(List<Categoria> categorias) {
        this.categorias = categorias;
    }
    
}

Alguns métodos são claros, criam uma Categoria_DAO e chamam suas operações correspondentes. Perceba que não há passagem do objeto Categoria por parâmetro nos métodos do bean, pois através dos getter's e setter's eles são teoricamente "injetados" dentro do bean ao dar um submit em um form de uma página JSF (talvez isso não tenha ficado muito claro, mas vou tentar esclarecer no decorrer da implementação).
Depois de implementar o bean, vamos mapeá-los no faces-config.xml com escopo de sessão:
<managed-bean>
  <managed-bean-name>categoriaBean</managed-bean-name>
  <managed-bean-class>control.CategoriaBean</managed-bean-class>
  <managed-bean-scope>session</managed-bean-scope>
 </managed-bean>

Dentro do WebContent crie as seguintes JSP's com o template de JSFBasePage:
* inserirCategoria.jsp
* categorias.jsp
* alterarCategoria.jsp
* removerCategoria.jsp
* falha.jsp
Por enquanto podem ser vazios mesmo, no faces-config.xml, faça o seguinte diagraḿa, onde alguns redirecionamentos dependem do que o bean retornar (explicado em sala de aula):


Segue agora apenas os códigos dos JSF's:
inserirCategoria.jsp
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<html>
    <head>
        <title>Inserir Categoria</title>
    </head>
    <body>
        <f:view>
            <h:form>
            <h:panelGrid columns="3">
                <h:outputText value="Nome" />
                <h:inputText value="#{categoriaBean.categoria.nome}" required="true" requiredMessage="Informe o nome" id="nome" />
                <h:message for="nome" style="color: red;" />
                <h:commandButton value="Salvar" action="#{categoriaBean.inserir}" />
                <h:commandButton value="Cancelar" action="cancelar" immediate="true" />
            </h:panelGrid>    
            
            </h:form>
            
        </f:view>
    </body>    
</html>  

categorias.jsp
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<html>
    <head>
        <title>Categorias</title>
    </head>
    <body>
        <f:view>
            <h:form>
                <h:commandButton value="Nova" action="#{categoriaBean.nova}" />
            </h:form>
            
            <h:dataTable value="#{categoriaBean.categorias}" var="c"  >
                <h:column>
                    <f:facet name="header"><h:outputText value="Codigo" /></f:facet>
                    <h:outputText value="#{c.codigo}" />
                </h:column>
                <h:column>
                    <f:facet name="header"><h:outputText value="Nome" /></f:facet>
                    <h:outputText value="#{c.nome}" />
                </h:column>
                <h:column>
                    <f:facet name="header"><h:outputText value="Ações" /></f:facet>
                    <h:form>
                        <h:commandButton value="Alterar" actionListener="#{categoriaBean.selecionar(c.codigo)}" action="alterar" />
                        <h:commandButton value="Remover" actionListener="#{categoriaBean.selecionar(c.codigo)}" action="remover" />
                    </h:form>
                </h:column>
            </h:dataTable>
            
        </f:view>
    </body>    
</html>  

alterarCategoria.jsp
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<html>
    <head>
        <title>Alterar Categoria</title>
    </head>
    <body>
        <f:view>
            <h:form>
            <h:panelGrid columns="3">
                <h:outputText value="Nome" />
                <h:inputText value="#{categoriaBean.categoria.nome}" required="true" requiredMessage="Informe o nome" id="nome" />
                <h:message for="nome" style="color: red;" />
                <h:commandButton value="Salvar" action="#{categoriaBean.alterar}" />
                <h:commandButton value="Cancelar" action="cancelar" immediate="true" />
            </h:panelGrid>    
            </h:form>
        </f:view>
    </body>    
</html>  

removerCategoria.jsp
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<html>
    <head>
        <title>Remover Categoria</title>
    </head>
    <body>
        <f:view>
            <h:outputText value="Confirma a remoção da categoria: #{categoriaBean.categoria.nome} ?" />
            <h:form> 
                <h:commandButton value="Sim" action="#{categoriaBean.remover}" />
                <h:commandButton value="Não" action="cancelar" immediate="true" />
            </h:form>
        </f:view>
    </body>    
</html>  

falha.jsp
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<html>
    <head>
        <title></title>
    </head>
    <body>
        <f:view>
            <h:outputText value="Ocorreu um erro..." />
        </f:view>
    </body>    
</html>  

Até a próxima! =)

Baixar projeto

5 de outubro de 2010

JavaEE 5: JavaServer Faces 1.2

JavaServer Faces... o que é?
É um framework MVC para o desenvolvimento de aplicações Web criado pela Sun, que permite o desenvolvimento de aplicações para a internet de forma visual, ou seja, arrastando e soltando os componentes na tela (em páginas JSP, quando utilizado sem outros frameworks, por exemplo: JBoss Seam), definindo as propriedades dos mesmos. (Wikipédia)
Atualmente está  na versão 2.0, porém trabalharemos com a versão anterior: 1.2.

Iniciando...
Tendo todo o Eclipse configurado de acordo com as primeiras aulas, vamos criar um Projeto JSF. Para isso, no Eclipse, vá em: File - New - JSF Project, coloque o nome de HelloJsf.

 A estrutura final do projeto será esta:


Vamos começar a montar esta estrutura. Primeiramente crie um pacote chamado control dentro de JavaSource, nele vamos guardar nossos beans... mas o que são beans?(não, não são feijões!) ... Beans no JEE5 não está bem definido, então podemos dizer que estes são: classes que armazenam e retornam valores (com getters e setters), mas podem ter outras definições também.
Então, vamos criar uma classe chamada Teste.java, esta será um bean!
Teste.java:
public class Teste {

    public String texto = "Ola mundooo";

    public String getTexto() {
        return texto;
    }

    public void setTexto(String texto) {
        this.texto = texto;
    }    
}

Esse bean será acessado em nossa página JSP, mas como isso vai ocorrer? Bom... se olharem a imagem da estrutura (acima) verão que dentro do webContent - WEB-INF temos um arquivo faces-config.xml, neste arquivo nossos beans são mapeados para poderem ser "enxergados" pela nossa JSP.
Então... o código do nosso faces-config.xml vai ficar da seguinte forma:
<?xml version="1.0" encoding="UTF-8"?>
<faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee"
 xmlns:xi="http://www.w3.org/2001/XInclude"
 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_1_2.xsd">
 
 <managed-bean>
  <managed-bean-name>teste</managed-bean-name>
  <managed-bean-class>control.Teste</managed-bean-class>
  <managed-bean-scope>session</managed-bean-scope>
 </managed-bean>
</faces-config>
Explicando...
managed-bean-name: nome de acesso no JSP.
managed-bean-class: localização da classe, [pacote.classe]
managed-bean-scope: escopo deste bean.

Os escopos podem ser: 
request: o bean sobrevive apenas durante a chamada de um método, depois de executado o mesmo "morre" (menor tempo de vida de um bean).
session: o bean sobrevive durante toda a sessão, por exemplo: quando se faz um login e se quer armazenar os dados de um usuário, este escopo dura mais que um request e menos que um application.
application: o bean sobrevive enquanto a aplicação estiver ativa, ou seja, tempo de vida de um bean com escopo application é maior que um bean com escopo de session.

Continuando...
Depois de termos mapeado nosso bean Teste, vamos criar no webContent uma página JSP (JSP File) coloque o nome de resultado.jsp e selecione a opção de Template: JSFBasePage, para que esta já venha com as taglibs do JSF.
Informe o seguinte código:
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <f:view>
            <h:outputText value="#{teste.texto}" />            
        </f:view>
    </body>    
</html>  
Bom... toda a sintaxe será explicada com a partir do código da próxima página que será feita.
O resultado desta página será apenas um texto que foi inicializado no nosso bean, neste caso será um: "Ola mundooo".
Então vamos continuar criando uma nova página JSP, da mesma forma que a página anterior, mas com o nome de index.jsp
Nosso index.jsp irá ficar com o seguinte código:
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <f:view>
            <h:form>
                <h:outputText value="nome" />
                <h:inputText value="#{teste.texto}" />
                <h:commandButton value="Enviar" action="salvar" />
            </h:form>
        </f:view>
    </body>    
</html>  
Veja que as tags do JSF são diferentes das tags HTML, para utilizar daquelas é necessário informar as taglibs do JSF que são as duas primeiras linhas do código acima. a tag h:outputText é uma forma de inserir um texto na página, h:inputText é um campo de texto e o h:commandButton é um botão. Perceba que como value do h:inputText estamos setando o seguinte valor: #{teste.texto}
O resultado desta página no navegador é a seguinte:


Analise o código em negrito:
#{teste.texto} é utilizada para acessarmos nossos beans...
#{teste.texto} é nosso bean mapeado no faces-config.xml
#{teste.texto} é nossa String do bean teste, este valor se referencia tanto ao set como ao get, por isso é apenas texto e não getTexto() e setTexto().

Agora analisando o h:commandButton:
a action é o que nosso botão vai executar, neste caso, ele não estará executando nenhum método do nosso bean, apenas estará submetendo o h:form que setará o valor do texto no bean, e redirecionará para a página resultado.jsp.
Como isso será feito? Chamamos isso de navegação ou pageflow. Mapeamos esta navegação no faces-config.xml (isto mesmo, no mesmo arquivo em que são mapeados nossos beans), essa navegação pode ser feita tanto por código como de forma visual.
Código a ser adicionado no faces-config.xml (adicionar logo depois do mapeamento do bean, mas ainda dentro da tag que fecha o faces-config)
<?xml version="1.0" encoding="UTF-8"?>
<faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee"
 xmlns:xi="http://www.w3.org/2001/XInclude"
 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_1_2.xsd">
 
 <!-- Aqui fica nosso bean teste mapeado -->
 
 <navigation-rule>
  <from-view-id>/index.jsp</from-view-id>
  <navigation-case>
   <from-outcome>salvar</from-outcome>
   <to-view-id>/resultado.jsp</to-view-id>
  </navigation-case>
 </navigation-rule>
</faces-config>
Entendendo a lógica da navegação pelo código:
from-view-id: vamos dizer que esta é a nossa página de partida.
navigation-case: seria onde ficariam as respostas do que a view index.jsp poderá retornar a partir da propriedade action do h:commandButton.
from-outcome: é a resposta da action. Caso esta action fosse a chamada de um método, ele levaria em consideração o return do método. Mas neste exemplo estamos dando uma resposta diretamente que é "salvar".
to-view-id: é pra onde deve redirecionar a página caso a resposta seja "salvar".

Ou... visualmente:

Explicando a numeração da imagem:
1. Serve para criar uma view, para isso, clique na "folhinha" e clique na área de criação do diagrama, ao fazer isso, ele dá a opção de procurar onde a página jsp se encontra, selecione a mesma e clique em finish. Faça isso para as duas páginas (index.jsp e resultado.jsp).
2. Serve para criar a navegação entre elas, para isso, clique na "setinha preta" e clique primeiramente na index.jsp (pois é de onde irá partir nossa resposta) e logo depois clique em resultado.jsp. Ao fazer isso, ele criará a navegação tendo como padrão o nome da página para onde será redirecionado (neste caso a resposta por padrão é: resultado), para alterar a resposta, clique duas vezes em cima da palavra "resultado", assim abrirá uma janela com as configurações da navegação, apenas altere a propriedade "From Outcome" para "salvar" que é a resposta que será dada pela index.jsp na action do h:commandButton.

Para testar a aplicação, acesse: http://localhost:8080/HelloJsf/index.jsf
Isso mesmo, é .jsf ... pois na configuração padrão do web.xml de um JSF Project é .jsf, caso deseje trocar a extensão, procure a linha que se referencia a: url-pattern no web.xml!

Assim finalizamos um simples exemplo de uma aplicação em JSF, mas pode ter certeza: o melhor do JSF ainda está por vir! ;-)

Referências


JavaServer Faces API
http://download.oracle.com/docs/cd/E17802_01/j2ee/javaee/javaserverfaces/1.2_MR1/docs/tlddocs/index.html

Primefaces: Componentes JSF
http://www.primefaces.org/