• Like
PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats


This exciting session features one of the hottest technologies in the Java web space today: PrimeFaces! PrimeFaces technology sets the standard for next-generation JSF component suites, and delivers a …

This exciting session features one of the hottest technologies in the Java web space today: PrimeFaces! PrimeFaces technology sets the standard for next-generation JSF component suites, and delivers a lightweight and full-featured UI toolkit for building unbeatable user experiences in web browsers and on mobile devices. Consisting of over 100 UI components, PrimeFaces supports the latest web standards and technologies including Ajax, HTML5, jQuery, and JSF 2, and gives Java web developers a rich toolkit with advanced functionality for developing sophisticated, desktop-like user interfaces on the web. JSF author and consultant Ian Hlavats provides an in-depth introduction to PrimeFaces and covers key concepts of the PrimeFaces framework, such as PrimeFaces UI components, PrimeFaces Mobile, PrimeFaces Push, and more.

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Ian Hlavats | Tarantula Consulting PrimeFacesNext Gen JSF Component Suite
  • 2. Ian Hlavats•  JSF Consultant•  info@tarantulaconsulting.com•  Author, JSF 1.2 Components (Packt)•  JSFToolbox for Dreamweaver (www.jsftoolbox.com)
  • 3. 3
  • 4. Lightweight 4
  • 5. Easy to Use 5
  • 6. Only one jar1.7~ mb 6
  • 7. No requireddependencies 7
  • 8. Zero Config 8
  • 9. 100+ Components 9
  • 10. Mock OS X 10
  • 11. Form Components 11
  • 12. Anatomy of a PF ComponentJSF Page<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>Rendered markup<div id="form:dialog1" title="Basic Dialog"> Resistance to PrimeFaces is futile!</div>Rendered Script<script type="text/javascript"> dlg = new PrimeFaces.widget.Dialog(form:dialog1, {draggable:false,modal:false});</script> You get: 12
  • 13. Ajax in PrimeFacesServer APIs : Standard JSF 2Client APIs : 13
  • 14. autoUpdate RequestContext p:ajax Ajax Extensions p:ajaxStatus callbacks 14
  • 15. p:ajax f:ajaxoncomplete oneventonsuccess onerroronerroronstartasyncglobal 15
  • 16. AjaxStatusDeclarative<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>Programmatic<p:ajaxStatus onstart=“dialog.show()” oncomplete=“dialog.hide()” />Global/Non-Global <p:commandButton global=“true|false” /> 16
  • 17. RequestContextJSF Page <p:commandButton value=”Submit” action=”#{bean.save}” oncomplete=”handleComplete(xhr, status, args)” />Bean public void save() { RequestContext context = RequestContext.getCurrentInstance(); context.addCallbackParam(“item”, item); }Callback <script type=”text/javascript”> function handleComplete(xhr, status, args) { alert(args.item.name); } </script> 17
  • 18. AutoUpdate<p:growl id=“messages” /><p:commandButton value=“Save” update=“messages” /><p:commandButton value=“Update” update=“messages” /><p:commandButton value=“Delete” update=“messages” /> becomes<p:growl autoUpdate=“true”/><p:commandButton value=“Save” /><p:commandButton value=“Update” /><p:commandButton value=“Delete” /> 18
  • 19. THEMES 19
  • 20. Install a Theme Add primefaces-{theme}.jar And then configure;<context-param> <param-name>primefaces.THEME</param-name> <param-value>aristo</param-value></context-param> 20
  • 21. Create your own 21
  • 22. PrimeFaces Mobile 22
  • 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> 23
  • 24. Supported Platforms powered by 24
  • 25. PrimeFaces Push Integrated with AtmosphereLong-Polling Http-Streaming Websockets 25
  • 26. Portals support withSample: /svn/examples/trunk/prime-portlet 26
  • 27. PrimeFaces on the Cloud http://primefaces-rocks.appspot.com http://primefaces-gae-kickstart.appspot.comSample: /svn/examples/trunk/appengine 27
  • 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()} 28
  • 29. PrimeFaces UI Component Overview
  • 30. PrimeFaces UI Components by Category Utility 2 Command System Ajax 3 Chart 9 6 Select 7 Security 10 2 Panel Data 6 19 Output 5 Menu 8Navigation 1 General Date/Time 4 2 Layout Image 10 6 Dialog Input 3 14 Media File Drag and Drop 2 Map 2 2 2•  PrimeFaces 3.1 has 125 JSF components
  • 31. PrimeFaces ComponentsCategory Count DescriptionAjax 6 Ajax capabilities (update, status, poll, push, etc.)Chart 7 Pie, bar, donut, etc.Command 3 Buttons, linksData 19 Tables, grids, lists, exportingDate/Time 2 Calendar, scheduleDialog 3 Generic dialog, confirmation, wizardDrag and Drop 2 Adds DND to other componentsFile 2 Upload, downloadGeneral 4 General / miscellaneous componentsImage 6 Display, edit, and arrange images on screenInput 14 Rich user input controls
  • 32. PrimeFaces Components•  ContinuedCategory Count DescriptionLayout 10 UI layout management, themes, spacing, etc.Map 2 Google Maps integrationMedia 2 Media streaming and photo captureMenu 8 Menu system componentsNavigation 1 Navigational aidsOutput 5 Messages and other informationPanel 6 Group/organize other components in panelsSecurity 2 CAPTCHA, password strength indicatorSelect 10 Rich user input selection componentsSystem 9 UI components for web-based OS (e.g. Mock OS X)Utility 2 Various utilities for common tasks
  • 33. Ajax Components•  Provide Ajax functionality for other componentsComponent Descriptionp: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.
  • 34. Chart Components•  Render data as chartsComponent Descriptionp: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.
  • 35. Command Components•  Submit form data for server-side processingComponent Descriptionp:button Renders a submit button with enhanced skinning.p:commandButton Renders a submit button.p:commandLink Renders a hyperlink.
  • 36. Data Components•  Render data in various formatsComponent Descriptionp: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.
  • 37. Data Components•  ContinuedComponent Descriptionp: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.
  • 38. Dialog Components•  Accept input from the user in a dialogComponent Descriptionp:confirmDialog Replacement for JavaScript confirm() dialog.p:dialog Floating panel component for dialog interation.p:wizard Multi-step dialog.
  • 39. Drag and Drop Components•  Enhance UI with drag and drop capabilityComponent Descriptionp:draggable Enables a component to be dragged.p:droppable Enables a component to handle a drop event.
  • 40. File Components•  Support file handling use casesComponent Descriptionp:fileDownload Replaces servlets for sending files (e.g. PDF).p:fileUpload Enables user to upload one or more files.
  • 41. Gallery Components•  Image gallery functionalityComponent Descriptionp:galleria Renders a gallery for browsing images.
  • 42. General Components•  General purpose and miscellaneous componentsComponent Descriptionp: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.
  • 43. Image Components•  Graphics related componentsComponent Descriptionp: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.
  • 44. Input Components •  Handle user input in a variety of waysComponent Descriptionp: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.
  • 45. Input Components •  ContinuedComponent Descriptionp: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.
  • 46. Layout Components •  Handle UI arrangement and look and feelComponent Descriptionp: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.
  • 47. Map Components•  Integration with Google Maps APIComponent Descriptionp:gmap Integrates a Google Map on page.p:gmapInfoWindow Displays a window on map with overlay is selected.
  • 48. Media Components•  Enhance UI with multimedia capabilityComponent Descriptionp:media Embeds streaming video and music players.p:photoCam Take photos with webcam and send to backing bean.
  • 49. Menu Components•  Define toolbars and menusComponent Descriptionp: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.
  • 50. Navigation Components•  Improve navigability of web applicationComponent Descriptionp:breadcrumb Renders a hierarchical navigation element.
  • 51. Output Components•  Render text and other informationComponent Descriptionp: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.
  • 52. Panel Components•  Provide panels for organizing componentsComponent Descriptionp: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.
  • 53. Security Components•  Improve web application securityComponent Descriptionp:captcha Renders a CAPTCHA challenge using ReCaptcha API.p:password Password field with strength indicator and skinning.
  • 54. Selection Components•  Support selection based user inputComponent Descriptionp: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.
  • 55. System Components•  Components for building web-based OS (e.g. Mock OS X)Component Descriptionp: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.
  • 56. Utility Components•  Useful for various common tasksComponent Descriptionp:collector Add items to and remove items from a collection.p:resizable Makes another component resizable.
  • 57. PrimeFaces Summary•  Powerful•  Lightweight•  No dependencies•  No configuration•  100+ components•  Ajax, themes•  Push, mobile•  Cloud, portals
  • 58. UI Component Summary•  Ajax •  Layout•  Chart •  Map•  Command •  Media•  Data •  Menu•  Date/Time •  Navigation•  Dialog •  Output•  Drag and Drop •  Panel•  File •  Security•  General •  Select•  Image •  System•  Input •  Utility