suite de componentes
TRANSCRIPT
![Page 1: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/1.jpg)
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
![Page 2: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/2.jpg)
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...
![Page 3: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/3.jpg)
Características Básicas
Una tabla (dataTable) básica se puede conformar de:La etiqueta de la tabla:
Las columnas que la conforman:
![Page 4: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/4.jpg)
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.
![Page 5: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/5.jpg)
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 (,).
![Page 6: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/6.jpg)
Ordenamiento
Los dataTable's en prime nos permiten realizar clasificación u ordenamiento de los resultados de la misma mediante Ajax.
![Page 7: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/7.jpg)
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
![Page 8: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/8.jpg)
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.
![Page 9: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/9.jpg)
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
![Page 10: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/10.jpg)
Expansión de tablas
DataTable nos provee un mecanismo de expansión en las filas de ella.
rowToggler
rowExpansion
![Page 11: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/11.jpg)
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
![Page 12: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/12.jpg)
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.
![Page 13: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/13.jpg)
Selección
�Utilizando un commandButtonBinding + getRowDataf:paramf:setPropertyActionListenerPasando como parámetro el objeto (se requiere la versión 2.2 de EL)
![Page 14: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/14.jpg)
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
![Page 15: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/15.jpg)
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
![Page 16: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/16.jpg)
DataGrid
DataGrid muestra una colección de datos pero no en una tabla sino en una grilla.
value, varcolumnspaginator, rowspaginatorPosition (both, top, bottom)
![Page 17: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/17.jpg)
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.
![Page 18: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/18.jpg)
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.
![Page 19: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/19.jpg)
GrowlCambiar el aspecto de Growl...
![Page 20: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/20.jpg)
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
![Page 21: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/21.jpg)
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.
![Page 22: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/22.jpg)
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
![Page 23: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/23.jpg)
Effect
Uso de parámetros.
![Page 24: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/24.jpg)
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.
![Page 25: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/25.jpg)
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.
![Page 26: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/26.jpg)
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"
![Page 27: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/27.jpg)
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.
![Page 28: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/28.jpg)
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 ...
![Page 29: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/29.jpg)
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.
![Page 30: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/30.jpg)
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.
![Page 31: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/31.jpg)
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.
![Page 32: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/32.jpg)
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.
![Page 33: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/33.jpg)
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
![Page 34: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/34.jpg)
ToolTip
Utilizando el componente toolTip de modo global, este se aprovecha de los valores de los atributos tittle de los componentes JSF.
![Page 35: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/35.jpg)
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.
![Page 36: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/36.jpg)
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.
![Page 37: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/37.jpg)
Tree: TreeNode - API
Nos provee una serie de atributos mediante los cuales podemos afectar el comportamiento de los nodos del árbol.
expandedchildrenparentchildCountdataexpandedselected
![Page 38: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/38.jpg)
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
![Page 39: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/39.jpg)
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.
![Page 40: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/40.jpg)
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.
![Page 41: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/41.jpg)
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.
![Page 42: Suite de Componentes](https://reader031.vdocuments.net/reader031/viewer/2022013111/5571fa40497959916991b037/html5/thumbnails/42.jpg)
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):