Frameworks para 
Desenvolvimento web em 
Java 
Aula 03 
André Luiz Forchesatto
Planejamento 
● Aula 03 
○ Spring com JSF
JSF 
● API Java Server Faces; 
● Interface padrão de desenvolvimento web Java; 
● Modelo de interfaces baseada em eventos e 
componentes; 
● Framework MVC (Model-View-Controller);
Estrutura JSF
Conceitos Principais JSF 
● Componentes 
● Renderers 
● Managed-Beans 
● Ciclo de vida (Request Lifecycle) 
● Converter/Validators 
● Navegação 
● Eventos
Componentes 
● Separa lógica de negócio da apresentação; 
● Toda view possui uma hierarquia de 
componentes; 
Server Side 
Client Side h:form 
h:input h:input h:input
Componentes 
● Os componentes são expressos em tags e uma pagina 
JSP e em sua maioria são de interface com o usuário; 
● Os componentes padrões são divididos em dois grupos: 
● Faces Core: <f:view>, <f:loadBundle>, <f:param> 
● HTML wrappers: <h:dataTabe>, <h:inputText> 
● Componente = class + renderer + tag handler (JSP)
Primeiros passos 
● Criar um projeto web que seja um . 
war 
● Adicionar a lib para jsf 
● Configurar o web.xml 
● Criar um arquivo faces-config.xml 
● Criar uma página de index
Configurar faces-config.xml 
Criar arquivo faces-config.xml
Configurar faces-config.xml 
<?xml version="1.0" encoding="UTF-8"?> 
<faces-config xmlns="http://xmlns.jcp.org/xml/ns/javaee" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp. 
org/xml/ns/javaee/web-facesconfig_2_2.xsd"version="2.2"> 
</faces-config>
Página index
HTML wrappers - JSF 
● Comando 
○ h:commandButton: Botão de submissão 
de formulário 
○ h:commandLink: Link com ação 
● Dados 
○ h:dataTable: Tabela associada a dados 
● Imagens 
○ h:graphicImage: Uma imagem
HTML wrappers - JSF 
● Mensagens 
○ h:message: mensagens para um componente 
especifico 
○ h:messages: mensagens globais da página 
● Entrada de dados 
○ h:inputHidden: Campo oculto 
○ h:inputText: Campo simples para entrada de dados 
○ h:inputSecret: Campo para senha 
○ h:inputTextArea: Campo texto para entrada de 
dados 
● Seleção verdadeiro ou falso 
○ h:selectBooleanCheckbox: Campo de marcação 
verdadeiro ou falso
HTML wrappers - JSF 
● Saída de dados 
○ h:outputFormat: Texto formatado 
○ h:outputLabel: Rotulo de campo 
○ h:outputLink: Link sem ação 
○ h:outputText: Texto simples 
● Painel 
○ h:panelGrid: Tabela para campos 
○ h:panelGroup: Agrupador de 
componentes para aplicar formatação ou 
alimentamento
HTML wrappers - JSF 
● Seleção única 
○ h:SelectOneRadio: grupo de botões de radio 
○ h:SelectOneListbox: lista de seleção única 
○ h:SelectOneMenu: combobox de seleção única 
● Seleção múltipla 
○ h:SelectManyCheckbox: checkboxes agrupados 
○ h:SelectManyListbox: lista de seleção múltipla 
○ h:SelectManyMenu: lista de seleção múltipla
Faces Core 
● f:view: Elemento raiz da árvore de 
componentes 
● f:ajax: Injeta comportamento ajax em 
qualquer componente html 
● f:selectItem: Representa um item de uma 
lista ou combo 
● f:selectItems: Representa a coleção de itens 
de uma lista ou combo 
● f:converter: Converto objeto java em texto e 
vice-versa
Propriedades comuns 
Propriedade Tipo Valor Default Obrigatório 
id String Não tem sim 
value Object Não tem sim 
rendered Boolean True não 
converter Converter Não tem não 
sytleClass String Não tem não 
binding String Não tem não
Todos componentes + exemplos 
● Links com documentação para API Padrão JSF 
● http://docs.oracle.com/javaee/7/tutorial/doc/jsf-intro.htm#BNAPH 
● https://javaserverfaces.java.net/nonav/docs/2.2/javadocs/index.html 
● http://www.jsftoolbox.com/documentation/help/12- 
TagReference/core/index.jsf
Renderers 
● Responsável por exibir o componente no 
cliente 
● Efetua enconde de HTML e decode em 
String do form enviado
Configurar JSF + Spring-boot 
● Criar arquivo faces-config.xml 
● Criar web.xml 
● Criar bean no Main para configurar 
FacesServlet 
● Adicionar dependências do JSF
Configurar JSF + Spring-boot 
● Configurar faces-config.xml 
<application> 
<el-resolver> 
org.springframework.web.jsf.el.SpringBeanFacesELResolver 
</el-resolver> 
</application>
Configurar JSF + Spring-boot 
● Criar web.xml 
<?xml version="1.0" encoding="UTF-8"?> 
<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee 
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"> 
<context-param> 
<param-name>javax.faces.PROJECT_STAGE</param-name> 
<param-value>Development</param-value> 
</context-param> 
<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> 
</servlet-mapping> 
</web-app>
Configurar JSF + Spring-boot 
● Configurar bean do Spring na classe Main
Configurar JSF + Spring-boot 
● Adicionar dependências 
https://github.com/forchesatto/estudo-spring/ 
blob/master/spring-boot-jsf/pom.xml
Prática 
● Fazer o uso de alguns componentes 
estudados
Managed Beans 
● POJO (Plain Old Java Objects)
Managed Beans 
● Classe POJO com uma anotação 
@ManagedBean 
● Não esquecer dos get e set para os 
atributos;
JSF Value Binding 
● Vincular valores do componente ao 
Managed-bean; 
● A vinculação é feita através de EL 
(Expression Language) 
● Sintaxe: #{ } 
● Pode executar métodos ou acessar 
atributos; 
● Pode ser criado comandos condicionais;
JSF Value Binding
Prática 
● Integração página xhtml com ManagedBean
Managed Beans - Escopo 
● Request: @RequestScoped; 
○ Novos dados a cada requisição; 
● Session: @SessionScoped; 
○ Criada uma sessão para o usuário dados finalizados 
só quando a sessão for encerrada; 
● Application: @ApplicationScoped; 
○ Dados compartilhados por todos os usuários; 
● View: @ViewScoped; 
○ Dados presentes enquanto estiver na mesma 
página 
● Flow: @FlowScoped 
○ Dados podem ser passado de página por página 
como um wizard
Managed Beans - Init, Destroy 
● Interagindo na construção e destruição dos 
ManagedBeans 
● @PostConstruct 
○ É executado logo após a construção do MB 
○ Sempre deve ser adicionado logo acima de 
um método 
● @PreDestroy 
○ É executado pouco antes do MB sair do 
contêiner 
○ Sempre deve ser adicionado logo acima de 
um método
Face Messages 
● Classe do JSF responsável por enviar 
mensagens ao componente <h:message> da 
página JSF. 
1 - Contexto web; 
2 - Objeto de mensagem onde podemos indicar a Severidade da 
mensagem, o resumo e os detalhes; 
3 - Adiciona a mensagem no contexto, para um id especifico ou para null.
JSF + Spring 
● Trocar a anotação @ManagedBean por 
@Controller 
● Trocar a anotação de escopo por da spring 
@Scope
Prática 
● Entendendo o comportamento dos escopos 
e mensagens

Framework web 3 - JSF + Spring boot

  • 1.
    Frameworks para Desenvolvimentoweb em Java Aula 03 André Luiz Forchesatto
  • 2.
    Planejamento ● Aula03 ○ Spring com JSF
  • 3.
    JSF ● APIJava Server Faces; ● Interface padrão de desenvolvimento web Java; ● Modelo de interfaces baseada em eventos e componentes; ● Framework MVC (Model-View-Controller);
  • 4.
  • 5.
    Conceitos Principais JSF ● Componentes ● Renderers ● Managed-Beans ● Ciclo de vida (Request Lifecycle) ● Converter/Validators ● Navegação ● Eventos
  • 6.
    Componentes ● Separalógica de negócio da apresentação; ● Toda view possui uma hierarquia de componentes; Server Side Client Side h:form h:input h:input h:input
  • 7.
    Componentes ● Oscomponentes são expressos em tags e uma pagina JSP e em sua maioria são de interface com o usuário; ● Os componentes padrões são divididos em dois grupos: ● Faces Core: <f:view>, <f:loadBundle>, <f:param> ● HTML wrappers: <h:dataTabe>, <h:inputText> ● Componente = class + renderer + tag handler (JSP)
  • 8.
    Primeiros passos ●Criar um projeto web que seja um . war ● Adicionar a lib para jsf ● Configurar o web.xml ● Criar um arquivo faces-config.xml ● Criar uma página de index
  • 9.
    Configurar faces-config.xml Criararquivo faces-config.xml
  • 10.
    Configurar faces-config.xml <?xmlversion="1.0" encoding="UTF-8"?> <faces-config xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp. org/xml/ns/javaee/web-facesconfig_2_2.xsd"version="2.2"> </faces-config>
  • 11.
  • 12.
    HTML wrappers -JSF ● Comando ○ h:commandButton: Botão de submissão de formulário ○ h:commandLink: Link com ação ● Dados ○ h:dataTable: Tabela associada a dados ● Imagens ○ h:graphicImage: Uma imagem
  • 13.
    HTML wrappers -JSF ● Mensagens ○ h:message: mensagens para um componente especifico ○ h:messages: mensagens globais da página ● Entrada de dados ○ h:inputHidden: Campo oculto ○ h:inputText: Campo simples para entrada de dados ○ h:inputSecret: Campo para senha ○ h:inputTextArea: Campo texto para entrada de dados ● Seleção verdadeiro ou falso ○ h:selectBooleanCheckbox: Campo de marcação verdadeiro ou falso
  • 14.
    HTML wrappers -JSF ● Saída de dados ○ h:outputFormat: Texto formatado ○ h:outputLabel: Rotulo de campo ○ h:outputLink: Link sem ação ○ h:outputText: Texto simples ● Painel ○ h:panelGrid: Tabela para campos ○ h:panelGroup: Agrupador de componentes para aplicar formatação ou alimentamento
  • 15.
    HTML wrappers -JSF ● Seleção única ○ h:SelectOneRadio: grupo de botões de radio ○ h:SelectOneListbox: lista de seleção única ○ h:SelectOneMenu: combobox de seleção única ● Seleção múltipla ○ h:SelectManyCheckbox: checkboxes agrupados ○ h:SelectManyListbox: lista de seleção múltipla ○ h:SelectManyMenu: lista de seleção múltipla
  • 16.
    Faces Core ●f:view: Elemento raiz da árvore de componentes ● f:ajax: Injeta comportamento ajax em qualquer componente html ● f:selectItem: Representa um item de uma lista ou combo ● f:selectItems: Representa a coleção de itens de uma lista ou combo ● f:converter: Converto objeto java em texto e vice-versa
  • 17.
    Propriedades comuns PropriedadeTipo Valor Default Obrigatório id String Não tem sim value Object Não tem sim rendered Boolean True não converter Converter Não tem não sytleClass String Não tem não binding String Não tem não
  • 18.
    Todos componentes +exemplos ● Links com documentação para API Padrão JSF ● http://docs.oracle.com/javaee/7/tutorial/doc/jsf-intro.htm#BNAPH ● https://javaserverfaces.java.net/nonav/docs/2.2/javadocs/index.html ● http://www.jsftoolbox.com/documentation/help/12- TagReference/core/index.jsf
  • 19.
    Renderers ● Responsávelpor exibir o componente no cliente ● Efetua enconde de HTML e decode em String do form enviado
  • 20.
    Configurar JSF +Spring-boot ● Criar arquivo faces-config.xml ● Criar web.xml ● Criar bean no Main para configurar FacesServlet ● Adicionar dependências do JSF
  • 21.
    Configurar JSF +Spring-boot ● Configurar faces-config.xml <application> <el-resolver> org.springframework.web.jsf.el.SpringBeanFacesELResolver </el-resolver> </application>
  • 22.
    Configurar JSF +Spring-boot ● Criar web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"> <context-param> <param-name>javax.faces.PROJECT_STAGE</param-name> <param-value>Development</param-value> </context-param> <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> </servlet-mapping> </web-app>
  • 23.
    Configurar JSF +Spring-boot ● Configurar bean do Spring na classe Main
  • 24.
    Configurar JSF +Spring-boot ● Adicionar dependências https://github.com/forchesatto/estudo-spring/ blob/master/spring-boot-jsf/pom.xml
  • 25.
    Prática ● Fazero uso de alguns componentes estudados
  • 26.
    Managed Beans ●POJO (Plain Old Java Objects)
  • 27.
    Managed Beans ●Classe POJO com uma anotação @ManagedBean ● Não esquecer dos get e set para os atributos;
  • 28.
    JSF Value Binding ● Vincular valores do componente ao Managed-bean; ● A vinculação é feita através de EL (Expression Language) ● Sintaxe: #{ } ● Pode executar métodos ou acessar atributos; ● Pode ser criado comandos condicionais;
  • 29.
  • 30.
    Prática ● Integraçãopágina xhtml com ManagedBean
  • 31.
    Managed Beans -Escopo ● Request: @RequestScoped; ○ Novos dados a cada requisição; ● Session: @SessionScoped; ○ Criada uma sessão para o usuário dados finalizados só quando a sessão for encerrada; ● Application: @ApplicationScoped; ○ Dados compartilhados por todos os usuários; ● View: @ViewScoped; ○ Dados presentes enquanto estiver na mesma página ● Flow: @FlowScoped ○ Dados podem ser passado de página por página como um wizard
  • 32.
    Managed Beans -Init, Destroy ● Interagindo na construção e destruição dos ManagedBeans ● @PostConstruct ○ É executado logo após a construção do MB ○ Sempre deve ser adicionado logo acima de um método ● @PreDestroy ○ É executado pouco antes do MB sair do contêiner ○ Sempre deve ser adicionado logo acima de um método
  • 33.
    Face Messages ●Classe do JSF responsável por enviar mensagens ao componente <h:message> da página JSF. 1 - Contexto web; 2 - Objeto de mensagem onde podemos indicar a Severidade da mensagem, o resumo e os detalhes; 3 - Adiciona a mensagem no contexto, para um id especifico ou para null.
  • 34.
    JSF + Spring ● Trocar a anotação @ManagedBean por @Controller ● Trocar a anotação de escopo por da spring @Scope
  • 35.
    Prática ● Entendendoo comportamento dos escopos e mensagens