1) O documento apresenta conceitos e desenvolvimento de sistemas de interface rica na web utilizando o framework JSF 2.0. 2) Serão abordados tópicos como introdução ao JSF, componentes, managed beans, ciclo de vida, validação e templates. 3) Também serão discutidos protocolos HTTP e arquitetura Java EE para web.

1. Java para Web - JSF
Parte 1
André Luiz Forchesatto

2. Apresentação
● Especialista em Ciência da Computação pela UFSC;
● Graduado em Tecnologia em Informática pela Unoesc;
● Atuação
○ Sócio Camtwo Sistemas;
○ Desenvolvedor Java desde 2002;
○ Professor;
● Contato
○ http://about.me/andreforchesatto
○ andreforchesatto@gmail.com
○ @forchesatto

3. Objetivos
Estudar conceitos e desenvolver na práticas sistemas
de interface rica na web utilizando framework baseado
em componentes JSF 2.0.

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

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

6. Programação WEB???

7. Protocolo HTTP

8. JAVA + WEB

9. JEE - Java Enterprise Edition

10. JEE
Web
Container

11. JEE
EJB
Container

12. JEE
Client
Container

13. Arquitetura JEE

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

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

16. Component Based

17. Action Based
● Framework MVC
● Baseado em ações;
● Executam actions no servidor;
● Não possui componentes visuais;
● Mais flexibilidade no desenvolvimento;
● Exige mais conhecimento de
html+css+javascript
● Mas fácil de testar

18. Action Based

19. Exemplos na web

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

25. Servidor de Aplicação

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

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

28. Tratamento de Requisições Java EE

29. Introdução a JSF

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

31. Estrutura JSF

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

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

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

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

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

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

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

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

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

41. Configurar web.xml
Criar arquivo web.xml

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

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

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

45. Página index

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

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

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

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

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

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

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

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

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

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

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

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

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

59. JSF Value Binding

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

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

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

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

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

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