aula parte 1 de jsf 2.2
DESCRIPTION
Aula para o curso de Pós Graduação da Faculdade Horus. Disciplina de Programação web em Java com JSF. São demonstrados os conceitos básico de JSF rodando em um servidor de aplicação. Github do projeto: https://github.com/forchesatto/posHorusTRANSCRIPT
![Page 1: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/1.jpg)
Java para Web - JSFParte 1
André Luiz Forchesatto
![Page 2: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/2.jpg)
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○ [email protected]○ @forchesatto
![Page 3: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/3.jpg)
Objetivos
Estudar conceitos e desenvolver na práticas sistemas de interface rica na web utilizando framework baseado em componentes JSF 2.0.
![Page 4: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/4.jpg)
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
![Page 5: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/5.jpg)
Conteúdos
● Validation● Framework de componentes ricos● Facelets● Templates● Aumentando a produtividade com a criação de
componentes em JSF
![Page 6: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/6.jpg)
Programação WEB???
![Page 7: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/7.jpg)
Protocolo HTTP
![Page 8: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/8.jpg)
JAVA + WEB
![Page 9: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/9.jpg)
JEE - Java Enterprise Edition
![Page 10: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/10.jpg)
JEEWeb
Container
![Page 11: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/11.jpg)
JEEEJB
Container
![Page 12: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/12.jpg)
JEEClient
Container
![Page 13: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/13.jpg)
Arquitetura JEE
![Page 14: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/14.jpg)
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
![Page 15: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/15.jpg)
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
![Page 16: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/16.jpg)
Component Based
![Page 17: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/17.jpg)
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
![Page 18: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/18.jpg)
Action Based
![Page 19: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/19.jpg)
Exemplos na web
![Page 20: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/20.jpg)
![Page 21: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/21.jpg)
![Page 22: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/22.jpg)
![Page 23: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/23.jpg)
![Page 24: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/24.jpg)
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
![Page 25: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/25.jpg)
Servidor de Aplicação
![Page 26: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/26.jpg)
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
![Page 27: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/27.jpg)
Servlet Container● Apache Tomcat Versão
○ http://tomcat.apache.org/● Jetty
○ http://jetty.codehaus.org/jetty/
![Page 28: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/28.jpg)
Tratamento de Requisições Java EE
![Page 29: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/29.jpg)
Introdução a JSF
![Page 30: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/30.jpg)
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);
![Page 31: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/31.jpg)
Estrutura JSF
![Page 32: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/32.jpg)
Conceitos Principais JSF
● Componentes● Renderers● Managed-Beans● Ciclo de vida (Request Lifecycle)● Converter/Validators● Navegação● Eventos
![Page 33: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/33.jpg)
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
![Page 34: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/34.jpg)
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)
![Page 35: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/35.jpg)
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
![Page 36: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/36.jpg)
Criar projeto web● Criar projeto web utilizando maven e eclipse:
○ File->new->maven project
![Page 37: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/37.jpg)
Criar projeto web
Configurar o
nome do projeto
e o tipo
![Page 38: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/38.jpg)
Criar projeto web
1 - Código Fonte Java
2 - Recursos web: html, css, js e imagens
![Page 39: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/39.jpg)
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>
![Page 40: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/40.jpg)
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>
![Page 41: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/41.jpg)
Configurar web.xml
Criar arquivo web.xml
![Page 42: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/42.jpg)
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>
![Page 43: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/43.jpg)
Configurar faces-config.xml
Criar arquivo faces-config.xml
![Page 44: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/44.jpg)
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>
![Page 45: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/45.jpg)
Página index
![Page 46: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/46.jpg)
Executando a aplicação
● Aplicação será executada no wildfly 8.1○ Prática: Configurar e executar
![Page 47: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/47.jpg)
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
![Page 48: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/48.jpg)
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
![Page 49: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/49.jpg)
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
![Page 50: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/50.jpg)
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
![Page 51: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/51.jpg)
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
![Page 52: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/52.jpg)
Propriedades comunsPropriedade Tipo Valor Default Obrigatório
id String Não tem simvalue Object Não tem simrendered Boolean True nãoconverter Converter Não tem nãosytleClass String Não tem nãobinding String Não tem não
![Page 53: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/53.jpg)
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
![Page 54: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/54.jpg)
Renderers● Responsável por exibir o componente no
cliente● Efetua enconde de HTML e decode em
String do form enviado
![Page 55: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/55.jpg)
Prática● Fazer o uso de alguns componentes
estudados
![Page 56: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/56.jpg)
Managed Beans● POJO (Plain Old Java Objects)
![Page 57: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/57.jpg)
Managed Beans● Classe POJO com uma anotação
@ManagedBean● Não esquecer dos get e set para os
atributos;
![Page 58: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/58.jpg)
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;
![Page 59: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/59.jpg)
JSF Value Binding
![Page 60: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/60.jpg)
Prática● Integração página xhtml com ManagedBean
![Page 61: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/61.jpg)
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
![Page 62: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/62.jpg)
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
![Page 63: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/63.jpg)
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.
![Page 64: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/64.jpg)
Prática
● Entendendo o comportamento dos escopos e mensagens
![Page 65: Aula parte 1 de JSF 2.2](https://reader034.vdocuments.com.br/reader034/viewer/2022052507/5588cc78d8b42aea6d8b4658/html5/thumbnails/65.jpg)
Referências
http://docs.oracle.com/javaee/