Você está na página 1de 10

1

PROFESSORA
VERONICEDEFREITAS
Graduao:Tecnologia em Processamento
deDados(UNOPAR)
Especializao:Anlise eDesenvolvimento
deSistemas (UNIFIL)
Mestrado:Cincia daComputao
(UFRGS)
ProgramaoWeb II
Aula2
JSFcomPRIMERACES
ProgramaoWeb II
EMENTA: Modelagemdeframeworkpara
desenvolvimentoWeb. ArquiteturaMVC(modelview
controller). FuncionamentodaWeb.Introduoao
framework:plataformadedesenvolvimentopara
Web.Framework:conceitosbsicos.Framework:
componentes.Bibliotecasdecomponentes.APIpara
acessoaobancodedados.Frameworks de
persistncia.TecnologiasparaprogramaoWeb.
OBJETIVOS: desenvolveraplicaes
Web utilizandoframework.
Estrutura
JSF Utilizandopadres.
MVCemarquiteturaweb.
ArquiteturadoJSFbaseadanoMVC.
Bibliotecasdecomponentesdeterceiros:
PrimeFaces.
Exemplos projeto(JSFcomPrimeFaces).
Temas PrimeFaces.
Importandoprojetos.
Materialdeapoio.
JSF Componentesadicionais
ParatornaroJSFaindamaisatrativoe
produtivo,existemvriasbibliotecas(comerciais
ougratuitas)queauxiliamnodesenvolvimento,
podendocitar:
PrimeFaces.
MyFaces.
RichFaces.
IceFacesmOpenFaces.
ADF.
Entreoutras.
2
JSF Componentesadicionais PrimeFaces showcase
Cadabibliotecaoferece ShowCases naweb
paramostrarseuscomponentesesuas
funcionalidades.
O showcase do PrimeFaces estdisponvelem
<http://www.primefaces.org>,ondepossvel
visualizarumademonstraodoscomponentes.
PrimeFaces showcase
Download lib PrimeFaces
http://www.primefaces.org/downloads.html
3
Adicionaraslibs noprojeto
AdiodabibliotecaaoClassPath
(WebContent/WEBINF/lib)doprojeto.
PrimeFaces
JSF
Exemplo01
...
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
...
<p:editor id="editor" value="#{editorBean.value}">
...
</h:body>
...
NameSpace
p:
Resultado:<p:editor ....>
Exemplo02
Exemplosusandocomponentesdo
PrimeFaces
BRUNETTA
<http://javasemcafe.blogspot.c
om.br/2011/05/jsf20
componentesprimefaces221
parte.html>
4
p:fieldset
Cdigofontedocomponente:
<p:fieldsetlegend="Meu Cadastro
toggleable="true">
</p:fieldset>
p:inputTextarea
Expandedeacordocomaquantidadede
texto.
Cdigofonte
docomponente:
<h:outputText
value="Observaes:"/>
<p:inputTextarea
value="#{beanCliente.observacao}
"/>
p:inputMask
Campoestiveremfoco.
Outrosexemplos:
<http://www.primefac
es.org/showcase/ui/inp
utMask.jsf>
<h:outputText value="Telefone:"/>
<p:inputMask mask="(999)99999999"
value="#{beanCliente.telefone}"/>
<h:outputText value="CPF:"/>
<p:inputMask mask="999.999.99999"
value="#{beanCliente.cpf}"/>
p:inputMask
Cdigofontedoscomponentes:
p:calendar
Utilizadoparaaleituradadatadecadastro(ao
clicarnacaixadetextoabreocalendrio).
<h:outputText value="Data
cadastro:"/>
<p:calendar
value="#{beanCliente.data
Cadastro}"/>
Cdigofontedo
componente:
p:keyboard(defalt)
Cdigodocomponente:
<h:outputText value="Default Layout: " />
<p:keyboard value=
"#{beanCliente.descricao }"/>
5
p:keyboard(qwertyBasic)
Cdigofontedocomponente:
<h:outputText value="Descrio:/>
<p:keyboardlayout="qwertyBasicvalue=
"#{beanCliente.descricao}"/>
p:keyboard(password)
Cdigofontedocomponente:
<h:outputTextvalue="Senha:"/>
<p:keyboardpassword="true"keypadOnly="true"
value="#{beanCliente.descricao}"/>
p:keyboard(password)
Outros exemplos:
http://www.primefaces.org
/showcase/ui/password.jsf
Altera somente as
propriedades.
p:separator
Cdigofontedocomponente:
<p:separatorstyle="width:80%;height:5px"/>
Interface CadastrodeClientes
Template:Domenech,Edson.
Momentodereflexo
Comovalidaroscamposdoformulrioem
aplicaesJSF?
6
Temas PrimeFaces
Temas PrimeFaces
Nosite doPrimefaces
(http://www.primefaces.org/themes.html),
existeumareadegaleriadetemascom
modelosprontosparaserfeitoodownload.
Elessobaixadosemformato.jaretemque
serconfiguradonoxmldoseuprojetopara
quepossaseralterado.
Usando Temas
Forma01:faadownload dojar
(<http://repository.primefaces.org/org/
primefaces/themes/>).
Parausarotema,acrescenteaslinhasabaixono
arquivoweb.xml.
<contextparam>
<paramname>primefaces.THEME</paramname>
<paramvalue>bluesky</paramvalue>
</contextparam>
Usando Temas
Forma02:almdeadicionaroprimefacesaoseu
sistema,possveltambmcustomizarumtema
paraoprojetopeloJQueryThemeRoller,que
100%compatvelcomaferramentaequeest
disponvelem:<http://jqueryui.com/themeroller/>
faadownload dotema(descompactedentroda
pastaWebContent)eincluaalinhaabaixonoarquivo
nasessoh:head(exemplo:ndex.xhtml).
<linktype="text/css"rel="stylesheet"
href="bluesky/theme.css"/>
7
MomentodeReflexo
Desafios(RafaelPonte)
QuandoseestiniciandocomJSF,halguns
desafiospelafrente:
1)Porondecomear?
2)Qualconjuntodecomponentesusar?
3)Entenderociclodevida.
4)EntenderquesozinhooJSFnofunciona.
5)ConhecimentobasesobreWeb.
Desafios deumdesenvolvedor JSF
RafaelPonte
DesafiosdeumdesenvolvedorJSF
http://www.slideshare.net/rponte/desafiosde
umdesenvolvedorjsf8097464
javasf:JavaServer FacesGroup
https://groups.google.com/forum
/#!forum/javasf
Exemplo3
Teste05_ManagedBean
Console:
Informaes
Formulrio
Teste05_ManagedBean
ClasseModelo:
Atributos privados
Mtodos gets esets
ClasseModelo:
Atributos privados
Mtodos gets esets
8
Regraseconvenesdenomenclatura
Classes:
Porconveno,todaclasse deve comear
comumaletramaiscula.
NomedePacotes
Ospacotesdevemcomearcomumaletra
minscula.
Parasabermais:
<http://www.tiexpert.net/programacao/java/
nomenclatura.php>
@ManagedBean(name ="beanCliente")
@SessionScoped
public class ClienteBean {
//BancoDeClientes bdc =new
BancoDeClientes();
Clientecliente =new Cliente();
public Stringsalvar(){
//bdc.salvar(cliente);
//teste visualizanoconsole
System.out.println(cliente.getNome());
return "sucesso";
}
//gets esets
}
<h:outputText value="Nome:"/>
<p:inputText id="nome"
value="#{beanCliente.cliente.nome}"/>
public class Cliente{
private StringCPF;
private Stringnome;
...
// gets esets
}
pacote
modelo
pacote
bean
view
Importando Projeto Web
Importando Projeto Web
ParaabrirmosumprojetonoEclipse,temos
queseguirosseguintespassos:
Colocarapastadoseuprojetono
workspace doeclipse.
Irnomenufile import.
EscolheraopoGeneral ExistingProjects
intoWorkspace.
Importando Projeto Eclipse
Escolhaoprojeto
quecopiouem
Workspace (clique
emFinish)
Projetos Teleaula 01(aulaatividade)
9
Teste03_JSF_AC_UNIDADE_02
Materialdeapoio
TutorialdeinstalaodoJava7noWindows7.
<http://www.activeinfo.com.br/tutos/tutorial_
instalacao_java_windows.pdf>
TutorialTomcat InstalaoeConfiguraoBsica.
<http://www.mhavila.com.br/topicos/java/tomcat.
Html>
Tutorial ConfigurandooEclipse
<http://ges.dc.ufscar.br/graduacao/
tutorial_criacao_projeto_web_eclipse.pdf>
CursodeJavabsicoparainiciantes
usandoEclipse:<http://www.java.marcric.com/
pages/004instalandoeclipse.html>
BRUNETTA,Andii.JSF2.0:Componentes
PrimeFaces 2.2.1 Parte1.
<http://javasemcafe.blogspot.com.br/2011/0
5/jsf20componentesprimefaces221
parte.html>
DOMENECH,Edson.Desenvolvimentodeum
sistemaWebcomJavaServer Facese
PrimeFaces (ParteI).<http://domenechbr
.blogspot.com.br/2012/08/
desenvolvimentodeumsistema
webcom.html>
TutorialdeinstalaodoJava7noWindows7:
<http://www.activeinfo.com.br/tutos/tutorial_instal
acao_java_windows.pdf>(ACTIVEINFO)
ComparaoentreosprincipaisFrameworks Java
paraodesenvolvimentodeaplicaesWEB2.0
<http://www3.iesam
pa.edu.br/ojs/index.php/sistemas/
article/viewFile/585/424>
CAELUM,EspecificaoeimplementaodoJSF.
Disponvelem:
<http://www.caelum.com.br/apostilajavatestesjsf
webservicesdesignpatterns/introducaoaojsfe
primefaces/#75especificacaoeimplementacaodo
jsf>
PrimefacesUser'sGuide3.3.Turquia,2012.
<http://www.slashdocs.com/xskst/primefaces
usersguide32.html>(refernciadoprimefaces).
UNIVERSIDADEJAVA.IntroduoaoJavaServerFaces
2.0.
<http://www.universidadejava.com.br/docs/introdu
caoaojavaserverfaces20>
MARTINS,Cludio.EngenhariadaWeb.Disponvel
em:<http://pt.scribd.com/doc/105760697/
IntroducaoaoJSF2>
10
2014 Todososdireitosreservados.Usoexclusivo
noSistemadeEnsinoPresencialConectado.