PrimeFaces Cookbook

PrimeFaces Cookbook

Overview of this book

PrimeFaces is the de facto standard in the Java web development. PrimeFaces is a lightweight library with one jar, zero-configuration, and no required dependencies. You just need to download PrimeFaces, add the primefaces-{version}.jar to your classpath and import the namespace to get started. This cookbook provides a head start by covering all the knowledge needed for working with PrimeFaces components in the real world. "PrimeFaces Cookbook" covers over 100 effective recipes for PrimeFaces 3.x which is a leading component suite to boost JSF applications. The book's range is wide‚Äí from AJAX basics, theming, and input components to advanced usage of datatable, menus, drag & drop, and charts. It also includes creating custom components and PrimeFaces Extensions.You will start with the basic concepts such as installing PrimeFaces, configuring it, and writing a first simple page. You will learn PrimeFaces' theming concept and common inputs and selects components. After that more advanced components and use cases will be discussed. The topics covered are grouping content with panels, data iteration components, endless menu variations, working with files and images, using drag & drop, creating charts, and maps. The last chapters describe solutions for frequent, advanced scenarios and give answers on how to write custom components based on PrimeFaces and also show the community-driven open source project PrimeFaces Extension in action.

PrimeFaces Cookbook

Credits

About the Authors

About the Reviewers

www.PacktPub.com

Preface

Free Chapter

Getting Started with PrimeFaces

Introduction

Setting up and configuring the PrimeFaces library

AJAX basics with Process and Update

Internationalization (i18n) and Localization (L10n)

Improved resource ordering

PrimeFaces scaffolding with Spring Roo

Theming Concept

Introduction

Understanding the structural and skinning CSS

Installing themes

Customizing theme styles

Customizing default styles on input components

Adjusting the font and size throughout the web application

Why does the theme look different in Internet Explorer?

Simple ways to create a new theme

Default stateless theme switcher

Alternative stateful theme switchers

Enhanced Inputs and Selects

Introduction

Formatted input with inputMask

Auto suggestion with autoComplete

Usable features of inputTextArea

Discovering selectBooleanCheckbox and selectManyCheckbox

Basic and advanced calendar scenarios

Spinner – different ways to provide input

Slider – different ways to provide input

Rich text editing with editor

Advanced editing with in-place editor

Enhanced password input

Star-based rating input

Grouping Content with Panels

Introduction

Grouping content with a standard panel

Panel grid 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

Simulating the portal environment with dashboard

Creating complex layouts

Data Iteration Components

Introduction

Selecting rows in dataTable

Sorting and filtering data in dataTable

In-cell editing with dataTable

Conditional coloring in dataTable

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

Visualizing data with carousel

Visualizing data with ring

Endless Menu Variations

Introduction

Static and dynamic positioned menus

Creating a programmatic menu

Context menu with nested items

Context menu integration

SlideMenu – menu in iPod style

TieredMenu – submenus in nested overlays

MegaMenu – multicolumn menu

PanelMenu – hybrid of accordion and tree

Accessing commands via Menubar

Displaying checkboxes in SelectCheckboxMenu

Dock menu for Mac OS fans

Working with Files and Images

Introduction

Basic, automatic, and multiple file upload

Uploading a file with drag-and-drop

Downloading files

Cropping images

Displaying a collection of images

Capturing images with photoCam

Comparing images

Drag Me, Drop Me

Introduction

Making a component draggable

Restricting dragging by axis, grid, and containment

Snapping to the edges of the nearest elements

Defining droppable targets

Restricting dropping by tolerance and acceptance

AJAX-enhanced drag-and-drop

Integrating drag-and-drop with data iteration components

Creating Charts and Maps

Introduction

Creating a line chart

Creating a bar chart

Creating a pie chart

Creating a bubble chart

Creating a donut (doughnut) chart

Creating a meter gauge chart

Creating an OHLC chart

Updating live data in charts with polling

Interacting with charts through AJAX

Creating dynamic image streaming programmatically

Mapping with Google Maps

Miscellaneous, Advanced Use Cases

Introduction

The power of the PrimeFaces selectors

Programmatic updating and scrolling with RequestContext

Two ways to trigger JavaScript execution

Adding AJAX callback parameters – validation within a dialog

Navigating to another page in AJAX calls

Polling – sending periodical AJAX requests

Blocking page pieces during long-running AJAX calls

Remembering current menu selection

Controlling form submission by DefaultCommand

Clever focus management in forms

Layout pitfalls with menus and dialogs

Targetable messages with severity levels

Leveraging Schedule's lazy loading feature

Index

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Displaying a collection of images

The galleria component can be used to display a collection of images.

How to do it...

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

<p:galleria>
  <p:graphicImage value="/resources/images/autocomplete/CC.png" />
  <p:graphicImage value=
  "/resources/images/autocomplete/Golf.png" />
  <p:graphicImage value=
  "/resources/images/autocomplete/Polo.png" />
  <p:graphicImage value=
  "/resources/images/autocomplete/Touareg.png" />
</p:galleria>

How it works...

The definition of the gelleria component renders a car image in a panel and four other small images in a filmstrip right below it. This component also provides built-in iteration effects for transition to occur between the images.

It is also possible to visualize a list of car images that is bound through the value attribute of the galleria component as follows:

<p:galleria value="#{galleriaController.cars}"...

PrimeFaces Cookbook

PrimeFaces Cookbook

Overview of this book

Related Content you might be interested in

Current Title:

PrimeFaces Cookbook

Displaying a collection of images

How to do it...

How it works...