Download - Aula parte 1 de JSF 2.2
![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/