MC 17

Mini-curso Gratuito
OpenSource Education Globalcode
Slide 1
Apresentao da Agenda
Introduo Arquitetura JSF Principais componentes JSF Configurao Integrao JSF e JSP Ferramentas Links Perguntas e Respostas
Slide 2
Agenda
Slide 3
Introduo
Motivao
MVC tornou-se um padro de mercado; As interfaces grficas exigidas so muito complexas para serem desenvolvidas somente com HTML exigindo muito JavaScript; Muitos componentes de UI sendo desenvolvidos com Custom Tags ou JavaScript sem padronizao; Baixa produtividade no desenvolvimento de aplicaes Web;
OpenSource Education Globalcode Slide 4
Introduo
O que JavaServer Faces (JSF)?
Paradigma de programao visual de User-interfaces aplicado web um framework que permite a criao de aplicaes Web com semntica de Swing implementando MVC; Toolability = Ferramentabilidade ; Uma especificao J2EE JSR 127;
Slide 5
Introduo
J2EE Web Container J2EE EJB Container
JSF e J2EE
JavaServer Faces
Controller Servlet Java Server Pages
View Custom Tag
Model JavaBeans EJB
Slide 6
Introduo
Quais os prximos objetivos?

Todo Web Container compatvel com a especificao Java EE 5.0 implementa JSF; Criao de componentes de UI compatveis com JSF por terceiros; Suporte a JSF na maioria dos IDEs Aumento da produtividade de aplicao J2EE
Slide 7
Introduo OC4J - Oracle

Implementao Oracle de J2EE 1.5 Servlets JSP Custom Tags JSF
EJB
Slide 8
Introduo Sun Application Server

Implementao Sun de J2EE 1.5 Servlets JSP Custom Tags JSF
EJB
Slide 9
Agenda
Slide 10
Arquitetura JSF
Arquitetura Client-Server baseada em HTTP; Dificuldade em prover o mesmo dinamismo de uma aplicao desktop; Todo o processamento Java acontece no servidor;
Slide 11
Arquitetura Swing
GUI e Listener so processados pela mesma mquina
Listener Validao Converso de dados Integrao com a camada Model Lgica de negcios, etc Java Chamada a mtodos
Slide 12
Arquitetura JSF
J2EE Web Container Java Servlet Validao Converso de dados Integrao com a camada Model Lgica de negcios, etc
HTTP REQUEST / RESPONSE
Cliente Browser: HTML + JavaScript

Ciclo de vida do JSF
Criao da rvore de componentes. Atualiza rvore Se a pgina j foide 2. Apply Request Values componentes com visualizada na mesma Executa todasdados so 3. Process Validators valores da session os request. validaes associadas Execuo quaisquer Dispara do recuperados. ActionListener padro, Cada UI Component 4. Update Model Values aos eventos gerados pela componentes de atualiza o seu backing UIgeralmente com atualizao 5. Invoke Application model execuo de Gerao da Response componentes de 6. Render Response com a rvore de negcio componentes
1. Restore View
Slide 14
Agenda
Slide 15
Criao de pginas JSF

Links, formulrios, imagens, combo-box, tabelas, etc
Pgina JSF Tags: JSF HTML

Tags: JSF Core
Request
Managed Bean
Expression Language: EL Session

Atravs destas tags adicionamos validao, converso de dados, listeners Managed Bean
Dados para popular as tabelas, combo-box, textos.
Application
Managed Bean
Slide 16
Principais componentes de JSF
Bibliotecas de Tags Managed Beans Componentes de User-interface (UI) Validadores Conversores Eventos Listeners Renderizadores FacesController
Slide 17
Bibliotecas de Tags
Pginas JSF geralmente utilizam duas bibliotecas de Tags:

JSF Html: renderizao de componentes HTML JSF Core: integrao dos componentes de UI com validadores, conversores
Slide 18
Bibliotecas de Tags
A navegao em pginas HTML pode acontecer das seguintes formas:
Um link : <A HREF=catalogo.jsp> texto do link </A> Um formulrio <FORM action=catalogo.jsp>
Podemos utilizar os seguintes componentes JSF para gerar hyper links:

OutputLink CommandButton CommandLink
Slide 19
Tags de navegao
1. OutputLink: Utilizamos OutputLink quando nenhuma ao deve ser realizada quando o link for clicado, ou seja, somente o redirecionamento nos interessa. 2. CommandLink e CommandButton: so utilizados para gerar links e submeter formulrios, e podem ser configurados para executar uma determinada ao antes de enviar a Request para a pgina configurada. 3. CommandLink: utiliza JavaScript para submisso da Request.
Slide 20
Tags de navegao
Slide 21
Criao de pginas JSF
Slide 22
Principais componentes JSF

Slide 23
Managed Beans
Um Managed Bean um JavaBean gerenciado pelo framework JSF, ou seja, ele instanciado, e colocado no escopo de acordo com as configuraes encontradas no faces-config.xml Um ManagedBean tambm chamado de backing bean, pois contm os dados e os mtodos que sero executados quando algum dos componentes da pgina JSF tiver que executar uma ao.
Slide 24
Managed Beans
Chamamos de binding o vinculo entre um componente da pgina JSF e o seu backing model / managed bean.
Slide 25
Managed Beans
Model Sistema Legado
Slide 26
Managed Beans
Utilizamos Taglibs e EL (Expression Language) para associar (fazer o binding) de um componente de UI com um ManagedBean; <h:outputText value="#{clienteBean.nome}"/>
A String clienteBean est associada a classe ClienteBean no facesconfig.xml.
Slide 27
Managed Beans
Declarao de um ManagedBean no faces-config.xml
<managed-bean> <managed-bean-name>clienteBean</managed-bean-name> <managed-bean-class>ClienteBean</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean>
Slide 28

Slide 29
Componentes de User-Interface
Tecnicamente:
Todos os componentes de UI so subclasses da classe abstrata UIComponent; A classe UIComponentBase j implementa os mtodos necessrios de UIComponent podendo ser estendida diretamente;
Slide 30
Custom Tag renderiza um UICommand em forma de boto HTML Render Kit ou hyperlink
Slide 31
Componente de UI no responsvel pela renderizao;
Slide 32
Voc cria o componente do zero
Indicado para construo de Utilizado para customizao de componentes compostos componentes

Standard UI Components
UICommand (botes, hyperlinks, menus) UIForm, UIInput, UIParameter, UIGraphic (imagens) UIMessage, UIMessages (msgs de erro) UIOutput, UIPanel
Slide 34
Standard UI Components
UISelectBoolean (check box); UISelectItems, UISelectItem, UISelectMany UISelectOne (combo box, listas, conjunto de check boxes) UIData, UIColumn (tabelas, listas e rvores)
Slide 35
Slide 36
Validadores
Todos os componentes de UI derivados de UIInput podem ser validados;
Slide 37
Validadores
A validao pode ser feita das seguintes formas:

Delegar a validao para um mtodo de um JavaBean que estiver no escopo; Utilizar um Standard Validator Criar um Validator que implemente a interface javax.faces.validator.Validator
Slide 38
Validadores
Todas as implementaes de JSF devem ter os seguintes validadores:

DoubleRangeValidator LengthValidator LongRangeValidator
Slide 39
Slide 40
Conversores
Problemas comum:
Dados digitados pelo usurio so Strings; Dados apresentados podem estar formatados ou ter representao grfica, como um calendrio; necessrio converter estas Strings para Date, long, char, int, Cliente ou qualquer outro tipo e vice-versa.
Slide 41
Conversores
Todos os componentes de UI derivados de UIOutput podem ter conversores associados; Um conversor deve implementar a interface javax.faces.convert.Converter;
Slide 42
Conversores
Todas as implementaes de JSF devem ter os seguintes conversores:

DateTime Number (moeda, porcentagem, inteiros, etc)
Slide 43
Slide 44
Eventos
Modelo de eventos muito parecido com AWT e Swing Os Eventos so responsveis pela propagao das aes sobre a interface com o usurio; Cada componente de UI pode disparar quantos eventos forem necessrios; Um evento deve implementar a interface javax.faces.event.FacesEvent
Slide 45
Eventos
A especificao do JSF padroniza duas interfaces de eventos: ActionEvent (geradas atravs da interao com UICommand) ValueChangeEvent (geradas atravs da interao com UIInput) A especificao JavaBeans recomenda que todas as classe que representam eventos sejam ps-fixadas com a palavra Event.
Slide 46
Slide 47
Listeners
Cada tipo de evento tem uma interface listener correspondente; Toda interface listener deve estender a interface javax.faces.event.FacesListener ; A especificao JavaBeans recomenda que toda a classe que representa um listener tenha seu nome baseado no evento que est associada e seja ps-fixada com Listener ;
Slide 48
Listeners
A especificao do JSF define duas interfaces de Listeners padro:

ActionListener (UICommand) ValueChangeListener (UIInput)
Slide 49
Listeners
Cada componente de UI pode ter quantos listeners forem necessrios; Um Componente de UI tambm pode ser um listener;
Slide 50
Listeners
Os componentes de UI tem mtodos para registrar e remover listeners. Exemplos: addActionListener removeActionListener O registro de listeners tambm pode ser feito atravs das custom tags encontradas na Standard JSF HTML tag library
Slide 51
Slide 52
Renderizadores
Custom Tag renderiza um UICommand em forma de boto HTML Render Kit ou hyperlink
Slide 53
Renderizadores
A renderizao do componente pode ser feita pelo prprio componente ou delegada para um Renderizador. A renderizao atravs de um Renderizador prov maior flexibilidade e reusabilidade para aplicao.
Slide 54
Renderizadores
A aparncia fica separada da funcionalidade. O componente prov a funcionalidade e o renderizador a aparncia; Utilizamos estes componentes de UI atravs de custom tags definidas no HTML RenderKit; O HTML RenderKit deve obrigatoriamente ser oferecido por todas as implementaes de JSF;
Slide 55
Renderizadores
Um RenderKit uma coleo de renderizadores (javax.faces.render.Renderer) Um RenderKit deve implementar a interface javax.faces.render.RenderKit
Slide 56
Renderizadores
Standard JSF HTML Renderers:

Button Web Link Table Form Image Hidden Secret Input Text TextArea Label Output Link Output Text Grid Group Checkbox Listbox Menu Radio
Slide 57
Slide 58
FacesController
Um dos principais componentes de controle da aplicao; Implementao de FrontController conveniente para gerenciamento de segurana e acesso a aplicaes Web; Responsvel por grande parte do ciclo de vida de uma aplicao JSF, pois inicia vrios processos;
Slide 59
Agenda
Slide 60
Configurao
JARs necessrios:
jsf-api.jar jsf-ri.jar jstl.jar standard.jar commons-beansutils.jar commons-digester.jar commons-collections.jar commons-logging.jar
Slide 61
Configurao
Deployment Descriptor: web.xml

Fazer o mapeamento do FacesController Configurar o tipo de persistncia dos dados da tela (no cliente ou servidor)
Slide 62
Configurao
faces-config.xml
Neste arquivo so feitas todas as configuraes da aplicao JSF, como por exemplo: Navegao Managed Beans Validators
Slide 63
Configurao
A navegao configurada no faces-config.xml

<navigation-rule> <from-view-id>/index.jsp</from-view-id> <navigation-case> <description>Descricao</description> <from-outcome>viewClienteData</from-outcome> <to-view-id>/viewClienteData.jsp</to-view-id> </navigation-case> </navigation-rule>
Slide 64
Agenda
Slide 65
Integrao JSF e JSP
JSP no a nica forma de construir interfaces para JSF; A integrao feita atravs de TagLibs; As TagLibs ligam os componentes server-side aos clientside ( tipicamente HTML)
Slide 66
Integrao JSF e JSP

Core Tag Library: gerenciamento de listeners, configurao de componentes, validao, entre outros; HTML Tag Library: Definem o renderizador do componente de UI, utilizam EL para integrao com os Managed Beans; Existe uma tag para cada combinao entre renderizador e componente; Por exemplo, um UIInput pode ser renderizado em forma de inputText ou de inputSecret;
Slide 67
Integrao JSF e JSP
Configuraes necessrias: <%@ taglib uri=http://java.sun.com/jsf/html prefix=h %> <%@ taglib uri=http://java.sun.com/jsf/core prefix=h %>
Slide 68
Agenda
Slide 69
Ferramentas
Java Studio Creator JDeveloper JBuilder MyEclipseIDE Red Hat Developer Studio WSAD Eclipse 3.3 NetBeans Visual Web Pack
Slide 70
Agenda
Slide 71
Mais informaes
http://java.sun.com/developer/technicalArticles/J2EE/intro_ee5
http://java.sun.com/j2ee/javaserverfaces Mastering JavaServer Faces Editora Wiley http://www.jcp.org/en/jsr/detail?id=127
Slide 72
Agenda
Introduo Arquitetura JSF Principais componentes JSF Configurao Integrao JSF e JSP Ferramentas Links Como usar AJAX AJAX e JSF Perguntas e Respostas
Slide 73
Perguntas e Respostas
Slide 74

MC 17

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

MC 17

Enviado por

Direitos autorais:

Formatos disponíveis

Mini-curso Gratuito

OpenSource Education Globalcode

OpenSource Education Globalcode

OpenSource Education Globalcode

OpenSource Education Globalcode

Controller Servlet Java Server Pages

View Custom Tag

Model JavaBeans EJB

OpenSource Education Globalcode

Quais os prximos objetivos?

OpenSource Education Globalcode

Introduo OC4J - Oracle

Implementao Oracle de J2EE 1.5 Servlets JSP Custom Tags JSF

OpenSource Education Globalcode

Introduo Sun Application Server

Implementao Sun de J2EE 1.5 Servlets JSP Custom Tags JSF

OpenSource Education Globalcode

OpenSource Education Globalcode

OpenSource Education Globalcode

GUI e Listener so processados pela mesma mquina

OpenSource Education Globalcode

HTTP REQUEST / RESPONSE

Cliente Browser: HTML + JavaScript

Ciclo de vida do JSF

OpenSource Education Globalcode

OpenSource Education Globalcode

Criao de pginas JSF

Pgina JSF Tags: JSF HTML

Expression Language: EL Session

Dados para popular as tabelas, combo-box, textos.

OpenSource Education Globalcode

Principais componentes de JSF

OpenSource Education Globalcode

Pginas JSF geralmente utilizam duas bibliotecas de Tags:

OpenSource Education Globalcode

Podemos utilizar os seguintes componentes JSF para gerar hyper links:

OpenSource Education Globalcode

OpenSource Education Globalcode

OpenSource Education Globalcode

Criao de pginas JSF

OpenSource Education Globalcode

Principais componentes JSF

OpenSource Education Globalcode

OpenSource Education Globalcode

OpenSource Education Globalcode

Model Sistema Legado

OpenSource Education Globalcode

OpenSource Education Globalcode

Declarao de um ManagedBean no faces-config.xml

<managed-bean> <managed-bean-name>clienteBean</managed-bean-name> <managed-bean-class>ClienteBean</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean>

OpenSource Education Globalcode

Principais componentes JSF

OpenSource Education Globalcode

OpenSource Education Globalcode

OpenSource Education Globalcode

Componente de UI no responsvel pela renderizao;

OpenSource Education Globalcode

Voc cria o componente do zero

Indicado para construo de Utilizado para customizao de componentes compostos componentes

OpenSource Education Globalcode

OpenSource Education Globalcode

Principais componentes JSF

OpenSource Education Globalcode