Com as configurações já realizadas, implementaremos uma aplicação que mostra o funciona- mento básico do JSF. Essa aplicação deverá receber um texto do usuário e exibi-lo em letras maiús- culas.
Managed Bean
Vamos começar criando um managed bean para armazenar o texto enviado pelo usuário e a lógica para transformá-lo.
1 i m p o r t j ava x . f ace s . bean . M a n a g e d B e a n ; 2 3 @ M a n a g e d B e a n 4 p u b l i c c las s T e x t o B e a n { 5 p r i v a t e S t r i n g t ext o ; 6 7 p u b l i c S t r i n g t r a n s f o r m a E m C a i x a A l t a () { 8 this. t ext o = this. t ext o . t o U p p e r C a s e () ; 9 r e t u r n " r e s p o s t a "; 10 } 11 12 p u b l i c S t r i n g g e t T e x t o () { 13 r e t u r n this. t ext o ; 14 } 15 16 p u b l i c void s e t T e x t o ( S t r i n g tex to ) { 17 this. t ext o = t ext o ;
18 }
19 }
Código Java 5.8: TextoBean.java
A classe que implementa o managed bean deve ser anotada com@ManagedBean. O atributotexto armazenará o texto enviado pelo usuário e esse texto será modificado pelo métodotransformaEm- CaixaAlta(). Esse método devolve uma string para indicar qual deve ser a próxima tela a ser enviada para o usuário.
A Faces Servlet utilizará o métodosetTexto()para armazenar o texto enviado pelo usuário no managed bean. Por outro lado, utilizará o métodogetTexto()para recuperar o texto e exibi-lo após a sua modificação.
Telas
Uma vez que o managed bean foi criado, podemos associá-lo a um formulário que receberá o texto do usuário.
1 <!D O C T Y P E html P U B L I C " -// W3C // DTD XHT ML 1.0 T r a n s i t i o n a l // EN "
2 " http :// www . w3 . org / TR / x h t m l 1 / DTD / xhtml1 - t r a n s i t i o n a l . dtd "> 3
4 <html x mln s=" http :// www . w3 . org / 1 9 9 9 / xht ml "
5 x mln s:ui=" http :// java . sun . com / jsf / f a c e l e t s "
6 x mln s:h=" http :// java . sun . com / jsf / html "
7 x mln s:f=" http :// java . sun . com / jsf / core "> 8 9 <h:head> 10 <t itl e> K19 T r e i n a m e n t o s </tit le> 11 </h:head> 12 13 <h:body> 14 <h:form> 15 <h:o u t p u t L a b e l v alu e=" Tex to : " / > 16 <h:i n p u t T e x t a r e a val ue=" #{ t e x t o B e a n . te xto } "/ > 17 <h:c o m m a n d B u t t o n val ue=" T r a n s f o r m a r " a c t i o n=" #{ t e x t o B e a n . t r a n s f o r m a E m C a i x a A l t a } "/ > 18 </h:form> 19 </h:body> 20 </html> Código XHTML 5.5: formulario.xhtml
Observe nas linhas em destaque a ligação entre essa tela e o managed bean. A caixa de entrada de texto foi associada à propriedadetextodo managed beanTextoBean. O botão, por sua vez, foi associado ao métodotransformaEmCaixaAlta()do managed beanTextoBean.
Para exibir o texto transformado, podemos criar uma outra tela. 1 <!D O C T Y P E html P U B L I C " -// W3C // DTD XHT ML 1.0 T r a n s i t i o n a l // EN "
2 " http :// www . w3 . org / TR / x h t m l 1 / DTD / xhtml1 - t r a n s i t i o n a l . dtd "> 3
4 <html x mln s=" http :// www . w3 . org / 1 9 9 9 / xht ml "
5 x mln s:ui=" http :// java . sun . com / jsf / f a c e l e t s "
6 x mln s:h=" http :// java . sun . com / jsf / html "
7 x mln s:f=" http :// java . sun . com / jsf / core "> 8 9 <h:head> 10 <t itl e> K19 T r e i n a m e n t o s </tit le> 11 </h:head> 12 13 <h:body> 14 <h:o u t p u t T e x t val ue=" #{ t e x t o B e a n . te xto } "/ > 15 </h:body> 16 </html> Código XHTML 5.6: resposta.xhtml
Analogamente, a caixa de saída de texto está associada à propriedadetextodo managed bean TextoBean.
87 VISÃOGERAL DOJSF 2
Exercícios de Fixação
Desenvolva uma aplicação JSF que (i) receba um número inteiro do usuário, (ii) produza um número aleatório entre zero e o número recebido, e (iii) exiba esse número em uma página HTML.
1 Crie um projeto chamado K19-Visao-Geral.
No Eclipse. . .
89 VISÃOGERAL DOJSF 2
Altere o arquivo de configuração web.xml do projeto K19-Visao-Geral. 1 <?xml v e r s i o n=" 1.0 " e n c o d i n g =" UTF -8 "? >
2 < web - app x m l n s : x s i =" h ttp : // www . w3 . org / 2 0 0 1 / XMLSchema - i n s t a n c e "
3 x mln s =" h ttp : // java . sun . com / xml / ns / j a v a e e " x m l n s : w e b =" htt p: // java . sun . com / xml / ns /←-
j a v a e e / web - a p p _ 2 _ 5 . xsd "
4 x s i : s c h e m a L o c a t i o n =" h tt p: // java . sun . com / xml / ns / j a v a e e htt p: // java . sun . com / xml / ns /←-
j a v a e e / web - a p p _ 3 _ 0 . xsd "
5 v e r s i o n=" 3.0 ">
6 < display - name > K19 - Visao - Ger al </ display - name > 7 < s e r v l e t >
8 < servlet - name > F ace s S e r v l e t </ servlet - name >
9 < servlet - c las s > j ava x . fac es . w e b a p p . F a c e s S e r v l e t </ servlet - cla ss > 10 < load - on - s t a r t u p >1 </ load - on - s t a r t u p >
11 </ s e r v l e t > 12 < servlet - m a p p i n g >
13 < servlet - name > F ace s S e r v l e t </ servlet - name > 14 < url - p a t t e r n > *. x htm l </ url - p a t t e r n >
15 </ servlet - m a p p i n g > 16
17 < context - par am >
18 < param - name > jav ax . fac es . P R O J E C T _ S T A G E < / param - name > 19 < param - val ue > D e v e l o p m e n t < / param - va lue >
20 </ context - par am > 21 </ web - app >
Código XML 5.4: web.xml
No Netbeans. . .
91 VISÃOGERAL DOJSF 2
Crie o arquivo de configuração do JSF, o faces-config.xml. Digite CTRL+N e siga os passos das imagens abaixo.
2 Em um pacote chamado br.com.k19.controle no projeto K19-Visao-Geral, crie um managed bean para armazenar um número inteiro n enviado pelo usuário, gerar um número aleatório entre zero e n e armazená-lo numa propriedade.
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 j ava x . f ace s . bean . M a n a g e d B e a n ; 4 5 @ M a n a g e d B e a n 6 p u b l i c c las s N u m e r o A l e a t o r i o B e a n { 7 p r i v a t e int m a x i m o ; 8 p r i v a t e int n u m e r o A l e a t o r i o ; 9 10 p u b l i c S t r i n g g e r a N u m e r o A l e a t o r i o () {
11 this. n u m e r o A l e a t o r i o = (int) ( Math . r a n d o m () * this. m a x i m o ) ; 12 r e t u r n " r e s p o s t a ";
13 }
14
15 // G E T T E R S E S E T T E R S
16 }
Código Java 5.9: NumeroAleatorioBean.java
3 Crie um arquivo chamado formulario.xhtml com o conteúdo abaixo.
No Eclipse. . .
O arquivo formulario.xhtml deve ser salvo em WebContent.
No Netbeans. . .
O arquivo formulario.xhtml deve ser salvo em Web Pages.
1 <!D O C T Y P E html P U B L I C " -// W3C // DTD XHT ML 1.0 T r a n s i t i o n a l // EN "
93 VISÃOGERAL DOJSF 2
3
4 <html x mln s=" http :// www . w3 . org / 1 9 9 9 / xht ml "
5 x mln s:h=" http :// java . sun . com / jsf / html "> 6 7 <h:head> 8 <t itl e> K19 T r e i n a m e n t o s </tit le> 9 </h:head> 10 11 <h:body> 12 <h:form> 13 <h:o u t p u t L a b e l v alu e=" N ú m e r o m á x i m o : " / > 14 <h:i n p u t T e x t v alu e=" #{ n u m e r o A l e a t o r i o B e a n . m a x i m o } " / > 15 <h:c o m m a n d B u t t o n v al ue=" Gera n ú m e r o a l e a t ó r i o " 16 a c t i o n=" #{ n u m e r o A l e a t o r i o B e a n . g e r a N u m e r o A l e a t o r i o } " / > 17 </h:form> 18 </h:body> 19 </html> Código XHTML 5.7: formulario.xhtml
4 Agora, crie um arquivo chamado resposta.xhtml com o conteúdo abaixo.
No Eclipse. . .
O arquivo resposta.xhtml deve ser salvo em WebContent.
No Netbeans. . .
O arquivo resposta.xhtml deve ser salvo em Web Pages.
1 <!D O C T Y P E html P U B L I C " -// W3C // DTD XHT ML 1.0 T r a n s i t i o n a l // EN "
2 " http :// www . w3 . org / TR / x h t m l 1 / DTD / xhtml1 - t r a n s i t i o n a l . dtd "> 3
4 <html x mln s=" http :// www . w3 . org / 1 9 9 9 / xht ml "
5 x mln s:h=" http :// java . sun . com / jsf / html "> 6 7 <h:head> 8 <t itl e> K19 T r e i n a m e n t o s </tit le> 9 </h:head> 10 11 <h:body> 12 <h:o u t p u t T e x t v alu e=" #{ n u m e r o A l e a t o r i o B e a n . n u m e r o A l e a t o r i o } " / > 13 </h:body> 14 </html> Código XHTML 5.8: resposta.xhtml
5 Execute o projeto no GlassFish e teste o formulário acessando o endereçohttp://localhost: 8080/K19-Visao-Geral/formulario.xhtml.