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
Ian Hlavats | Tarantula Consulting
PrimeFaces Next Gen JSF Component Suite
Ian Hlavats • JSF Consultant • [email protected] • Author, JSF 1.2 Components (Packt) • JSFToolbox for Dreamweaver
(www.jsftoolbox.com)
3
4
Lightweight
5
Easy to Use
6
Only one jar 1.7~ mb
7
No required dependencies
8
Zero Config
9
100+ Components
10
Mock OS X
11
Form Components
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:
13
Ajax in PrimeFaces
Server APIs : Standard JSF 2
Client APIs :
14
Ajax Extensions
RequestContext
p:ajaxStatus callbacks
p:ajax autoUpdate
15
p:ajax f:ajax oncomplete
onsuccess
onerror
onstart
onevent
onerror
async
global
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” />
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
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
19
THEMES
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;
21
Create your own
22
PrimeFaces Mobile
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>
24
Supported Platforms
powered by
25
PrimeFaces Push
Integrated with Atmosphere
Long-Polling Http-Streaming Websockets
26
Portals
support with
Sample: /svn/examples/trunk/prime-portlet
27
PrimeFaces on the Cloud
http://primefaces-rocks.appspot.com
http://primefaces-gae-kickstart.appspot.com
Sample: /svn/examples/trunk/appengine
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()}
PrimeFaces UI Component Overview
• 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
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
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
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.
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.
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.
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.
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.
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.
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.
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.
Gallery Components
• Image gallery functionality
Component Description p:galleria Renders a gallery for browsing images.
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.
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.
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.
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.
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.
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.
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.
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.
Navigation Components
• Improve navigability of web application
Component Description p:breadcrumb Renders a hierarchical navigation element.
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.
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.
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.
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.
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.
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.
PrimeFaces Summary
• Powerful • Lightweight • No dependencies • No configuration • 100+ components • Ajax, themes • Push, mobile • Cloud, portals
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