Upload
jaxconf
View
6.903
Download
11
Tags:
Embed Size (px)
DESCRIPTION
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.
Citation preview
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