Ian Hlavats | Tarantula Consulting

PrimeFaces Next Gen JSF Component Suite

Ian Hlavats •  JSF Consultant •  info@tarantulaconsulting.com •  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