Java Server Faces Itamir de Morais Barroca Filho Mario V. Andrade de Melo Neto.

Java Server Faces

Itamir de Morais Barroca Filho

Mario V. Andrade de Melo Neto

Conteúdo

MVC O que é JSF? Instalando o JSF Serviços JSF Rendering Navegação de Páginas Managed-Bean JSF Expression Language Tratamento de Eventos Tags JSF Data tables Componentes MyFaces

MVC – Model-View-Controller

Programação orientada a objetos Padrão de Projeto que possui as

características: Divisão de responsabilidades; Separação de camadas; Reusabilidade; Três camadas: modelo, visualização e controle.

MVC – Model-View-ControllerCamada de Apresentação

JSP, Swing, SWT

Camada de AplicaçãoFaçades, Bussines Delegates, Actions

Camada de DomínioObjetos de domínio, lógica de negócio

Camada de PersistênciaDAOs, JDBC, Hibernate

Java Server Faces

Framework MVC que permite: Manipulação de eventos Implementação flexível de controladores

Chamada de métodos controladores diretamente a partir da visualização.

Independente de visualização Pode-se utilizar JSF para gerar views que não sejam

HTML Framework padrão JEE (Java Enterprise Edition)

Instalando o Java Server Faces

Para utilização do JSF em um projeto é necessário: Copiar os JARs para a pasta WEB-INF/lib:

jsf-api.jar jsf-impl.jar libs comons JSTL libs

Criar um arquivo de configuração: faces-config.xml

Instalando o Java Server Faces

Para utilização do JSF em um projeto é necessário: Definir no web.xml:

<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>

Serviços JSF

Arquitetura MVC JSF conecta view e model Uma view pode ser conectado diretamente ao

modelo<h:inputTextvalue="#{user.name}"/>

JSF opera como controller quando faz com que o clique de um botão invoque um método no lado servidor

<h:commandButton value="Login" action="#{user.check}"/>

Serviços JSF

Conversão de Dados Usuários entram dados em formato String Objetos de negócio necessitam de Strings, inteiros,

decimais e datas JSF faz a conversão automática dos dados

Validação e Tratamento de Erros JSF torna fácil a inclusão de validações como: “valor

requerido”, “valor deve ser inteiro” Ao entrar com dados inválidos, faz-se necessário mostrar

os dados errados JSF trata da maior parte da tarefa tediosa de converter

dados e validar/tratar erros

Serviços JSF

Componentes Customizados Desenvolvedores podem desenvolver

componentes sofisticados e podem utilizar arrastando para as páginas

Exemplo:<acme:calendar

value="#{flight.departure}" startOfWeek="Mon"/>

Serviços JSF

Renders Alternativos Por default, o componente é gerado para HTML Mas, é fácil estender o framework JSF para gerar

outras saídas: XML, WML, etc. Suporte a ferramentas

JSF é ideal para ser utilizado em IDEs Estilo drag-and-drop

Serviços JSF

Fluxo Geral

Rendering

<h:form>

Nome: <h:inputText/>

Telefone: <h:inputText/>

<h:commandButton/>

</h:form>

Rendering

Todo o texto que não é JSF tag é simplesmente passado adiante

As tags h:form, h:inputText, h:inputSecret são convertidas para HTML Cada uma das tags é associada com um

determinado componente Cada classe tem um renderer que gera a saída

(HTML por padrão) O processo de gerar saída da árvore de

componentes gráficos é chamado encode

Navegação de Páginas

A navegação de páginas em JSF é baseado em regras de navegação Navegação Estáticas

Apenas um link estaticamente definido Navegações Dinâmicas

O link é dinamicamente descoberto


index.jspindex.jsp

listar.jsplistar.jsp cadastrar.jspcadastrar.jsp

index

listar cadastrar

index

listar


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

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

<f:view>

<h1>Página Principal</h1><br/>

<h:form>

<h:commandButton value=“Listar" action=“listar"/>

<h:commandButton value=“Cadastrar" action=“cadastrar"/>

</h:form>

</f:view>


Cont. do ex.: configuração de navegação<navigation-rule>

<from-view-id>/index.jsp</from-view-id>

<navigation-case>

<from-outcome>listar</from-outcome>

<to-view-id>/listar.jsp</to-view-id>

</navigation-case>

<navigation-case>

<from-outcome>cadastrar</from-outcome>

<to-view-id>/cadastrar.jsp</to-view-id>

</navigation-case>

</navigation-rule>


No exemplo anterior temos navegação estática: A navegação estática não é muito interessante

pois se as identificadores são fixos, não há necessidade de tanta “infra-estrutura”

Uma navegação dinâmica necessitaria escolher o from-outcome em tempo de execução

Para isso, necessitamos chamar um código Java para fazer esta decisão


Navegação dinâmica:

Formulário

Formulário

Exemplo: Reservar Passagem

Classe JavaString

processar()

over-booking

sucesso

lotado


Navegação dinâmica:<navigation-rule>

<from-view-id>/psssagem.jsp</from-view-id>

<navigation-case>

<from-outcome>lotado</from-outcome>

<to-view-id>/lotado.jsp</to-view-id>

</navigation-case>

<navigation-case>

<from-outcome>overbooking</from-outcome>

<to-view-id>/over.jsp</to-view-id>

</navigation-case>

<navigation-case>

<from-outcome>sucesso</from-outcome>

<to-view-id>/sucesso.jsp</to-view-id>

</navigation-case>

</navigation-rule>

Managed-Bean

Um Managed-Bean é uma classe definida no faces-config que é identificada através de um alias

Permite ligar um formulário diretamente a um ou mais métodos

Funciona como elemento de controle Chamando o modelo Escolhendo a visualização

Utilizado para navegação dinâmica (através do retorno do método)

Managed-Bean

Definição no faces-context

<faces-config>

<managed-bean>

<managed-bean-name>nome</managed-bean-name>

<managed-bean-class>classe</managed-bean-class>

<managed-bean-scope>request|session|application</managed-bean-scope>

</managed-bean>

</faces-config>

Managed-Bean

Para chamar um bean: Usa-se a chamada ao Managed Bean

<h:commandLink value="Voltar“ action=“#{beanName.metodo}"/>

A declaração do método deve ser

public String metodo() { .... }

Managed-Bean

Exemplo: Uma página com um formulário que recebe um valor Caso o valor digitado seja ímpar, redirecionar

para uma página Caso o valor seja par, redirecionar para outra

página

Managed-Bean

Cont. do ex.: definição do beanpackage curso.jsf;

public class Valor {

private int valor;

public void setValor(int valor) {this.valor = valor;

}public int getValor() {

return valor;}

public String processar() {if ( valor % 2 == 0 ) {

return “par”;} else {

return “impar”;}

}}

Managed-Bean

Cont. do ex.: def. do bean no faces-context

<faces-config>

<managed-bean>

<managed-bean-name>bean</managed-bean-name>

<managed-bean-class>curso.jsf.Valor</managed-bean-class>

<managed-bean-scope>request</managed-bean-scope>

</managed-bean>

</faces-config>

Managed-Bean

Cont. do ex.: configurações de navegação

<navigation-rule>

<from-view-id>/index.jsp</from-view-id>

<navigation-case>

<from-outcome>par</from-outcome>

<to-view-id>/par.jsp</to-view-id>

</navigation-case>

<navigation-case>

<from-outcome>impar</from-outcome>

<to-view-id>/impar.jsp</to-view-id>

</navigation-case>

</navigation-rule>

Managed-Bean

Cont. do ex.: formulário

<f:view>

<h:form>

Valor: <h:inputText value="#{bean.valor}"/><BR>

<h:commandButton value=“Enviar“action="#{bean.processar}"/>

</h:form>

</f:view>

Managed-Bean

Explicação do exemplo: Quando o formulário é enviado, os dados são

preenchidos no managed Bean e o método escolher é chamado

Baseado no retorno do método a escolha de navegação é feita Baseada nos navigation-rules.

Managed-Bean

Cenários de utilização do JSF: Uma aplicação JSF suporta dois tipos de respostas e dois

tipos de requisições:

Faces Response: Uma resposta que foi criada a partir da renderização de componentes JSF.

Non-Faces Response: Uma página JSP qualquer que não incorpora componentes JSF.

Faces Request: Uma requisição que é enviada a partir de uma resposta JSF anterior.

Non-faces Request: Uma requisição vinda de uma página que não possuiu uma prévia geração de componentes JSF.

JSF Expression Language

O JSF possui uma linguagem de expressões para simplificar a sintaxe de acesso a informações: Ex.:

#{cliente.nome} #{cliente.endereco.rua} #{aluno.disciplinas[3].ementa} #{x > 0 ? “Positivo” : “Negativo”}

Tratamento de Eventos

Existem dois tipos de eventos Eventos que iniciam um processamento no back-end Eventos que apenas alteram a interface do usuário

JSF categoriza esses códigos como: Action Controllers

Disparado depois do bean populado e validado Retorna uma String como navegação

Event Listeners Frequentemente disparado antes do bean ser populado e

validado Nunca afeta diretamente a navegação de página


Action Listeners Disparado por botões, links, etc.

<h:commandButton value=“...”/> <h:commandButton image=“...”/> <h:commandLink .../>

ValueChangeListener Disparado por Caixas de Combinação (Combo Box),

checkbox, radio button, textfield, etc <h:selectOneMenu .../> <h:selectBooleanCheckBox .../> <h:selectOneRadio ../> <h:inputText .../>

Não submetem o formulário automaticamente


Action Listeners Quando desejamos que o botão submeta o botão e inicie

um processamento de backend, usamos: <h:commandButton action=“...”/>

Quando desejamos apenas afetar a interface gráfica <h:commandButton actionListener=“...”/> Usualmente, desejamos que isso ocorra antes da

validação e população Pois os formulários frequentemente estão incompletos

Use o atributo immediate para informar que o evento será chamado antes do bean ser populado e validado

<h:commandButton actionListener=“...” immediate=“true”/>


Criando um Tratador de um Evento Criamos um ActionEvent com as seguintes

regras: Sem tipo de retorno (void) ActionEvent está em javax.faces.event. O ActionEvent possui a referência para o objeto

modificado Exemplo

public void trataEvento(ActionEvent event) {// acao()

}


ValueChangeListener Action é ligado a um botão Sem tipo de retorno

(void) Formulário é submetido quando clicado

ValueChangeListener é ligado com combobox, listbox, radio button, checkbox, textfield, etc. O formulário não é submetido automáticamente Necessário adicionar javascript para submeter o

formulário: Onclick=“submit()” e onchange=“submit()”


Implementando um ValueChangeListener Método que possui um ValueChangeEvent como

argumento ValueChangeEvent

getComponent: Retorna o componente alterado getOldValue(): Valor anterior getNewValue(): Valor alterado

Necessário pois provavelmente o Bean ainda não foi populado

Valor para um checkbox é Boolean Valor para um radio button ou textfield é o parametro de

request

Tags JSF

As aplicações JSF fazem uso extensivos de Tag Libraries

As Tags JSF não são simplesmente tags HTML, e sim, classes que geram (renderizam) HTML

Existem mais de 43 tags no JSF Padrão

Tags JSF

Validação da Entrada do Usuário Duas tarefas que são quase que essenciais em

aplicações Web: Checar se toda a informação necessária está presente

no formato correto Reexibir a informação quando algo estiver incorreto ou

mal-formado Com mensagens de erros mostrando problemas Com informações corretas mantidas

Isto é extremamente chato na maioria das tecnologias de desenvolvimento WEB

Tags JSF

Validação da Entrada do Usuário Validação Manual

Faz a validação nos métodos sets e gets Programador faz código de validação Validação no método de ação

Validação Automática Implícita Adiciona required na entrada Usar h:message para informar erros

Validação automática explícita f:convertNumber, f:convertDateTme, f:validateLength,

f:validateDoubleRange, f:validateLongRange Sistema reexibe caso erro

Validadores customizáveis Herdam Validador, sobrescrevem o validate e são registrados no

faces-config.xml

Tags JSF

Exemplo de Validação Manual: no beanprivate ArrayList erros;public String processar() {

if ( idade <= 0 || idade > 120 ) { erros.add(“Idade inválida, por favor, redigite-a”);}if ( erros.size() > 0 ) {

return null;} else {

return “navegacao”;}

}

Tags JSF

Cont. ex. de Validação Manual: no beanpublic String getErros() {

String message;if (erros.size() == 0) {

message = "";} else {

message = "<FONT COLOR=RED><B><UL>\n";for(int i=0; i<erros.size(); i++) {

message = message + "<LI>" +(String)erros.get(i) + "\n";

}message = message + "</UL></B></FONT>\n";

}return message ;

}

Tags JSF

Cont. ex. de Validação Manual: na jsp

<h:form>

<h:outputText value="#{funcioanrio.erros}“ escape="false"/>

...

</h:form>

Tags JSF

Exemplo de validação implícita<h:form><TABLE> <TR><TD>Nome:

<h:inputText value="#{funcionario.nome}"required="true“ id=“nome"/>

</TD><TD>

<h:message for=“nome" styleClass="RED"/></TD></TR><TR><TD>Telefone:

<h:inputText value="#{funcionario.telefone}"required="true“ id=“telefone"/></TD>

<TD><h:message for=“telefone" styleClass="RED"/></TD></TR>

…</TABLE>…</h:form>

Tags JSF

Exemplo de validação explícita

<h:form>

<TABLE> <TR>

<TD>User ID: <h:inputText value="#{bidBean2.userID}“ id="userID">

<f:validateLength minimum="5" maximum="6"/>

</h:inputText></TD>

<TD><h:message for="userID"

styleClass="RED"/></TD></TR>

</form>

Data Tables

JSF possui uma estrutura para exibir tabelas Realiza iteração automática sob os elementos da

coleção

<h:dataTable value="#{someBean.someCollection}“ var="rowVar">

<h:column><h:outputText value="#{rowVar.col1Data}"/>

</h:column>

<h:column><h:outputText value="#{rowVar.col2Data}"/>

</h:column>

</h:dataTable>

Data Tables

value: Uma coleção (lista de bens) Array List ResultSet DataModel (javax.faces.model)

var Variável de cada item da coleção

Outros atributos Atributos padrões de tabelas

border, bgcolor, width, cellpadding, cellspacing, frame, ... Informações de Estilo

rowClasses, headerClass, footerClass

Data Tables

Exemplo

Escalação da seleção brasileira (copa 2006) Managed-Bean: Elenco Classe: Jogador Páginas

brasil.jsp: Datatable com a lista dos jogadores

Data Tables

Exemplopublic class Jogador {

private int numero;

private String nome;

private boolean escalado;

…

}

public class Elenco {

private Collection timeBrasil;

}

Data Tables

Cont. do exemplo: listagem<f:view>

<h:dataTable value="#{elenco.brasil}" var="canarinho" border="1">

<h:column>

<h:outputText value="#{canarinho.numero}"/>

</h:column>

<h:column>

<h:outputText value="#{canarinho.nome}"/>

</h:column>

</h:dataTable>

</f:view>

Data Tables

Cont. do exemplo: listagem

Componentes MyFaces

<t:jscookMenu [ user-role-support-attributes ] [layout="values {hbr, hbl, hur, hul, vbr, vbl, vur, vul}"] [theme="values {ThemeIE, ThemeMiniBlack, ThemeOffice, ThemePanel}"] Nested <t:navigationMenuItem> or <t:navigationMenuItems> tags (menu items) </t:jscookMenu>

Componentes MyFaces

TabbedPaneTree2

Componentes MyFacesCalendário/Date

Componentes MyFacesHTML/Editor

Componentes MyFacesSchedule

Exercício – Nível I

Crie uma jogo com JSF para adivinhar um número secreto. Esse jogo deve possuir duas JSPs: uma onde o usuário digitará um número e outra onde será exibido uma mensagem de sucesso e número de tentativas para o acerto, caso o usuário acerte o número secreto.

-O objetivo desse exercício é entender:

a estrutura do faces-config.xml;

criação de um bean;

criação de JSPs com JSTL.

Exercício – Nível II

Crie uma aplicação com JSF para cadastro de veículos (use quantos atributos forem necessários). Deverá existir duas JSPs: uma onde serão informados os dados do veículo e outra onde serão listados os veículos cadastrados. Durante o cadastro devem ser validadas as entradas do usuário.

Objetivo do exercício é estudar:

validações de entradas do usuário.

Exercício – Nível III

Crie uma aplicação com JSF para cadastro de veículos (use quantos atributos forem necessários). Deverá existir duas JSPs: uma onde serão informados os dados do veículo e outra onde serão listados os veículos cadastrados. Os veículos cadastrados deverão ser persistidos em um banco de dados.

-Objetivo do exercício é estudar:

integração de tecnologias (hibernate).

Fim

Dúvidas?

Java Server Faces Itamir de Morais Barroca Filho Mario V. Andrade de Melo Neto.

Documents

Transcript of Java Server Faces Itamir de Morais Barroca Filho Mario V. Andrade de Melo Neto.