Programao para

Internet III
Aula Primefaces
Prof. Teresinha Letcia da Silva
leticia@cafw.ufsm.br
UFSM
COLGIO AGRCOLA DE FREDERICO WESTPHALEN
CURSO SUPERIOR DE TECNOLOGIA EM SISTEMAS PARA INTERNET
Programao para Internet III Prof. Teresinha Letcia da Silva
Primefaces
Existem diversos frameworks baseados na tecnologia
J avaServer Faces que se destinam a tornar mais
simples o uso de AJ AX e componentes em aplicaes
web. Este o caso do PrimeFaces.
PrimeFaces uma biblioteca de componentes de cdigo
aberto para o J SF 2.0 com mais de 100 componentes,
permitindo criar interfaces ricas para aplicaes web de
forma simplificada e eficiente.
Programao para Internet III Prof. Teresinha Letcia da Silva
Primefaces
Ele considerado muito melhor do que muitas outras
bibliotecas de componentes J SF, tendo em vista que:
Possui um rico conjunto de componentes de interface
(DataTable, AutoComplete, HTMLEditor, grficos etc).
Nenhum xml de configurao extra necessria e no h
dependncias.
Componentes construdos com Ajax no padro J SF 2.0 Ajax
APIs.
Mais de 25 temas templates.
Boa documentao com exemplos de cdigo.
Programao para Internet III Prof. Teresinha Letcia da Silva
Primefaces
O PrimeFaces um framework que oferece um conjunto
de componentes ricos para o J avaServer Faces.
Seus componentes foram construdos para trabalhar
com AJ AX por default, isto , no necessrio
nenhum esforo extra por parte do desenvolvedor para
realizao de chamadas assncronas ao servidor.
Alm disso, o PrimeFaces permite a aplicao de temas
(skins) com o objetivo de mudar a aparncia dos
componentes de forma simples.
Programao para Internet III Prof. Teresinha Letcia da Silva
Primefaces
Alm do PrimeFaces, existem outros frameworks que
seguem uma linha parecida, tais como o RichFaces
(J Boss) e o IceFaces (ICEsoft).
Programao para Internet III Prof. Teresinha Letcia da Silva
PrimeFaces
O PrimeFaces uma biblioteca enxuta e com
umnico jar, no sendo necessrio nenhuma
configurao e no tem nenhuma
dependncia.
S necessrio realizar o download
PrimeFaces, e adicionar o primefaces-
{version}.jar no seu classpath e importar o
namespace para comear a utilizar.
Programao para Internet III Prof. Teresinha Letcia da Silva
PrimeFaces
Para adicionar componentes em suas
pginas necessrio adicionar o namespace
do PrimeFaces:
xmlns:p=http://primefaces.org/ui
Programao para Internet III Prof. Teresinha Letcia da Silva
Componentes
O rico conjunto de componentes presente na
biblioteca do primefaces um dos principais
motivos de sua ascenso.
Em virtude da quantidade de componentes nem
todos sero citados, porm, todo o conjunto
pode ser consultado no showcase da biblioteca:
http://www.primefaces.org/showcase/ui/home.jsf
.
Programao para Internet III Prof. Teresinha Letcia da Silva
Componentes
Programao para Internet III Prof. Teresinha Letcia da Silva
Componentes
Programao para Internet III Prof. Teresinha Letcia da Silva
Componentes
Programao para Internet III Prof. Teresinha Letcia da Silva
Componentes
Programao para Internet III Prof. Teresinha Letcia da Silva
Componentes
Programao para Internet III Prof. Teresinha Letcia da Silva
Componentes
Programao para Internet III Prof. Teresinha Letcia da Silva
Componentes
O jquery possui uma srie de cones que podem
ser utilizados com o primefaces. Esses cones
podem ser obtidos em:
http://jqueryui.com/themeroller/.
O primefaces possui integrao com o
framework ThemeRoller do J Query. Atualmente
existem 24 temas disponveis para serem
utilizados nas aplicaes.
http://primefaces.org/themes
Programao para Internet III Prof. Teresinha Letcia da Silva
Exemplo de uso
Vamos agora alterar nosso projeto da ltima
aula para usar PrimeFaces.
Para utilizar o primefaces necessrio
efetuar o download da biblioteca no site do
projeto: http://primefaces.org/downloads.
interessante fazer o download da verso
4.0.
Programao para Internet III Prof. Teresinha Letcia da Silva
Exemplo de uso
Aps fazer o download do arquivo devemos adicion-lo
nas bibliotecas do projeto. Para tal, clique como boto
direito sobre as bibliotecas e escolha Adicionar
J AR/Pasta...
A configurao necessria para que o PrimeFaces
funcione ZERO, no necessrio nenhuma
configurao xml para comear a utiliza-lo, apenas a
sua declarao na pgina que o utilizar.
No nosso caso a pgina index.xhtml dever conter a
seguinte declarao:
xmlns:p="http://primefaces.org/ui"
Programao para Internet III Prof. Teresinha Letcia da Silva
Utilizando os componentes
PrimeFaces no Cadastro
Para melhorar a aparncia do cadastro e
adicionar a chamada assincrona por ajax aos
mtodos ns vamos adicionar alguns
componentes da biblioteca PrimeFaces.
Entre os componentes utilizados esto o
layout, dataTable, commandLink,
commandButtone o dialog.
Programao para Internet III Prof. Teresinha Letcia da Silva
Utilizando os componentes
PrimeFaces no Cadastro
Primeiro vamos inserir componentes do tipo
p:layout e p:layoutUnit para definir divises
para a pgina.
Logo abaixo do corpo da pgina insira:
<p:layout fullPage="true">
e encerre no final da pgina, antes do
</h:body>
</p:layout>
Programao para Internet III Prof. Teresinha Letcia da Silva
Utilizando os componentes
PrimeFaces no Cadastro
Aps vamos colocar o formulrio de cadastro em uma
janela do tipo dialog.
<p:dialog header="Gerencia de Produto" widgetVar="dialogGerProduto" resizable="false" modal="true"
showEffect="slide" width="500">
<h1>Cadastro de produtos</h1>
<h:formid="formulario" prependId="false">
<br>Nome:
<h:inputText id="nome_produto" value="#{produtoController.produto.nome_produto}" /></br>
<br>Preo:
<h:inputText id="preco_produto" value="#{produtoController.produto.preco_produto}" /></br>
<br>Codigo da Categoria
<h:inputText id="cod_categoria" value="#{produtoController.produto.cod_categoria}" /> </br>
<br><h:commandButton id="btnSalvar" action="#{produtoController.salvarProduto()}" value="Salvar"
/>
<h:commandButton id="btnAlterar" action="#{produtoController.alterarProduto()}" value="Alterar" />
</br>
</h:form>
</p:dialog>
Programao para Internet III Prof. Teresinha Letcia da Silva
Utilizando os componentes
PrimeFaces no Cadastro
E vamos criar uma rea para a tabela:
<p:layoutUnit position="center">
Aps vamos alterar a datatable e as colunas para:
<p:dataTable>
<p:column>
Programao para Internet III Prof. Teresinha Letcia da Silva
Utilizando os componentes
PrimeFaces no Cadastro
E vamos criar uma rea para a tabela:
<p:layoutUnit position="center">
Aps vamos alterar a datatable e as colunas para:
<p:dataTable>
<p:column>
E vamos inserir umlink para chamar o cadastro:
<h:formprependId="false">
<p:commandLink value="Novo Livro"
onclick="#{produtoController.prepararAdicionarLivro()}"
oncomplete="dialogGerLivro.show()"/>
</h:form>
Programao para Internet III Prof. Teresinha Letcia da Silva
Trocando o skin
Para que possa ser utilizado um skindiferente na pgina,
necessrio a insero do seguinte cdigo no arquivo web.xml
<context-param>
<param-name>primefaces.skin</param-name>
<param-value>none</param-value>
</context-param>
Esta configurao remove o skin padro do PrimeFaces e permite
que outros skins possam ser usados, sendo que, a especificao
ocorre na pgina atravs da adio da tag .
Programao para Internet III Prof. Teresinha Letcia da Silva
Trocando o skin
Voc deve baixar o skina ser utilizado.
A pasta do skindeve ser colocada na pasta web do seu projeto.
E as pginas que forem utilizar o skin devem conter a seguinte
chamada dentro da tag :
<link type="text/css" rel="stylesheet" href="dot-luv/skin.css" />