O documento discute conceitos relacionados ao desenvolvimento de interfaces ricas para web, incluindo: 1) Introdução a frameworks como JSF que permitem desenvolvimento RAD para web; 2) Componentes e wrappers HTML suportados pelo JSF; 3) Conceitos importantes como ciclo de vida, managed beans e conversores.

1. Desenvolvimento de
Interfaces
Ricas
André Luiz Forchesatto

2. Conteúdos
● Introdução ao Desenvolvimento RAD para WEB
● Desenvolvimento Action Based e Component Based
● Introdução a framework Component-Based JSF 2.2
● Managed Bean
● Escopo Managed Bean
● Ciclo de vida
● Converter
● Integração com Spring-boot

3. Conteúdos
● Validation
● Framework de componentes ricos
● Facelets
● Templates
● Aumentando a produtividade com a criação de
componentes em JSF

4. Programação WEB???

5. JAVA + WEB

6. JEE - Java Enterprise Edition

7. JEE
Web
Container

8. JEE
EJB
Container

9. JEE
Client
Container

10. Arquitetura JEE

11. Evolução Java para web
● Servlet
○ 2.X e 3.X
● JSP – Java Server Pages
○ 1.X e 2.X
● JSTL – JSP Standard Tag Library
● Frameworks
○ Component Based
○ Action Based

12. Frameworks - web
● Surgiram para trazer produtividade no
desenvolvimento de software web
● Component Based
○ Simplicidade no desenvolvimento e aprendizado;
○ Conjunto de componentes visuais. Semelhante ao
que acontece no desktop;
○ Diminui as preocupações com a parte visual;
○ Exige pouco conhecimento de html+css+javascript
inicialmente

13. Servidor de Aplicação JEE
● Download do JEE ????
● Precisamos de uma implementação JEE
○ Glassfish
○ Jboss
○ Apache Geronimo
○ IBM Websphere Application Server
○ WebLogic Application Server

14. Servidor de Aplicação

15. Servlet Container
● Precisamos de um servidor de aplicativo
grande e pesado?
● Um Servlet Container suporta quase tudo
que precisamos para o desenvolvimento
web, mas não o JEE completo;
○ JSP
○ Servlets
○ JSTL
○ JSF

16. Servlet Container
● Apache Tomcat Versão
○ http://tomcat.apache.org/
● Jetty
○ http://jetty.codehaus.org/jetty/

17. Tratamento de Requisições Java EE

18. Introdução a JSF

19. 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);

20. Estrutura JSF

21. Conceitos Principais JSF
● Componentes
● Renderers
● Managed-Beans
● Ciclo de vida (Request Lifecycle)
● Converter/Validators
● Navegação
● Eventos

22. Componentes
● Separa lógica de negócio da apresentação;
● Toda view possui uma hierarquia de
componentes;
Client Side h:form
h:input h:input h:input
Server Side

23. 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)

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

25. Criar projeto web
● Criar projeto web utilizando maven e eclipse:
○ File->new->maven project

26. Criar projeto web
Configurar o
nome do projeto
e o tipo

27. Criar projeto web
1 - Código Fonte Java
2 - Recursos web:
html, css, js e
imagens

28. Configurando maven
● Arquivo pom.xml responsável por toda
configuração de bibliotecas e build
<dependencies>
<dependency>
<groupId>javax</groupId>
<artifactId>javaee-web-api</artifactId>
<version>7.0</version>
<scope>provided</scope>
</dependency>
</dependencies>

29. Configurando maven
<build>
<finalName>introducaoJsf</finalName>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.1</version>
<configuration>
<compilerVersion>1.8</compilerVersion>
<source>1.8</source>
<target>1.8</target>
</configuration>
</plugin>
</plugins>
</build>

30. Configurar web.xml
Criar arquivo web.xml

31. Configurar 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>*.xhtml</url-pattern>
</servlet-mapping>
</web-app>

32. Configurar faces-config.xml
Criar arquivo faces-config.xml

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

34. Página index

35. Executando a aplicação
● Aplicação será executada no wildfly 10
○ Prática: Configurar e executar

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

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

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

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

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

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

42. 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/inde
x.jsf

43. Renderers
● Responsável por exibir o componente no
cliente
● Efetua enconde de HTML e decode em
String do form enviado

44. Prática
● Fazer o uso de alguns componentes
estudados

45. Managed Beans
● POJO (Plain Old Java Objects)

46. Managed Beans
● Classe POJO com uma anotação
@ManagedBean
● Não esquecer dos get e set para os
atributos;

47. 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;

48. JSF Value Binding

49. Prática
● Integração página xhtml com ManagedBean

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

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

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

53. Prática
● Entendendo o comportamento dos escopos
e mensagens

54. Referências
http://docs.oracle.com/javaee/

55. Configurar JSF + Spring-boot
● Criar arquivo faces-config.xml
● Criar web.xml
● Criar bean no Main para configurar
FacesServlet
● Adicionar dependências do JSF

56. Configurar JSF + Spring-boot
● Configurar faces-config.xml
<application>
<el-resolver>
org.springframework.web.jsf.el.SpringBeanFacesELResolver
</el-resolver>
</application>

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

58. Configurar JSF + Spring-boot
● Configurar bean do Spring na classe Main

59. Configurar JSF + Spring-boot
● Adicionar dependências
https://github.com/forchesatto/estudo-spring/blo
b/master/spring-boot-jsf/pom.xml

60. JSF + Spring
● Trocar a anotação @ManagedBean por
@Controller
● Trocar a anotação de escopo por da spring
@Scope

61. Prática
● Entendendo o comportamento dos escopos
e mensagens

62. Ciclo de vida JSF
● Objeto Lifecycle contrala o ciclo de vida do JSF
● 6 fases
http://www.edsongoncalves.com.br/2010/02/21/javaserver-faces-2-0-na-pratica-parte-3/

64. Ciclo de Vida

65. Restaura Visão (Restore View)
restaura ou cria no servidor a árvore de
componentes em memória para
representar a interface com o usuário.
Ciclo de Vida

66. Restore
View

67. Aplica Valores da Requisição
(Apply Request Values)
atualiza os componentes no servidor
com os dados do usuário.
Ciclo de Vida

68. Apply Request Value

69. Processa Validações
(Process Validations)
processa a validação e a conversão de
tipos em um novo dado.
Ciclo de Vida

70. Process Validation

71. Atualiza o Modelo
(Update Model Values)
atualiza os objetos
no servidor com os novos dados.
Ciclo de Vida

72. Update Model Value

73. Chama Aplicação
(Invoke Application)
invoca a lógica necessário para
o pedido do usuário e navega
para
uma nova página se necessário.
Ciclo de Vida

74. Invoke Application

75. Apresenta a Resposta
(Render Response)
salva o estado atual e
mostra a resposta para
o pedido do cliente.
Ciclo de Vida

76. Render Response

77. Ciclo de vida JSF
● Nem toda requisição passa por todas etapas;
● Interceptamos uma das fase implementando a
interface javax.faces.event.PhaseListener
● Os método afterPhase(), beforePhase() e
getPhaseId(), estão disponíveis para interceptar
o ciclo de vida
● Deve ser registrado no faces-config.xml o
Listener criado

78. Ciclo de vida JSF

79. Prática
Criar uma classe para interceptar o
ciclo de vida JSF

80. Converters
● Tem por finalidade converter objetos Java em
String e vice-versa;
● Converters são bidirecionais:
○ Managed-bean faz: getAsObject()
○ JSF faz: getAsString()
● Tipos padrões Java já possuem converters
padrões;
● O converter pode ser implícito(class) ou
explícito(id)

81. Converters
Explícito
Implícito pegou pela
classe declarada no atributo

82. Meu Converter

83. Validatores
● Utilizados para validar o valor de um
campo;
● Retornam um FacesMessage com o erro;
● Existem 3 maneiras de fazer validação de
campo:
○ Validadores padrões JSF
○ Bean Validation
○ Validadores personalizados do JSF

84. Validadores padrões JSF
● validateRequered
● validateDoubleRange
● validateFloatRange
● validateRegex

85. Bean Validation
● Especificação definida pela JSR303
● É necessária uma implementação para ser utilizada
● Utiliza annotation para registrar as regras de validação
● Possibilita fazer validações em qualquer camada da
aplicação
● Deve ser escrita de preferência nas classes do modelo

86. Bean Validation
Usa annotations no model e não precisa
registrar nada no JSF

87. Validadores personalizados do JSF
● Criar uma classe que implementa uma
interface de validação
● Será utilizado somente no JSF e deve ser
invocado explicitamente no arquivo .xhtml

88. Validadores personalizados do JSF

89. Prática
Criar Validatores utilizando Bean Validation
e Validadores Personalizados JSF;
Criar converter para as classes do nosso
projeto;
Criar algumas telas de cadastro;

90. Ajax
● Asynchronous Javascript and XML
● Um conjunto de tecnologias:
○ HTML
○ DOM
○ XHTML
○ CSS
○ XML
○ XSLT
○ XMLHttpRequest
○ JavaScript

91. Ajax
● Foi batizado em 2005 pela publicação do
artigo “Ajax: A New Approach to Web
Application” Escrito por Jossé James Garret
● Ajax pode ser usado com Java, Php, Ruby,
etc..
● Ajax = Javascript rodando no browse e se
comunicando com o servidor

92. Como funciona o AJAX

93. Como funciona o AJAX

94. Por que usar AJAX
● Respostas mais rápidas;
● Economia na banda do servidor;
● Maior interatividade;

95. Ajax no JSF 2.0
O que vai enviar ao servidor
@form, @all, @this,
ou id de um componente
Id do componente a ser atualizado com o
retorno do servidor.
Pode ser usado @all, @this, @form
Evento a ser
executado o
AJAX

96. Prática
Transformar os cadastros já feitos em
cadastros com AJAX

97. Primefaces
● Biblioteca de componentes ricos
● Implementada para Mojora (JSF) 2.0
● Mais de 100 componentes
● http://www.primefaces.org/
● http://www.primefaces.org/showcase

98. Primefaces - Download
<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces</artifactId>
<version>5.0</version>
</dependency>

99. Primefaces - XHTML
● Configurar as páginas xhtml para
renderizer primefaces.
xmlns:p="http://primefaces.org/ui"

100. Dependências

101. Primefaces - Temas
Para configurar um tema basta adicionar o
jar do tema desejado e configurar o web.xml
http://www.primefaces.org/themes.html
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>cupertino</param-value>
</context-param>

102. Temas - Download
<dependency>
<groupId>org.primefaces.themes</groupId>
<artifactId>cupertino</artifactId>
<version>1.0.10</version>
</dependency>
<repositories>
<repository>
<id>prime-repo</id>
<name>PrimeFaces Maven Repository</name>
<url>http://repository.primefaces.org</url>
<layout>default</layout>
</repository>
</repositories>

103. Exemplo Dialog

104. Exemplo Mascaras

105. Prática
Construir as telas de cadastro utilizando os
componentes do primefaces;
Criar alguns componentes autocomplete;

106. Internacionalização
● JSF 2 fornece duas maneiras de
internacionalização
○ faces-config.xml
○ tag Core <f:loadBundle>
● Após configurado é possível pegar através
de uma chave um valor adicionado em um
arquivo texto de mensagens.

107. Internacionalização
Configuração arquivo faces-config.xml

108. Internacionalização
● Componente Core <f:loadBundle>
● É necessário configurar em cada página

109. Internacionalização
● Padrão do arquivo de mensagens:
○ Respeitar o nome que foi adicionado na
configuração;
○ O arquivo é composto por key=value

110. Internacionalização
● Para utilizar a chave do arquivo basta,
chamar a variável(msg) configurada no XML
(ponto) nome da chave;
<h:outputLabel value="#{msg.tituloUF}"/>

111. Prática
● Internacionalizar a nossa aplicação