PrimeFaces Beginner's Guide

The perfect introduction to PrimeFaces, this tutorial will take you step by step through all the great features, ranging from form-creation to sophisticated navigation systems. All you need are some basic JSF and jQuery skills.

PrimeFaces Beginner's Guide

Beginner's Guide
K. Siva Prasad Reddy

The perfect introduction to PrimeFaces, this tutorial will take you step by step through all the great features, ranging from form-creation to sophisticated navigation systems. All you need are some basic JSF and jQuery skills.
$29.99
$49.99
RRP $29.99
RRP $49.99
eBook
Print + eBook
$12.99 p/month

Get Access

Get Unlimited Access to every Packt eBook and Video course

Enjoy full and instant access to over 3000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

+ Collection
Free Sample

Book Details

ISBN 139781783280698
Paperback378 pages

About This Book

  • Detailed explanation on how to use basic PrimeFaces UI components like form controls, panels, and layouts
  • Delve into PrimeFaces advanced UI Components like Data Tables, menus, charts, file uploading, and themes
  • Easy to read and learn with its step-by-step instructions in Time for action and What just happened sections

Who This Book Is For

PrimeFaces Beginners Guide is a simple and effective guide for beginners, wanting to learn and implement PrimeFaces in their JSF-based applications. Some basic JSF and jQuery skills are required before you start working through the book.

Table of Contents

Chapter 1: 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
Chapter 2: 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
Chapter 3: 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
Chapter 4: 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
Chapter 5: 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
Chapter 6: 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
Chapter 7: 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
Chapter 8: 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
Chapter 9: 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
Chapter 10: 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
Chapter 11: 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
Chapter 12: 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
Chapter 13: 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

What You Will Learn

  • Explore built-in AJAX features and various PrimeFaces utility components
  • Use Partial Page Rendering(PPR) and the JQuery Selector API
  • Create forms with text fields, dropdowns, radio buttons and User Interfaces with advanced components like Calendar, AutoComplete, Star Rating, and PickList
  • Discover additional components like file upload and download components and data table components to display data with pagination
  • Filter support and export data to PDF or Excel sheet
  • Display data using tree and TagCloud components
  • Create a sophisticated navigation system using menus, multi-level menus and breadcrumbs and complex layouts using layouts, PanelGrids, tabs, and accordion panels

In Detail

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.

Authors

Table of Contents

Chapter 1: 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
Chapter 2: 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
Chapter 3: 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
Chapter 4: 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
Chapter 5: 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
Chapter 6: 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
Chapter 7: 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
Chapter 8: 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
Chapter 9: 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
Chapter 10: 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
Chapter 11: 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
Chapter 12: 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
Chapter 13: 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

Book Details

ISBN 139781783280698
Paperback378 pages
Read More