Você está na página 1de 106

PROJETO DE INTERFACES PARA APLICAÇÕES WEB JAVA

CURSO : ESPECIALIZAÇÃO EM PLATAFORMA DE DESENVOLVIMENTO WEB – EAD Disciplinas : Desenvolvimento de ASP.Net

CURSO: ESPECIALIZAÇÃO EM PLATAFORMA DE DESENVOLVIMENTO WEB EAD

Disciplinas:

Desenvolvimento de ASP.Net - Prof. Dr. Rodrigo de Oliveira Plotze

Desenvolvimento de Aplicações Web com Java – Prof. Dr. Rodrigo de Oliveira Plotze

Didática do Ensino Superior – Profª. Drª. Noeli Prestes Padilha Rivas, Profª. Ms. Karina de Melo Conte e Profª. Ms. Hilda Maria Gonçalves da Silva

Metodologia da Pesquisa Científica – Prof. Ms. Carlos Alberto Marinheiro

Projeto de Interfaces para Aplicações Web utilizando Web Frameworks .Net - Prof. Dr. Rodrigo de Oliveira Plotze

Projeto de Interfaces para Aplicações Web Java Prof. Dr. Rodrigo de Oliveira Plotze

Web Semântica – Prof. Ms. Alexandre Leite Rangel

Plotze Web Semântica – Prof. Ms. Alexandre Leite Rangel Meu nome é Rodrigo de Oliveira Plotze.

Meu nome é Rodrigo de Oliveira Plotze. Sou doutor em Ciência da Computação

e Matemática Computacional pelo Instituto de Ciências Matemáticas e de

Computação (ICMC-USP/São Carlos). Além disso, desenvolvo pesquisas na área de Visão Computacional Aplicada à Biologia e à Medicina, na qual tenho diversos trabalhos científicos publicados em periódicos nacionais e

internacionais. Atuo como professor universitário nos cursos de graduação em Ciência da Computação e em Sistemas de Informação da Universidade Paulista (UNIP) e como tutor no curso de graduação em Sistemas de Informação da Universidade Federal de São Carlos (UAB-UFSCar). Também atuo como professor no Centro Universitário Claretiano em cursos de graduação presencial e a distância e nos cursos de Pós-graduação em Java

e em .NET. Trabalho, ativamente, com pesquisa e ensino de tecnologias para desenvolvimento web tanto com a plataforma Java quanto com o framework .NET da Microsoft.

E-mail: rodrigoplotze@gmail.com

web tanto com a plataforma Java quanto com o framework .NET da Microsoft. E-mail : rodrigoplotze@gmail.com
Prof. Dr. Rodrigo de Oliveira Plotze P ROJETO DE I NTERFACES PARA A PLICAÇÕES W
Prof. Dr. Rodrigo de Oliveira Plotze
Prof. Dr. Rodrigo de Oliveira Plotze

PROJETO DE INTERFACES PARA APLICAÇÕES WEB JAVA

Plotze P ROJETO DE I NTERFACES PARA A PLICAÇÕES W EB J AVA Guia de Disciplina

Guia de Disciplina Caderno de Referência de Conteúdo

Plotze P ROJETO DE I NTERFACES PARA A PLICAÇÕES W EB J AVA Guia de Disciplina
Plotze P ROJETO DE I NTERFACES PARA A PLICAÇÕES W EB J AVA Guia de Disciplina
© Ação Educacional Claretiana, 2010 – Batatais (SP) Trabalho realizado pelo Centro Universitário Claretiano de

© Ação Educacional Claretiana, 2010 – Batatais (SP)

Trabalho realizado pelo Centro Universitário Claretiano de Batatais (SP)

Curso: Especialização em Plataforma de Desenvolvimento Web

Disciplina: Projeto de Interfaces para Aplicações Web Java

Versão: ago./2012

Reitor: Prof. Dr. Pe. Sérgio Ibanor Piva

Vice-Reitor: Prof. Ms. Pe. Ronaldo Mazula

Pró-Reitor Administrativo: Pe. Luiz Claudemir Botteon

Pró-Reitor de Extensão e Ação Comunitária: Prof. Ms. Pe. Ronaldo Mazula

Pró-Reitor Acadêmico: Prof. Ms. Luís Cláudio de Almeida

Coordenador Geral de EAD: Prof. Artieres Estevão Romeiro

Coordenador do Curso de Especialização em Plataforma de Desenvolvimento Web: Prof. Luciano

Bérgamo

Coordenador de Material Didático Mediacional: J. Alves

Preparação Aline de Fátima Guedes Camila Maria Nardi Matos Carolina de Andrade Baviera Cátia Aparecida Ribeiro Dandara Louise Vieira Matavelli Elaine Aparecida de Lima Moraes Josiane Marchiori Martins Lidiane Maria Magalini Luciana A. Mani Adami Luciana dos Santos Sançana de Melo Patrícia Alves Veronez Montera Rita Cristina Bartolomeu Rosemeire Cristina Astolphi Buzzelli Simone Rodrigues de Oliveira Viviane Fernanda Zanotin

Revisão Felipe Aleixo Marcela Fonseca Ferreira Rodrigo Ferreira Daverni Talita Cristina Bartolomeu Vanessa Vergani Machado

Projeto gráfico, diagramação e capa Eduardo de Oliveira Azevedo Joice Cristina Micai Lúcia Maria de Sousa Ferrão Luis Antônio Guimarães Toloi Raphael Fantacini de Oliveira Renato de Oliveira Violin Tamires Botta Murakami de Souza Wagner Segato dos Santos

Todos os direitos reservados. É proibida a reprodução, a transmissão total ou parcial por qualquer forma e/ou qualquer meio (eletrônico ou mecânico, incluindo fotocópia, gravação e distribuição na web), ou o arquivamento em qualquer sistema de banco de dados sem a permissão por escrito do autor e da Ação Educacional Claretiana.

Centro Universitário Claretiano Rua Dom Bosco, 466 - Bairro: Castelo Batatais SP – CEP 14.300-000 cead@claretiano.edu.br Fone: (16) 3660-1777 – Fax: (16) 3660-1780 – 0800 941 0006 www.claretiano.edu.br

CEP 14.300-000 cead@claretiano.edu.br Fone: (16) 3660-1777 – Fax: (16) 3660-1780 – 0800 941 0006 www.claretiano.edu.br

GUIA DE DISCIPLINA

Sumário

1 APRESENTAÇÃO

7

2 DADOS GERAIS DA DISCIPLINA

7

3 CONSIDERAÇÕES

8

4 BIBLIOGRAFIA

BÁSICA

9

5 BIBLIOGRAFIA COMPLEMENTAR 9

CADERNO DE REFERÊNCIA DE CONTEÚDO

APRESENTAÇÃO

11

UNIDADE 1 – INTRODUÇÃO AO PROJETO DE INTERFACES PARA APLICAÇÕES WEB

1 INTRODUÇÃO

14

2 DESENVOLVIMENTO DE SOFTWARE E DE INTERFACES GRÁFICAS

14

3 FRAMEWORKS PARA DESENVOLVIMENTO WEB

20

4 CONSIDERAÇÕES

21

5 SUGESTÕES BIBLIOGRÁFICAS

22

6 E-REFERÊNCIAS

22

UNIDADE 2 – JAVASERVER FACES (JSF) – INTRODUÇÃO, ARQUITETURA, COMPONENTES E VALIDAÇÃO

1 INTRODUÇÃO

24

2 O FRAMEWORK JSF 24

3

4 EXEMPLO PRÁTICO E DETALHADO DE UMA APLICAÇÃO COM JSF 27

25

COMPONENTES

5 OUTROS COMPONENTES PARA CRIAÇÃO DE INTERFACES

37

6 VALIDAÇÃO DE DADOS

45

7 CONSIDERAÇÕES

54

8 SUGESTÕES BIBLIOGRÁFICAS

54

9 REFERÊNCIAS BIBLIOGRÁFICAS

54

10

E-REFERÊNCIAS

54

UNIDADE 3 – JAVASERVER FACES (JSF) – INTEGRAÇÃO COM BANCO DE DADOS

1 INTRODUÇÃO

56

2 UTILIZANDO JSF COM JDBC

56

3 UTILIZANDO JSF COM MAPEAMENTO OBJETO-RELACIONAL (HIBERNATE)

71

4 CONSIDERAÇÕES

76

5 SUGESTÕES BIBLIOGRÁFICAS

77

6 E-REFERÊNCIAS

77

UNIDADE 4 – JAVASERVER FACES (JSF) E SERVIÇOS WEB

1 INTRODUÇÃO

80

2 SERVIÇOS WEB

80

3 CONSTRUINDO E PUBLICANDO O SERVIÇO “BUSCA CEP”

81

4 CONSUMINDO UM SERVIÇO WEB POR MEIO DE UMA APLICAÇÃO COM JSF

85

E PUBLICANDO O SERVIÇO “BUSCA CEP” 81 4 CONSUMINDO UM SERVIÇO WEB POR MEIO DE UMA

Sumário

5 CONSUMINDO UM SERVIÇO WEB POR MEIO DE UMA APLICAÇÃO DESKTOP 89

92

92

92

8 REFERÊNCIAS BIBLIOGRÁFICAS

7 SUGESTÕES BIBLIOGRÁFICAS

6 CONSIDERAÇÕES

UNIDADE 5 – JAVASERVER FACES (JSF) E AJAX

1

2 INSTALANDO E CONFIGURANDO O FRAMEWORK ICEFACES 94

94

INTRODUÇÃO

3 CONSTRUINDO UMA APLICAÇÃO WEB COM O FRAMEWORK ICEFACES

95

4 CONSIDERAÇÕES

105

5 SUGESTÕES BIBLIOGRÁFICAS

106

6 E-REFERÊNCIAS

106

7 CONSIDERAÇÕES FINAIS 106

1 APRESENTAÇÃO

Seja bem-vindo(a) ao estudo da disciplina Projeto de Interfaces para Aplicações Web jAVA, que faz parte do curso de Especialização em Plataforma de Desenvolvimento Web.

Inicialmente, vamos estudar a evolução das tecnologias para construção de interfaces gráficas desde os ambientes de desenvolvimento integrados para criação de aplicações desktop até os frameworks para desenvolvimento de aplicações Web.

Em seguida, iniciaremos o estudo do framework para construção de interfaces, denominado “JavaServer Faces”. Esse framework fornece ao desenvolvedor um arcabouço completo de componentes para criação de interfaces além de disponibilizar técnicas específicas para validação de conversão de informações das interfaces.

Além disso, você estudará aspectos relacionados a uma nova tendência para construção de aplicações Web, denominada “serviços Web”. Essa tecnologia tem demonstrado grande aplicabilidade para o desenvolvimento de sistemas, especialmente, por facilitar a portabilidade e a reutilização dos componentes.

Por fim, estudaremos a construção de interfaces Web utilizando chamadas assíncronas por meio do Ajax. Para isso, serviremo-nos de um framework chamado “ICEfaces”.

Bons estudos!

2 DADOS GERAIS DA DISCIPLINA

Ementa

Introdução ao projeto de interfaces. Frameworks para desenvolvimento web. JavaServer Faces (JSF). Arquitetura e componentes do JSF. Integração do JSF ao banco de dados. JavaServer Faces e Ajax. Construção de aplicações Web baseadas em serviços

e na integração às interfaces.

Objetivo geral

Os alunos da disciplina Projeto de Interfaces para Aplicações Web Java, do curso de Especialização em Plataforma de Desenvolvimento Web na modalidade EAD do Claretiano, dado o Sistema Gerenciador de Aprendizagem e suas ferramentas, serão

capazes de desenvolver aplicações para internet com base nas mais avançadas tecnologias para criação de interfaces “ricas” (do inglês Rich Internet Applications – RIAs). Essas interfaces oferecem recursos e funcionalidades que se aproximam às aplicações desktop, tornando a experiência do usuário da internet muito mais agradável. Para isso, contarão com referencial em Material Didático Mediacional complementado por debates no Fórum

e por troca de mensagens na Lista. Ao final da disciplina, sob a orientação do tutor,

serão capazes de desenvolver aplicações para internet utilizando a plataforma Java com

as tecnologias JavaServer Faces e ICEfaces. Além disso, os alunos estarão aptos para

a construção de interfaces ricas, a criação de serviços Web e a utilização de Ajax. Para complementar a formação, os alunos serão estimulados a produzir resumos (ou sínteses) ou outras atividades sobre os temas estudados ao longo da disciplina.

GUIA DE DISCIPLINA
GUIA DE DISCIPLINA

Especialização em Plataforma de Desenvolvimento Web Java

Objetivos específicos

a) Identificar os conceitos fundamentais relacionados à construção de inter- faces para aplicações Web.

b) Produzir aplicações web utilizando o framework de desenvolvimento Ja- vaServer Faces.

c) Descrever e integrar as informações disponibilizadas nas interfaces Web com um sistema de gerenciamento de banco de dados.

d) Identificar e utilizar o mapeamento objeto-relacional, por meio do frame- work Hibernate, no desenvolvimento de aplicações ricas para internet.

e) Interpretar o funcionamento dos serviços Web.

f) Produzir aplicações para internet baseadas no conceito de serviços Web.

g) Descrever e integrar o framework JavaServer Faces aos serviços Web.

h) Descrever e interpretar as chamadas “assíncronas” (Ajax) na internet por meio do framework ICEFaces.

i) Desenvolver aplicações Web utilizando o framework ICEFaces.

Competências

Ao final deste estudo, os alunos do curso de Especialização em Plataforma de Desenvolvimento Web contarão com uma sólida base teórica e prática para fundamentar, criticamente, sua atuação profissional. Adquirirão as habilidades necessárias não somente para cumprir seu papel de profissional nesta área do saber, mas também para agir com ética e responsabilidade social, contribuindo, assim, para o respeito integral do ser humano.

Duração e carga horária

A carga horária da disciplina Projeto de Interfaces para Aplicações Web Java

é de 60 horas, nas quais realizaremos atividades presenciais e a distância. O conteúdo programático para o estudo das cinco unidades que a compõem está desenvolvido no Caderno de Referência de Conteúdo.

ATENÇÃO!

Na Sala de Aula Virtual – SAV, ferramenta “cronograma”, será disponibilizado para você um quadro com instruções referentes ao modo como deverá proceder nesta disciplina, bem como nas interatividades e atividades. O intuito é facilitar a visualização de informações importantes e, com isso, possibilitar um melhor aproveitamento em seus estudos.

3 CONSIDERAÇÕES

Nesta disciplina, você aprenderá ao longo das unidades os principais conceitos

a respeito da construção de interfaces para aplicações Web.

Durante o estudo das unidades, você compreenderá aspectos relacionados ao framework JavaServer Faces, o qual fornece ao programador uma gama de componentes para criação de interfaces. Além disso, estudará conceitos sobre armazenamento de informações, utilizando mapeamento objeto-relacional, e sobre serviços Web.

8 GUIA

© Projeto de Interfaces para Aplicações Web Java Claretiano – Batatais
© Projeto de Interfaces para Aplicações Web Java
Claretiano – Batatais
e sobre serviços Web. 8 GUIA © Projeto de Interfaces para Aplicações Web Java Claretiano –
GUIA DE DISCIPLINA
GUIA DE DISCIPLINA

Especialização em Plataforma de Desenvolvimento Web Java

Por fim, a disciplina abordará a construção de interfaces com chamadas assíncronas utilizando Ajax. Desse modo, você aprenderá o desenvolvimento de aplicações utilizando o framework ICEfaces.

Aproveite o conteúdo e bons estudos!

4 BIBLIOGRAFIA BÁSICA

HORSTMANN, C. S.; GEARY, D. M. Core JavaServer Faces. Rio de Janeiro: Alta Books,

2007.

5 BIBLIOGRAFIA COMPLEMENTAR

DEITEL, P. J.; DEITEL, H. M. Ajax, Rich Internet Applications e desenvolvimento web para programadores. São Paulo: Pearson Prentice Hall, 2008.

FALLOWS, R. J.; JACOBI, J. Pro JSF and Ajax: building Rich Internet components. New York: Apress, 2006.

: building Rich Internet components. New York: Apress, 2006. © Projeto de Interfaces para Aplicações Web
: building Rich Internet components. New York: Apress, 2006. © Projeto de Interfaces para Aplicações Web

© Projeto de Interfaces para Aplicações Web Java Claretiano – Batatais

GUIA

9

Anotações

Anotações
APRESENTAÇÃO Seja bem-vindo(a) ao estudo de Projeto de Interfaces para Aplicações Web Java. Nesta disciplina,
APRESENTAÇÃO Seja bem-vindo(a) ao estudo de Projeto de Interfaces para Aplicações Web Java. Nesta disciplina,

APRESENTAÇÃO

Seja bem-vindo(a) ao estudo de Projeto de Interfaces para Aplicações Web Java. Nesta disciplina, você aprenderá os principais conceitos relativos ao projeto e à construção de interfaces ricas para internet.

As aplicações ricas para internet (do inglês Rich Internet Applications – RIAs) têm alcançado grande destaque no cenário do desenvolvimento de aplicações. A principal característica destas é a semelhança com as aplicações desktop tanto em termos visuais quanto nas funcionalidades.

Os frameworks web têm se tornado muito atrativos para os programadores, uma vez que fornecem um arcabouço de funcionalidades implementadas por meio de um conjunto de classes. Essas classes podem ser facilmente utilizadas ao longo da aplicação. Nesta disciplina, você conhecerá o principal framework para desenvolvimento de aplicações Web na plataforma Java, denominado “JavaServer Faces” (JSF).

Além disso, você terá a oportunidade de compreender o conceito de serviços Web e de entender como essa tecnologia pode ser utilizada na construção de aplicações para Web.

Por fim, você conhecerá a metodologia Ajax, a qual é utilizada para realizar chamadas assíncronas por meio da internet. Para demonstrar essa metodologia, você conhecerá o framework ICEFaces, que é uma extensão do framework JSF e que provê suporte ao Ajax.

Aproveite o conteúdo e bons estudos!

Anotações

Anotações

Unidade

INTRODUÇÃO AO PROJETO DE INTERFACES PARA APLICAÇÕES WEB

1

Objetivo

• Identificar as principais características do projeto de aplicações para web.

Conteúdos

• Desenvolvimento de software e de interfaces gráficas.

Frameworks para desenvolvimento web.

UNIDADE 1
UNIDADE 1

Especialização em Plataforma de Desenvolvimento Web Java

ATENÇÃO! Ao iniciar seus estudos, procure ter à mão todos os recursos de que irá necessitar, tais como: dicionário, caderno para anotações, canetas, lápis, obras etc. Desse modo, você poderá evitar as interrupções e aproveitar seu tempo para ampliar sua compreensão. Pense nisso

1 INTRODUÇÃO

para ampliar sua compreensão. Pense nisso 1 INTRODUÇÃO Nesta primeira unidade, você terá a oportunidade de

Nesta primeira unidade, você terá a oportunidade de estudar os principais aspectos relacionados ao desenvolvimento de software e a importância das interfaces gráficas na construção de aplicações.

Você

aprenderá,

ainda,

a

respeito

da

evolução

dos

paradigmas

para

desenvolvimento de software desde as aplicações desktop até as aplicações Web.

Por fim, você encontrará informações sobre os frameworks. Um framework é formado por um conjunto de classes, com as mais variadas funcionalidades, que pode ser utilizado pelo programador para a construção de aplicações Web, objetivando auxiliá-lo na elaboração das interfaces.

Bom estudo!

2 DESENVOLVIMENTO DE SOFTWARE E DE INTERFACES GRÁFICAS

Nos últimos anos, você deve ter notado que os modelos de desenvolvimento de software passaram por grandes mudanças. Estas foram ocasionadas, especialmente, pela alteração dos paradigmas e pela evolução dos computadores.

Pensando um pouco no passado, a década de 1990 foi marcada, essencialmente, pelo desenvolvimento de sistemas computacionais voltados para computadores pessoais. Esses sistemas, em geral, utilizaram as redes locais como meios de comunicação e permitiram a realização das mais variadas tarefas. Vale lembrar que esses tipos de sistemas computacionais são, comumente, conhecidos como aplicações desktop.

Para a construção desse tipo de sistema, diversas tecnologias para desenvolvimento foram criadas, o que forneceu aos programadores uma infinidade de ferramentas. Essas ferramentas foram agrupadas em ambientes de desenvolvimentos integrados – em inglês Integrated Development Environment (IDE).

Esses ambientes fornecem todos os requisitos necessários para o desenvolvimento dos sistemas computacionais desde a codificação e a construção das interfaces até a compilação e os testes. Talvez você nunca tenha utilizado nenhum desses ambientes, mas os mais conhecidos da década de 1990 foram:

• Microsoft Visual Basic.

• Borland Delphi.

• Borland C++ Builder.

14 CRC

© Projeto de Interfaces para Aplicações Web Java Claretiano – Batatais
© Projeto de Interfaces para Aplicações Web Java
Claretiano – Batatais
Delphi. • Borland C++ Builder. 14 CRC © Projeto de Interfaces para Aplicações Web Java Claretiano
UNIDADE 1
UNIDADE 1

Especialização em Plataforma de Desenvolvimento Web Java

1 Especialização em Plataforma de Desenvolvimento Web Java Fonte : acervo pessoal. Figura 1 Ambiente de

Fonte: acervo pessoal.

Figura 1 Ambiente de desenvolvimento Visual Basic.

Figura 1 Ambiente de desenvolvimento Visual Basic . © Projeto de Interfaces para Aplicações Web Java
Figura 1 Ambiente de desenvolvimento Visual Basic . © Projeto de Interfaces para Aplicações Web Java

© Projeto de Interfaces para Aplicações Web Java Claretiano – Batatais

CRC

15

UNIDADE 1
UNIDADE 1

Especialização em Plataforma de Desenvolvimento Web Java

1 Especialização em Plataforma de Desenvolvimento Web Java Fonte : acervo pessoal. Figura 2 Ambiente de

Fonte: acervo pessoal.

Figura 2 Ambiente de desenvolvimento Borland Delphi.

Como muitas vezes a tarefa do programador não é nada fácil, as características embutidas nesses ambientes tornaram o desenvolvimento de sistemas computacionais uma tarefa rápida e descomplicada. Esses fatos se devem, especialmente, à maneira da construção das interfaces gráficas, a qual utilizava uma metodologia de criação baseada no modelo “arrastar e soltar” – do inglês drag-and-drop.

Nesse tipo de metodologia, o programador constrói a interface gráfica do sistema computacional apenas arrastando e soltando os componentes desejados. Por exemplo:

para adicionar um botão a uma interface (ou a um formulário), basta o programador selecionar o botão na paleta de componentes, isto é, arrastar o botão para o formulário, e soltar. Pronto. A interface está criada.

A paleta de componentes foi outro fator importante na construção das interfaces. Essa paleta é formada por um conjunto de componentes visuais pré-definidos e com comportamentos próprios, os quais podem ser utilizados a qualquer momento pelo programador. Com isso, a criação de uma interface gráfica pode ser realizada com apenas alguns cliques.

gráfica pode ser realizada com apenas alguns cliques. Fonte : acervo pessoal. Figura 3 Paleta de

Fonte: acervo pessoal.

Figura 3 Paleta de componentes do ambiente Borland Delphi.

16 CRC

© Projeto de Interfaces para Aplicações Web Java Claretiano – Batatais
© Projeto de Interfaces para Aplicações Web Java
Claretiano – Batatais
do ambiente Borland Delphi . 16 CRC © Projeto de Interfaces para Aplicações Web Java Claretiano
UNIDADE 1
UNIDADE 1

Especialização em Plataforma de Desenvolvimento Web Java

Embora essa metodologia tenha dominado o cenário do desenvolvimento de softwares na década de 1990, com a evolução dos meios de comunicação – especialmente da internet –, esse modelo sofreu grandes mudanças.

Uma evolução natural das aplicações desktop foram as aplicações Web, as quais necessitam de um navegador para apresentação do conteúdo. Esse progresso tem se tornado cada vez mais evidente devido à popularização da internet e à navegação em velocidades aceitáveis. Além disso, o desenvolvimento de sistemas baseados em web minimiza diversos problemas encontrados nas aplicações desktop, como por exemplo, a manutenção do software.

No entanto, com o crescimento de sistemas baseados em web, um dos principais desafios é a construção de interfaces gráficas tão intuitivas quanto as interfaces desktop. Além disso, algumas perguntas ainda precisam ser respondidas: a construção de interfaces para aplicações Web pode ser tão fácil e rápida quanto a criação de interfaces desktop? Essa construção é produtiva? É possível reutilizar componentes e interfaces já criadas?

Conforme estudado na disciplina Desenvolvimento de Aplicações Web com Java, o desenvolvimento de sistemas web dinâmicos teve início com a tecnologia CGI (Common Gateway Internet), juntamente com o HTML (HyperText Markup Language). A combinação dessas tecnologias permitiu os primeiros modelos de interatividade entre usuários e aplicações Web. Além da tecnologia CGI, outras linguagens foram desenvolvidas para a construção de aplicações Web, como: PHP, ASP, JSP etc.

Nesse primeiro momento, as interfaces eram criadas por meio de um conjunto de componentes de formulários disponíveis no HTML. Esses componentes contêm diversos controles de interação, tais como campos de texto, botões, caixas de seleção etc. Com o desenvolvimento de uma especificação mais padronizada e robusta, o XHTML (Extensible HyperText Markup Language) e o CSS (Cascading Style Sheets) tornaram-se referência na elaboração de páginas web com qualidade.

Uma característica importante das aplicações desktop é a possibilidade que o programador tem de tratar os eventos do usuário com a interface gráfica. No caso das interfaces desktop, diversos eventos podem ser tratados, tais como cliques e movimentação do mouse, acionamento das teclas, redimensionamento das janelas etc. Em sistemas baseados web, essa característica também é possível, mas com algumas restrições. Essas restrições são impostas, especialmente, devido aos diversos tipos de navegadores existentes hoje em dia e a uma falta de padronização desse procedimento.

O modelo de objeto de documento – do inglês Document Object Model –, ou simplesmente DOM, permite ao programador ter acesso a todos os elementos de uma página web. Assim, utilizando a linguagem JavaScript, é possível criar, modificar e remover, dinamicamente, os elementos da página. Além disso, permite ao programador tratar interações do usuário da mesma maneira que isto é realizado em sistemas desktop.

Diversos programas ou plugins permitem ao programador visualizar os elementos de uma página web; dentre eles, podemos destacar o FireBug, que é uma solução bastante eficiente.

destacar o FireBug, que é uma solução bastante eficiente. ATENÇÃO! Para saber mais sobre o FireBug,

ATENÇÃO! Para saber mais sobre o FireBug, acesse o site disponível em:

<http://getfirebug.com/>. Acesso em: 2 fev. 2010.

<http://getfirebug.com/>. Acesso em: 2 fev. 2010. © Projeto de Interfaces para Aplicações Web Java
<http://getfirebug.com/>. Acesso em: 2 fev. 2010. © Projeto de Interfaces para Aplicações Web Java

© Projeto de Interfaces para Aplicações Web Java Claretiano – Batatais

CRC

17

UNIDADE 1
UNIDADE 1

Especialização em Plataforma de Desenvolvimento Web Java

1 Especialização em Plataforma de Desenvolvimento Web Java Fonte : acervo pessoal. Figura 4 Visualização dos

Fonte: acervo pessoal.

Figura 4 Visualização dos elementos de uma página web (http://www.google.com) por meio do FireBug.

Embora as diversas tecnologias para desenvolvimento de sistemas web permitam ao programador construir aplicações semelhantes aos sistemas desktop, o principal desafio está relacionado à produtividade. A utilização de tecnologias como o XHTML, o CSS e o DOM pode ser eficiente; no entanto, torna a tarefa do programador lenta e complexa. Além disso, o conceito de reusabilidade é pouco empregado.

Nesse sentido, tecnologias têm surgido com o objetivo de agilizar o desenvolvimento das aplicações Web. Essas tecnologias seguem os mesmos moldes para o desenvolvimento rápido de aplicação – do inglês Rapid Application Development (RAD). Esse termo é muito comum em desenvolvedores de aplicações desktop, e o principal objetivo do RAD é a construção de aplicações com componentes reutilizáveis de maneira rápida e fácil. Além disso, as novas tecnologias fornecem mecanismos capazes de integrar essas aplicações aos banco de dados de forma descomplicada e prática.

Entretanto, a pergunta que fica é:

É possível utilizar RAD no desenvolvimento de aplicações Web?

Para responder a essa pergunta, vamos focar o desenvolvimento de aplicações na plataforma Java. Quando desenvolvemos aplicações desktop, a API Swing é um padrão para construção de interfaces gráficas, pois, por meio dela, é possível desenvolver interfaces de maneira rápida e fácil. Em aplicações Web, o desenvolvimento é realizado, especialmente, por meio da tecnologia JavaServer Pages (JSP), que permite incorporar todo o dinamismo necessário às páginas web.

18 CRC

© Projeto de Interfaces para Aplicações Web Java Claretiano – Batatais
© Projeto de Interfaces para Aplicações Web Java
Claretiano – Batatais
necessário às páginas web. 18 CRC © Projeto de Interfaces para Aplicações Web Java Claretiano –
UNIDADE 1
UNIDADE 1

Especialização em Plataforma de Desenvolvimento Web Java

Apesar da tecnologia JavaServer Pages e dos servlets fornecerem todos os requisitos necessários para construção de aplicações Web, as interfaces com o usuário ainda são o problema. Isso não significa que essas tecnologias não permitem a criação de RIAs – Rich Internet Applications (em português: aplicações ricas para internet).

O termo RIAs é muito utilizado para denominar aplicações Web que oferecem

sensibilidades, recursos e funcionalidades ricas parecidas com as das aplicações desktop. No entanto, a criação de interfaces ricas utilizando simplesmente JSP

é uma tarefa pouco produtiva.

Para minimizar esses problemas diversos, frameworks têm surgido para auxiliar o desenvolvimento de aplicações Web. Dentre eles, o principal destaque na plataforma Java é o JavaServer Faces (JSF).

O JSF tem como foco principal a construção de interfaces para aplicações Web,

e, pensando de forma prática, podemos associar a ele uma versão web da biblioteca Swing. O JSF possui um conjunto de componentes de interfaces pré-desenvolvidos, os quais podem ser programados utilizando o paradigma orientado a eventos, como ocorre nas aplicações desktop. Além disso, ambientes de desenvolvimentos integrados atuais, como por exemplo o NetBeans, incorporaram a possibilidade de construção de interfaces gráficas para web utilizando a filosofia drag-and-drop.

A figura a seguir apresenta um projeto utilizando o ambiente Visual Web

JavaServer Faces no ambiente NetBeans 6.7.

Visual Web JavaServer Faces no ambiente NetBeans 6.7. Fonte : acervo pessoal. Figura 5 Desenvolvimento visual

Fonte: acervo pessoal.

Figura 5 Desenvolvimento visual de aplicações Web utilizando o ambiente NetBeans.

visual de aplicações Web utilizando o ambiente NetBeans . Claretiano – Batatais © Projeto de Interfaces
Claretiano – Batatais
Claretiano – Batatais

© Projeto de Interfaces para Aplicações Web Java

CRC

19

UNIDADE 1
UNIDADE 1

Especialização em Plataforma de Desenvolvimento Web Java

3 FRAMEWORKS PARA DESENVOLVIMENTO WEB

Como discutido anteriormente, o principal problema em desenvolvimento de aplicações Web está relacionado à produtividade e à reusabilidade de código. Além disso, a complexidade da construção de interfaces gráficas torna essa tarefa um verdadeiro desafio.

Para auxiliar o desenvolvimento, diversos frameworks vêm surgindo com o objetivo de minimizar o trabalho do programador. Esses frameworks têm características específicas e podem ser escolhidos pelo desenvolver de acordo com as necessidades do projeto.

Vale ressaltar que esta disciplina tem como foco principal o framework JavaServer Faces; todavia, outros frameworks também merecem destaque, como o Spring e o Struts, por exemplo.

Spring

O Spring é um framework completo, baseado na arquitetura Model-View- Controller (MVC), que suporta diversas funcionalidades, tais como:

a) transações;

b) persistência de dados;

c) acesso remoto por meio de RMI;

d) serviços Web etc.

Uma das características interessantes do framework Spring é o fato de ele ser desenhado para não ser intrusivo. Isso significa que os códigos da lógica de negócio da aplicação não dependem do framework. Para que isso seja possível, o framework possui uma camada específica de integração, na qual o programador pode codificar as funcionalidades da aplicação.

O framework é muito bem organizado e está divido em vários módulos, os quais podem ser visualizados na figura a seguir.

ATENÇÃO! Para obter informações detalhadas sobre o framework Spring, acesse o site disponível em: <http://www. springframework.org/>. Acesso em: 2 fev. 2010.

springframework.org/>. Acesso em: 2 fev. 2010. Fonte : acervo pessoal. Figura 6 Visão geral do framework

Fonte: acervo pessoal.

Figura 6 Visão geral do framework Spring.

acervo pessoal. Figura 6 Visão geral do framework Spring . 20 CRC © Projeto de Interfaces

20 CRC

© Projeto de Interfaces para Aplicações Web Java Claretiano – Batatais
© Projeto de Interfaces para Aplicações Web Java
Claretiano – Batatais
6 Visão geral do framework Spring . 20 CRC © Projeto de Interfaces para Aplicações Web

Struts

UNIDADE 1
UNIDADE 1

Especialização em Plataforma de Desenvolvimento Web Java

O Struts é outro framework para desenvolvimento de aplicações Web que merece

destaque. Ele é desenhado para auxiliar o desenvolvedor na construção de aplicações Web

baseadas na arquitetura MVC. O framework tem como foco principal o controlador da arquitetura MVC.

A segunda versão do framework, denominada “Struts 2”, foi criada por meio

da junção da primeira versão (Struts 1) e do framework WebWork. Dentre as diversas características, ele possui suporte à Ajax, fácil integração com o framework Spring, rápida inicialização etc. A figura a seguir demonstra a visão geral da arquitetura Struts:

a seguir demonstra a visão geral da arquitetura Struts: Fonte : acervo pessoal. Figura 7 Visão

Fonte: acervo pessoal.

Figura 7 Visão geral do framework Struts.

4 CONSIDERAÇÕES

Nesta unidade, você pôde compreender os conceitos fundamentais do projeto

de interfaces, bem como os aspectos relacionados às interfaces para aplicações desktop

e web. Além disso, você também pôde compreender conceitos referentes aos frameworks para desenvolvimento web.

Na próxima unidade, você iniciará o estudo do framework JavaServer Faces (JSF). Vale lembrar que este é o principal framework para construção de interfaces para web na plataforma Java e que ele fornece ao programador uma infinidade de funcionalidades para

o desenvolvimento de aplicações.

de funcionalidades para o desenvolvimento de aplicações. © Projeto de Interfaces para Aplicações Web Java
de funcionalidades para o desenvolvimento de aplicações. © Projeto de Interfaces para Aplicações Web Java

© Projeto de Interfaces para Aplicações Web Java Claretiano – Batatais

CRC

21

UNIDADE 1
UNIDADE 1

Especialização em Plataforma de Desenvolvimento Web Java

ATENÇÃO! Para ampliar seus conhecimentos a respeito do tema abordado nesta unidade, sugerimos que você leia as obras apresentadas neste tópico, bem como acesse o site indicado, pois ele contém informações que podem muito acrescentar em sua prática profissional.

5 SUGESTÕES BIBLIOGRÁFICAS

em sua prática profissional. 5 SUGESTÕES BIBLIOGRÁFICAS DEITEL, P. J.; DEITEL, H. M. Ajax, Rich Internet

DEITEL, P. J.; DEITEL, H. M. Ajax, Rich Internet Applications e desenvolvimento web para programadores. São Paulo: Pearson Prentice Hall, 2008.

FALLOWS, R. J.; JACOBI, J. Pro JSF and Ajax: building Rich Internet components. New York: Apress, 2006.

6 E-REFERÊNCIAS

Lista de Figuras

Figura 5 Visão geral do framework Spring: Disponível em: <http://www. springframework.org/>. Acesso em: 2 fev. 2010.

Figura 6 Visão geral do framework Struts: Disponível em: <http://struts.apache. org/>. Acesso em: 2 fev 2010.

22 CRC

© Projeto de Interfaces para Aplicações Web Java Claretiano – Batatais
© Projeto de Interfaces para Aplicações Web Java
Claretiano – Batatais
org/>. Acesso em: 2 fev 2010. 22 CRC © Projeto de Interfaces para Aplicações Web Java

Unidade

JAVASERVER FACES (JSF) – INTRODUÇÃO, ARQUITETURA, COMPONENTES E VALIDAÇÃO

2

Objetivos

• Descrever o framework JavaServer Faces (JSF).

• Desenvolver aplicações utilizando o framework JSF.

• Definir a arquitetura e os principais componentes do JSF.

Conteúdos

• Componentes.

• Exemplo prático e detalhado de uma aplicação com JSF.

• Outros componentes para criação de interfaces.

• Validação de dados.

UNIDADE 2
UNIDADE 2

Especialização em Plataforma de Desenvolvimento Web Java

ATENÇÃO! Ao longo desta unidade, procure realizar as reflexões sugeridas. Faça seu cronograma e não se apresse em prosseguir seus estudos, pois, afinal, essas reflexões são importantes para possibilitar que você se envolva por inteiro na aprendizagem. Pense nisso

1 INTRODUÇÃO

por inteiro na aprendizagem. Pense nisso 1 INTRODUÇÃO Na unidade anterior, você estudou os aspectos da

Na unidade anterior, você estudou os aspectos da construção de interfaces para aplicações Web.

Nesta unidade, começaremos nosso aprendizado a respeito do framework JavaServer Faces ou, simplesmente, JSF.

Bom estudo!

2 O FRAMEWORK JSF

O framework JSF fornece aos desenvolvedores um conjunto extenso de bibliotecas para a construção de interfaces gráficas para aplicações Web. Suas principais características são:

• Componentes visuais predefinidos e reutilizáveis.

• Orientação a eventos.

• Incorporação das características do modelo MVC (Model-View-Controller). O objetivo principal desse framework é tornar o desenvolvimento web rápido e fácil. Para isso, o programador pode pensar na construção da aplicação em termos de componentes e de eventos em vez do tradicional fluxo de requisição e resposta. A Figura 1 apresenta uma visão geral do desenvolvimento de aplicações utilizando JSF.

geral do desenvolvimento de aplicações utilizando JSF. Fonte : adaptado de FALLOWS; JACOBI, 2006. Figura 1

Fonte: adaptado de FALLOWS; JACOBI, 2006.

Figura 1 Visão geral do desenvolvimento de aplicações com JSF.

Um fato importante é o de que uma aplicação JSF pode ser construída para vários tipos de clientes. Essa característica de tal framework permite a separação entre a apresentação e o processamento da aplicação. Em outras palavras, dependendo do cliente (navegador, celular etc.), uma aplicação pode ser apresentada de várias maneiras; todavia, o processamento é realizado de uma única forma. Esse ponto faz que o tempo de desenvolvimento seja reduzido e, além disso, minimiza o processo de manutenção da aplicação.

24 CRC

© Projeto de Interfaces para Aplicações Web Java Claretiano – Batatais
© Projeto de Interfaces para Aplicações Web Java
Claretiano – Batatais
de manutenção da aplicação. 24 CRC © Projeto de Interfaces para Aplicações Web Java Claretiano –
UNIDADE 2
UNIDADE 2

Especialização em Plataforma de Desenvolvimento Web Java

Como descrito anteriormente, o framework JSF é baseado na arquitetura MVC. Desse modo, observe a Figura 2, que ilustra como os componentes desse framework estão organizados na arquitetura MVC.

desse framework estão organizados na arquitetura MVC. Fonte : adaptado de FALLOWS; JACOBI, 2006 Figura 2

Fonte: adaptado de FALLOWS; JACOBI, 2006

Figura 2 Aplicações JSF organizadas na arquitetura MVC.

3 COMPONENTES

O framework JavaServer Faces possui um conjunto vasto de componentes para

a criação de interfaces com o usuário. Além disso, ele possui outras funcionalidades para gerenciamento de estados dos componentes, para associação de eventos, para validação de informações, conversão, definição de fluxo de navegação e acessibilidade.

Para facilitar o entendimento, faremos uma comparação entre os componentes de formulário da linguagem HTML e os componentes do JSF. Considere uma página web na qual o usuário poderá entrar com informações. Para isso, foi utilizado um componente de formulário do tipo input, e sua declaração é apresentada como se segue:

<input type=“text” id=“id1” value=“Digite seu nome aqui.” />

Essa mesma declaração, utilizando os componentes do framework JSF, pode ser escrita da seguinte maneira:

<h:inputText value=“#{form.id1}” />

Pensando de forma mais detalhada, o processo de criação e exibição de componentes JSF é realizado em três etapas:

• Codificação: na qual o componente é escrito utilizando a sintaxe específica do JSF.

é escrito utilizando a sintaxe específica do JSF. © Projeto de Interfaces para Aplicações Web Java
é escrito utilizando a sintaxe específica do JSF. © Projeto de Interfaces para Aplicações Web Java

© Projeto de Interfaces para Aplicações Web Java Claretiano – Batatais

CRC

25

UNIDADE 2
UNIDADE 2

Especialização em Plataforma de Desenvolvimento Web Java

<h:form> <h:outputText value=“#{msg.lblNome}”/> <h:inputText value=“#{usuario.nome}”/>

<h:commandButton action=“#{usuario.exibir}” value=“#{msg.lblBotao}”

</h:form>

• Árvore de componentes: é uma estrutura de dados que contém objetos Java para todos os elementos da interface do usuário presente na página.

os elementos da interface do usuário presente na página. • Renderização: responsável pela conversão dos

• Renderização: responsável pela conversão dos componentes JSF em tags HTML.

pela conversão dos componentes JSF em tags HTML. Quando trabalhamos com importantes: value e action .

Quando

trabalhamos

com

importantes: value e action.

os

componentes

JSF,

duas

propriedades

são

A propriedade value é utilizada para associar um atributo de uma classe a um

componente JSF. Considere uma classe Java, denominada “Pessoa”, contendo um atributo intitulado “nome”. Para exibir o conteúdo desse atributo, utilizando um componente do tipo outputText, do JSF, basta usar o seguinte código:

<h:inputText value=“#{pessoa.nome}” />

26 CRC

© Projeto de Interfaces para Aplicações Web Java Claretiano – Batatais
© Projeto de Interfaces para Aplicações Web Java
Claretiano – Batatais
value=“#{pessoa.nome}” /> 26 CRC © Projeto de Interfaces para Aplicações Web Java Claretiano – Batatais
UNIDADE 2
UNIDADE 2

Especialização em Plataforma de Desenvolvimento Web Java

A propriedade action permite que métodos sejam disparados a partir de eventos ocorridos na página web. Imagine que a classe Pessoa contém um método denominado “gravarPessoa”. Para chamarmos esse método por meio de um componente commandButton do JSF, utilizamos o seguinte código:

<h:commandButton action=“#{pessoa.gravarPessoa}” />

4 EXEMPLO PRÁTICO E DETALHADO DE UMA APLICAÇÃO COM JSF

Para demonstrar os conceitos fundamentais do desenvolvimento de aplicações Web utilizando JavaServer Faces, criaremos uma aplicação para login de usuários. Para isso, vamos considerar uma aplicação responsável pelo login fictício de usuários, como pode ser visualizado na Figura 3.

de usuários, como pode ser visualizado na Figura 3. Fonte : acervo pessoal. Figura 3 Exemplo

Fonte: acervo pessoal.

Figura 3 Exemplo da aplicação Web para login de usuário com JSF.

Para codificação do exemplo, utilizaremos o ambiente NetBeans. Com o ambiente iniciado, clique em Arquivo Novo Projeto. Selecione a categoria Java Web e em Projeto escolha a opção Aplicação Web e, em seguida, clique no botão Próximo. Defina o nome do projeto como “JSF_Exemplo01” e clique em Próximo. Na sequência, selecione o servidor web de sua preferência e clique, novamente, no botão Próximo.

Na próxima tela, é possível selecionar os frameworks que serão utilizados na aplicação Web; nesse momento, selecione o framework JavaServer Faces e, em seguida, clique no botão Finalizar.

Faces e, em seguida, clique no botão Finalizar . © Projeto de Interfaces para Aplicações Web
Faces e, em seguida, clique no botão Finalizar . © Projeto de Interfaces para Aplicações Web

© Projeto de Interfaces para Aplicações Web Java Claretiano – Batatais

CRC

27

UNIDADE 2
UNIDADE 2

Especialização em Plataforma de Desenvolvimento Web Java

2 Especialização em Plataforma de Desenvolvimento Web Java Fonte : acervo pessoal. Figura 4 Criação de

Fonte: acervo pessoal.

Figura 4 Criação de uma aplicação Web no ambiente NetBeans utilizando o framework JavaServer Faces.

Para essa aplicação, serão utilizados quatro componentes visuais do framework JavaServer Faces:

a)

outputText;

b)

inputText;

c)

inputSecret;

d)

commandButton.

O

componente outputText é utilizado para exibição de informações na tela. Ele

pode ser comparado ao componente JLabel, do Swing.

O componente inputText, semelhante ao JTextField, é empregado para entrada

de informações.

O inputSecret é utilizado para entrada de informações do tipo senha assim como

o componente do Swing, JPasswordField.

Por fim, o componente commandButton cria um botão como o componente

JButton.

Para codificação do conteúdo JSF da página de login, você pode renomear

o arquivo welcomeJSF.jsp para index.jsp. Para garantir que o projeto funcionará

adequadamente, verifique o conteúdo do arquivo web.xml. Este deve ser semelhante ao

conteúdo a seguir:

28 CRC

© Projeto de Interfaces para Aplicações Web Java Claretiano – Batatais
© Projeto de Interfaces para Aplicações Web Java
Claretiano – Batatais
ser semelhante ao conteúdo a seguir: 28 CRC © Projeto de Interfaces para Aplicações Web Java

Código 1

UNIDADE 2
UNIDADE 2

Especialização em Plataforma de Desenvolvimento Web Java

1

<?xml version=”1.0” encoding=”UTF-8”?>

com/xml/ns/javaee/web-app_2_5.xsd”>

2

<web-app version=”2.5” xmlns=”http://java.sun.com/xml/ns/ javaee” xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”

xsi:schemaLocation=”http://java.sun.com/xml/ns/javaee http://java.sun.

3

<context-param>

4

<param-name>com.sun.faces.verifyObjects</param-name>

5

<param-value>false</param-value>

6

</context-param>

7

<context-param>

8

<param-name>com.sun.faces.validateXml</param-name>

9

<param-value>true</param-value>

10

</context-param>

11

<context-param>

12

<param-name>javax.faces.STATE_SAVING_METHOD</param-name>

13

<param-value>client</param-value>

14

</context-param>

15

<servlet>

16

<servlet-name>Faces Servlet</servlet-name>

17

<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>

18

<load-on-startup>1</load-on-startup>

19

</servlet>

20

<servlet-mapping>

21

<servlet-name>Faces Servlet</servlet-name>

22

<url-pattern>/faces/*</url-pattern>

23

</servlet-mapping>

24

<session-config>

25

<session-timeout>

26

30

27

</session-timeout>

28

</session-config>

29

30

<welcome-file-list>

31

<welcome-file>faces/index.jsp</welcome-file>

32

</welcome-file-list>

33

</web-app>

Fim Código 1

Observe que, como estamos utilizando o ambiente NetBeans, todas as configurações do framework JavaServer Faces foram incluídas automaticamente, como expressos nas linhas de 3 à 23. Além disso, é importante verificar o arquivo de boas- vindas definido na linha 31 como “index.jsp”.

O código JSF que produz a página de login é apresentado como se segue e deve ser codificado no arquivo index.jsp:

Código 2

1

<%@page contentType=”text/html” pageEncoding=”UTF-8”%>

2

3

<%@taglib prefix=”f” uri=”http://java.sun.com/jsf/core”%>

4

<%@taglib prefix=”h” uri=”http://java.sun.com/jsf/html”%>

5

6

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

7

“http://www.w3.org/TR/html4/loose.dtd”>

8

7 “http://www.w3.org/TR/html4/loose.dtd”> 8 Claretiano – Batatais © Projeto de Interfaces para
Claretiano – Batatais
Claretiano – Batatais

© Projeto de Interfaces para Aplicações Web Java

CRC

29

UNIDADE 2
UNIDADE 2

Especialização em Plataforma de Desenvolvimento Web Java

9

<f:view>

10

<html>

11

<head>

12

<meta http-equiv=”Content-Type”

13

content=”text/html; charset=UTF-8”/>

14

<title>Login</title>

15

</head>

16

<body>

17

<h1><h:outputText value=”Login”/></h1>

18

<h:form>

19

<h2>

20

<h:outputText value=”Usuário:” />

21

<h:inputText value=”#{login.usuario}”/>

22

</h2>

23

24

<h2>

25

<h:outputText value=”Senha:” />

26

<h:inputSecret value=”#{login.senha}”/>

27

</h2>

28

<h:commandButton action=”#{login.logarUsuario}”

29

value=”ok” />

30

</h:form>

31

32

</body>

33

</html>

34

</f:view>

Fim Código 2

VocêpoderánotarqueaspáginascriadascomoframeworkJSFsãomuitosemelhantes às páginas JSP. As principais mudanças estão nas linhas 3 e 4, que incorporam as bibliotecas de tags do framework JSF. Todas as páginas JSF devem obrigatoriamente incorporar essas taglibs.

Os principais comandos disponíveis nas taglibs core e HTML são listados na

Tabela 1.

Tabela 1 Principais comandos disponíveis nas taglibs core e HTML.

JSF Core

JSF HTML

actionListener

column

atribute

commandButton

convertDateTime

commandLink

converter

dataTable

convertNumber

form

facet

graphicImage

loadBundle

inputHidden

param

inputSecret

selectItem

inputText

30 CRC

© Projeto de Interfaces para Aplicações Web Java Claretiano – Batatais
© Projeto de Interfaces para Aplicações Web Java
Claretiano – Batatais
selectItem inputText 30 CRC © Projeto de Interfaces para Aplicações Web Java Claretiano – Batatais
UNIDADE 2
UNIDADE 2

Especialização em Plataforma de Desenvolvimento Web Java

JSF Core

JSF HTML

selectItems

inputTextArea

subview

message

validateDoubleRange

messages

validateLength

outputFormat

validateLongRange

outputLabel

validator

outputLink

valueChangeListener

outputText

verbatim

panelGrid

view

panelGroup

 

selectBooleanCheckbox

 

selectManyCheckbox

 

selectManyListbox

 

selectManyMeu

 

selectOneListBox

 

selectOneMenu

 

selectOneRadio

Fonte: acervo pessoal.

Continuando a aplicação de login de usuário, o próximo passo é adicionar uma classe JavaBean, que será responsável pelo gerenciamento do comportamento da interface. Nessa classe, são adicionados os atributos que fazem referência aos componentes JSF da página index.jsp, bem como às ações que são disparadas com as interações dos usuários. Essa classe é comumente denominada BackingBeans.

Na prática, você poderá criar diferentes beans para um ou mais componentes de uma página. No entanto, é recomendado que seja adotado um relacionamento “um para um” entre as páginas e as beans da sua aplicação. Assim, para uma aplicação contendo três páginas web, é ideal que sejam criadas três beans, sendo uma para cada página.

Para a criação dessa classe, clique com o botão direito do mouse sobre o nome do seu projeto (JSF_Exemplo01). Em seguida, selecione Novo Outro. Nas categorias, selecione JavaServer Faces e, em tipos de arquivos, selecione Bean gerenciado JSF, conforme ilustrado na Figura 5.

Bean gerenciado JSF , conforme ilustrado na Figura 5. © Projeto de Interfaces para Aplicações Web
Bean gerenciado JSF , conforme ilustrado na Figura 5. © Projeto de Interfaces para Aplicações Web

© Projeto de Interfaces para Aplicações Web Java Claretiano – Batatais

CRC

31

UNIDADE 2
UNIDADE 2

Especialização em Plataforma de Desenvolvimento Web Java

2 Especialização em Plataforma de Desenvolvimento Web Java Fonte : acervo pessoal. Figura 5 Criação de

Fonte: acervo pessoal.

Figura 5 Criação de Bean gerenciado para aplicação Web de login.

Na próxima tela, você poderá definir o nome da classe como “LoginBean”; ela será armazenada no pacote como “beans”. Você pode também definir como a classe LoginBean será referenciada nas aplicações Web, e essa configuração é definida no campo Nome. Para facilitar, utilizaremos o nome login.

Outro ponto importante é a especificação do escopo da bean LoginBean no contexto da aplicação Web. Em outras palavras, o escopo define a visibilidade de uma bean dentro da sua aplicação Web. Nesse caso, três escopos podem ser definidos:

request: começa quando uma requisição HTTP é submetida ao servidor e termina quando a resposta é enviada de volta ao cliente;

session: é visível durante toda a navegação do usuário pela aplicação e análogo às variáveis de sessão do JSP;

application: persiste por toda duração da aplicação Web e é compartilhado por todas as requisições e sessões.

As configurações do bean LoginBean são apresentadas na Figura 6, para concluir a criação do bean clique no botão Finalizar.

32 CRC

© Projeto de Interfaces para Aplicações Web Java Claretiano – Batatais
© Projeto de Interfaces para Aplicações Web Java
Claretiano – Batatais
do bean clique no botão Finalizar. 32 CRC © Projeto de Interfaces para Aplicações Web Java
UNIDADE 2
UNIDADE 2

Especialização em Plataforma de Desenvolvimento Web Java

2 Especialização em Plataforma de Desenvolvimento Web Java Fonte : acervo pessoal. Figura 6 Criação de

Fonte: acervo pessoal.

Figura 6 Criação de um novo bean gerenciado JSF no ambiente NetBeans.

O código da classe LoginBean segue os mesmos modelos das classes JavaBeans. Nessa classe, foram declarados os atributos “usuario” e “senha”, bem como os métodos manipuladores (getters e setters). Além disso, um método fictício foi codificado para representar a validação do usuário.

Código 3

1

package beans;

2

3

public class LoginBean {

4

5

private String usuario;

6

private String senha;

7

8

public LoginBean() {

9

}

10

11

public String getUsuario() {

12

return usuario;

13

}

14

public void setUsuario(String usuario) {

15

this.usuario = usuario;

16

}

17

public String getSenha() {

18

return senha;

19

}

20

public void setSenha(String senha) {

21

this.senha = senha;

void setSenha(String senha) { 21 this.senha = senha; Claretiano – Batatais © Projeto de Interfaces para
Claretiano – Batatais
Claretiano – Batatais

© Projeto de Interfaces para Aplicações Web Java

CRC

33

UNIDADE 2
UNIDADE 2

Especialização em Plataforma de Desenvolvimento Web Java

22

}

23

24

public String logarUsuario(){

25

if (usuario.equals(“joao”) && senha.equals(“123”))

26

return “sucesso”;

27

else

28

return “erro”;

29

}

30

}

Fim Código 3

Todas as aplicações criadas com o framework JSF possuem um arquivo de configuração no qual são especificados todos os recursos das beans pertencentes à aplicação. Além disso, é possível definir regras de navegação entre as páginas da aplicação em função dos eventos ocorridos no decorrer do processamento das requisições. Esse arquivo é chamado faces-config.xml e fica armazenado dentro da pasta WEB-INF.

Para demonstrar a utilização das regras de navegação em aplicação Web com JSF, você deve adicionar duas outras páginas JSF ao seu projeto atual. Para isso, clique com o botão direito do mouse sobre o nome do projeto, selecione Novo Outro. Em seguida, clique em JavaServer Faces e em Página JSF JSP. Crie duas páginas: uma denominada “sucesso.jsp” e outra chamada “erro.jsp”. Ao final, a estrutura do projeto deverá ser semelhante à Figura 7.

a estrutura do projeto deverá ser semelhante à Figura 7. Fonte : acervo pessoal. Figura 7

Fonte: acervo pessoal.

Figura 7 Estrutura da aplicação Web.

O usuário da aplicação será encaminhado para a página sucesso.jsp sempre que as informações de login estiverem corretas; caso contrário, ele será encaminhado para a página erro.jsp. O conteúdo das páginas é apresentado da seguinte forma:

34 CRC

© Projeto de Interfaces para Aplicações Web Java Claretiano – Batatais
© Projeto de Interfaces para Aplicações Web Java
Claretiano – Batatais
é apresentado da seguinte forma: 34 CRC © Projeto de Interfaces para Aplicações Web Java Claretiano

sucesso.jsp

Código 4

UNIDADE 2
UNIDADE 2

Especialização em Plataforma de Desenvolvimento Web Java

1

<%@page contentType=”text/html” pageEncoding=”UTF-8”%>

2

3

<%@taglib prefix=”f” uri=”http://java.sun.com/jsf/core”%>

4

<%@taglib prefix=”h” uri=”http://java.sun.com/jsf/html”%>

5

6

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

7

“http://www.w3.org/TR/html4/loose.dtd”>

8

9

<f:view>

10

<html>

11

<head>

12

<meta http-equiv=”Content-Type” content=”text/html;

charset=UTF-8”/>

13

<title>Login</title>

14

</head>

15

<body>

16

<h1>

17

Olá,

18

<h:outputText value=”#{login.usuario}”/>

19

seja bem-vindo ao sistema.

20

</h1>

21

</body>

22

</html>

23

</f:view>

Fim Código 4

erro.jsp

Código 5

1

<%@page contentType=”text/html” pageEncoding=”UTF-8”%>

2

3

<%@taglib prefix=”f” uri=”http://java.sun.com/jsf/core”%>

4

<%@taglib prefix=”h” uri=”http://java.sun.com/jsf/html”%>

5

6

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

7

“http://www.w3.org/TR/html4/loose.dtd”>

8

9

<f:view>

10

<html>

11

<head>

12

<meta http-equiv=”Content-Type” content=”text/html;

charset=UTF-8”/>

13

<title>Login</title>

14

</head>

15

<body>

16

<h1>

17

<h:outputText value=”Os dados informados são

inválidos.”/>

18

</h1>

19

</body>

20

</html>

21

</f:view>

Fim Código 5

Para concluir a construção da aplicação, vamos configurar as regras de navegação no arquivo faces-config.xml. O resultado do arquivo é apresentado da seguinte forma:

O resultado do arquivo é apresentado da seguinte forma: Claretiano – Batatais © Projeto de Interfaces
Claretiano – Batatais
Claretiano – Batatais

© Projeto de Interfaces para Aplicações Web Java

CRC

35

UNIDADE 2
UNIDADE 2

Especialização em Plataforma de Desenvolvimento Web Java

Código 6

1

2

3

4

5

6

7

<?xml version=’1.0’ encoding=’UTF-8’?>

<faces-config version=”1.2”

xmlns=”http://java.sun.com/xml/ns/javaee”

xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”

xsi:schemaLocation=”http://java.sun.com/xml/ns/javaee http://java.

sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd”>

8

<!-- CONFIGURACAO DO BEAN -->

9

<managed-bean>

10

<managed-bean-name>login</managed-bean-name>

11

<managed-bean-class>beans.LoginBean</managed-bean-class>

12

<managed-bean-scope>session</managed-bean-scope>

13

</managed-bean>

14

16

<navigation-rule>

17

<from-view-id>/index.jsp</from-view-id>

18

<navigation-case>

19

<from-outcome>sucesso</from-outcome>

20

<to-view-id>/sucesso.jsp</to-view-id>

21

</navigation-case>

22

<navigation-case>

23

<from-outcome>erro</from-outcome>

24

<to-view-id>/erro.jsp</to-view-id>

25

</navigation-case>

26

</navigation-rule>

27

28

</faces-config>

Fim Código 6

No arquivo de configuração, dois blocos merecem destaque. O primeiro é a

configuração do LoginBean. Observe que, na configuração, são descritos o nome da bean,

a classe de referência e a regra de escopo, como pode ser observado desde a linha 9 até

a 13.

Outro bloco importante é o que descreve as regras de navegação (linha 16 à 26). O conteúdo é bastante intuitivo e demonstra que, a partir da página de apresentação (view) index.jsp, dois caminhos podem ser seguidos:

• caso o resultado seja sucesso, a aplicação exibirá o conteúdo da página sucesso.jsp;

• caso o resultado seja erro, será apresentada a página erro.jsp.

Para facilitar o desenvolvimento, é possível utilizar o editor visual disponível no NetBeans, o qual produz o seguinte resultado:]

36 CRC

© Projeto de Interfaces para Aplicações Web Java Claretiano – Batatais
© Projeto de Interfaces para Aplicações Web Java
Claretiano – Batatais
o qual produz o seguinte resultado:] 36 CRC © Projeto de Interfaces para Aplicações Web Java
UNIDADE 2
UNIDADE 2

Especialização em Plataforma de Desenvolvimento Web Java

2 Especialização em Plataforma de Desenvolvimento Web Java Fonte : acervo pessoal. Figura 8 Configuração do

Fonte: acervo pessoal.

Figura 8 Configuração do arquivo faces-config.xml por meio do editor visual.

Você já pode executar e testar sua primeira aplicação Web utilizando o framework JavaServer Faces.

5 OUTROS COMPONENTES PARA CRIAÇÃO DE INTERFACES

Para demonstrar a utilização dos diversos componentes para criação de interfaces disponíveis nas bibliotecas do JavaServer Faces, vamos desenvolver um novo exemplo. O objetivo deste será criar um formulário de cadastro que contenha os principais componentes do JSF. Então, mãos à obra!

Para isso, crie um novo projeto para aplicação Web no NetBeans, denominado “JSF_Exemplo02”, e selecione o framework JavaServer Faces. Adicione ao projeto três páginas web clicando com o botão direito do mouse sobre o nome do projeto e selecionando a opção “Novo”. Em seguida, escolha a opção “Página JSF JSP”.

O projeto terá uma bean denominada “PessoaBean”, que deve ser colocada no pacote bean. A estrutura do projeto é apresentada da seguinte forma:

. A estrutura do projeto é apresentada da seguinte forma: © Projeto de Interfaces para Aplicações
. A estrutura do projeto é apresentada da seguinte forma: © Projeto de Interfaces para Aplicações

© Projeto de Interfaces para Aplicações Web Java Claretiano – Batatais

CRC

37

UNIDADE 2
UNIDADE 2

Especialização em Plataforma de Desenvolvimento Web Java

2 Especialização em Plataforma de Desenvolvimento Web Java Fonte : acervo pessoal. Figura 9 Estrutura do

Fonte: acervo pessoal.

Figura 9 Estrutura do projeto de aplicação Web com JSF.

Vamos começar codificando o arquivo index.jsp, que contém alguns dos principais componentes do JSF. Nesse arquivo, são utilizados os seguintes componentes JSF:

a) Commandbutton: é utilizado para criar o botão de envio de formulário. Esse botão está associado a um evento (ou a uma ação) codificado na bean Pessoabean.

b) Inputhidden: esse componente é muito comum em aplicações Web e permite que campos ocultos sejam colocados no formulário.

c) Inputtext: utilizado para a entrada de dados do tipo texto.

d) Inputtextarea: utilizado para a entrada de uma grande quantidade de texto. Esse componente representa o elemento textarea do HTML.

e) Outputtext: utilizado para exibir informações na página.

f) Panelgrid: utilizado para a criação de tabelas nas aplicações Web. O número de colunas da tabela pode ser configurado com a propriedade columns, e as linhas são determinadas, automaticamente, durante a renderização da página. Selectoneradio: esse componente faz parte de um conjunto de elementos de seleção mutuamente exclusiva. Nesse caso, o usuário pode selecionar apenas uma opção dentre as possíveis. Além desse componente, também é possível utilizar o selectOneListBox e selecOneMenu. Os itens de seleção são adicionados por meio do componente selectItem, da taglib core.

g) Selectmanycheckbox: neste componente, o usuário pode selecionar um ou vários itens. Os itens desse componente podem ser apresentados horizontalmente (lineDirection), ou verticalmente (pageDirection). Para isso, basta configurar a propriedade layout. Outros dois componentes fazem parte desse conjunto: selectManyListBox e selectManyMenu.

38 CRC

© Projeto de Interfaces para Aplicações Web Java Claretiano – Batatais
© Projeto de Interfaces para Aplicações Web Java
Claretiano – Batatais
e selectManyMenu . 38 CRC © Projeto de Interfaces para Aplicações Web Java Claretiano – Batatais
UNIDADE 2
UNIDADE 2

Especialização em Plataforma de Desenvolvimento Web Java

O conteúdo do arquivo index.jsp é apresentado da seguinte forma:

Código7

1

<%@page contentType=”text/html” pageEncoding=”UTF-8”%>

2

3

<%@taglib prefix=”f” uri=”http://java.sun.com/jsf/core”%>

4

<%@taglib prefix=”h” uri=”http://java.sun.com/jsf/html”%>

5

6

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

7

“http://www.w3.org/TR/html4/loose.dtd”>

8

9

<f:view>

10

<html>

11

<head>

12

<meta http-equiv=”Content-Type” content=”text/html;

charset=UTF-8”/>

13

<title>Formulário de Cadastro</title>

14

</head>

15

<body>

16

<h1>

17

<h:outputText value=”Informe seus dados”/>

18

</h1>

19

20

<h:form>

21

<h:panelGrid border=”0” columns=”2”>

22

<h:outputText value=”Nome:” />

23

<h:inputText value=”#{pessoa.nome}” size=”30”/>

24

25

<h:outputText value=”Sexo:” />

26

<h:selectOneRadio id=”sexo” value=”#{pessoa.sexo}”>

27

<f:selectItem itemLabel=”Masculino” itemValue=”Masculino” /> <f:selectItem itemLabel=”Feminino”

28

itemValue=”Feminino” />

29

</h:selectOneRadio>

30

31

<h:outputText value=”Interesse:” />

32

<h:selectManyCheckbox id=”interesse” value=”#{pessoa.interesse}” layout=”pageDirection”> <f:selectItem itemLabel=”Notícias”

33

itemValue=”Notícias” />

<f:selectItem itemLabel=”Esportes”

34

35

itemValue=”Esportes” /> <f:selectItem itemLabel=”Tecnologia” itemValue=”Tecnologia”/>

36

</h:selectManyCheckbox>

37

38

<h:outputText value=”Observações:” />

39

<h:inputTextarea value=”#{pessoa.observacoes}”

40

cols=”30” rows=”5” />

41

</h:panelGrid>

42

<h:commandButton value=”cadastrar” action=”#{pessoa.cadastrar}” />

43

<h:inputHidden value=”pessoa.dataatual” />

44

</h:form>

45

</body>

46

</html>

47

</f:view>

Fim Código 7

</html> 47 </f:view> Fim Código 7 Claretiano – Batatais © Projeto de Interfaces para
Claretiano – Batatais
Claretiano – Batatais

© Projeto de Interfaces para Aplicações Web Java

CRC

39

UNIDADE 2
UNIDADE 2

Especialização em Plataforma de Desenvolvimento Web Java

Neste momento, podemos testar a aplicação, e o resultado deve ser semelhante à Figura 10.

aplicação, e o resultado deve ser semelhante à Figura 10. Fonte : acervo pessoal. Figura 10

Fonte: acervo pessoal.

Figura 10 Aplicação demonstrando os diversos componentes do JSF.

Continuando o desenvolvimento do projeto, vamos codificar a bean PessoaBean. Essa classe contém diversos atributos que realizam o mapeamento das informações do formulário de apresentação (view) com a lógica de negócios da aplicação. O código é descrito da seguinte forma:

Código 8

1

package bean;

2

3

import java.util.List;

4

5

public class PessoaBean {

6

7

private String nome;

8

private String sexo;

9

private List<String> interesse;

10

private String observacoes;

11

private String data;

12

13

public PessoaBean() {

14

setData(String.valueOf(new java.util.Date()));

15

}

16

17

public String cadastrar(){

18

return !nome.equals(“”) ? “sucesso”: “erro”;

40 CRC

© Projeto de Interfaces para Aplicações Web Java Claretiano – Batatais
© Projeto de Interfaces para Aplicações Web Java
Claretiano – Batatais
? “sucesso”: “erro”; 40 CRC © Projeto de Interfaces para Aplicações Web Java Claretiano – Batatais
UNIDADE 2
UNIDADE 2

Especialização em Plataforma de Desenvolvimento Web Java

19

}

20

21

//MÉTODOS SET e GET

22

public String getData() {…}

23

public void setData(String data) {…}

24

public String getObservacoes() {…}

25

public void setObservacoes(String observacoes) {…}

26

public List<String> getInteresse() {…}

27

public void setInteresse(List<String> interesse) {…}

28

public String getNome() {…}

29

public void setNome(String nome) {…}

30

public String getSexo() {…}

31

public void setSexo(String sexo) {…}

32

33

}

Fim Código 8

Um ponto importante que merece destaque é o construtor da classe. Percebe- se que ocorre uma chamada do método setData e, como parâmetro, é passada a data atual. O atributo “data” está relacionado ao componente inputHidden do formulário; assim, esse componente receberá a data e a hora atuais sempre que o formulário for processado.

O projeto também contém duas outras páginas que são utilizadas para navegação da aplicação. Vamos iniciar descrevendo o código da página erro.jsp.

Código 9

1

<%@page contentType=”text/html” pageEncoding=”UTF-8”%>

2

3

<%@taglib prefix=”f” uri=”http://java.sun.com/jsf/core”%>

4

<%@taglib prefix=”h” uri=”http://java.sun.com/jsf/html”%>

5

6

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

7

“http://www.w3.org/TR/html4/loose.dtd”>

8

9

<f:view>

10

<html>

11

<head>

12

<meta http-equiv=”Content-Type” content=”text/html;

charset=UTF-8”/>

13

<title>Formulário de Cadastro</title>

14

</head>

15

<body>

16

<h1><h:outputText value=”O campo nome não foi preenchido”/></h1>

17

<h:outputLink value=”index.jsp”>

18

<h:outputText value=”voltar” />

19

</h:outputLink>

20

</body>

21

</html>

22

</f:view>

Fim Código 9

Nesta página, é demonstrada a utilização de mais um componente JSF HTML, denominado “outputLink”. Esse componente é utilizado para criação de âncoras na

aplicação Web e, quando renderizado, representa a tag <a>

que, para utilizar esse componente, também é necessário utilizar o outputText, o qual representa o link que será exibido ao usuário. Para criação de âncoras a partir de imagens, você pode utilizar o componente graphicImage.

</a> do HTML. Note

o componente graphicImage . </a> do HTML. Note Claretiano – Batatais © Projeto de Interfaces para
Claretiano – Batatais
Claretiano – Batatais

© Projeto de Interfaces para Aplicações Web Java

CRC

41

UNIDADE 2
UNIDADE 2

Especialização em Plataforma de Desenvolvimento Web Java

Como já discutido anteriormente, o atributo value é utilizado para vincular um componente JSF a um atributo de uma classe. Essa vinculação é utilizada durante a entrada de informações (input), ou na apresentação de informações (output). Há outra forma de realizar essa vinculação, na qual o componente JSF é acoplado a um atributo de classe do mesmo tipo do componente. Considere, por exemplo, um componente JSF do tipo outputText; é possível vincular esse componente a um atributo denominado “HtmlOutputText”.

A principal vantagem desse tipo de vinculação é a possibilidade da utilização de

todos os métodos e atributos disponíveis na classe do componente durante a programação do bean. Para isso, é necessário adicionarmos o pacote javax.faces.component.html.

A página sucesso.jsp demonstra a utilização desse tipo de vinculação. Observe

que esse tipo de vinculação é realizado por meio do atributo binding (linha 20), e não com o atributo value como estamos acostumados. O código é apresentado da seguinte forma:

Código 10

1

<%@page contentType=”text/html” pageEncoding=”UTF-8”%>

2

3

<%@taglib prefix=”f” uri=”http://java.sun.com/jsf/core”%>

4

<%@taglib prefix=”h” uri=”http://java.sun.com/jsf/html”%>

5

6

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

7

“http://www.w3.org/TR/html4/loose.dtd”>

8

9

<f:view>

10

<html>

11

<head>

12

<meta http-equiv=”Content-Type” content=”text/html;

charset=UTF-8”/>

13

<title>Formulário de Cadastro</title>

14

</head>

15

<body>

16

<h1>

17

<h:outputText value=”Informações cadastradas com

sucesso”/>

18

</h1>

19

<h2>

20

<h:outputText binding=”#{pessoa.dados}” escape=”false” />

21

</h2>

22

</body>

23

</html>

24

</f:view>

Fim Código 10

Os componentes utilizados para apresentação de informações (do tipo output) possuem uma propriedade denominada “escape. Esse atributo é definido por padrão como verdadeiro (true) e tem como objetivo a exibição de tags HTML. Assim, quando for necessário exibir conteúdo HTML renderizado, o atributo escape deve ser definido como false.

Para completar a codificação da página sucesso.jsp, é necessário adicionar um método responsável pela exibição dessas informações. Esse método é vinculado (por binding), como representado na linha 20. Assim, adicione o seguinte método na bean PessoaBean:

42 CRC

© Projeto de Interfaces para Aplicações Web Java Claretiano – Batatais
© Projeto de Interfaces para Aplicações Web Java
Claretiano – Batatais
método na bean PessoaBean: 42 CRC © Projeto de Interfaces para Aplicações Web Java Claretiano –
UNIDADE 2
UNIDADE 2

Especialização em Plataforma de Desenvolvimento Web Java

 

Código 11

1

public HtmlOutputText getDados(){

2

3

String info = “Nome: “ + getNome() + “<br/>”

4

+ “Sexo: “ + getSexo() + “<br/>”

5

+ “Interesse: “ + getInteresse() + “<br/>”

6

+ “Observações: “ + getObservacoes() + “<br/><br/>”

7

+ “Data: “ + getData();

8

9

HtmlOutputText dados = new HtmlOutputText();

10

dados.setValue(info);

11

return dados;

12

}

Fim Código 11

IMPORTANTE:

Não se esqueça de adicionar o pacote javax.faces.component.html.

As regras de navegação desse exemplo, definidas no arquivo faces-config. xml, seguem o mesmo modelo do exemplo anterior. Você pode utilizar o editor visual do NetBeans para a criação da regra, cujo resultado é apresentado na Figura 11.

da regra, cujo resultado é apresentado na Figura 11. Fonte: acervo pessoal. Figura 11 Regras de

Fonte: acervo pessoal.

Figura 11 Regras de navegação da aplicação contendo o formulário de cadastro.

Pronto. Você já pode executar sua aplicação! Realize um teste na sua aplicação, deixando o campo “nome” vazio e clicando no botão “cadastrar”. Como resultado, você visualizará a página de erro:

Como resultado, você visualizará a página de erro: Claretiano – Batatais © Projeto de Interfaces para
Claretiano – Batatais
Claretiano – Batatais

© Projeto de Interfaces para Aplicações Web Java

CRC

43

UNIDADE 2
UNIDADE 2

Especialização em Plataforma de Desenvolvimento Web Java

2 Especialização em Plataforma de Desenvolvimento Web Java Fonte : acervo pessoal. Figura 12 Resultado da

Fonte: acervo pessoal.

Figura 12 Resultado da execução da aplicação.

Você pode testar, também, o preenchimento do formulário. O resultado é apresentado na Figura 13.

do formulário. O resultado é apresentado na Figura 13. Fonte : acervo pessoal. Figura 13 Resultado

Fonte: acervo pessoal.

Figura 13 Resultado da execução da aplicação demonstrando as informações que foram preenchidas na interface.

44 CRC

© Projeto de Interfaces para Aplicações Web Java Claretiano – Batatais
© Projeto de Interfaces para Aplicações Web Java
Claretiano – Batatais
que foram preenchidas na interface . 44 CRC © Projeto de Interfaces para Aplicações Web Java
UNIDADE 2
UNIDADE 2

Especialização em Plataforma de Desenvolvimento Web Java

6 VALIDAÇÃO DE DADOS

Quando criamos interfaces gráficas tanto em aplicações desktop quanto em aplicações Web, é imprescindível garantir a confiabilidade dos dados. Para isso, podemos realizar checagem dos campos com o intuito de verificar se as informações foram digitadas corretamente. Podemos também determinar se campos obrigatórios foram devidamente preenchidos. Além disso, caso seja encontrado algum tipo de problema nos dados de entrada, podemos informar o usuário e solicitar a alteração.

Com o framework JavaServer Faces, podemos utilizar três tipos de metodologias para validação de dados, denominadas:

• Validação Manual.

• Validação Automática Implícita.

• Validação Automática Explícita.

O método de validação manual utiliza métodos encapsulados nas classes JavaBeans para garantir a integridade das informações. Nesse tipo de abordagem, todo trabalho de validação é de responsabilidade do programador.

Para exemplificar as metodologias de validação de dados, vamos criar um novo projeto de aplicação Web, denominado “JSF_Exemplo03”. Não se esqueça de selecionar o framework JavaServer Faces. Na sequência, construa uma página para entrada de dados de acordo com a Figura 14, nomeada “validacaomanual.jsp”. O código completo é apresentado em seguida.

”. O código completo é apresentado em seguida. Fonte : acervo pessoal. Figura 14 Aplicação Web

Fonte: acervo pessoal.

Figura 14 Aplicação Web para demonstrar a validação dos dados.

validacaomanual.jsp

Código 12

1

<%@page contentType=”text/html” pageEncoding=”UTF-8”%>

2

3

<%@taglib prefix=”f” uri=”http://java.sun.com/jsf/core”%>

4

<%@taglib prefix=”h” uri=”http://java.sun.com/jsf/html”%>

prefix=”h” uri=”http://java.sun.com/jsf/html”%> Claretiano – Batatais © Projeto de Interfaces para
Claretiano – Batatais
Claretiano – Batatais

© Projeto de Interfaces para Aplicações Web Java

CRC

45

UNIDADE 2
UNIDADE 2

Especialização em Plataforma de Desenvolvimento Web Java

5

6 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

7

8

9 <f:view>

10 <html>

11 <head>

“http://www.w3.org/TR/html4/loose.dtd”>

12

<meta http-equiv=”Content-Type” content=”text/html;

charset=UTF-8”/>

13

14

15

16

17

18

19 <h:panelGrid columns=”2” border=”0”>

20

21

22

23

24

25

26

27

28

29

30

31 </h:form>

32 </body>

33 </html>

34 </f:view>

<h:outputText value=”Salário “/>

<title>Validação Manual</title> </head> <body> <h1><h:outputText value=”Cadastro de Funcionários”/></h1> <h:form> <h:outputText style=”color:#FF0000” value=”#{func.erros}” escape=”false”/>

<h:outputText value=”Nome: “/>

<h:inputText value=”#{func.nome}” />

<h:inputText value=”#{func.salario}” />

<h:outputText value=”Idade: “/> <h:inputText value=”#{func.idade}” /> </h:panelGrid> <h:inputHidden binding=”#{func.tipo}” value=”1” /> <h:commandButton value=”cadastrar” action=”#{func.cadastrar}”/>

Fim Código 12

O formulário foi criado com os componentes tradicionais do JSF; no entanto, é

importante destacar a linha 18, que será utilizada para exibição das mensagens de erro, e a linha 29, que possui um atributo oculto utilizado para identificar qual o tipo de validação que será realizada.

Adicione ao projeto o bean FuncionarioBean dentro do pacote bean e, em seguida, declare os atributos e seus respectivos métodos get’s e set’s:

Código 13

1

private String nome

2

private String idade

3

private String salario

4

private String erros

5

private HtmlInputHidden tipo

Fim Código 13

O formulário de cadastro está vinculado ao método cadastrar, cujo código é

definido a seguir:

46 CRC

© Projeto de Interfaces para Aplicações Web Java Claretiano – Batatais
© Projeto de Interfaces para Aplicações Web Java
Claretiano – Batatais
, cujo código é definido a seguir: 46 CRC © Projeto de Interfaces para Aplicações Web
UNIDADE 2
UNIDADE 2

Especialização em Desenvolvimento de Projeto em Java com Banco de Dados

 

Código 14

1

public String cadastrar() {

2

3

String t = getTipo().getValue().toString();

4

if (t.equals(“1”)) {

5

return validacaoManual();

6

}

7

return null;

8

}

Fim Código 14

Além disso, é necessário realizar a codificação do método validacaoManual, como descrito a seguir:

Código 15

 

1

public String validacaoManual() {

2

ArrayList<String> msg = new ArrayList<String>();

3

4

if (getNome().equals(“”)) {

5

msg.add(“Nome do funcionário não preenchido.”);

6

}

7

try {

8

if (Double.parseDouble(getSalario()) < 500.00) { msg.add(“O salário de ser maior que o piso salarial (R$ 500,00).”);

} } catch (NumberFormatException e) { msg.add(“O valor informado no campo salário é inválido”);

9

10

11

12

13

}

14

15

try { if (Integer.parseInt(getIdade()) < 18) { msg.add(“A idade do funcionário deve ser no mínimo 18 anos.”);

16

17

18

}

19

} catch (NumberFormatException e) {

20

msg.add(“O valor informado no campo idade é inválido”);

21

}

22

23

if (msg.size() > 0) {

24

erros = “<ul>”;

25

for (int i = 0; i < msg.size(); i++)

26

erros += “<li>” + msg.get(i) + “</li>”;

27

erros += “</ul>”;

28

return “erro”;

29

} else {

30

return “sucesso”;

31

}

32

}

Fim Código 15

Lembre-se de que, nesse tipo de validação, todo o trabalho para garantir a confiabilidade dos dados é do programador. As regras de validação para esse projeto são descritas conforme a Figura 15.

para esse projeto são descritas conforme a Figura 15. Claretiano – Batatais © Projeto de Interfaces
Claretiano – Batatais
Claretiano – Batatais

© Projeto de Interfaces para Aplicações Web Java

CRC 47

UNIDADE 2
UNIDADE 2

Especialização em Plataforma de Desenvolvimento Web Java

2 Especialização em Plataforma de Desenvolvimento Web Java Fonte : acervo pessoal. Figura 15 Regra de

Fonte: acervo pessoal.

Figura 15 Regra de validação para o projeto de cadastro de funcionários.

Você já pode executar a aplicação. Clique no botão “cadastrar” sem preencher os campos para visualizar os erros. Esse procedimento é demonstrado na Figura 16:

os erros. Esse procedimento é demonstrado na Figura 16: Fonte : acervo pessoal. Figura 16 Validação

Fonte: acervo pessoal.

Figura 16 Validação manual do formulário para cadastro de funcionários.

Outra maneira de verificar os dados informados pelo usuário é a validação automática implícita. Esse tipo de validação utiliza um componente message do framework JSF para apresentar a mensagem de erro de um campo específico.

48 CRC

© Projeto de Interfaces para Aplicações Web Java Claretiano – Batatais
© Projeto de Interfaces para Aplicações Web Java
Claretiano – Batatais
de erro de um campo específico. 48 CRC © Projeto de Interfaces para Aplicações Web Java
UNIDADE 2
UNIDADE 2

Especialização em Plataforma de Desenvolvimento Web Java

Para demonstrar a metodologia de validação automática implícita, vamos realizar uma cópia do arquivo validacaomanual.jsp e alterar o nome desse novo arquivo para validacaoimplicita.jsp. A estrutura do projeto pode ser visualizada na Figura 17:

. A estrutura do projeto pode ser visualizada na Figura 17: Fonte : acervo pessoal. Figura

Fonte: acervo pessoal.

Figura 17 Estrutura do projeto JSF_Exemplo03.

Realize, então, as alterações necessárias no código conforme demonstrado na listagem a seguir. As linhas em destaque ilustram as alterações que foram realizadas.

Código 16

1

<%@page contentType=”text/html” pageEncoding=”UTF-8”%>

2

3

<%@taglib prefix=”f” uri=”http://java.sun.com/jsf/core”%>

4

<%@taglib prefix=”h” uri=”http://java.sun.com/jsf/html”%>

5

6

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”

7

“http://www.w3.org/TR/html4/loose.dtd”>

8

9

<f:view> <html>