Ian Hlavats | Tarantula Consulting          PrimeFacesNext Gen JSF Component Suite
Ian Hlavats•    JSF Consultant•    info@tarantulaconsulting.com•    Author, JSF 1.2 Components (Packt)•    JSFToolbox for ...
3
Lightweight        4
Easy to Use        5
Only one jar1.7~ mb                   6
No requireddependencies        7
Zero Config        8
100+ Components             9
Mock OS X            10
Form Components                  11
Anatomy of a PF ComponentJSF Page<h:form id="form">   <p:dialog id="dialog1" header="Basic Dialog" draggable="false" modal...
Ajax in PrimeFacesServer APIs : Standard JSF 2Client APIs :                        13
autoUpdate               RequestContext                p:ajax     Ajax Extensions         p:ajaxStatus                    ...
p:ajax       f:ajaxoncomplete   oneventonsuccess    onerroronerroronstartasyncglobal                       15
AjaxStatusDeclarative<p:ajaxStatus>       <f:facet name="start">            <p:graphicImage value="fancyanimation.gif" /> ...
RequestContextJSF Page    <p:commandButton value=”Submit” action=”#{bean.save}”                            oncomplete=”han...
AutoUpdate<p:growl id=“messages” /><p:commandButton value=“Save” update=“messages” /><p:commandButton value=“Update” updat...
THEMES         19
Install a Theme               Add primefaces-{theme}.jar                   And then configure;<context-param>       <param...
Create your own                  21
PrimeFaces Mobile                    22
Mobile JSF Page    <pm:page title="TwitFaces">	          <pm:view id="main" swatch="b">	              <pm:header title="Tw...
Supported Platforms     powered by                      24
PrimeFaces Push                 Integrated with                   AtmosphereLong-Polling        Http-Streaming   Websocket...
Portals           support withSample: /svn/examples/trunk/prime-portlet                                    26
PrimeFaces on the Cloud  http://primefaces-rocks.appspot.com  http://primefaces-gae-kickstart.appspot.comSample: /svn/exam...
PrimeFaces EL Utils#{p:widgetVar(compId)}#{p:component(compId)}#{p:ifGranted(ROLE_ADMIN)}#{p:ifAllGranted(ROLE_READER, ROL...
PrimeFaces UI Component       Overview
PrimeFaces UI Components by Category                                                  Utility                             ...
PrimeFaces ComponentsCategory        Count DescriptionAjax              6   Ajax capabilities (update, status, poll, push,...
PrimeFaces Components•  ContinuedCategory     Count DescriptionLayout        10   UI layout management, themes, spacing, e...
Ajax Components•  Provide Ajax functionality for other   componentsComponent         Descriptionp:ajax            Adds Aja...
Chart Components•  Render data as chartsComponent           Descriptionp:barChart          Renders a bar chart.p:bubbleCha...
Command Components•  Submit form data for server-side processingComponent         Descriptionp:button          Renders a s...
Data Components•  Render data in various formatsComponent          Descriptionp:cellEditor       Supports in-cell editing ...
Data Components•  ContinuedComponent        Descriptionp:row            Defines a row (e.g. multi-row footer).p:rowEditor ...
Dialog Components•  Accept input from the user in a dialogComponent         Descriptionp:confirmDialog   Replacement for J...
Drag and Drop Components•  Enhance UI with drag and drop capabilityComponent      Descriptionp:draggable    Enables a comp...
File Components•  Support file handling use casesComponent          Descriptionp:fileDownload     Replaces servlets for se...
Gallery Components•  Image gallery functionalityComponent        Descriptionp:galleria       Renders a gallery for browsin...
General Components•  General purpose and miscellaneous   componentsComponent       Descriptionp:feedReader    RSS feed rea...
Image Components•  Graphics related componentsComponent        Descriptionp:galleria       Gallery for browsing images wit...
Input Components •  Handle user input in a variety of waysComponent         Descriptionp:autoComplete    Input control wit...
Input Components •  ContinuedComponent         Descriptionp:radioButton     Supports custom layout for selectOneRadio.p:ra...
Layout Components  •  Handle UI arrangement and look and feelComponent        Descriptionp:divider        Renders a separa...
Map Components•  Integration with Google Maps APIComponent          Descriptionp:gmap             Integrates a Google Map ...
Media Components•  Enhance UI with multimedia capabilityComponent     Descriptionp:media       Embeds streaming video and ...
Menu Components•  Define toolbars and menusComponent        Descriptionp:contextMenu    Displays overlay menu on right-cli...
Navigation Components•  Improve navigability of web applicationComponent      Descriptionp:breadcrumb   Renders a hierarch...
Output Components•  Render text and other informationComponent     Descriptionp:message     Renders a JSF message with ski...
Panel Components•  Provide panels for organizing componentsComponent          Descriptionp:accordionPanel   Displays stack...
Security Components•  Improve web application securityComponent      Descriptionp:captcha      Renders a CAPTCHA challenge...
Selection Components•  Support selection based user inputComponent                 Descriptionp:selectBooleanButton     Bu...
System Components•  Components for building web-based OS   (e.g. Mock OS X)Component         Descriptionp:dashboard       ...
Utility Components•  Useful for various common tasksComponent      Descriptionp:collector    Add items to and remove items...
PrimeFaces Summary•    Powerful•    Lightweight•    No dependencies•    No configuration•    100+ components•    Ajax, the...
UI Component Summary•    Ajax            •    Layout•    Chart           •    Map•    Command         •    Media•    Data ...
Upcoming SlideShare
Loading in …5
×

PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats

7,151 views

Published on

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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,151
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
110
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

PrimeFaces: Next-Generation JSF Component Suite - Ian Hlavats

  1. 1. Ian Hlavats | Tarantula Consulting PrimeFacesNext Gen JSF Component Suite
  2. 2. Ian Hlavats•  JSF Consultant•  info@tarantulaconsulting.com•  Author, JSF 1.2 Components (Packt)•  JSFToolbox for Dreamweaver (www.jsftoolbox.com)
  3. 3. 3
  4. 4. Lightweight 4
  5. 5. Easy to Use 5
  6. 6. Only one jar1.7~ mb 6
  7. 7. No requireddependencies 7
  8. 8. Zero Config 8
  9. 9. 100+ Components 9
  10. 10. Mock OS X 10
  11. 11. Form Components 11
  12. 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. 13. Ajax in PrimeFacesServer APIs : Standard JSF 2Client APIs : 13
  14. 14. autoUpdate RequestContext p:ajax Ajax Extensions p:ajaxStatus callbacks 14
  15. 15. p:ajax f:ajaxoncomplete oneventonsuccess onerroronerroronstartasyncglobal 15
  16. 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. 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. 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. 19. THEMES 19
  20. 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. 21. Create your own 21
  22. 22. PrimeFaces Mobile 22
  23. 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. 24. Supported Platforms powered by 24
  25. 25. PrimeFaces Push Integrated with AtmosphereLong-Polling Http-Streaming Websockets 25
  26. 26. Portals support withSample: /svn/examples/trunk/prime-portlet 26
  27. 27. PrimeFaces on the Cloud http://primefaces-rocks.appspot.com http://primefaces-gae-kickstart.appspot.comSample: /svn/examples/trunk/appengine 27
  28. 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. 29. PrimeFaces UI Component Overview
  30. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 41. Gallery Components•  Image gallery functionalityComponent Descriptionp:galleria Renders a gallery for browsing images.
  42. 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. 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. 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. 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. 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. 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. 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. 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. 50. Navigation Components•  Improve navigability of web applicationComponent Descriptionp:breadcrumb Renders a hierarchical navigation element.
  51. 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. 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. 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. 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. 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. 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. 57. PrimeFaces Summary•  Powerful•  Lightweight•  No dependencies•  No configuration•  100+ components•  Ajax, themes•  Push, mobile•  Cloud, portals
  58. 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

×