01-jsf

5/14/2018 01-jsf - slidepdf.com

http://slidepdf.com/reader/full/01-jsf 1/69

Prof. Adilson Vahldick ([email protected])

JAVA WEB BÁSICO: JSF E JPAParte 1 : JSF com PrimeFaces




AGENDA

JSF O que é, Histórico, Características PrimeFaces

Configuração do Ambiente Formulários Tabelas




Java Server Faces (O que é?)

Um framework para integrar MVC comaplicações web

Facilita o desenvolvimento de interface comusuário

Fornece componentes visuais Tratamento de eventos Validação Internacionalização




JSF (Histórico)

1.0 e 1.1 – 2004 1.2 – 2006 (lançado com Java EE 5) 2.0 – 2009: Melhoria extrema quanto a

facilidade de utilização. Java EE 6. Facelets eanotações. Facelets: criação das páginas com XML

2.1 – 2010: Pequenas melhorias




JSF (Características)

JSF é uma especificação

Mojarra é a implementação de referência

MyFaces é uma alternativa (Apache)

RichFaces, Tobago, IceFaces, PrimeFaces,entre outros, são opções de componentes visuais




PrimeFaces

www.primefaces.org www.primefaces.org/showcase-labs/ http://primefaces.googlecode.com/files/

primefaces_users_guide_2_2.pdf Um único arquivo .jar Sem configurações adicionais Mais de 100 componentes visuais Suporte nativo a AJAX Uma dezena de skins

http://www.primefaces.org/

http://www.primefaces.org/showcase-labs/

http://www.primefaces.org/showcase-labs/

http://www.primefaces.org/




PrimeFaces (configurando o ambiente)

Do meu site baixe os arquivos primefaces-xxx.jar javax.faces.jar black-tie-xxx.jar pt_locale.js

Crie um novo projeto web No NetBeans

Arquivo > Novo Projeto > Java Web > Próximo Nome do Projeto: app1 Local do Projeto: a sua escolha > Próximo Selecione o Tomcat (ou vamos adicionar um) Finalizar





Copie o arquivo pt_locale.js para ”páginas web” Botão direito no nome do projeto Selecione [Propriedades]

Bibliotecas > Adicionar JAR/pasta Selecione os três arquivos baixados [OK]

Abra o arquivo Páginas Web > WEB-INF > web.xml Clique na opção XML





<web-app ....> <context-param>

<param-name>primefaces.THEME</param-name>

<param-value>black-tie</param-value>

</context-param>

<servlet>

<servlet-name>Faces Servlet</servlet-name>

<servlet-class>

javax.faces.webapp.FacesServlet

</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>Faces Servlet</servlet-name>

<url-pattern>*.jsf</url-pattern>

</servlet-mapping>

<welcome-file-list>

<welcome-file>index.jsp</welcome-file>

</welcome-file-list>

</web-app>




PrimeFaces

Arquivo > Novo Arquivo > Java Server Faces >Página JSF > Próximo

Nome de arquivo: index

Opções: Facelets > Finalizar




PrimeFaces (index.xhtml)

<?xml version='1.0' encoding='UTF-8' ?> <!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"

xmlns:p="http://primefaces.org/ui">

<h:head>

<title> Meu JSF </title>

</h:head>

<h:body>

<p:panel header="Primeiro">

Alô Mundo

</p:panel>

</h:body>

</html>




PrimeFaces (index.jsp)

<jsp:forward page="index.jsf"/>

Pressione [F6] ou [Executar projeto principal]




Cadastros




JSF MVC (Model-View-Controller)

Cliente

CadastroCliente

View

Controller

Model

@ManagedBean




Cadastros: Telas

Nova página JSF > clientescad.xhtml



xmlns:p="http://primefaces.org/ui"

xmlns:f="http://java.sun.com/jsf/core" >

<h:head>

<title> Cadastro de Clientes </title>

<script type="text/javascript" src="pt_locale.js">

</script>

</h:head>

<h:body>

...

</h:body>

</html>




Cadastros: Telas

<html...

<h:body>

<p:panel header="Cadastro de Clientes" style="width: 600px">

<h:form>

<h:panelGrid columns="3" id="grid">

...</h:panelGrid>

<hr/>

...

</h:form>

</p:panel>

</h:body> </html>




Cadastros: Telas

<h:panelGrid columns="3">

<h:outputText value="Nome :"/>

<p:inputText id="nome" value="" required="true"/>

<p:message for="nome"/>

...

<h:outputText value="E-mail:"/>

<p:inputText id="mail" value="" required="true" />

<p:message for="mail"/>

...

</h:panelGrid>




Cadastros: Telas


<h:outputText value="Sexo :"/>

<p:selectOneRadio value="">

<f:selectItem itemLabel="Masculino" itemValue="true"/>

<f:selectItem itemLabel="Feminino" itemValue="false"/> </p:selectOneRadio>

<h:outputText/>

...

</h:panelGrid>




Cadastros: Telas


<h:outputText value="Nascimento:"/>

<p:calendar id="nasc" locale="pt" pattern="dd/MM/yyyy"

mode="popup" showOn="button" value=""/>


...

</h:panelGrid>




Cadastros: Telas


<h:outputText value="Escolaridade:"/>

<p:selectOneMenu value="">

<f:selectItem itemLabel="Fundamental" itemValue="1"/>

<f:selectItem itemLabel="Médio" itemValue="2"/> <f:selectItem itemLabel="Superior" itemValue="3"/>

</p:selectOneMenu>

<h:outputText/>

...

</h:panelGrid>




Cadastros: Telas

...

</h:panelGrid>

<hr/>

<p:outputPanel layout="block" style="margin: auto; width:40%"> <p:commandButton value="Salvar" update="grid"/>

<p:commandButton value="Cancelar" ajax="false" immediate="true"/>

</p:outputPanel>

...




Cadastros

Testar : http://localhost:8080/app1/clientescad.jsf





Cliente

CadastroCliente

View

Controller

Model

@ManagedBean

P




Cadastro: Modelo

package modelo;

import java.util.Date;

public class Cliente {

private long id;

private String nome;

private boolean sexoMasc;

private Date nascimento;

private String email;

private int escolaridade;

// métodos acessores (getters e setters)

}





Cliente

CadastroCliente

View

Controller

Model

@ManagedBean

PP




Cadastro: Controle

package controle;

import javax.faces.bean.ManagedBean;import javax.faces.bean.SessionScoped;

import modelo.Cliente;

@ManagedBean(name="cadCliente")

@SessionScoped

public class CadastroCliente {

private Cliente cliente;

public Cliente getCliente() { return cliente; }

public void setCliente(Cliente cliente) { this.cliente = cliente; }

public String novo() {

this.cliente = new Cliente();

return "clientescad";

}

}




Cadastros: Telas


...

<p:inputText id="nome" value="#{cadCliente.cliente.nome}" ... />

...

<p:selectOneRadio value="#{cadCliente.cliente.sexoMasc}">


...

<p:calendar id="nasc" value="#{cadCliente.cliente.nascimento}" ... />

...

<p:inputText id="mail" value="#{cadCliente.cliente.email}"/>

...

<p:selectOneMenu value="#{cadCliente.cliente.escolaridade}">

<f:selectItem itemLabel="Fundamental" itemValue="f"/>

...

</h:panelGrid>




Cadastros: Telas


...

<p:inputText id="nome" value="#{cadCliente.cliente.nome}" ... />

...

<p:selectOneRadio value="#{cadCliente.cliente.sexoMasc}">


...

<p:calendar id="nasc" value="#{cadCliente.cliente.nascimento}" ... />

...

<p:inputText id="mail" value="#{cadCliente.cliente.email}"/>

...

<p:selectOneMenu value="#{cadCliente.cliente.escolaridade}">

<f:selectItem itemLabel="Fundamental" itemValue="f"/>

...

</h:panelGrid>

@ManagedBean(name="cadCliente")@SessionScoped


@ManagedBean(name="cadCliente")

@SessionScoped public class CadastroCliente {





Menu: index.xhtml

<h:body>

<h:form>

<p:menubar>

<p:menuitem value="Clientes" action="#{cadCliente.novo}" ajax="false"/>

</p:menubar>

</h:form>

</h:body> public String novo () {

this.cliente = new Cliente();

return "clientescad";

}




Cadastros

Testar : http://localhost:8080/app1/

Experimente clicar em [Salvar]




Formulários

Observe: index.xhtml: menubar clientescad.xhtml: input's e commandButton's

TODOS DENTRO DE <h:form>




Cadastro: Botão Cancelar

...


...

public String cancelar() {

return "index";

}

}

<p:commandButton value="Cancelar" ajax="false" immediate="true"action="#{cadCliente.cancelar}"/>

Sem validações




Cadastros: Validação

<p:inputText id="mail" value="#{cadCliente.cliente.email}"

required="true" validator="#{cadCliente.validarEmail}" />

public void validarEmail(FacesContext facesContex, UIComponent validate,

Object value) throws ValidatorException {

String email = (String) value;

if (email.indexOf("@") < 1) {

FacesMessage msg =

new FacesMessage(FacesMessage.SEVERITY_ERROR,"E-mail inválido.", "E-mail inválido.");

throw new ValidatorException(msg);

}

}




Growl

<p:growl/> sticky=”false”: se deve ser fechado pelo usuário Life=”6000”: tempo para fechamento automático




Cadastros: Growl

<h:body>

<p:growl autoUpdate="true"/>

...


...

<p:message for="nome"/>

...<h:outputText/>

...

<p:message for="nasc"/>

...


... <h:outputText/>

...

</h:panelGrid>

</h:body>

C G




Cadastros: Growl


C d t V lid ã





<p:commandButton value="Salvar" actionListener="#{cadCliente.salvar}"/>

public static List<Cliente> clientes = new ArrayList<Cliente>();

private static int contaId = 1;

public void salvar() {

System.out.println("salvo");

if (cliente.getId() == 0) {

cliente.setId(contaId);contaId++;

clientes.add(cliente);

}

}

C d t S l




Cadastros: Salvar


Deixe o form inválido e clique em salvar Depois deixe válido e clique em salvar Observe a saída da console

Di l




Dialog

<p:dialog/> modal=”false” header=”Texto do título” resizable=”true” closeable=”true” widgetVar : nome da variável para acessar via JS os métodosshow() e hide()

C d t Di l




Cadastros: Dialog

<p:commandButton value="Dialog" type="button" onclick="ss.show()"/> <p:dialog id="salvo" header="Salvo" widgetVar="ss"

closable="false" modal="true">

<h:outputText value="Cliente salvo com sucesso"/><br/>

<p:commandButton value="Fechar" type="button" onclick="ss.hide()"/>

</p:dialog>


C d t Di l




Cadastros: Dialog

<p:commandButton value="Salvar" actionListener="#{cadCliente.salvar}"

update="salvo"/>

<p:dialog id="salvo" header="Salvo" visible="#{cadCliente.salvo}" ...>

<h:outputText value="Cliente salvo com sucesso"/><br/>

<p:commandButton value="Fechar" ajax="false"action="#{cadCliente.cancelar}"/>

</p:dialog>

private boolean salvo;

public boolean isSalvo() { return this.salvo; }

public String novo() { this.salvo = false; ... }

public void salvar() { ... this.salvo = true; }

C d t Di l




Cadastros: Dialog


E í i




Exercício

Com base no trabalho da equipe, desenvolvaum dos cadastros, considerando que ele nãotenha relação com os outros cadastros

Li t




Listagens

<p:dataTable/> value: fonte de dados das linhas da tabela var: nome da variável que vai guardar cada item

<p:dataTable value="#{cadCliente.clientes}" var="cli"

emptyMessage="Sem clientes.">

…

</p:dataTable>

Li t




Listagens

<p:dataTable value="#{cadCliente.clientes}" var="cli" emptyMessage="Sem clientes.">

<p:column headerText="Nome">

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

</p:column>

<p:column headerText="Nascimento">

<h:outputText value="#{cli.nascimento}">

<f:convertDateTime pattern="dd/MM/yyyy"/>

</h:outputText>

</p:column>

...

</p:dataTable>

public List<Cliente> getClientes() {return clientes;

}

Listagens




Listagens

<?xml version='1.0' encoding='UTF-8' ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



xmlns:p="http://primefaces.org/ui"

xmlns:f="http://java.sun.com/jsf/core">

<h:head>

<title>Clientes</title>

</h:head>

<h:body>

<h:form>


...

</p:dataTable><p:commandButton ajax="false" value="Novo" action="#{cadCliente.novo}"/>

</h:form>

</h:body>

</html>

clienteslist.xhtml

Menu: index xhtml




Menu: index.xhtml

<h:body>

<h:form>

<p:menubar>

<p:menuitem value="Clientes" url="clienteslist.jsf" ajax="false"/>

</p:menubar>

</h:form>

</h:body>






...


...

public String cancelar() {

return "clienteslist";

}

}

Listagens




Listagens


Listagens: editar




Listagens: editar


<p:column>

<p:commandButton image="ui-icon ui-icon-pencil" title="Editar"

action="#{cadCliente.alterar }"><f:setPropertyActionListener value="#{cli}" target="#{cadCliente.cliente}" />

</p:commandButton>

</p:column>

...

</p:dataTable>

public String alterar () {this.salvo = false;return "clientescad";

}

Listagens: editar




Listagens: editar


Listagens: excluir




Listagens: excluir

Listagens: excluir




Listagens: excluir

<p:dataTable id="clientes" value="#{cadCliente.clientes}" var="cli"

emptyMessage="Sem clientes.">

<p:column>

...

<p:commandButton image="ui-icon ui-icon-close" title="Excluir"

onclick="confDelete.show()">

<f:setPropertyActionListener value="#{cli}" target="#{cadCliente.cliente}" />

</p:commandButton>

</p:column>

...

</p:dataTable>

Listagens: excluir




Listagens: excluir

...

<p:commandButton ajax="false" value="Novo" action="#{cadCliente.novo}"/>

<p:confirmDialog message="Deseja realmente excluir esse cliente ?" width="400"

header="Excluir" severity="alert" widgetVar="confDelete">

<p:commandButton value="Sim" update="clientes" oncomplete="confDelete.hide()"

actionListener="#{cadCliente.excluir }" /><p:commandButton value="Não" onclick="confDelete.hide()" type="button" />

</p:confirmDialog>

</h:form>public void excluir () {

clientes.remove(cliente);}

Teste e Exercício




Teste e Exercício

Testar a exclusão : http://localhost:8080/app1/

Exercício: Desenvolva uma tela de listagem que façaacesso aquela tela de cadastro do exercícioanterior

Templates




Templates

<?xml version='1.0' encoding='UTF-8' ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



xmlns:ui="http://java.sun.com/jsf/facelets" >

<h:head>

<title>Meu JSF</title>

</h:head>

<h:body> <ui:include src="menu.xhtml"/>

<ui:insert name="corpo"/></h:body>

</html>

template.xhtml

Templates




Templates

<ui:composition xmlns="http://www.w3.org/1999/xhtml"xmlns:ui="http://java.sun.com/jsf/facelets"xmlns:p="http://primefaces.org/ui"xmlns:h="http://java.sun.com/jsf/html">

<h:form>

<p:menubar>

<p:menuitem value="Clientes" url="clienteslist.jsf" ajax="false"/>

</p:menubar>

</h:form>

</ui:composition>

menu.xhtml

Templates




Templates

<ui:composition xmlns="http://www.w3.org/1999/xhtml"xmlns:ui="http://java.sun.com/jsf/facelets"template="template.xhtml">

</ui:composition>

index.xhtml

Templates




Templates

<ui:composition xmlns="http://www.w3.org/1999/xhtml"xmlns:ui="http://java.sun.com/jsf/facelets"xmlns:p="http://primefaces.org/ui"xmlns:f="http://java.sun.com/jsf/core"xmlns:h="http://java.sun.com/jsf/html">

<ui:define name="corpo"><h:form>...

</h:form></ui:define></ui:composition>

clienteslist.xhtml e clientescad.xhtml

Teste e Exercício

http://primefaces.org/ui

http://java.sun.com/jsf/html

http://java.sun.com/jsf/html

http://primefaces.org/ui




Teste e Exercício

Testar template :

http://localhost:8080/app1/

Exercício: Aplique o template nas outras duas telas

Faça um cadastro de contas que contenha osseguintes atributos: Número (String no formato 9999-9) Cliente

Prepare a listagem e o cadastro, mas considerepor enquanto somente a digitação do número. UseInputMask

ContaBancaria




ContaBancaria

package modelo;

public class ContaBancaria {

private long id;

private String numero;


// métodos acessores

}

CadastroContas




CadastroContas

package controle;

// imports

@ManagedBean(name = "cadContas")

@SessionScoped

public class CadastroContas {

private ContaBancaria conta;

private boolean salvo;

// métodos acessores

public static List<ContaBancaria> contas =

new ArrayList<ContaBancaria>();

private static int contaId = 1;

public List<ContaBancaria> getContas() {

return contas;

}

public String alterar() {

this.salvo = false;

return "contascad";

}

public String novo() {

this.salvo = false;

this.conta = new ContaBancaria();

return "contascad";

}

public String cancelar() { return "contaslist"; }

public void salvar() {this.salvo = true;

if (conta.getId() == 0) {

conta.setId(contaId);

contaId++;

contas.add(conta);

}

}

public void excluir() { contas.remove(conta); }

}

contascad xhtml




contascad.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml" ... template="template.xhtml">

<ui:define name="corpo">

<p:growl autoUpdate="true"/><p:panel header="Cadastro de Contas" style="width: 600px">

<h:form>

<h:panelGrid columns="2" id="grid">

<h:outputText value="Número :"/>

<p:inputMask id="nome" value="#{cadContas.conta.numero}" required="true" mask="9999-9"/>

<h:outputText value="Cliente :"/>

<h:outputText value="Aqui vai para selecionar o cliente"/>

</h:panelGrid>

<hr/>

// aqui vai o <p:outputPanel> com os botões de Salvar e Cancelar

// aqui vai a janela de diálogo sobre o sucesso do salvamento da Conta

</h:form>

</p:panel>

</ui:define>

</ui:composition>

contaslist.xhtml




contaslist.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml" ... template="template.xhtml">

<ui:define name="corpo">

<h:form><p:dataTable id="clientes" value="#{cadContas.contas}" var="conta" emptyMessage="Sem contas.">

<p:column headerText="Número">

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

</p:column>

<p:column headerText="Cliente">

</p:column>

<p:column>

// aqui vão os botões de editar e excluir

</p:column>

</p:dataTable>

// aqui vai o botão Novo

// aqui vai a janela de diálogo perguntando da exclusão da conta</h:form>

</ui:define>

</ui:composition>

Cadastro de Contas




Cadastro de Contas

Teste inclusão, alteração e exclusão de contas : http://localhost:8080/app1/

Botando para funcionar a seleção de clientes





<h:outputText value="Cliente :"/><p:selectOneMenu value="#{cadContas.conta.cliente}">

<f:selectItems value="#{cadCliente.clientes}" var="cli"

itemLabel="#{cli.nome}"/>

</p:selectOneMenu>

contascad.xhtml

Teste a inclusão:

http://localhost:8080/app1/





package conversores;

// imports

@FacesConverter(forClass=Cliente.class)

public class ClienteConverter implements Converter {

public String getAsString(FacesContext fc, UIComponent uic, Object o) {

Cliente c = (Cliente)o;

return c.getId() + "";}

public Object getAsObject(FacesContext fc, UIComponent uic, String value) {

long chave = Long.valueOf(value);

for (Cliente c:CadastroCliente.clientes) {

if (c.getId() == chave)return c;

}

return null;

}

}







Acerte a coluna da lista para mostrar o nome docliente

Teste inclusão, alteração e exclusão de contas : http://localhost:8080/app1/

01-jsf

Documents