PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats
-
Upload
jaxconf -
Category
Technology
-
view
6.901 -
download
11
description
Transcript of PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats
![Page 1: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/1.jpg)
Ian Hlavats | Tarantula Consulting
PrimeFaces Next Gen JSF Component Suite
![Page 2: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/2.jpg)
Ian Hlavats • JSF Consultant • [email protected] • Author, JSF 1.2 Components (Packt) • JSFToolbox for Dreamweaver
(www.jsftoolbox.com)
![Page 3: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/3.jpg)
3
![Page 4: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/4.jpg)
4
Lightweight
![Page 5: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/5.jpg)
5
Easy to Use
![Page 6: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/6.jpg)
6
Only one jar 1.7~ mb
![Page 7: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/7.jpg)
7
No required dependencies
![Page 8: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/8.jpg)
8
Zero Config
![Page 9: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/9.jpg)
9
100+ Components
![Page 10: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/10.jpg)
10
Mock OS X
![Page 11: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/11.jpg)
11
Form Components
![Page 12: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/12.jpg)
12
Anatomy of a PF Component <h:form id="form"> <p:dialog id="dialog1" header="Basic Dialog" draggable="false" modal="false" widgetVar="dlg"> Resistance to PrimeFaces is futile! </p:dialog> </h:form>
<div id="form:dialog1" title="Basic Dialog"> Resistance to PrimeFaces is futile! </div>
<script type="text/javascript"> dlg = new PrimeFaces.widget.Dialog('form:dialog1', {draggable:false, modal:false}); </script>
JSF Page
Rendered markup
Rendered Script
You get:
![Page 13: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/13.jpg)
13
Ajax in PrimeFaces
Server APIs : Standard JSF 2
Client APIs :
![Page 14: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/14.jpg)
14
Ajax Extensions
RequestContext
p:ajaxStatus callbacks
p:ajax autoUpdate
![Page 15: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/15.jpg)
15
p:ajax f:ajax oncomplete
onsuccess
onerror
onstart
onevent
onerror
async
global
![Page 16: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/16.jpg)
16
AjaxStatus <p:ajaxStatus>
<f:facet name="start"> <p:graphicImage value="fancyanimation.gif" /> </f:facet> <f:facet name="complete"> <h:outputText value="Request Completed" /> </f:facet>
</p:ajaxStatus>
Declarative
Programmatic <p:ajaxStatus onstart=“dialog.show()” oncomplete=“dialog.hide()” />
Global/Non-Global <p:commandButton global=“true|false” />
![Page 17: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/17.jpg)
17
RequestContext <p:commandButton value=”Submit” action=”#{bean.save}”
oncomplete=”handleComplete(xhr, status, args)” />
public void save() { RequestContext context = RequestContext.getCurrentInstance(); context.addCallbackParam(“item”, item);
}
<script type=”text/javascript”> function handleComplete(xhr, status, args) { alert(args.item.name); }
</script>
Callback
Bean
JSF Page
![Page 18: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/18.jpg)
18
AutoUpdate <p:growl id=“messages” /> <p:commandButton value=“Save” update=“messages” /> <p:commandButton value=“Update” update=“messages” /> <p:commandButton value=“Delete” update=“messages” />
<p:growl autoUpdate=“true”/> <p:commandButton value=“Save” /> <p:commandButton value=“Update” /> <p:commandButton value=“Delete” />
becomes
![Page 19: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/19.jpg)
19
THEMES
![Page 20: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/20.jpg)
20
Install a Theme
<context-param> <param-name>primefaces.THEME</param-name> <param-value>aristo</param-value>
</context-param>
Add primefaces-{theme}.jar
And then configure;
![Page 21: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/21.jpg)
21
Create your own
![Page 22: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/22.jpg)
22
PrimeFaces Mobile
![Page 23: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/23.jpg)
23
Mobile JSF Page <pm:page title="TwitFaces"> <pm:view id="main" swatch="b"> <pm:header title="TwitFaces"> </pm:header> <pm:content> <h:form id="twitForm"> <h:outputText value="Account: " /> <h:inputText value="#{twitterController.username}" /> <p:separator /> <pm:commandButton value="Get Tweets" icon="refresh" update="tweetList" actionListener="#{twitterController.loadTweets}" />
<pm:listView id="tweetList" value="#{twitterController.tweets}" var="tweet"> #{tweet} </pm:listView> </h:form> </pm:content> </pm:view>
</pm:page>
![Page 24: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/24.jpg)
24
Supported Platforms
powered by
![Page 25: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/25.jpg)
25
PrimeFaces Push
Integrated with Atmosphere
Long-Polling Http-Streaming Websockets
![Page 26: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/26.jpg)
26
Portals
support with
Sample: /svn/examples/trunk/prime-portlet
![Page 27: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/27.jpg)
27
PrimeFaces on the Cloud
http://primefaces-rocks.appspot.com
http://primefaces-gae-kickstart.appspot.com
Sample: /svn/examples/trunk/appengine
![Page 28: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/28.jpg)
28
PrimeFaces EL Utils
#{p:widgetVar('compId')}
#{p:component('compId')}
#{p:ifGranted('ROLE_ADMIN')}
#{p:ifAllGranted('ROLE_READER, ROLE_EDITOR')}
#{p:ifAnyGranted('ROLE_READER, ROLE_EDITOR')}
#{p:ifNotGranted('ROLE_EDITOR')}
#{p:remoteUser()}
![Page 29: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/29.jpg)
PrimeFaces UI Component Overview
![Page 30: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/30.jpg)
• PrimeFaces 3.1 has 125 JSF components
Ajax 6 Chart
7
Command 3
Data 19
Date/Time 2
Dialog 3
Drag and Drop 2
File 2
General 4
Image 6
Input 14
Layout 10
Map 2
Media 2
Menu 8
Navigation 1
Output 5
Panel 6
Security 2
Select 10
System 9
Utility 2
PrimeFaces UI Components by Category
![Page 31: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/31.jpg)
PrimeFaces Components
Category Count Description Ajax 6 Ajax capabilities (update, status, poll, push, etc.) Chart 7 Pie, bar, donut, etc. Command 3 Buttons, links Data 19 Tables, grids, lists, exporting Date/Time 2 Calendar, schedule Dialog 3 Generic dialog, confirmation, wizard Drag and Drop 2 Adds DND to other components File 2 Upload, download General 4 General / miscellaneous components Image 6 Display, edit, and arrange images on screen Input 14 Rich user input controls
![Page 32: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/32.jpg)
PrimeFaces Components • Continued
Category Count Description Layout 10 UI layout management, themes, spacing, etc.
Map 2 Google Maps integration Media 2 Media streaming and photo capture Menu 8 Menu system components Navigation 1 Navigational aids Output 5 Messages and other information Panel 6 Group/organize other components in panels Security 2 CAPTCHA, password strength indicator Select 10 Rich user input selection components System 9 UI components for web-based OS (e.g. Mock OS X) Utility 2 Various utilities for common tasks
![Page 33: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/33.jpg)
Ajax Components
• Provide Ajax functionality for other components
Component Description p:ajax Adds Ajax capability to other components.
p:ajaxStatus Ajax status indicator component.
p:effect Renders a JavaScript effect (e.g. fade, etc.) p:poll Periodically polls the server and updates the DOM. p:push Creates channel for pushing Ajax updates from server. p:remoteCommand Execute backing bean method from JavaScript.
![Page 34: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/34.jpg)
Chart Components
• Render data as charts
Component Description p:barChart Renders a bar chart.
p:bubbleChart Renders a bubble chart.
p:donutChart Renders a donut chart. p:lineChart Renders a line graph. p:meterGaugeChart Renders a meter gauge. p:ohlcChart Renders an open-high-low-close chart. p:pieChart Renders a pie chart.
![Page 35: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/35.jpg)
Command Components
• Submit form data for server-side processing
Component Description p:button Renders a submit button with enhanced skinning.
p:commandButton Renders a submit button.
p:commandLink Renders a hyperlink.
![Page 36: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/36.jpg)
Data Components • Render data in various formats
Component Description p:cellEditor Supports in-cell editing in a data table.
p:column Defines a table column.
p:columnGroup Supports column grouping (e.g. in header/footer). p:columns Supports dynamic columns. p:dataExporter Exports a data table to XML, CSV, PDF, or CSV. p:dataGrid Renders data in a grid. p:dataList Renders data in a list. p:dataTable Renders a data table. p:orderList Enables user to arrange rows of data. p:sheet Renders data in an Excel-like spreadsheet.
![Page 37: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/37.jpg)
Data Components • Continued
Component Description p:row Defines a row (e.g. multi-row footer).
p:rowEditor Supports editable rows. p:rowExpansion Renders expanded row content. p:rowToggler Toggle control to expand/collapse row. p:subTable Renders a sub-table within a data table. p:summaryRow Supports calculating totals for columns. p:tree Renders a tree. p:treeNode Defines a node in a tree. p:treeTable Renders a tree table.
![Page 38: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/38.jpg)
Dialog Components
• Accept input from the user in a dialog
Component Description p:confirmDialog Replacement for JavaScript confirm() dialog.
p:dialog Floating panel component for dialog interation.
p:wizard Multi-step dialog.
![Page 39: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/39.jpg)
Drag and Drop Components
• Enhance UI with drag and drop capability
Component Description p:draggable Enables a component to be dragged.
p:droppable Enables a component to handle a drop event.
![Page 40: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/40.jpg)
File Components
• Support file handling use cases
Component Description p:fileDownload Replaces servlets for sending files (e.g. PDF).
p:fileUpload Enables user to upload one or more files.
![Page 41: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/41.jpg)
Gallery Components
• Image gallery functionality
Component Description p:galleria Renders a gallery for browsing images.
![Page 42: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/42.jpg)
General Components
• General purpose and miscellaneous components
Component Description p:feedReader RSS feed reader and transformer.
p:fieldset Renders an HTML fieldset with theme support.
p:progressBar Determinate progress bar with client side/Ajax modes.
![Page 43: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/43.jpg)
Image Components
• Graphics related components
Component Description p:galleria Gallery for browsing images with thumbnails.
p:graphicImage Renders an image from a file or byte stream.
p:imageCompare Renders two images side by side for comparison.
p:imageCropper Enables user to crop image and save result. p:imageSwitch Simple image browsing component. p:lightbox Powerful image and multimedia content browser.
![Page 44: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/44.jpg)
Input Components • Handle user input in a variety of ways
Component Description p:autoComplete Input control with live suggestions as user types.
p:colorPicker Input control with rich color palette.
p:editor Rich HTML text editor control (WYSIWYG). p:focus Manages element focus on screen. p:hotkey Binds a key combination to a JavaScript or Ajax call. p:inplace Text control that allows editing when clicked. p:inputMask Forces text input to match a mask pattern. p:inputText Extends standard inputText control with skinning. p:inputTextarea Text area with skinning and auto expansion. p:pickList Allows user to transfers objects between two collections.
![Page 45: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/45.jpg)
Input Components • Continued
Component Description p:radioButton Supports custom layout for selectOneRadio.
p:rating Star rating control.
p:slider Draggable slider control with different orientations. p:spinner Spinner control to increment/decrement number.
![Page 46: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/46.jpg)
Layout Components • Handle UI arrangement and look and feel
Component Description p:divider Renders a separator for toolbar buttons.
p:layout Similar to Swing BorderLayout class.
p:layoutUnit Defines a layout region (e.g. north, south, etc).
p:scrollPanel Handles content overflow by rendering scrollbars. p:separator Renders a horizontal line with skinning. p:spacer Renders flexible white space between elements. p:stack Similar to stack feature in Mac OS X. p:tab Generic container used by tabView, accordionPanel, etc. p:tabView Advanced tabbed panel component. p:themeSwitcher Change look and feel without page refresh.
![Page 47: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/47.jpg)
Map Components
• Integration with Google Maps API
Component Description p:gmap Integrates a Google Map on page.
p:gmapInfoWindow Displays a window on map with overlay is selected.
![Page 48: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/48.jpg)
Media Components
• Enhance UI with multimedia capability
Component Description p:media Embeds streaming video and music players.
p:photoCam Take photos with webcam and send to backing bean.
![Page 49: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/49.jpg)
Menu Components
• Define toolbars and menus
Component Description p:contextMenu Displays overlay menu on right-click.
p:menu Advanced multi-tier menu container.
p:menuBar Defines a horizontal menu bar with submenus. p:menuButton Button that displays a popup menu. p:menuItem Defines a menu item with icon, label and link/action. p:submenu Container for a group of menu items. p:toolbar Horizontal grouping for menus, buttons, separators, etc. p:toolbarGroup Defines a group of toolbar items.
![Page 50: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/50.jpg)
Navigation Components
• Improve navigability of web application
Component Description p:breadcrumb Renders a hierarchical navigation element.
![Page 51: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/51.jpg)
Output Components
• Render text and other information
Component Description p:message Renders a JSF message with skinning.
p:messages Renders all JSF messages for view with skinning.
p:ring Displays content with 3D circular animation. p:tagCloud Displays collection of keywords with different emphasis. p:tooltip Provides tooltip with HTML content, effects, and skinning.
![Page 52: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/52.jpg)
Panel Components
• Provide panels for organizing components
Component Description p:accordionPanel Displays stacked content in collapsible panels.
p:carousel Paginate a set of content elements with slide effect.
p:outputPanel Wraps conditionally rendered components for Ajax. p:overlayPanel Displays a popup panel in front of other content. p:panel Panel with toggle, close, and menu controls. p:panelGrid Advanced grid layout container with colspan/rowspan.
![Page 53: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/53.jpg)
Security Components
• Improve web application security
Component Description p:captcha Renders a CAPTCHA challenge using ReCaptcha API.
p:password Password field with strength indicator and skinning.
![Page 54: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/54.jpg)
Selection Components • Support selection based user input
Component Description p:selectBooleanButton Button with on/off states and theme support.
p:selectBooleanCheckbox Checkbox control with theme support.
p:selectCheckboxMenu Popup menu with multi-select checkboxes. p:selectManyButton Multiple buttons with on/off states. p:selectManyCheckbox Multiple checkboxes with theme support. p:selectManyMenu Multi-select menu with theme support. p:selectOneButton Single select button set with theme support. p:selectOneListbox Single select listbox with theme support. p:selectOneMenu Single select menu with theme support. p:selectOneRadio Radio button group with theme support.
![Page 55: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/55.jpg)
System Components • Components for building web-based OS
(e.g. Mock OS X) Component Description p:dashboard Provides portal-like layout with drag and drop capabilities.
p:dock Customizable icon bar similar to Mac OS X dock.
p:growl Display JSF messages in a floating notification widget. p:idleMonitor Executes JavaScript when user becomes idle/active. p:keyboard Input component with virtual keyboard. p:log Displays log messages. p:notificationBar Displayed fixed position notification panel. p:printer Sends a JSF component to the printer. p:terminal Renders an Ajax-powered web-based terminal.
![Page 56: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/56.jpg)
Utility Components
• Useful for various common tasks
Component Description p:collector Add items to and remove items from a collection.
p:resizable Makes another component resizable.
![Page 57: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/57.jpg)
PrimeFaces Summary
• Powerful • Lightweight • No dependencies • No configuration • 100+ components • Ajax, themes • Push, mobile • Cloud, portals
![Page 58: PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats](https://reader030.fdocuments.in/reader030/viewer/2022020101/554f6c7db4c905c8088b52a0/html5/thumbnails/58.jpg)
UI Component Summary • Ajax • Chart • Command • Data • Date/Time • Dialog • Drag and Drop • File • General • Image • Input
• Layout • Map • Media • Menu • Navigation • Output • Panel • Security • Select • System • Utility