Material do Curso Tcnico em Informtica Desenvolvimento de Software II

CAPTULO 9
APLICAO DE LAYOUTS COM CSS
CAPTULO 9 APLICAO DE LAYOUTS COM CSS

O pr im eir o pa sso pa r a u t iliza r m os CSS em n ossa s p gin a s im por t a r o m esm o n a s p gin a s qu e o u sa r em os. P a r a isso, podem os u t iliza r o com pon en t e do J SF ch a m a do OUTPUTSTYLESHEET. P or pa dr o, os a r qu ivos de CSS DEVEM est a r den t r o de u m dir et r io chamado RESOURCES n a su a a plica o Web ou en t o den t r o de u m dir et r io ch a m a do METAINF/RESOURCES. Con sider a n do qu e exist a u m a r qu ivo ch a m a do STYLE.CSS den t r o de u m dir et r io chamado RESOURCES/CSS podemos importar esse arquivo da seguinte forma no JSF:

O a t r ibu t o LIBRARY r epr esen t a o dir et r io den t r o da pa st a RESOURCES n a qu a l o a r qu ivo se encontra e o nome do arquivo informado atravs do atributo NAME. As cla sses defin ida s den t r o do CSS podem ser u t iliza da s n os com pon en t es visu a is do JSF atravs do atributo STYLECLASS existente nos componentes.

Ta m bm possvel defin ir os IDS dos com pon en t es a t r a vs do a t r ibu to ID. Dessa for m a , podem os r efer en cia r os est ilos CSS da n ossa a plica o a t r a vs do ID dos com pon en t es tambm.

Um ou t r o pon t o n o qu a l ba st a n t e com u m pr ecisa r m os u t iliza r est ilos s o n a s lin h a s da t a bela , n a qu a l ca da lin h a possu i u m a cor a lt er n a da m en t e. Da n do o efeit o de "zebr a do". Isso pode ser feit o a t r a vs do a t r ibu t o ROWCLASSES. Nele possvel in for m a r diver sa s cla sses CSS que sero utilizadas para formar as linhas da tabela gerada, separando-os por vrgula. Dessa for m a , con sider a n do qu e em n osso CSS t en h a m os du a s cla sses, u m a ch a m a da PAR e outra chamada IMPAR, como abaixo:

P oderamos criar o nosso DATATABLE da seguinte forma:

75

Material do Curso Tcnico em Informtica Desenvolvimento de Software II

9.1. INSERINDO IMAGENS

Com a t ag <H:GRAPHICIMAGE> possvel a dicion a r m os im a gen s s p gin a s. Essa t a g ir gerar em H TML u m a t ag IMG. P a r a in dica r qu a l a im a gem qu e ser u t iliza da , pr eciso pa ssa r u m a t r ibu t o NAME pa r a a t ag, in dica n do qu a l o n om e do a r qu ivo qu e ser u t iliza do e, com o atributo LIBRARY, indicar em qual diretrio de RESOURCES a imagem est, como abaixo:

9.2. EXERCCIOS: Integrando CSS

1) Copie o CSS para a sua aplicao: a. No diretrio WEBCONTENT crie uma pasta chamada resources b. Acesse o diretrio P:\ROGRIO\DSII (JAVA)\ARQUIVOS c. Copie os dir et r ios criar. 2)
CSS

IMAGENS

pa r a den t r o da pa st a

RESOURCES

qu e voc a ca bou de

Im por t e o CSS pa r a a s p gin a s. P a r a isso, n o a r qu ivo ALUNOS.XHTML, den t r o da t a g <H:HEAD> adicione:

3)

Logo aps a t ag <H:BODY> adicione uma DIV para adicionarmos o logo da escola:

4)

Abaixo do cabealho que foi recm-adicionado, crie a DIV com id CONTEUDO para envolver o formulrio e a tabela, fechando antes t ag </H:BODY>.
76

Material do Curso Tcnico em Informtica Desenvolvimento de Software II

5)

Com o o CSS j t em o la you t n ecess r io pa r a os a lin h a m en t os, segu in do a s boa s pr t ica s, pr ecisa m os r em over o u so do com pon en t e <H:PANEIGRID/>, u sa do a n t es pa r a u m la you t sim ples. E sse com pon en t e ger a t a bela s H TML, o qu e n o r ecom en da do. REMOVA a abertura e o fechamento da tag PANELGRID. Acesse a pgina pelo navegador e veja o resultado. P a r a a gr u pa r m os os com pon en t es do n osso for m u l r io de ca da st r o de a lu n os, va m os u t iliza r a t a g <FIELDSET>. P a r a isso, a dicion e im e d ia ta m e n te a p s a a ber t u r a da t a g <H:FORM> o cdigo:

6) 7)

8)

P a r a sepa r a r m os m elh or a pa r t e su per ior com o for m u l r io de ca da st r o e a pa r t e in fer ior com a list a gem , va m os a dicion a r u m su bt t u lo pa r a a list a . An t es do FORM que envolve a listagem, adicione:

9)

Adicione ao dataTable o efeito de zebrado da classe dados:

10) Adicione um bloco para o rodap antes da tag </H:BODY>:

77

Material do Curso Tcnico em Informtica Desenvolvimento de Software II

11) Acesse a p gin a pelo n a vega dor . O r esu lt a do fin a l dever ser sim ila r im a gem seguinte:

78

Material do Curso Tcnico em Informtica Desenvolvimento de Software II

CAPTULO 10
COMPONENTES RICOS
CAPTULO 10 COMPONENTES RICOS

At u a lm en t e, a s a plica es qu e t r a ba lh a m n a pla t a for m a Web ca da vez m a is pr ecisa m ser a m ig veis e de f cil u t iliza o por pa r t e dos u su r ios. P a r a a t en der est a s n ecessida des, m u it o com u m pr ecisa r m os de com pon en t es qu e fa cilit a m esse pr ocesso e cr ia r componentes JSF ricos, que possuem uma excelente interao, no uma tarefa fcil. Alm disso, m u it o com u m pr ecisa r m os de u m det er m in a do com pon en t e e est e j t en h a sido cr ia do de m a n eir a sem elh a n t e por a lgu m desen volvedor ou em pr esa . Ist o n os lem br a da qu ela pr em issa de qu e n o devem os "r ein ven t a r a r oda ", ou seja , va m os u t iliza r esses componentes prontos ao invs de refaz-los. E xist em diver sa s bibliot eca s de com pon en t es cr ia da s pa r a o J SF , da s qu a is se dest a ca m o J Boss Rich fa ces (http://www.jboss.org/richfaces) e o P r im eF a ces (http://www.primefaces.org/).

9.1. PRIMEFACES
A t ela de a di o de a lu n os qu e fizem os a n t er ior m en t e est fu n cion a n do a dequ a da m en t e. P or m , sa bem os qu e a t ela n o est t o a m ig vel qu a n t o poder a m os deix-la. Existem algumas deficincias nela. P or exem plo, n o ca m po de t elefon e h a possibilida de do u su r io digit a r t elefon es invlidos, o que ocasionaria um erro e uma inconsistncia em nosso sistema. Um a pr t ica com u m pa r a evit a r est e pr oblem a cit a do, ser ia u t iliza r u m a implementao em JavaScript para formatar o dado digitado. P or m , u sa r em os o P r im eF a ces, u m a da s bibliot eca s de com pon en t es m a is fa m osa s pa r a J SF 2. Na poca do J SF 1.x, o Rich fa ces er a a bibliot eca m a is fa m osa . Ma s, a dem or a (qu a se 2 a n os) pa r a la n a r a ver s o com pa t vel com J SF 2 fez com qu e o P r im efa ces dom in a sse o m er ca do da s a plica es em J SF 2. Alm disso, o P r im efa ces possu i cen t en a s de componentes ricos, muito mais que o Richfaces. Acesse o site http://primefaces.org/showcase e con h ea m a is de 100 com pon en t es r icos qu e podem ser u t iliza dos gr a t u it a m en t e. Coloc -lo em n ossa a plica o m u it o sim ples, ba st a ba ixa r O J AR e copi -lo pa r a den t r o da pa st a WEB-INF/LIB da sua aplicao.

9.2. CONFIGURAO
A nica configurao necessria declarar uma servlet do PrimeFaces responsvel por en via r os r ecu r sos n ecess r ios pa r a o fu n cion a m en t o pa r a o clien t e. E m ser vidor es qu e su por t a m Ser vlet 3.0/J a va E E 6, com o o Gla ssfish 3.0 ou o Tom ca t 7, esse pr ocedim en t o n o necessrio e pode ser ignorado.

79

Material do Curso Tcnico em Informtica Desenvolvimento de Software II

O prximo passo adicionar o namespace do PrimeFaces na tag <HTML>:

9.3. MSCARA EM INPUTS

Com o vim os, o P r im eF a ces possu i diver sos com pon en t es qu e podem ser u t iliza dos em u m a a plica o. P or exem plo, podem os fa zer com qu e o ca m po TELEFONE s possa ser in for m a do n o for m a t o a dequ a do. Um a da s for m a s de con segu ir m os isso a t r a vs de ca ixa s de t ext o que contenham uma mscara pr-definida para formatar o valor de forma adequada. No P r im eF a ces exist e o com pon en t e INPUTMASK, on de podem os in for m a r u m a t r ibu t o chamado MASK com a mscara adequada. Nesse caso, para a entrada de um TELEFONE, teramos:

9.4. EXERCCIOS: Mscara no campo telefone

1) H a bilit e o P r im efa ces, a dicion a n do o J AR su a a plica o. Acesse o dir et r io P:\ROGERIO\JAVA (DSII)\PRIMEFACES e copie o J AR pa r a o dir et r io WEBCONTENT/WEBINF/LIB do seu projeto. Con figu r e a SERVLET qu e o P r im efa ces u t iliza in t er n a m en t e. P a r a isso, ADICIONE ao seu WEB.XML a seguinte declarao:

2)

80

Material do Curso Tcnico em Informtica Desenvolvimento de Software II

3)

Altere o arquivo ALUNOS.XHTML para que ele utilize um campo mascarado: a. Adicione tag <HTML> o import das tags de componentes PrimeFaces:

b. Rem ova o ca m po r efer en t e a o TELEFONE do a lu n o e, em seu lu ga r , u se o com pon en t e <P:INPUTMASK>:

4)

Acesse a pgina http://localhost:8080/ds2-escola-jsf/alunos.xhtml e veja o resultado.

81