desenvolvimento web com javaserver faces - aula 02

Download Desenvolvimento WEB com JavaServer Faces - Aula 02

Post on 18-Apr-2015

970 views

Category:

Documents

1 download

Embed Size (px)

DESCRIPTION

Segunda aula do curso Desenvolvimento WEB com JavaServer Faces, ministrado para integrantes da equipe de Desenvolvimento e Manuteno de Sistemas do Ncleo de Tcnologia da Informao - UFPE.Tpicos abordados: -JSF e o padro MVC -UI Components -Navegao

TRANSCRIPT

Desenvolvimento WEB com JavaServer FacesRenato V. Mendes Tc. De Tecnologia da Informao NTI/UFPE

Aula 02 - Agenda

JSF e o padro MVC UI Components Navegao

Oct 17, 2012

Desenvolvimento WEB com JavaServer Faces

44

Dica Plugin JBoss Tools

Conjunto de plugins para eclipse para trabalhar com tecnologias da JBoss Traz tambm facilidades para trabalhar com JSF no eclipse http://www.jboss.org/tools Pode ser instalado no eclipse pelo Marketplace

Help > Eclipse Marketplace...

Oct 17, 2012

Desenvolvimento WEB com JavaServer Faces

45

Entendendo o MVC no JSF

MVC

Padro de projeto que separa a lgica da aplicao da interface do usurio.

Os frameworks MVC possuem as seguintes classificaes:

Action Based Component Based

[8]Oct 17, 2012 Desenvolvimento WEB com JavaServer Faces 46

Frameworks WEBAction Based x Componet BasedStruts Spring MVC VRaptor ASP.NET MVC Rails[13]Oct 17, 2012 Desenvolvimento WEB com JavaServer Faces 47

JSF Wicket Tapestry

Frameworks WEB Action Based

[13]Oct 17, 2012 Desenvolvimento WEB com JavaServer Faces 48

Frameworks WEB Component Based

[13]Oct 17, 2012 Desenvolvimento WEB com JavaServer Faces 49

Frameworks WEBAction Based Desacoplamento entre a viso Component Based Maior acoplamento entre viso e o framework Permite criao de componentes ricos controlados por cdigo Java

No permite a criao de componentes ricos controlados por cdigo Java

Dados so empurrados do controlador Os dados so puxados pela viso para a viso (MVC Push) (MVC Pull) Trabalha mais prximo do protocolo Http (Request e Response) Protocolo Http abstrado pelo framework [13] [14]Oct 17, 2012 Desenvolvimento WEB com JavaServer Faces 50

UI Components

O JSF possui 04 bibliotecas de componentes padro

Core Library HTML Library Facelet Template Tag Library Composite Component Tag Library

Para aplicaes que utilizam JSP, apenas as bibliotecas Core e HTML esto disponveis.

[8]Oct 17, 2012 Desenvolvimento WEB com JavaServer Faces 51

UI Components Core Library

Associado com o namespace f: e URI http://java.sun.com/jsf/core Disponibiliza componentes utilitarios comuns para o desenvolvimento de aplicaes

Validao Converso Internacionalizao Etc.[8]52

Componentes dessa biblioteca no possuem representao visual para o usurioDesenvolvimento WEB com JavaServer Faces

Oct 17, 2012

UI Components Core LibraryTag Name f:actionListener f:ajax f:attribute f:convertDateTime f:convertNumber f:converter f:event f:facet f:loadBundle f:metadata f:param f:phaseListener f:selectItem View Facelets, JSP Facelets Facelets, JSP Facelets, JSP Facelets, JSP Facelets, JSP Facelets Facelets, JSP Facelets, JSP Facelets Facelets, JSP Facelets, JSP Facelets, JSP JSF Version 1.0+ 2.0+ 1.0+ 1.0+ 1.0+ 1.0+ 2.0+ 1.0+ 1.0+ 2.0+ 1.0+ 1.2+ 1.0+ [8]Oct 17, 2012 Desenvolvimento WEB com JavaServer Faces 53

UI Components Core LibraryTag Name f:selectItems f:setPropertyActionListener f:subview f:validateBean f:validateDoubleRange f:validateLength f:validateLongRange f:validateRegex f:validateRequired f:validator f:valueChangeListener f:verbatim f:view f:viewParamOct 17, 2012

View Facelets, JSP Facelets, JSP JSP Facelets, JSP Facelets, JSP Facelets, JSP Facelets, SP Facelets, JSP Facelets, JSP Facelets, JSP Facelets, JSP JSP Facelets, JSP FaceletsDesenvolvimento WEB com JavaServer Faces

JSF Version 1.0+ 1.2+ 1.0+ 2.0+ 1.0+ 1.0+ 1.0+ 2.0+ 2.0+ 1.0+ 1.0+ 1.0+ 1.0+ 2.054

[8]

UI Components HTML Library

Associado com o namespace h: e URI http://java.sun.com/jsf/html Disponibiliza componentes HTML

Inputs Buttons Tables Checkboxes Etc.[8]

Oct 17, 2012

Desenvolvimento WEB com JavaServer Faces

55

UI Components HTML Library

h:body (2.0+)

h:button (2.0+)

h:column (1.0+) h:commandButton (1.0+)

h:commandLink (1.0+) h:dataTable (1.0+) h:form (1.0+)Desenvolvimento WEB com JavaServer Faces 56

[8]

Oct 17, 2012

UI Components HTML Library

h:graphicImage (1.0+) h:head (2.0+)

h:inputHidden (1.0+) h:inputSecret (1.0+) h:inputText (1.0+) h:inputTextarea (1.0+)

h:message e h:messages(1.0+)

Desenvolvimento WEB com JavaServer Faces 57

[8]

Oct 17, 2012

UI Components HTML Library

h:link (2.0+)

h:outputFormat (1.0+) h:outputLabel (1.0+) h:outputLink (1.0+) h:outputScript (2.0+)

h:outputStyleSheet (2.0+)

[8]

Oct 17, 2012

Desenvolvimento WEB com JavaServer Faces

58

UI Components HTML Library

h:outputText (1.0+) h:panelGrid (1.0+)

h:panelGroup (1.0+)

h:selectBooleanCheckbox (1.0+)

h:selectManyCheckbox (1.0+) h:selectManyListbox (1.0+)

[8]Desenvolvimento WEB com JavaServer Faces 59

Oct 17, 2012

UI Components HTML Library

h:selectManyMenu

h:selectOneListBox

Item 0 Item 1

h:selectOneMenu

Item 0 Item 1 [8]60

Oct 17, 2012

Desenvolvimento WEB com JavaServer Faces

UI Components HTML Library

h:selectOneRadio

Item 0 Item 1 [8]

Oct 17, 2012

Desenvolvimento WEB com JavaServer Faces

61

UI Components Facelet Template Library

Associado com o namespace ui: e URI http://java.sun.com/jsf/facelets Adiciona funcionalidades para templates e layout *Ser visto com mais detalhes na aula que falaremos sobre templates

[8]Oct 17, 2012 Desenvolvimento WEB com JavaServer Faces 62

UI Components Composite Component Tag Library

Associado com o namespace cc: e URI http://java.sun.com/jsf/composite Adiciona funcionalidades para criao de componentes atravs da composio de outros componentes *Ser visto com mais detalhes na aula que falaremos sobre componentes customizados

[8]Oct 17, 2012 Desenvolvimento WEB com JavaServer Faces 63

Cadastro de Usurio

Utilizando os componentes bsicos do JSF vamos criar um cadastro simples de usurios

Usuario (username) Senha (Deve-se pedir confirmao de senha e validar) Nome E-mail (Deve-se validar o formato do e-mail. Ex.: nome@email.com) Sexo (Tem que ser exibidas as duas opes) Data de nascimento (Deve-se validar o formato da data como DD/MM/AAAA)

Oct 17, 2012

Desenvolvimento WEB com JavaServer Faces

64

Cadastro de Usurio

Alm disso devemos:

Informar ao usurio se alguma regra de validao no for seguida junto ao campo relacionado Os nome dos campos e botes devem ficar em um lugar nico para toda aplicao, de formar que possam ser facilmente alterados em todos os lugares (Uso de properties) A requisio deve ser feita utilizando AJAX Se tudo estiver correto devemos exibir uma mensagem de sucesso ao usurio

Oct 17, 2012

Desenvolvimento WEB com JavaServer Faces

65

Cadastro de Usurio

Exemplo da tela de cadastro

Oct 17, 2012

Desenvolvimento WEB com JavaServer Faces

66

Cadastro de Usurio

Criamos um projeto do tipo JSF

File > New > Project... > JSF Project Project Name: JSF JSF Enviroment: JSF 2.0 Template: JSFBlanWithoutLibs

Adicionamos as bibliotecas do JSF

Oct 17, 2012

Desenvolvimento WEB com JavaServer Faces

67

Classe Usuario

Classe que representa o usurio a ser cadastrado Possui os atributos:

Login Senha Nome Email Sexo Data de ascmento

Oct 17, 2012

Desenvolvimento WEB com JavaServer Faces

68

Classe Usuario

Oct 17, 2012

Desenvolvimento WEB com JavaServer Faces

69

Mensagens.properties

Arquivo de properties com as mensagens e nomes de campos do cadastro (Localizado no pacote br.ufpe.nti.properties)

Oct 17, 2012

Desenvolvimento WEB com JavaServer Faces

70

Classe UsuarioMBean

Managed Bean para o cadastro de usurio

Oct 17, 2012

Desenvolvimento WEB com JavaServer Faces

71

Classe UsuarioMBean

Oct 17, 2012

Desenvolvimento WEB com JavaServer Faces

72

Classe UsuarioMBean

Oct 17, 2012

Desenvolvimento WEB com JavaServer Faces

73

Classe UsuarioMBean

Oct 17, 2012

Desenvolvimento WEB com JavaServer Faces

74

Adicionar Bundle ao Faces-config.xml

Oct 17, 2012

Desenvolvimento WEB com JavaServer Faces

75

Adicionar Bundle ao Faces-config.xml

O uso de properties (bundles) poderia ser utilizado diretamente nas pginas usando a tag:

Oct 17, 2012

Desenvolvimento WEB com JavaServer Faces

76

Adicionar cadastrar.xhtml

Pgina com o formulrio de cadastro de usurio

Oct 17, 2012

Desenvolvimento WEB com JavaServer Faces

77

Adicionar cadastrar.xhtml

Oct 17, 2012

Desenvolvimento WEB com JavaServer Faces

78

Adicionar cadastrar.xhtml

Oct 17, 2012

Desenvolvimento WEB com JavaServer Faces

79

Observaes cadastrar.xhtml

O atributo prependId como false, faz com que os ids dos componentes, no html gerado, no sejam concatendados com o do form.

Ex.: No lugar de ficar formUsuario:senha, ficar apenas senha. Serviu para facilitar a informao do id do componente (senha) no mtodo validarUsuario do Manged Bean.

O atributo columns="3" no panelGrid, faz com que a tabela gerda tenha 3 colunas, ou seja, como cada componente fica numa clula (), a cada 3 clulas ser iniciada uma nova linha ()

Obs.: Componentes contidos dentro de outros componente