Módulo / Partial - Desenvolvimento Web com JSF2 e JPA2

Figura 7.2: Módulo reaproveitado em diversas páginas

Nessa situação, a melhor abordagem é definir o formulário de contato, separadamente, em um arquivo XHTML. O código XHTML que define o formulário de contato deve ser inserido no corpo da tag<ui:composition>. Observe o código abaixo.

1 <ui:c o m p o s i t i o n

2 x mln s=" http :// www . w3 . org / 1 9 9 9 / xht ml "

3 x mln s:h=" http :// java . sun . com / jsf / html "

4 x mln s:ui=" http :// java . sun . com / jsf / f a c e l e t s "> 5 6 <h:form> 7 <h:p a n e l G r i d> 8 <h:o u t p u t L a b e l v alu e=" M e n s a g e m : " for=" m e n s a g e m "/ > 9 <h:i n p u t T e x t a r e a id=" m e n s a g e m " val ue=" #{ m e n s a g e n s B e a n . m e n s a g e m } "/ > 10 <h:c o m m a n d B u t t o n val ue=" E n v i a r " a c t i o n=" #{ m e n s a g e n s B e a n . env ia } "/ > 11 </h:p a n e l G r i d> 12 </h:form> 13 </ui:c o m p o s i t i o n> Código XHTML 7.6: formulario-de-contato.xhtml

Com o formulário de contato definido em um arquivo separado, podemos utilizar a tag<ui:include>para adicioná-lo onde for necessário.

1 ...

2 <ui:i n c l u d e src=" / f orm ula ri o - de - c o n t a t o . xht ml "/ > 3 ...

Código XHTML 7.7: Inserindo o formulário de contato

Parâmetros

Em algumas situações é necessário passar parâmetros de um arquivo XHTML para outro. Por exemplo, considere a aplicação de uma livraria. Na primeira página dessa aplicação, uma lista com livros mais vendidos é exibida no canto direito. Em outra página, uma lista com os livros mais caros é exibida no canto esquerdo.

133 TEMPLATES EMODULARIZAÇÃO Podemos criar um arquivo XHTML e atribuir a ele a tarefa de exibir uma lista qualquer de livros independentemente de posicionamento.

1 <ui:c o m p o s i t i o n

2 x mln s=" http :// www . w3 . org / 1 9 9 9 / xht ml "

3 x mln s:h=" http :// java . sun . com / jsf / html "

4 x mln s:ui=" http :// java . sun . com / jsf / f a c e l e t s "> 5

6 <h:d a t a T a b l e v alu e=" #{ l i v r o s } " var=" liv ro ">

7 ...

8 </h:d a t a T a b l e> 9 </ui:c o m p o s i t i o n>

Código XHTML 7.8: lista-livros.xhtml

Observe, no código acima, que o componente<h:dataTable>foi vinculado a uma variável cha-

madalivros. Essa variável é um parâmetro do arquivolista-livros.xhtml.

Na primeira página da aplicação da livraria, podemos adicionar o arquivolista-livros.xhtml com a tag<ui:include>, passando como parâmetro a lista dos livros mais vendidos. Para isso, de- vemos utilizar o componente<ui:param>.

1 ...

2 <ui:i n c l u d e src=" / lista - l i v r o s . xht ml ">

3 <ui:p ara m name=" l i v r o s " val ue=" #{ l i v r o s B e a n . l i s t a D o s L i v r o s M a i s V e n d i d o s } "/ > 4 </ui:i n c l u d e>

5 ...

Código XHTML 7.9: Inserindo a lista dos livros mais vendidos

Em outra página da aplicação da livraria, podemos adicionar o arquivo lista-livros.xhtml passando como parâmetro a lista dos livros mais caros.

1 ...

2 <ui:i n c l u d e src=" / lista - l i v r o s . xht ml ">

3 <ui:p ara m name=" l i v r o s " val ue=" #{ l i v r o s B e a n . l i s t a D o s L i v r o s M a i s C a r o s } "/ > 4 </ui:i n c l u d e>

5 ...

Código XHTML 7.10: Inserindo a lista dos livros mais caros

Exercícios de Fixação

6 _{Vamos implementar uma listagem de instrutores no projeto K19-Templates-e-Modulariza-}

cao. O primeiro passo é criar uma classe para modelar os instrutores. Crie um pacote chamado br.com.k19.modelo no projeto K19-Templates-e-Modularizacao e adicione nele uma classe cha-

mada Instrutor com seguinte código. 1 p a c k a g e br . com . k19 . m o d e l o ; 2 3 p u b l i c c las s I n s t r u t o r { 4 p r i v a t e S t r i n g nome ; 5 p r i v a t e S t r i n g d a t a D e N a s c i m e n t o ; 6 7 // G E T T E R S E S E T T E R S 8 }

Código Java 7.1: Instrutor.java

7 _{Faça um managed bean que forneça uma lista de instrutores para uma tela de listagem de instru-} tores. Crie um pacote chamado br.com.k19.controle no projeto K19-Templates-e-Modularizacao e adicione nele uma classe chamada InstrutorBean com seguinte código:

1 p a c k a g e br . com . k19 . c o n t r o l e ; 2

3 i m p o r t br . com . k19 . m o d e l o . I n s t r u t o r ; 4 i m p o r t java . util . A r r a y L i s t ;

5 i m p o r t java . util . List ;

6 i m p o r t j ava x . f ace s . bean . M a n a g e d B e a n ; 7

8 @ M a n a g e d B e a n

9 p u b l i c c las s I n s t r u t o r B e a n { 10

11 p r i v a t e List < Instrutor > i n s t r u t o r e s = new ArrayList < Instrutor >() ; 12 13 p u b l i c I n s t r u t o r B e a n () { 14 I n s t r u t o r r a f a e l = new I n s t r u t o r () ; 15 r a f a e l . s e t N o m e (" R a f a e l C o s e n t i n o ") ; 16 r a f a e l . s e t D a t a D e N a s c i m e n t o (" 3 0 / 1 0 / 1 9 8 4 ") ; 17 18 I n s t r u t o r m a r c e l o = new I n s t r u t o r () ; 19 m a r c e l o . s e t N o m e (" M a r c e l o M a r t i n s ") ; 20 m a r c e l o . s e t D a t a D e N a s c i m e n t o (" 0 2 / 0 4 / 1 9 8 5 ") ; 21 22 this. i n s t r u t o r e s . add ( r a f a e l ) ; 23 this. i n s t r u t o r e s . add ( m a r c e l o ) ; 24 } 25 26 p u b l i c List < Instrutor > g e t I n s t r u t o r e s () { 27 r e t u r n i n s t r u t o r e s ; 28 } 29

30 p u b l i c void s e t I n s t r u t o r e s ( List < Instrutor > i n s t r u t o r e s ) { 31 this. i n s t r u t o r e s = i n s t r u t o r e s ;

32 }

33 }

Código Java 7.2: InstrutorBean.java

8 _{Crie um diretório chamado partials na pasta WEB-INF. Adicione nesse diretório um arquivo} chamado instrutor-info.xhtml com o seguinte conteúdo.

1 <ui:c o m p o s i t i o n x mln s=" http :// www . w3 . org / 1 9 9 9 / xht ml "

2 x mln s:h=" http :// java . sun . com / jsf / html "

3 x mln s:ui=" http :// java . sun . com / jsf / f a c e l e t s "> 4

5 <li>

6 <h:o u t p u t T e x t v alu e=" Nome : #{ i n s t r u t o r . nome } "/ > 7 <br/ > 8 <h:o u t p u t T e x t v alu e=" Data N a s c i m e n t o : #{ i n s t r u t o r . d a t a D e N a s c i m e n t o } "/ > 9 </li> 10 11 </ui:c o m p o s i t i o n> Código XHTML 7.11: instrutor-info.xhtml

135 TEMPLATES EMODULARIZAÇÃO 9 _{Crie uma página no projeto K19-Templates-e-Modularizacao com o nome listagem-de-instru-}

tores.xhtml e com o seguinte código.

1 <ui:c o m p o s i t i o n t e m p l a t e=" / WEB - INF / t e m p l a t e s / t e m p l a t e . xht ml "

2 x mln s=" http :// www . w3 . org / 1 9 9 9 / xht ml "

3 x mln s:h=" http :// java . sun . com / jsf / html "

4 x mln s:f=" http :// java . sun . com / jsf / core "

5 x mln s:ui=" http :// java . sun . com / jsf / f a c e l e t s "> 6

7 <ui:d e f i n e name=" c o n t e u d o "> 8 <ul>

9 <ui:r e p e a t var=" i n s t r u t o r " val ue=" #{ i n s t r u t o r B e a n . i n s t r u t o r e s } "> 10 <ui:i n c l u d e src=" / WEB - INF / p a r t i a l s / instrutor - info . xht ml "> 11 <ui:p ara m name=" i n s t r u t o r " val ue=" #{ i n s t r u t o r } "/ > 12 </ui:i n c l u d e> 13 </ui:r e p e a t> 14 </ul> 15 </ui:d e f i n e> 16 </ui:c o m p o s i t i o n> Código XHTML 7.12: listagem-de-instrutores.xhtml

Veja o resultado acessando a url:

http://localhost:8080/K19-Templates-e-Modularizacao/listagem-de-instrutores.xhtml

Exercícios Complementares

1 _{Usando templates, você deve criar uma página para exibir os detalhes dos produtos de uma} loja virtual. A página de apresentação dos produtos deve ter o seguinte formato. Uma imagem do produto deve ser apresentada do lado esquerdo da página. O nome e o preço do produto devem ser exibidos do lado direito da imagem. Uma descrição do produto deve aparecer abaixo de tudo. Além disso, o logotipo da loja deve aparecer no topo da página e, logo abaixo, deve haver uma caixa de seleção para escolher o produto cujos detalhes serão exibidos.

NAVEGAÇÃO

C

A P Í T U L O

8

Navegar entre as telas de uma aplicação web é preciso. O mecanismo de navegação do JSF é bem sofisticado e permite vários tipos de transições entre telas. A ideia é muito simples: no clique de um botão ou link, muda-se a tela apresentada ao usuário.

www.k19.com.br

www.k19.com.br/loja www.k19.com.br/artigo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rutrum accumsan lorem, non euismod ligula aliquet in.