PrimeFaces

Suite de Componentes
(DataTable, DataExporter, DataList, DataGrid, Growl, AjaxStatus, HotKey, AccordionPanel,
Efect, Dialog)

Joan Sebastián Sepúlveda Vélez

Fundación Universitaria Tecnológico Comfenalco
DataTable

DataTable es una mejora a la tabla estándar de JSF, que

incluye:

Paginación
Clasificación/Ordenación
Filtrado
Lazy loading
y más, con el apoyo de algunos otros componentes...
Características Básicas

Una tabla (dataTable) básica 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.

Paginación

DataTable tiene soporte para la paginación por Ajax. Hay que

agregarle los atributos:

paginator: true. Para habilitar la paginación.

rows: número de filas a renderizar por página.
paginatorTemplate: plantilla de diseño para el paginador,
por defecto es. "{FirstPageLink} {PreviousPageLink} {PageLinks}
{NextPageLink} {LastPageLink}".
rowsPerPage: plantilla para una lista desplegable de
paginación. Se definen los diferentes valores separados por
comas (,).
Ordenamiento

Los dataTable's en prime nos permiten realizar clasificación 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 también provee filtros personalizados.

Se debe especificar una colección 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.

Tamaño de la tabla, atributo height.

Si queremos habilitar la carga en vivo:

liveScroll
Expansión de tablas

DataTable nos provee un mecanismo de expansión 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 vacía.
footerText: Representa el pie de pagina de una columna.
headerText: Representa la cabecera de una columna.
Selección

Utilizando un commandButton
Binding + getRowData
f:param
f:setPropertyActionListener
Pasando como parámetro el objeto (se requiere la
versión 2.2 de EL)
Selección - RadioCheckBox

Radio/CheckBox Selection
Al dataTable se le agrega el atributo selection apuntando
a la variable del bean ya sea un pojo o una colección
según 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

DataGrid

DataGrid muestra una colección 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 separándolos por tab.
autoHeight: evita que el contenedor se coloque por defecto
del tamaño 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 notificación 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 automáticamente.
life: tiempo de visualización 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 petición Ajax, las

dos mas comunes:
start
complete
prestart, error, success
HotKey

Se utiliza como un acceso directo del teclado, que se efectúa

del lado del cliente y ejecuta un evento en el servidor a través
de Ajax.

bind: especifica la combinación de teclas.

Effect

Es un componente basado en la librería 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 parámetros.
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 selección 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 característica.
axis: define la orientación (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 característica.
tolerance: modo de intersección (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, Integración con DataGrid
y DataTable
Ejemplo:
Arrastrar componentes listados en un DataGrid/DataTable,
hacía 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 rederización 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 duración 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 navegación en el componente de la
fecha.
Calendar

mindate: indica la fecha mínima que se puede

seleccionar en el calendario.
maxdate: indica la fecha máxima 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 navegación

entre tab's.
backLabel: representa la etiqueta del botón de regresar.
nextLabel: representa la etiqueta del botón siguiente.
flowListener: evento ejecutado al momento de pasar de
una tab a otra por medio de las herramientas de
navegación proporcionadas.

nota: no avanza si no pasa por las validaciones de la tab.

Tree

Representa un árbol que muestra una jerarquía de datos.

Se apoya en la interfaz TreeNode, la cual es una estructura de

datos jerárquica los cuales serán dibujados en el tree. Esta
tiene una implementación 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 selección 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 selección.
onselectComplete: evento javaScript ejecutado al instante
que se completa la selección.
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 jerarquía.
var: variable con la cual se va a iterar la estructura de
datos jerárquica.
Theme's

Prime se integra con el framework ThemeRoller CSS.

Dispone de 30 temas prediseñados.
Agregar tema, es muy fácil:
descargar el .jar del tema deseado (manualmente o a
través de maven)

configurar el parámetro 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 tamaño de los componentes de prime (font-

size):