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

Comparing images

The imageCompare component supports comparing two images by providing the user with a slider to drag over the images.

How to do it...

A basic definition for comparing two images of the maps of a sample city would be as follows:

<p:imageCompareleftImage="/resources/images/compare/istanbulMap.png"
  rightImage="/resources/images/compare/istanbulSatellite.png"
  width="700"
  height="400" />

How it works...

The leftImage attribute defines the image placed on the left side, and the rightImage attribute defines the one to be placed on the right side. The width and height attributes should be provided in order to compare images properly by mapping them on top of each other. The rendering of the imageCompare component with the two images with the slider rendered on top of it will be as shown in the following screenshot:

There’s More

The style and the style class of the image container element can also be set with the style and styleClass attribute respectively.

PrimeFaces Cookbook

PrimeFaces Cookbook

Overview of this book

Related Content you might be interested in

Current Title:

PrimeFaces Cookbook

Comparing images

How to do it...

How it works...

There’s More

PrimeFaces Cookbook...