Book Image

Primefaces Cookbook Second Edition

Book Image

Primefaces Cookbook Second Edition

Overview of this book

Related Content you might be interested in

Current Title:

Small book image
Primefaces Cookbook Second Edition
May, 2015 | 412 pages
No titles found
Table of Contents (20 chapters)
PrimeFaces Cookbook Second Edition
PrimeFaces Cookbook Second Edition
Credits
Credits
Foreword
Foreword
Foreword
Foreword
About the Authors
About the Authors
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Getting Started with PrimeFaces
Getting Started with PrimeFaces
Introduction
Setting up and configuring the PrimeFaces library
AJAX basics with process and update
PrimeFaces selectors
Partial process and update with fragments
Partial view submit
Internationalization (i18n) and Localization (L10n)
Improved resource ordering
2
Theming Concepts
Theming Concepts
Introduction
Understanding structural and skinning CSS
Installing themes
Customizing default theme styles
Adjusting the font and size throughout the web application
Simple ways to create a new theme
Stateless and stateful theme switchers
Integrating Font Awesome with PrimeFaces
3
Enhanced Inputs and Selects
Enhanced Inputs and Selects
Introduction
Formatted input with inputMask
Auto suggestion with autoComplete
Usable features of inputTextArea
Discovering selectBooleanCheckbox and selectManyCheckbox
Choosing a single item with selectOneMenu
Basic and advanced calendar scenarios
Spinner – different ways to provide input
Slider – different ways to provide input
Rich text editing with the editor
Advanced editing with an in-place editor
Enhanced password input
Star-based rating input
4
Grouping Content with Panels
Grouping Content with Panels
Introduction
Grouping content with a standard panel
PanelGrid with colspan and rowspan support
Vertical stacked panels with accordion
Displaying overflowed content with scrollPanel
Working with a tabbed panel
Grouping of buttons and more with toolbar
The multipurpose output panel
Simulating the portal environment with dashboard
Creating complex layouts
Responsive layout with Grid CSS
5
Data Iteration Components
Data Iteration Components
Introduction
Selecting rows in dataTable
Sorting and filtering data in dataTable
In-cell editing with dataTable
Resizing, reordering, and toggling columns in dataTable
Making dataTable responsive
Using subTable for grouping
Handling tons of data – LazyDataModel
Listing data with dataList
Listing data with pickList
Listing data with orderList
Visualizing data with tree
Visualizing data with treeTable
Exporting data in various formats
Managing events with schedule by leveraging lazy loading
Visualizing data with dataScroller
6
Endless Menu Variations
Endless Menu Variations
Introduction
Statically and dynamically positioned menus
Creating programmatic menus
The context menu with nested items
Integrating the context menu
Breadcrumb – providing contextual information about page hierarchy
SlideMenu – menu in the iPod style
TieredMenu – submenus in nested overlays
MegaMenu – the multicolumn menu
PanelMenu – hybrid of accordion and tree
MenuButton – multiple items in a popup
Accessing commands via menubar
Displaying checkboxes in selectCheckboxMenu
7
Working with Files, Images, and Multimedia
Working with Files, Images, and Multimedia
Introduction
Basic, automatic, drag and drop, and multiple file uploading
Downloading files
Cropping images
Creating dynamic image streaming programmatically
Displaying a collection of images with galleria
Displaying a collection of images with imageSwitch
Displaying a collection of images with contentFlow
Embedding the multimedia content in JSF pages
Capturing images with photoCam
8
Drag Me, Drop Me
Drag Me, Drop Me
Introduction
Making a component draggable
Restricting dragging by axis, grid, and containment
Snapping to the edges of nearest elements
Defining droppable targets
Restricting dropping by tolerance and acceptance
AJAX-enhanced drag and drop
Integrating drag and drop with data iteration components
9
Creating Charts and Maps
Creating Charts and Maps
Introduction
Creating line, area, bar, and pie charts
Creating combined charts
Updating live data in charts with polling
Interacting with charts via AJAX
Basic mapping with GMaps
Adding, selecting, and dragging markers in maps
Creating rectangles, circles, polylines, and polygons in maps
Enabling InfoWindow and streetView on maps
10
Client-side Validation
Client-side Validation
Introduction
Configuring and getting started with CSV
Instant validation with p:clientValidator
Bean Validation and transformation
Extending CSV with JSF
Extending CSV with Bean Validation
11
Miscellaneous Advanced Use Cases
Miscellaneous Advanced Use Cases
Introduction
Programmatic updating and scrolling with RequestContext
Two ways of triggering the JavaScript execution
Adding AJAX callback parameters – validation within a dialog
Opening external pages in dynamically generated dialogs
Polling – sending periodical AJAX requests
Blocking page pieces during long-running AJAX calls
Controlling form submission using defaultCommand
Clever focus management in forms
Layout pitfalls of menus and dialogs
Targetable messages with severity levels
Conditional coloring in dataTable
Sticking a component when scrolling
Reducing page load time using content caching
Possibilities for exception handling in PrimeFaces
Index
Index

Displaying a collection of images with contentFlow

The contentFlow component can be used to display a collection of images horizontally as a cover flow animation.

How to do it…

A basic definition for contentFlow for viewing a static list of car images would be as follows:

<p:contentFlow id="simple">
  <p:graphicImage value="/resources/images/autocomplete/CC.png"
    styleClass="content" />
  <p:graphicImage value="/resources/images/autocomplete/Golf.png"
    styleClass="content" />
  <p:graphicImage value="/resources/images/autocomplete/Polo.png"
    styleClass="content" />
  <p:graphicImage
    value="/resources/images/autocomplete/Touareg.png"
    styleClass="content" />
</p:contentFlow>

The visual of the component will be as follows:

The style class content should be applied to all of the nested images within the component. It's a built-in style implementation shipping with PrimeFaces.

There's more…

It is also possible to visualize a collection of car images...

Previous Section
End of Section 9
Next Section