Desenvolvimento WEB com JavaServer Faces - Aula 01

44
Desenvolvimento WEB com JavaServer™ Faces Renato V. Mendes Téc. De Tecnologia da Informação – NTI/UFPE

description

Pimeira aula do curso Desenvolvimento WEB com JavaServer Faces, ministrado para integrantes da equipe de Desenvolvimento e Manutenção de Sistemas do Núcleo de Tcnologia da Informação - UFPE.

Transcript of Desenvolvimento WEB com JavaServer Faces - Aula 01

Page 1: Desenvolvimento WEB com JavaServer Faces - Aula 01

Desenvolvimento WEB comJavaServer™ Faces

Renato V. MendesTéc. De Tecnologia da Informação – NTI/UFPE

Page 2: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 2

O que veremos ao longo do curso

● O que é JSF?

● Ciclo de vida do JSF

● Componentes JSF

● Entendendo o MVC

● Conversão e Validação

● Internacionalização

● Ajax

● Componentes customizados

● Facelets

● Templates

● Desenvolver um sistema simples com JSF, JPA e Spring

● Bibliotecas de componente

● Frameworks de desenvolvimento que utilizam JSF

● Dicas e boas práticas

Page 3: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 3

Requisitos Desejáveis

● Programação em Java● Noções de HTML e CSS● Noções de JSP e Servlets● Orientação a objetos● Banco de dados● Interesse em aprender. =D

Page 4: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 4

Links Úteis

● JavaServer Faces Technology - http://www.oracle.com/technetwork/java/javaee/javaserverfaces-139869.html

● Grupo de usuários JSF - http://groups.google.com/group/javasf

● Blog Rafael Ponte - http://www.rponte.com.br

– Artigo “O que todo bom desenvolvedor JSF deveria saber” - http://www.rponte.com.br/2009/01/19/o-que-todo-bom-desenvolvedor-jsf-deveria-saber/

– Artigo “Os 10 maus hábitos dos desenvolvedores JSF” - http://www.rponte.com.br/2008/11/24/os-10-maus-habitos-dos-desenvolvedores-jsf/

– Artigo “Repitam comigo: Redirect não é forward” - http://www.rponte.com.br/2008/07/12/repitam-comigo-redirect-nao-e-forward/

● www.google.com =P

● http://blog.vmendes.com.br ; )

Page 5: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 5

O que é JSF?

JavaServer Faces é uma especificação do framework MVC Java padrão para construir interfaces de usuários em aplicações WEB.

“JavaServer Faces define um framework para o desenvolvimento simplificado de interfaces gráficas baseadas em componentes.”

[12]

Page 6: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 6

O que é JSF? - Principais Características● Tecnologia definida através do JCP (Java Community Process)

● Baseado em componentes (Semelhante ao desenvolvimento desktop)

● Possui um conjunto de componentes de interface com usuário padrão

● É extensível, ou seja, novos componentes podem ser adicionados

– Componentes criados pelo desenvolvedor

– Componentes de terceiros

● Dirigido a eventos

● Validadores e conversores de dados

● Internacionalização

● Suporte a AJAX (Nativo a partir do JSF 2.0)

[3] [9]

Page 7: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 7

Por que usar JSF?

● Padrão de Mercado

● Presente nas especificações JEE 5 e JEE 6.

● Suporte de Big Players

– Sun, Apache, IBM, Oracle, BEA Systems, Borland

● Fácil de usar e produtivo

● Alta abstração para desenvolvimento WEB

● Baixa curva de aprendizagem

● Converters, Validators, Listeners, Componentes Prontos

● Extensível e Reutilizável

● Grande atividade da comunidade em fóruns, listas de discussão, blogs, portais, revistas, livros etc

● Integração com diversos frameworks:

– Spring, Hibernate, EJB3, JPA, JBoss Seam, JAAS, Struts, Shale, Tiles,GWT, Portlets e muitos outros

● Testes Unitários (JSFUnit)

● Templates

[3]

Page 8: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 8

História do JSF

● Surgiu da necessidade de um framework orientado a interface de usuário robusto para aplicações WEB, tal qual o Swing para aplicações desktop.

● Criado através do Java Community Process (JCP) por um grupo de líderes em tecnologia, incluindo a Sun Microsystems, Oracle, Borland, BEA, IBM e, através de um grupo de peritos Java e Web bem conhecido na indústria.

● O processo de especificação iniciou em 2001.*

[1] [2] [8]

Page 9: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 9

História do JSF

● JSF 1.0 (2004-03-11) — (DEPRECATED) – JSR 127

– Release inicial da especificação do JSF.

– Não fazia parte de nenhuma especificação JavaEE/J2EE

– Configurações baseadas fortemente em XML

● JSF 1.1 (2004-05-27) — (DEPRECATED)*

– Esta release corrigiu bugs da versão anterior.

– Não houve mudanças na especificação, nem no renderkit HTML.

● JSF 1.2 (2006-05-11) – JSR 252

– Muitas melhorias do core e APIs.

– Passou a fazer parte do Java EE (Java EE 5).[1] [2] [8]

Page 10: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 10

História do JSF

● JSF 2.0 (2009-06-28) – JSR 314

– Nova versão com melhoria na facilidade de uso, funcionalidade e desempenho.

– Passou a adotar anotações (Annotations) para suas configurações.

– Faz parte do Java EE 6.

● JSF 2.1 (2010-10-22)

– Versão atual.

– Segunda versão de manutenção da 2.0.

– Apenas um pequeno conjunto de mudanças na especificação.

[1] [2] [8]

Page 11: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 11

História do JSF

● JSF 2.2 (Em desenvolvimento) – JSR 344

– http://javaserverfaces-spec-public.java.net/

– Novidades

● Facilitadores para o Desenvolvimento:– Não será necessária Classe para manipulação de tags

customizadas (tag handler);– Ajustes para bibliotecas Facelets (abreviando atributos e tags);– Suporte para OSGi (Open Services Gateway Initiative);– Suporte para CDI em toda API;

[1] [2] [8]

Page 12: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 12

História do JSF

Novidades (Cont.)

● Integração com Portlet:

– Bookmarkability;– Endereçamento via Ajax;– Implementação de “component server”;

● Novidades:

– HTML 5;– Page Action;– Melhorias na captura de Eventos;

● Correções e Melhorias:

– Validação em múltiplos campos;– UIData Collection interface;– Depreciação do atributo “target”. [1] [2] [8]

Page 13: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 13

Implementações JSF

● O JSF é definido pelo JCP através de JSRs (Uma para cada versão)

● Uma JSR (Java Specification Request) resulta em documentações, interfaces e algumas classes que especificam como deve funcionar um novo produto.

● Ou seja, JSF é apenas uma especificação e cada empresa pode implementar um produto final compatível com o proposto pela especificação.

[2][4]

Page 14: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 14

Implementações JSF

● Mojarra

– É a implementação de referência do JSF (JSF RI)

– Implementação da SUN (GlassFish)

– É a mais utilizada hoje em dia

● Myfaces

– Implementação open source da Apache

● ADF Faces (Oracle)

● A implementação da BEA (já vem embutido WebLogic)

● A implementação da IBM (já vem embutido WebSphere)

● Backbase

● NetAdvantage [2][4]

Page 15: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 15

Implementações JSF

● Leitura Recomendada:

Qual implementação JSF você usa – http://www.rponte.com.br/2008/02/18/qual-implementacao-jsf-voce-usa/

[2][4]

Page 16: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 16

Hello World – Configurando o Ambiente

● Sistema Operacional CentOS 6.3

● JDK 6 (http://www.oracle.com/technetwork/java/javase/downloads/jdk6-downloads-1637591.html)

– Dá permissão de execução - “sudo chmod +x jdk-6u33-linux-x64-rpm.bin”

– Executar o instalador - “sudo ./jdk-6u33-linux-x64-rpm.bin”

● Eclipse IDE for Java EE Developers (Juno)- http://www.eclipse.org/downloads/

– Plugins

● Jboss Tools

Page 17: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 17

Hello World – Configurando o Ambiente

● Apache Tomcat 7 (http://tomcat.apache.org/download-70.cgi)

● MySQL

– Server - http://tecnoinformacao.wordpress.com/2012/03/16/instalando-o-mysql-no-centos-6/

– Client (Workbecnh) - http://certcollection.org/forum/topic/141624-how-to-install-mysql-workbench-in-centos-6/

Page 18: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 18

Hello World - Criando o projeto (JSF 1.2)

● Criar projeto do tipo “Dynamic Web Project”

– “File > New > Project... > Dynamic Web Project”● Adicionar as bibliotecas do JSF 1.2 e suas dependências na

pasta “WebContent/WEB-INF/lib”

– jsf-api.jar

– jsf-impl.jar

– jstl-1.2.jar● Criar o arquivo web.xml na pasta “WebContent/WEB-INF”

Page 19: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 19

Hello World - Criando o projeto (JSF 1.2)

Page 20: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 20

Hello World - Criando o projeto (JSF 1.2)

● Criar o arquivo faces-config.xml na pasta “WebContent/WEB-INF”

Page 21: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 21

Hello World - Criando o projeto (JSF 1.2)

● Adicionar Project Facet para JSF 1.2 (Opcional)

– Clicar com o botão direito no projeto e ir em “Properties > Project Facets” e marcar JavaServer Faces, selecionando a versão 1.2.

– Permite o uso do auto-complete nas telas.

Page 22: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 22

Hello World (JSF 1.2)

● Implementar a classe HelloMB.java

Page 23: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 23

Hello World (JSF 1.2)

● Adicionar a referência a classe HelloMB.java no arquivo faces-config.xml.

Page 24: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 24

Hello World (JSF 1.2)

● Criar tela (index.jsp) dentro da pasta WebContent que exibirá a mensagem do nosso ManagedBean

Page 25: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 25

Hello World (JSF 1.2)

● Adicionar o projeto ao Apache Tocamt

● Iniciar o servidor

● Acessar o endereço http://localhost:8080/jsf1.2

Page 26: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 26

Hello World – Criando o Projeto (JSF 2)

● Criar projeto do tipo “Dynamic Web Project”

– “File > New > Project... > Dynamic Web Project”● Adicionar as biliotecas do JSF e suas dependências

– jsf-api-2.1.x.jar

– jsf-impl-2.1.x.jar

– jstl-1.2.jar● Criar o arquivo web.xml na pasta “WebContent/WEB-INF”

Page 27: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 27

Hello World – Criando o Projeto (JSF 2)

Page 28: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 28

Hello World – Criando o Projeto (JSF 2)

● Adicionar Project Facet para JSF 2.1 (Opcional)

– Clicar com o botão direito no projeto e ir em “Properties > Project Facets” e marcar JavaServer Faces, selecionando a versão 2.1.

– Permite o uso do auto-complete nas telas.

Page 29: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 29

Hello World (JSF 2)

● Implementar a classe HelloMB.java

Page 30: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 30

Hello World (JSF 2)

● Criar tela (index.xhtml) dentro da pasta WebContent que exibirá a mensagem do nosso ManagedBean

Page 31: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 31

Hello World (JSF 2)

● Adicionar o projeto ao Apache Tocamt

● Iniciar o servidor

● Acessar o endereço http://localhost:8080/jsf2

Page 32: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 32

Arquivos de Configuração – web.xml

● É o descritor da aplicação web. Arquivo de configuração padrão de projetos Java WEB.

● É nele onde declaramos e mapeamos o uso do Faces Servlet. (O servlet que faz o JSF funcionar)

● Quando o JSF 2 roda em um Containner Servlet 3.0 (Ex. Sun Glassfish v3 ou Apache Tomcat 7) o web.xml é opcional, e o Faces Servlet Controller é mapeado automaticamente para os padrões de URL mais populares: /faces/*, *.jsf, and *.faces

[8][10]

Page 33: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 33

Arquivos de Configuração – web.xml

● Alguns parâmetros opcionais para JSF:

– javax.faces.STATE_SAVING_METHOD – Determina onde será salvo o estado da árvore de componentes da view. Os valores permitid são: server e client

– javax.faces.CONFIG_FILES – Utilizado para determinar arquivos de configuração do JSF, com nomes diferentes do padrão (faces-config.xml). Deve-se informar os nomes dos arquivos separads por vírgula.

– javax.faces.PROJECT_STAGE – Serve para que em tempo de execução informações e páginas adicionais de ajuda sejam exibidas. Os valores são: Development, Production, SystemTest, and UnitTest.

[8][10]

Page 34: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 34

Arquivos de Configuração – faces-config.xml

● Permite a configuração de todos os elementos de uma aplicação JSF: Manageds Beans, Regras de Navegação, Validadores, Conversores, Componentes, Phase Listeners, etc.

● Opcional a partir do JSF 2, pois a maioria das configuração podem ser substituídas por anotações.

[8][10]

Page 35: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 35

Managed Bean

● POJO (Plain Old Java Objects)

– Objetos Java que armazenam dados da aplicação e não implementam ou extendem nenhuma interface ou clase de algum framework específico.

● Envia objetos de negócio para a camada de apresentação, que sofrerão alterações em seus atributos durante uma requisição, assim como o métodos podem ser chamado a partir de um command.

● Qualquer classe Java com construtor público sem argumento, que siga a convenção de nomes JavaBeans para suas propriedades

[8][3]

Page 36: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 36

Managed Bean

● Objetos do tipo java.util.List ou java.util.Map também podem ser registrados como managed beans

● É acessado pela camada de visão através da expression language (EL) do JSF.

● Possuem um escopo: período de tempo em que uma instância de um managed bean estará diponível para outras partes do sistema.

– Application, Session, View, Request, None ou Custom

[8][3]

Page 37: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 37

Managed Bean - Escopos

[8]

Escopo Descrição

none ou @NoneScoped Não permite acesso direto pelas páginas, apenas através de outro Managed Bean

custom ou @CustomScoped Escopo é implementado de forma customizada

application ou @ApplicationScoped

O Managed Bean existirá durante o tempo de vida da aplicação e será compartilhado por todas as sessões

session ou @SessionScoped O Managed Bean existirá desde o momento que for requisitado a primeira vez até que a sessão do cliente seja finalizada

request ou @RequestScoped O Managed Bean existirá durante o tmpo de uma requisição HTTP

view ou @ViewScoped O Managed Bean existirá a partir de uma requisição para uma página e fica disponível enquanto o cliente fizer requisições para a mesma página

Page 38: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 38

Páginas JSF

● JSP: HTML or XML syntax

– Permite o uso JSTL e taglibs customizadas baseadas em páginas JSP

● Facelets: XHTML syntax

– Inicialmente criado como uma extensão para JSF, sendo incorporado a partir da versão 2.

– Desenhado com JSF em mente

– Prover a facilidade de criar templates

– Força uma separação limpa do MVC, porque desabiita a inclusão de código Java.

[8][11]

Page 39: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 39

Value Binding

● Liga o valor de um componente a um Managed Bean

● Essa ligação é feita através de JSF Expression Language (EL)

● Pode ser utilizado para executar métodos

● Ex.:

<h:outputText value="#{PessoaBean.nome}"/>

[][]

Page 40: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 40

Value Binding – Objeto implícitos diponíveis por EL

● application: The ServletContext or PortletContext, depending on whether an application is running in a servlet or portlet context, respectively.

● applicationScope: A map for storing application-scoped data

● component (JSF 2): The UIComponent instance being currently processed

● cc (JSF 2): The top-level composite component currently being processed.

● cookie: A map view of values in the HTTP Set-Cookie header

● facesContext: The actual FacesContext instance

● flash (JSF 2): A map whose values are guaranteed to be present only on the “next” request.

● header: A map view of all the HTTP headers for this request.

● headerValues: A map view of all the HTTP headers for this request[8]

Page 41: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 41

Value Binding – Objeto implícitos diponíveis por EL

● initParam: A map view of the init parameters for this application

● param Map A map view of all the query parameters for this request.

● paramValues: Map A map view of all the HTTP headers for this request.

● request: The ServletRequest or PortletRequest, depending on or whether the code is executing in a servlet or portlet environment, respectively.

● requestScope: A map for storing request-scoped data.

● resource: Allow a resource reference to be rendered to the page.

● session: The HttpSession or PortletSession, depending on or whether code is executing in a servlet or portlet environment, respectively.

● sessionScope: A map view of the session-scoped attributes.

● view: The current UIViewRoot for this view.

● viewScope (JSF 2): A map view of the attributes scoped to the current view. [8]

Page 42: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 42

Value Binding – Acessando Maps

● Propriedades do tipo Map podem ser acessadas a seguinte forma de expressão: #{MapObject[‘key’]}

● Ex.:<h:outputText value="#{param['userid']}" />

ou

<h:outputText value="#{param.userid}" />

[8]

Page 43: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 43

Referências

● Java EE 6: Da configuração aos testes – Java Magazine 106 - Luciano Davoglio Molinari

● http://www.slideshare.net/jornaljava/curso-jsf

● http://www.algaworks.com/cursos-online/desenvolvimento-web-com-jsf-2/127/o-que-e-jsf/

● http://en.wikipedia.org/wiki/JavaServer_Faces

● http://www.algaworks.com/downloads/apostilas/algaworks-dwjsf-desenvolvimento-web-com-javaserver-faces-2a-edicao.pdf

● JavaServer Faces 2.0: The Complete Reference. Ed Burns. Chris Schalk com Neil Griffin

● Desenvolvendo com JavaServer Faces – Java Magazine Nº 72 – Marcos Souza

● http://javaserverfaces.java.net/presentations/demystifyingjsf.pdf

● http://www.rponte.com.br/wp-content/uploads/2007/10/anatomia-jsf-javaserver-faces-cct.pdf

Page 44: Desenvolvimento WEB com JavaServer Faces - Aula 01

Oct 9, 2012 Desenvolvimento WEB com JavaServer™ Faces 44

Desenvolvimento WEB com JSF

Renato V. [email protected]

http://blog.vmendes.com.br