PrimeFaces Beginner's Guide

PrimeFaces Beginner's Guide

By : Siva Prasad Reddy Katamreddy

Buy this Book

PrimeFaces Beginner's Guide

By: Siva Prasad Reddy Katamreddy

Buy this Book

Overview of this book

PrimeFaces is a lightweight UI component framework for JSF based applications. PrimeFaces is very easy to use because it comes as a single JAR file and requires no mandatory XML configuration. It provides more than 100 UI Components and an in-built AJAX support. It also provides theme support for UI components with more than 30 themes out-of-the-box. With PrimeFaces, developers can create rich user interfaces very easily.PrimeFaces Beginners Guide is a practical, hands-on guide that provides you with clear step-by-step exercises,that will help you to learn and explore the features of PrimeFaces.PrimeFaces Beginners Guide starts by showing you how to install PrimeFaces, create sample forms, and perform validations and then looks at various commonly used PrimeFaces utility components. Next, you will look into various basic text input components like form controls, Calendar, AutoComplete, and Rich Text Editor. Then you will learn about advanced UI components such as DataTables, panels, menus,and charts. Throughout the chapters we will be building a sample web application using PrimeFaces progressively that will give you a hands-on experience on using PrimeFaces effectively.You will learn how to create complex layouts using accordion panels, tab views, sophisticated menu navigations, breadcrumbs and much more. You will also learn how to display data using DataTable with pagination, filters, and lazy loading, and how to export data to Excel or PDF features. You will learn how to represent data in various formats like trees, charts, and TagCloud. You will also learn how to build an application supporting multiple themes.With this PrimeFaces Beginner's Guide , you will learn how to use PrimeFaces easily and effectively.

PrimeFaces Beginner's Guide

Credits

About the Author

About the Reviewers

www.PacktPub.com

Preface

Free Chapter

Introduction to PrimeFaces

Introducing the features of PrimeFaces

Installing and configuring PrimeFaces

Time for action – installing and configuring PrimeFaces

Creating a HelloWorld application using PrimeFaces

Time for action – creating a HelloWorld program using PrimeFaces

Creating simple forms using PrimeFaces

Time for action – creating a user registration form

Performing form validations

Time for action – validating the user registration form

Performing client-side validations

Time for action – client-side e-mail validation

Understanding partial page rendering (PPR)

Time for action – partial processing on the user details form

Updating the view using AJAX

Time for action – updating the view using AJAX

Updating the view using AJAX listeners

Time for action – validate the UserName using AJAX listeners

Performing tasks periodically using a poll component

Time for action – using the poll component to display the current time

Time for action – manually start and stop polling

Invoking server-side methods from JavaScript using RemoteCommand

Time for action – validate e-mail using RemoteCommand

Summary

Introducing Sample Application TechBuzz

Understanding the requirements of the TechBuzz application

Understanding the high-level design of the TechBuzz application

Understanding the TechBuzz data model

Looking at TechBuzz screenshots

Setting up of the development environment for TechBuzz

Time for action – installing the required software

Summary

Using PrimeFaces Common Utility Components

Introducing the Message component

Time for action – displaying FacesMessage using <p:message>

Time for action – displaying FacesMessage with HTML content

Introducing the Messages component

Time for action – displaying FacesMessage using <p:messages>

Displaying notifications using the growl component

Time for action – displaying FacesMessages with growl

Displaying tooltips using the Tooltip component

Time for action – displaying tooltip for UI components

Time for action – using global tooltips

Partial Processing and Rendering using the Fragment component

Time for action – using the Fragment component

Introducing the Sticky component

Introducing the RequestContext utility

Time for action – updating UI components using RequestContext.update()

Time for action – executing JavaScript using RequestContext.execute()

Time for action – adding callback parameters using RequestContext.addCallbackParam()

Displaying pop-up dialogs using the Dialog component

Time for action – displaying a dialog

Time for action – client-side callbacks for onShow and onHide

Time for action – the Dialog component close event listener

Time for action – creating dialog with a registration form

Introducing dialog framework

Time for action – showing the search users screen in dialog

Time for action – passing data from the search users dialog to the source page

Introducing the ConfirmDialog component

Time for action – creating a confirmation dialog

Displaying notifications using the NotificationBar component

Time for action – displaying notification messages

Time for action – automatically hiding NotificationBar

Blocking a region using the BlockUI component

Time for action – blocking the form

Understanding PrimeFaces selectors

Time for action – updating UI components using jQuery Selectors

Introducing the search expression framework

Summary

Introducing the PrimeFaces Client Side Validation Framework

Configuring and using the Client Side Validation framework

Time for action – performing client-side validations

Triggering client-side validations based on events

Supporting I18N for validation messages

Extending the CSV framework with custom JSF validators

Time for action – using the custom JSF validator on the client side

Extending the CSV framework with custom JSF converters

Time for action – using the custom JSF converter on the client side

Using the CSV framework with the Bean Validation API

Time for action – using the CSV framework with the Bean Validation API

Extending the CSV framework with custom Bean Validation annotations

Time for action – using the custom Bean Validation annotation with the CSV framework

Summary

Introducing Text Input Components

Getting text input with the InputText component

Time for action – using the InputText component

Introducing the InputTextarea component

Time for action – using InputTextarea

Getting formatted input using the InputMask component

Time for action – reading formatted input using InputMask

Introducing the Password component

Time for action – using password strength indicator and match mode

Introducing the Editor component

Time for action – using editor client-side API methods

Inplace editing using the Inplace component

Time for action – using the Inplace editor

Providing completion suggestions using the AutoComplete component

Time for action – using basic AutoComplete

Time for action – using AutoComplete with POJO support

Time for action – selecting multiple items using AutoComplete

Time for action – using the ItemSelect and ItemUnselect events

Time for action – displaying tooltips on suggested items using the Itemtip facet

Summary

Working with Selection Input Components

Creating the toggle button using SelectBooleanButton

Time for action – using the SelectBooleanButton component

Creating the On or Off options using SelectBooleanCheckbox

Time for action – using the SelectBooleanCheckbox component

Introducing SelectManyCheckbox

Time for action – using the SelectManyCheckbox component

Introducing SelectOneRadio

Time for action – using the SelectOneRadio component

Introducing SelectOneButton

Time for action – using the SelectOneButton component

Introducing SelectManyButton

Time for action – using the SelectManyButton component

Creating drop-down lists using SelectOneMenu

Time for action – using SelectOneMenu with editable and filter features

Time for action – using SelectOneMenu with POJOs

Time for action – grouping options in SelectOneMenu

Introducing SelectOneListbox

Time for action – using SelectOneListbox with POJOs

Introducing SelectManyMenu

Time for action – using SelectManyMenu

Creating the overlay menu using SelectCheckboxMenu

Time for action – using SelectCheckboxMenu

Creating the overlay menu with a default command using SplitButton

Time for action – using SplitButton

Introducing the PickList component

Time for action – using the basic PickList component

Time for action – using the advanced PickList component

Introducing the MultiSelectListbox component

Time for action – using the MultiSelectListbox component

Summary

Introducing Advanced Input Components

Introducing the Calendar component

Time for action – displaying a pop-up Calendar with navigator

Time for action – displaying a multipage calendar with Localization and the dateSelect event listener

Time for action – using Calendar with a date range

Time for action – using Calendar's advanced customization options

Time for action – Calendar with the time picker options

Time for action – using the Rating component

Time for action – using the Spinner component

Time for action – using the Slider component

Time for action – using CAPTCHA for user registration

Time for action – using the FileUpload component

Time for action – using the FileDownload component

Summary

Working with Data Components

Introducing the DataList component

Time for action – displaying unordered and ordered data using DataList

Time for action – using DataList with pagination

Displaying tabular data using the DataTable component

Time for action – using DataTable with pagination

Time for action – using DataTable with filtering

Time for action – using DataTable with multiple row selection support

Time for action – using DataTable with row editing support

Time for action – using DataTable with cell editing support

Time for action – loading the DataTable data leisurely

Displaying data in the grid layout using the DataGrid component

Exporting data into PDF/XLS/XML/CSV formats using the DataExporter component

Time for action – using DataExporter to export data into XLS and PDF formats

Summary

Introducing Advanced Data Visualization Components

Displaying data with sliding effects using the Carousel component

Time for action – creating Carousel using tabs

Introducing the TagCloud component

Time for action – displaying tags as TagCloud

Time for action – choosing a tag in TagCloud with the select Event

Displaying hierarchical data using the Tree component

Time for action – creating a Tree component

Introducing the TreeTable component

Time for action – displaying posts using the TreeTable component

Introducing the Schedule component

Time for action – creating the Schedule component

Summary

Working with Layout Components

Introducing the Panel component

Time for action – using Panel with event listeners

Time for action – creating Panel with custom actions

Introducing the PanelGrid component

Time for action – using PanelGrid with rowspan and colspan features

Displaying overflowed content using ScrollPanel

Time for action – using a ScrollPanel component

Creating workflows using a Wizard component

Time for action – using Wizard to implement workflows

Creating stacked panels using the AccordionPanel component

Time for action – creating AccordionPanel with dynamic tabs and event listener

Creating a tabbed panel using a TabView component

Time for action – using TabView with dynamic tabs and event listeners support

Creating complex layouts using the Layout component

Time for action – creating FullPage layout

Creating portal like layout using a Dashboard component

Time for action – creating a Dashboard layout

Summary

Introducing Navigation Components

Understanding MenuModel

Introducing the Menu component

Time for action – creating a simple Menu

Time for action – displaying an overlay menu with trigger

Introducing the MenuButton component

Time for action – creating MenuButton

Displaying multilevel nested menus using TieredMenu

Time for action – displaying a multilevel menu using TieredMenu

Creating nested menus with SlideMenu

Time for action – creating the SlideMenu component

Creating a horizontal navigation menu using Menubar

Time for action – creating a Menubar component

Creating a multicolumn menu using MegaMenu

Time for action – creating MegaMenu with multiple columns

Creating tab-based menus using TabMenu

Time for action – creating the TabMenu component

Time for action – tracking an active tab dynamically

Introducing the PanelMenu component

Time for action – creating the PanelMenu component

Introducing ContextMenu

Time for action – creating ContextMenu

Time for action – creating ContextMenu for DataTable

Time for action – creating ContextMenu for the Tree component

Introducing the Breadcrumb navigation menu

Time for action – creating the Breadcrumb menu

Time for action – creating the Breadcrumb menu programmatically

Summary

Drawing Charts

Creating a Line chart

Time for action – creating a Line chart

Creating an Area chart

Creating a Bar chart

Time for action – creating a Bar chart

Creating a Pie chart

Time for action – creating a Pie chart

Creating a Donut chart

Exporting charts as images

Rendering dynamic charts using the JFreeChart API

Time for action – creating a Pie chart using the JFreeChart API

Creating interactive charts using the ItemSelect AJAX event

Summary

Using PrimeFaces Themes

Configuring and using themes

Using stateless ThemeSwitcher

Time for action – using the stateless ThemeSwitcher component

Using stateful ThemeSwitcher

Time for action – applying a user-specific theme using stateful ThemeSwitcher

Creating and using a custom theme

Time for action – creating a new theme

Time for action – installing and configuring PrimeFaces extensions

Summary

Index

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Time for action – applying a user-specific theme using stateful ThemeSwitcher

In this section we will learn how to use the ThemeSwitcher component to apply theme for entire application based on user preference, and how a user can dynamically switch themes:

Configure Primefaces theme name in web.xml using EL expression:

<context-param>
  <param-name>primefaces.THEME</param-name>
  <param-value>#{userPreferences.selectedTheme}</param-value>
</context-param>

Here EL expression #{userPreferences.selectedTheme} resolves to a theme name.

Create ThemeSwitcher component using <p:themeSwitcher> with value="#{userPreferences.selectedTheme}" along with the AJAX event listener to update the user-preferred theme to the selected theme name on server side:
```
<p:themeSwitcher value="#{userPreferences.selectedTheme}"  style="width:165px">  
  <f:selectItem itemLabel="Choose Theme" itemValue="" />  
  <f:selectItems value="#{userPreferences.themes}" />...
```

PrimeFaces Beginner's Guide

By : Siva Prasad Reddy Katamreddy

PrimeFaces Beginner's Guide

By: Siva Prasad Reddy Katamreddy

Overview of this book

Related Content you might be interested in

Current Title:

PrimeFaces Beginner's Guide

Time for action – applying a user-specific theme using stateful ThemeSwitcher