PrimeFaces

Suite de Componentes
(DataTable, DataExporter, DataList, DataGrid, Growl, AjaxStatus, HotKey, AccordionPanel,
Efect, Dialog)
Joan Sebastin Seplveda Vlez
Fundacin Universitaria Tecnolgico Comfenalco
DataTable
DataTable es una mejora a la tabla estndar de JSF, que
incluye:
Paginacin
Clasificacin/Ordenacin
Filtrado
Lazy loading
y ms, con el apoyo de algunos otros componentes...
Caractersticas Bsicas
Una tabla (dataTable) bsica se puede conformar de:
La etiqueta de la tabla:
Las columnas que la conforman:
Header & Footer
Son dos facetas que tienen las tablas de Primefaces y de
igual forma se le pueden aplicar a las columnas.
header: se establece como el titulo de la tabla.

footer: se establece como el pie de pagina de la tabla.
Paginacin
DataTable tiene soporte para la paginacin por Ajax. Hay que
agregarle los atributos:
paginator: true. Para habilitar la paginacin.
rows: nmero de filas a renderizar por pgina.
paginatorTemplate: plantilla de diseo para el paginador,
por defecto es. "{FirstPageLink} {PreviousPageLink} {PageLinks}
{NextPageLink} {LastPageLink}".
rowsPerPage: plantilla para una lista desplegable de
paginacin. Se definen los diferentes valores separados por
comas (,).
Ordenamiento
Los dataTable's en prime nos permiten realizar clasificacin u
ordenamiento de los resultados de la misma mediante Ajax.
Filtros
DataTable provee funcionalidad para aplicar filtros a las
columnas de una tabla implementando Ajax.
filterBy: indica por que columna se va a aplicar el filtro
filterMatchMode: representa el tipo de filtrado a aplicar.
startsWith (default)
endsWith
contains
exact

Filtros personalizados
DataTable tambin provee filtros personalizados.
Se debe especificar una coleccin de SelectItem que se
desplegar en la cabecera de la columna.
Scroll
DataTable incorpora soporte scroll, tanto a nivel de ciente
como en caliente.
Se debe indicar la propiedad scrollable en true.
Tamao de la tabla, atributo height.
Si queremos habilitar la carga en vivo:

liveScroll
Expansin de tablas
DataTable nos provee un mecanismo de expansin en las filas
de ella.
rowToggler
rowExpansion
DataExporter
DataExporter es un componente de PrimeFaces que nos
permite exportar los datos de una tabla.
target: indica el id de la tabla a exportar.
type: xls, pdf, csv, xml
fileName
pageOnly
excludeColumns
Otras..
emptyMessage: Especifica el mensaje a mostrar cuando la
lista esta vaca.
footerText: Representa el pie de pagina de una columna.
headerText: Representa la cabecera de una columna.
Seleccin
Utilizando un commandButton
Binding + getRowData
f:param
f:setPropertyActionListener
Pasando como parmetro el objeto (se requiere la
versin 2.2 de EL)
Seleccin - RadioCheckBox
Radio/CheckBox Selection
Al dataTable se le agrega el atributo selection apuntando
a la variable del bean ya sea un pojo o una coleccin
segn sea el caso.
p:column selectionMode
DataList
Dibuja una lista de Item's de igual forma que una lista de html:
value, var
itemType: especifica el tipo de item's de la lista (square, disc,
circle)
type: tipo de lista a mostrar
(unordered, ordered, definition)
paginator
effect: default true
Nota: si es type "definition" se debe especificar la
faceta description
DataGrid
DataGrid muestra una coleccin de datos pero no en una tabla
sino en una grilla.
value, var
columns
paginator, rows
paginatorPosition (both, top, bottom)
AccordionPanel
AccordionPanel es un contenedor que renderiza sus
hijos separndolos por tab.
autoHeight: evita que el contenedor se coloque por defecto
del tamao de su tab mas grande.
event: indica cual es el evento con el cual se va a mostrar
una tab u otra.
collapsible: indica si es posible contraer todas las tab.
activeIndex: indica cual es la tab activa por defecto.
Growl
Basado en el widget de notificacin de Mac's y se utiliza para
mostrar FacesMessages.
showSummary: indica si muestra el titulo.
showDetail: indica si muestra el detalle.
sticky: indica si el widget debe permanecer o
desaparecer automticamente.
life: tiempo de visualizacin del mensaje.
Growl
Cambiar el aspecto de Growl...
AjaxStatus
Es un notificador para todas las peticiones Ajax realizadas por
los componentes de PrimeFaces.
Usa facetas para representar el estado de la peticin Ajax, las
dos mas comunes:
start
complete
prestart, error, success
HotKey
Se utiliza como un acceso directo del teclado, que se efecta
del lado del cliente y ejecuta un evento en el servidor a travs
de Ajax.
bind: especifica la combinacin de teclas.
Effect
Es un componente basado en la librera JQuery.
blind clip drop explode
fold puff slide scale
bounce highlight pulsate shake
size transfer
event: indica el evento mediante el cual se activa el efecto.
type: indica cual es el efecto a aplicar.
http://docs.jquery.com/UI/Effects
Effect
Uso de parmetros.
FieldSet
Es un componente agrupador que provee un titulo y un
toggleListener.
legend: titulo del componente
toggleable: true / false
toggleListener: evento ejecutado en el bean al hacer el
componente togglable.
onToggleUpdate: componentes a actualizar cuando se
ejecute el evento toggleListener.
MenuBar, SubMenu y MenuItem
MenuBar es un componente que representa barras de menu al
estilo de las aplicaciones de escritorio.
SubMenu es un componente que agrupa bajo un mismo
nombre diferentes item's de seleccin disponibles.
MenuItem son cada una de las opciones finales mediante las
cuales vamos a interactuar, ya sea accediendo a recursos o
efectuando acciones y/o eventos.
Drag & Drop
Draggable y Droppable proporcionan la funcionalidad de
arrastrar y soltar componentes dentro de otros.
Draggable:
for: especifica el id del componente que va a poseer
esta caracterstica.
axis: define la orientacin (x, y)
helper: clone
revert: true, stack=".ui-panel"
opacity: 0.7, grid: 20, 45, containment="parent"
Drag & Drop
Droppable:
for: especifica el id del componente que va a poseer
esta caracterstica.
tolerance: modo de interseccin (touth)
datasource: especifica cual es el componente que provee
los datos.
dropListener: evento que se ejecuta al hacer el arrastre
del componente, se asocia con un objeto de tipo
DragDropEvent.
onDropUpdate: especifica el o los componentes a
actualizar al realizar el arrastre.
activeStyleClass="ui-state-highlight": le da un estilo al rea
de arrastre.
Drag & Drop, Integracin con DataGrid
y DataTable
Ejemplo:
Arrastrar componentes listados en un DataGrid/DataTable,
haca una un FieldSet que actualizar el contenido de una
tabla.
icono arrastrar: ui-icon ui-icon-arrow-4
doc de iconos: http://jqueryui.com/themeroller/
nota: mostrar la tabla cuando no esta vacia not empty ...
TabView
Este componente nos permite crear una especie de
JTabbedPane al estilo de Swing.
<p:tabView...
Esta compuesta por p:tab's.
dynamic: hace que la rederizacin sea perezosa y se
carga mediante Ajax.
cache: habilita el mecanismo de cache para las tab's ya
cargadas. Por defecto es true.
tabChangeListener: evento ejecutado al cambiar de tab.
Se asocia a un objeto TabChangeEvent.
collapsible: indica si el TabView se puedo contraer.
TabView
effect: efecto que se va a ejecutar cuando se haga un
cambio de tab. (opacity, height, width).
effectDuration: especifica la duracin del efecto
(slow, normal, fast)
activeIndex: indica la tab a mostrar por defecto.
WaterMark
Muestra una marca de agua que describe la finalidad de los
componentes de entrada.
for: id del componente al que se le va a aplicar la mascara.
Calendar
Componente para la entrada de fechas.
mode: especifica distintos modos de visualizar el
componente (popup, inline).
showOn: componente paralelo que muestra el calendario
(button).
selectListener: Evento ejecutado cuando se selecciona
una fecha. Se asocia a un objeto DateSelectEvent.
onSelectUpdate: id's de los componentes a actualizar al
ejecutar el evento de seleccionar.
pattern: define el formato en que se va a mostrar la fecha.
(dd/MM/yyyy, EEE, dd MMM, yyyy, ...).
navigator: habilita la navegacin en el componente de la
fecha.
Calendar
mindate: indica la fecha mnima que se puede
seleccionar en el calendario.
maxdate: indica la fecha mxima que se puede seleccionar
en el calendario.
pages: indica el numero de paginas a mostrar en el
calendario.
effect: fadeIn, slide, slideDown, explode, fold, drop
ToolTip
Utilizando el componente toolTip de modo global, este se
aprovecha de los valores de los atributos tittle de los
componentes JSF.
Wizard
Es un componente que representa un flujo de trabajo, el cual
esta creado por multiples tab que se van visualizando a medida
que se pasa de una a otra.
Agrega dos botones en la parte inferior para la navegacin
entre tab's.
backLabel: representa la etiqueta del botn de regresar.
nextLabel: representa la etiqueta del botn siguiente.
flowListener: evento ejecutado al momento de pasar de
una tab a otra por medio de las herramientas de
navegacin proporcionadas.
nota: no avanza si no pasa por las validaciones de la tab.
Tree
Representa un rbol que muestra una jerarqua de datos.
Se apoya en la interfaz TreeNode, la cual es una estructura de
datos jerrquica los cuales sern dibujados en el tree. Esta
tiene una implementacin llamada DefaultTreeNode.
Tree: TreeNode - API
Nos provee una serie de atributos mediante los cuales
podemos afectar el comportamiento de los nodos del rbol.
expanded
children
parent
childCount
data
expanded
selected
Tree
dynamic: proporciona la funcionalidad de que la carga de
los nodos sea mediante peticiones Ajax al momento
de usarse.
type: indica el tipo de nodo y dependiendo de este se
pueden declarar diferentes <p:treeNode... en la vista, para
tratar cada uno de acuerdo a su naturaleza.
Eventos:
nodeExpandListener
nodeCollapseListener
nodeSelectListener
Tree
selectionMode: modo de seleccin disponible para los
nodos (single, multiple, checkbox).
selection: se asocia a un arreglo de TreeNode en el bean,
lo cuales han sido seleccionados.
update: id's de componentes a actualizar.
onselectStart: evento javaScript ejecutado al instante en
que se inicia la seleccin.
onselectComplete: evento javaScript ejecutado al instante
que se completa la seleccin.
TreeTable
Este componente tiene el mismo funcionamiento que
un tree pero se aplica a una tabla.
value: hace referencia hacia el TreeNode padre de
la jerarqua.
var: variable con la cual se va a iterar la estructura de
datos jerrquica.
Theme's
Prime se integra con el framework ThemeRoller CSS.
Dispone de 30 temas prediseados.
Agregar tema, es muy fcil:
descargar el .jar del tema deseado (manualmente o a
travs de maven)

configurar el parmetro primefaces.THEME en el web.
xml y colocarle como valor el nombre del tema deseado.
Theme's Tip's
Nuevos Temas: se pueden crear temas personalizados
gracias a ThemeRoller en: http://jqueryui.com/themeroller/.
Cambiar el tamao de los componentes de prime (font-
size):