Você está na página 1de 35

Java Server Faces

Jos e Dihego
IFBA Feira de Santana, Brasil

Web I, Abril de 2013

Cliente-Servidor
Deni c ao
Modelo computacional de comunica c ao em que os entes comunicantes s ao classicados como clientes ou servidores. Clientes enviam requisi c ao que s ao respondidas pelos servidores.

Modelo simplicado

Aplica co es

Aplica co es Web
Boa parte das aplica c oes Web usam o protocolo cliente/servidor Cliente (browser) requisita uma p agina e o servidor responde com arquivo (HTML,XHTML,...) que ser a exibido pelo browser P aginas podem ser:
est aticas: visualiza c ao e navega c ao por links din amicas: p agina se adapta as intera c oes com o usu ario, com estado mantido no servidor

JSF

Java Server Faces


Framework para o desenvolvimento de GUI (Graphical User Interface) voltadas a aplica c oes Web Servidor desenvolvido em Java um melhoramento de outras tecnologias como Java Servlets E e Java Server Pages (JSP)

JSF

Caracter sticas
Desenvolvimento centrado em componentes, independente da tecnologia do cliente (Firefox, IE, Opera,...) Simplica o acesso e gerenciamento dos dados fornecidos na GUI Gerencia automaticamente o estado da GUI entre diversos requests e diversos clientes Prov e uma serie de padr oes para o desenvolvimento Web (MVC,...)

JSF
Arquitetura
web.xml: arquivo de congura c oes (padr oes de URL: /faces/*, *.jsf) WEB-INF/faces-cong.xml: arquivo de congura c oes (acesso ao BD, seguran ca, ...) WEB-INF/lib: pasta contendo as bibliotecas necess arias ao projeto

JSF

Execu c ao
Precisamos de um servidor para fazer o deploy. Este servidor receber a as requisi c oes e as passar a para nossa aplica c ao JSF que enviar a a resposta como uma p agina HTML e esta ser a exibida no cliente (browser, por exemplo) GlassFish TomCat

Exemplo

<html xmlns=http://www.w3.org/1999/xhtml xmlns:h=http://java.sun.com/jsf/html xmlns:f=http://java.sun.com/jsf/core> <body> <h:form> <h2>A Simple JSF Page</h2> <h:inputText value=#{modelBean.username}/> <h:commandButton value=Click Here/> </h:form> </body> </html>

Exemplo - Arvore de componentes

Ciclo de Vida

JSF

MVC - Model, View, Control


Modelo: Cont em a l ogica de neg ocio, n ao cont em elementos de GUI Vis ao: Cont em os elementos de GUI Controle: trata as requisi c oes do usu ario, atualizando o modelo e direcionando ao cliente a vis ao apropriada

MVC

Sistema de Cadastro Simples

Sistema de cadastro

vis ao
cadastro.xhtml : p agina para digita c ao das informa c oes conrmacao.xhtml : p agina de conrma c ao dos dados sucesso.xhtml : p agina que indica sucesso no cadastro

modelo
Funcionario.java

P agina de Cadastro

cadastro.xhtml

<h2>Cadastro de Funcion arios</h2> <h4>Informe os dados abaixo</h4>

cadastro.xhtml

<table> <!-- ... --> </table>

cadastro.xhtml

<tr> <td>Nome</td> <td> <h:inputText id=nome value=#{funcionario.nome} required=true/> <h:message for=nome/> </td> </tr>

cadastro.xhtml

<tr> <td>Sexo</td> <td><h:selectOneRadio id=sexo value=#{funcionario.sexo} required=true> <f:selectItem itemLabel=Masculino itemValue=M/> <f:selectItem itemLabel=Feminino itemValue=F/> </h:selectOneRadio> <h:message for=sexo/> </td> </tr>

cadastro.xhtml

<tr> <td>Data Nascimento</td> <td><h:inputText id=dn value=#{funcionario.dataNascimento} required=true> <f:convertDateTime locale=pt BR timeZone=America/Bahia pattern=dd/MM/yyyy/> </h:inputText> <h:message for=dn/> </td> </tr>

cadastro.xhtml

<tr> <td>Email</td> <td> <h:inputText id=email value=#{funcionario.email} required=true validator=#{funcionario.validarEmail}/> <h:message for=email/> </td> </tr>

cadastro.xhtml

<tr> <td>Cargo</td> <td> <h:selectOneMenu id=cargo value=#{funcionario.cargo}> <f:selectItem itemLabel=Supervisor itemValue=sup/> <f:selectItem itemLabel=Estoquista itemValue=est/> <f:selectItem itemLabel=Secretaria itemValue=sec/> </h:selectOneMenu> </td> </tr>

cadastro.xhtml

<p><h:commandButton value=Conrmar action=conrmacao/></p>

conrma c ao.xhtml

conrma c ao.xhtml

<table> <tr> <td>Nome</td> <td> <h:outputText id=nome value=#{funcionario.nome}/> </td> </tr> <tr> <td>Sexo</td> <td><h:outputText id=sexo value=#{funcionario.sexo}/> </td> </tr> <!-- ... --> </table>

conrma c ao.xhtml

<p><h:commandButton value=Finalizar action=#{funcionario.adicionarFuncionario}/></p> <p><h:commandButton value=Voltar action=cadastro/></p>

sucesso.xhtml

sucesso.xhtml
<table> <tr> <td>Nome</td> <td> <h:outputText id=nome value=#{funcionario.nome}/> </td> </tr> <tr> <td>Sexo</td> <td><h:outputText id=sexo value=#{funcionario.sexo}/> </td> </tr> <tr> <td>Data Nascimento</td> <td><h:outputText id=dn value=#{funcionario.dataNascimento}/> </td> </tr> <!-- ... --> </table>

Funcionario.java

@ManagedBean @SessionScoped public class Funcionario { private String nome ; private String sexo ; private Date dataNascimento ; private String email ; private String cargo ; // ... }

Funcionario.java

public Funcionario (){ } public String getCargo () { return cargo ; } public void setCargo ( String cargo ) { this . cargo = cargo ; } public Date get DataNascimento () { return dataNascimento ; } public void set DataNascimento ( Date dataNascimento ) { this . dataNascimento = dataNascimento ;} // ...

Funcionario.java

<h:commandButton value=Finalizar action=#{funcionario.adicionarFuncionario}/>

public String a d i cionarFuncionario (){ boolean ok = true ; FacesMessage mensagem ; String paginaDestino ; if ( ok ){ mensagem = new FacesMessage ( " Sucesso na cadastro " ); paginaDestino = " sucesso " ;} else { mensagem = new FacesMessage ( " Falha no cadastro " ) ; paginaDestino = " cadastro " ;} FacesContext . getCurrentInstance (). addMessage ( null , mensagem ); return paginaDestino ; }

Funcionario.java

<h:inputText id=email value=#{funcionario.email} required=true validator=#{funcionario.validarEmail}/>

public void validarEmail ( FacesContext contexto , UIComponent elementoValidar , Object valorInformado ) throws ValidatorException { String valor = valorInformado . toString (); if (! valor . contains ( " @ " )){ FacesMessage m = new FacesMessage ( " Email inv a lido " ); throw new ValidatorException ( m ); } }

web.xml

<welcomelelist> <welcomele>faces/cadastro.xhtml</welcomele> </welcomelelist>

Exerc cio

Cadastro de Eventos
Seguindo o modelo apresentado no exemplo anterior, construa em JSF um sistema para cadastro de eventos: Um evento possui nome, data de realiza c ao, or camento dispon vel, tipo (musical, teatral, televisivo), n umero de expectadores esperados, gratuidade (sim ou n ao) e nome da empresa organizadora.

Refer encias

Ed Burns, Chris Schalk; Ed Burns; Chris Schalk JavaServer Faces 2.0, The Complete Reference. The McGraw-Hill Companies, 2010.