PrimeFacesSuite de Componentes

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

Joan Sebastián Sepúlveda VélezFundación Universitaria Tecnológico Comfenalco

DataTable

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

PaginaciónClasificación/OrdenaciónFiltradoLazy loadingy 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)endsWithcontainsexact

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, xmlfileNamepageOnly 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 commandButtonBinding + getRowDataf:paramf:setPropertyActionListenerPasando como parámetro el objeto (se requiere la versión 2.2 de EL)

Selección - RadioCheckBox

Radio/CheckBox SelectionAl 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, varitemType: especifica el tipo de item's de la lista (square, disc,

circle)�type: tipo de lista a mostrar (unordered, ordered, definition)paginatoreffect: default true

Nota: si es type "definition" se debe especificar la faceta description

DataGrid

DataGrid muestra una colección de datos pero no en una tabla sino en una grilla.

value, varcolumnspaginator, rowspaginatorPosition (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.

GrowlCambiar el aspecto de Growl...

AjaxStatusEs 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:

startcompleteprestart, 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 componentetoggleable: true / falsetoggleListener: 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: clonerevert: 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 DataTableEjemplo: 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-4doc 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.

expandedchildrenparentchildCountdataexpandedselected

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:�nodeExpandListenernodeCollapseListenernodeSelectListener

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):