Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying PrimeFaces Beginner's Guide
  • Table Of Contents Toc
  • Feedback & Rating feedback
PrimeFaces Beginner's Guide

PrimeFaces Beginner's Guide

By : K. Siva Prasad Reddy
2.5 (4)
Buy this Book
close
close
PrimeFaces Beginner's Guide

PrimeFaces Beginner's Guide

2.5 (4)
By: K. Siva Prasad Reddy
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.
Table of Contents (15 chapters)
close
close
close
Preface
Icon
Preface
Icon
What this book covers
Icon
What you need for this book
Icon
Who this book is for
Icon
Conventions
Icon
Time for action – heading
Icon
Reader feedback
Icon
Customer support
Lock Free Chapter
1
1. Introduction to PrimeFaces
chevron up
Icon
1. Introduction to PrimeFaces
Icon
Introducing the features of PrimeFaces
Icon
Installing and configuring PrimeFaces
Icon
Time for action – installing and configuring PrimeFaces
Icon
Creating a HelloWorld application using PrimeFaces
Icon
Time for action – creating a HelloWorld program using PrimeFaces
Icon
Creating simple forms using PrimeFaces
Icon
Time for action – creating a user registration form
Icon
Performing form validations
Icon
Time for action – validating the user registration form
Icon
Performing client-side validations
Icon
Time for action – client-side e-mail validation
Icon
Understanding partial page rendering (PPR)
Icon
Time for action – partial processing on the user details form
Icon
Updating the view using AJAX
Icon
Time for action – updating the view using AJAX
Icon
Updating the view using AJAX listeners
Icon
Time for action – validate the UserName using AJAX listeners
Icon
Performing tasks periodically using a poll component
Icon
Time for action – using the poll component to display the current time
Icon
Time for action – manually start and stop polling
Icon
Invoking server-side methods from JavaScript using RemoteCommand
Icon
Time for action – validate e-mail using RemoteCommand
Icon
Summary
2
2. Introducing Sample Application TechBuzz
Icon
2. Introducing Sample Application TechBuzz
Icon
Understanding the requirements of the TechBuzz application
Icon
Understanding the high-level design of the TechBuzz application
Icon
Understanding the TechBuzz data model
Icon
Looking at TechBuzz screenshots
Icon
Setting up of the development environment for TechBuzz
Icon
Time for action – installing the required software
Icon
Summary
3
3. Using PrimeFaces Common Utility Components
Icon
3. Using PrimeFaces Common Utility Components
Icon
Introducing the Message component
Icon
Time for action – displaying FacesMessage using
Icon
Time for action – displaying FacesMessage with HTML content
Icon
Introducing the Messages component
Icon
Time for action – displaying FacesMessage using
Icon
Displaying notifications using the growl component
Icon
Time for action – displaying FacesMessages with growl
Icon
Displaying tooltips using the Tooltip component
Icon
Time for action – displaying tooltip for UI components
Icon
Time for action – using global tooltips
Icon
Partial Processing and Rendering using the Fragment component
Icon
Time for action – using the Fragment component
Icon
Introducing the Sticky component
Icon
Introducing the RequestContext utility
Icon
Time for action – updating UI components using RequestContext.update()
Icon
Time for action – executing JavaScript using RequestContext.execute()
Icon
Time for action – adding callback parameters using RequestContext.addCallbackParam()
Icon
Displaying pop-up dialogs using the Dialog component
Icon
Time for action – displaying a dialog
Icon
Time for action – client-side callbacks for onShow and onHide
Icon
Time for action – the Dialog component close event listener
Icon
Time for action – creating dialog with a registration form
Icon
Introducing dialog framework
Icon
Time for action – showing the search users screen in dialog
Icon
Time for action – passing data from the search users dialog to the source page
Icon
Introducing the ConfirmDialog component
Icon
Time for action – creating a confirmation dialog
Icon
Displaying notifications using the NotificationBar component
Icon
Time for action – displaying notification messages
Icon
Time for action – automatically hiding NotificationBar
Icon
Blocking a region using the BlockUI component
Icon
Time for action – blocking the form
Icon
Understanding PrimeFaces selectors
Icon
Time for action – updating UI components using jQuery Selectors
Icon
Introducing the search expression framework
Icon
Summary
4
4. Introducing the PrimeFaces Client Side Validation Framework
Icon
4. Introducing the PrimeFaces Client Side Validation Framework
Icon
Configuring and using the Client Side Validation framework
Icon
Time for action – performing client-side validations
Icon
Triggering client-side validations based on events
Icon
Supporting I18N for validation messages
Icon
Extending the CSV framework with custom JSF validators
Icon
Time for action – using the custom JSF validator on the client side
Icon
Extending the CSV framework with custom JSF converters
Icon
Time for action – using the custom JSF converter on the client side
Icon
Using the CSV framework with the Bean Validation API
Icon
Time for action – using the CSV framework with the Bean Validation API
Icon
Extending the CSV framework with custom Bean Validation annotations
Icon
Time for action – using the custom Bean Validation annotation with the CSV framework
Icon
Summary
5
5. Introducing Text Input Components
Icon
5. Introducing Text Input Components
Icon
Getting text input with the InputText component
Icon
Time for action – using the InputText component
Icon
Introducing the InputTextarea component
Icon
Time for action – using InputTextarea
Icon
Getting formatted input using the InputMask component
Icon
Time for action – reading formatted input using InputMask
Icon
Introducing the Password component
Icon
Time for action – using password strength indicator and match mode
Icon
Introducing the Editor component
Icon
Time for action – using editor client-side API methods
Icon
Inplace editing using the Inplace component
Icon
Time for action – using the Inplace editor
Icon
Providing completion suggestions using the AutoComplete component
Icon
Time for action – using basic AutoComplete
Icon
Time for action – using AutoComplete with POJO support
Icon
Time for action – selecting multiple items using AutoComplete
Icon
Time for action – using the ItemSelect and ItemUnselect events
Icon
Time for action – displaying tooltips on suggested items using the Itemtip facet
Icon
Summary
6
6. Working with Selection Input Components
Icon
6. Working with Selection Input Components
Icon
Creating the toggle button using SelectBooleanButton
Icon
Time for action – using the SelectBooleanButton component
Icon
Creating the On or Off options using SelectBooleanCheckbox
Icon
Time for action – using the SelectBooleanCheckbox component
Icon
Introducing SelectManyCheckbox
Icon
Time for action – using the SelectManyCheckbox component
Icon
Introducing SelectOneRadio
Icon
Time for action – using the SelectOneRadio component
Icon
Introducing SelectOneButton
Icon
Time for action – using the SelectOneButton component
Icon
Introducing SelectManyButton
Icon
Time for action – using the SelectManyButton component
Icon
Creating drop-down lists using SelectOneMenu
Icon
Time for action – using SelectOneMenu with editable and filter features
Icon
Time for action – using SelectOneMenu with POJOs
Icon
Time for action – grouping options in SelectOneMenu
Icon
Introducing SelectOneListbox
Icon
Time for action – using SelectOneListbox with POJOs
Icon
Introducing SelectManyMenu
Icon
Time for action – using SelectManyMenu
Icon
Creating the overlay menu using SelectCheckboxMenu
Icon
Time for action – using SelectCheckboxMenu
Icon
Creating the overlay menu with a default command using SplitButton
Icon
Time for action – using SplitButton
Icon
Introducing the PickList component
Icon
Time for action – using the basic PickList component
Icon
Time for action – using the advanced PickList component
Icon
Introducing the MultiSelectListbox component
Icon
Time for action – using the MultiSelectListbox component
Icon
Summary
7
7. Introducing Advanced Input Components
Icon
7. Introducing Advanced Input Components
Icon
Introducing the Calendar component
Icon
Time for action – displaying a pop-up Calendar with navigator
Icon
Time for action – displaying a multipage calendar with Localization and the dateSelect event listener
Icon
Time for action – using Calendar with a date range
Icon
Time for action – using Calendar's advanced customization options
Icon
Time for action – Calendar with the time picker options
Icon
Time for action – using the Rating component
Icon
Time for action – using the Spinner component
Icon
Time for action – using the Slider component
Icon
Time for action – using CAPTCHA for user registration
Icon
Time for action – using the FileUpload component
Icon
Time for action – using the FileDownload component
Icon
Summary
8
8. Working with Data Components
Icon
8. Working with Data Components
Icon
Introducing the DataList component
Icon
Time for action – displaying unordered and ordered data using DataList
Icon
Time for action – using DataList with pagination
Icon
Displaying tabular data using the DataTable component
Icon
Time for action – using DataTable with pagination
Icon
Time for action – using DataTable with filtering
Icon
Time for action – using DataTable with multiple row selection support
Icon
Time for action – using DataTable with row editing support
Icon
Time for action – using DataTable with cell editing support
Icon
Time for action – loading the DataTable data leisurely
Icon
Displaying data in the grid layout using the DataGrid component
Icon
Exporting data into PDF/XLS/XML/CSV formats using the DataExporter component
Icon
Time for action – using DataExporter to export data into XLS and PDF formats
Icon
Summary
9
9. Introducing Advanced Data Visualization Components
Icon
9. Introducing Advanced Data Visualization Components
Icon
Displaying data with sliding effects using the Carousel component
Icon
Time for action – creating Carousel using tabs
Icon
Introducing the TagCloud component
Icon
Time for action – displaying tags as TagCloud
Icon
Time for action – choosing a tag in TagCloud with the select Event
Icon
Displaying hierarchical data using the Tree component
Icon
Time for action – creating a Tree component
Icon
Introducing the TreeTable component
Icon
Time for action – displaying posts using the TreeTable component
Icon
Introducing the Schedule component
Icon
Time for action – creating the Schedule component
Icon
Summary
10
10. Working with Layout Components
Icon
10. Working with Layout Components
Icon
Introducing the Panel component
Icon
Time for action – using Panel with event listeners
Icon
Time for action – creating Panel with custom actions
Icon
Introducing the PanelGrid component
Icon
Time for action – using PanelGrid with rowspan and colspan features
Icon
Displaying overflowed content using ScrollPanel
Icon
Time for action – using a ScrollPanel component
Icon
Creating workflows using a Wizard component
Icon
Time for action – using Wizard to implement workflows
Icon
Creating stacked panels using the AccordionPanel component
Icon
Time for action – creating AccordionPanel with dynamic tabs and event listener
Icon
Creating a tabbed panel using a TabView component
Icon
Time for action – using TabView with dynamic tabs and event listeners support
Icon
Creating complex layouts using the Layout component
Icon
Time for action – creating FullPage layout
Icon
Creating portal like layout using a Dashboard component
Icon
Time for action – creating a Dashboard layout
Icon
Summary
11
11. Introducing Navigation Components
Icon
11. Introducing Navigation Components
Icon
Understanding MenuModel
Icon
Introducing the Menu component
Icon
Time for action – creating a simple Menu
Icon
Time for action – displaying an overlay menu with trigger
Icon
Introducing the MenuButton component
Icon
Time for action – creating MenuButton
Icon
Displaying multilevel nested menus using TieredMenu
Icon
Time for action – displaying a multilevel menu using TieredMenu
Icon
Creating nested menus with SlideMenu
Icon
Time for action – creating the SlideMenu component
Icon
Creating a horizontal navigation menu using Menubar
Icon
Time for action – creating a Menubar component
Icon
Creating a multicolumn menu using MegaMenu
Icon
Time for action – creating MegaMenu with multiple columns
Icon
Creating tab-based menus using TabMenu
Icon
Time for action – creating the TabMenu component
Icon
Time for action – tracking an active tab dynamically
Icon
Introducing the PanelMenu component
Icon
Time for action – creating the PanelMenu component
Icon
Introducing ContextMenu
Icon
Time for action – creating ContextMenu
Icon
Time for action – creating ContextMenu for DataTable
Icon
Time for action – creating ContextMenu for the Tree component
Icon
Introducing the Breadcrumb navigation menu
Icon
Time for action – creating the Breadcrumb menu
Icon
Time for action – creating the Breadcrumb menu programmatically
Icon
Summary
12
12. Drawing Charts
Icon
12. Drawing Charts
Icon
Creating a Line chart
Icon
Time for action – creating a Line chart
Icon
Creating an Area chart
Icon
Creating a Bar chart
Icon
Time for action – creating a Bar chart
Icon
Creating a Pie chart
Icon
Time for action – creating a Pie chart
Icon
Creating a Donut chart
Icon
Exporting charts as images
Icon
Rendering dynamic charts using the JFreeChart API
Icon
Time for action – creating a Pie chart using the JFreeChart API
Icon
Creating interactive charts using the ItemSelect AJAX event
Icon
Summary
13
13. Using PrimeFaces Themes
Icon
13. Using PrimeFaces Themes
Icon
Configuring and using themes
Icon
Using stateless ThemeSwitcher
Icon
Time for action – using the stateless ThemeSwitcher component
Icon
Using stateful ThemeSwitcher
Icon
Time for action – applying a user-specific theme using stateful ThemeSwitcher
Icon
Creating and using a custom theme
Icon
Time for action – creating a new theme
Icon
Time for action – installing and configuring PrimeFaces extensions
Icon
Summary
14
Index
Icon
Index

Time for action – client-side e-mail validation

In our Registration Form, we can do some basic e-mail format validation on client side itself thereby reducing the server roundtrip. We can create a JavaScript function to validate e-mail using Regex, and then hook it up with the onchange event on e-mail input field. Perform the following steps for the same:

  1. Write a JavaScript function to validate e-mail address:
    function validateEmail()
{
  var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
  var email = $.trim($("#userForm\\:email").val());
  if(email ==''){
    $("#userForm\\:emailMsg").text("");
    $("#userForm\\:emailMsg").attr("class", "");
    return;
  }
  if( emailReg.test( email ) ) {
    $("#userForm\\:emailMsg").text("Valid Email");    
    $("#userForm\\:emailMsg").attr("class", "ui-messages-info ui-widget ui-corner-all ui-messages-info-summary");       
  } else {
    $("#userForm\\:emailMsg").text("Invalid Email");
    $("#userForm\\:emailMsg").attr("class", "ui-message-error ui-widget ui-corner-all ui-message-error-detail");
   }
}
  2. Add the validateEmail() function as an event handler for the onchange event on the e-mail input field:
    <h:form id="userForm">
    <p:outputLabel value="Email:"/>
  <p:inputText id="email" value="#{userController.user.email}" onchange="validateEmail();" />
  <p:message id="emailMsg" for="email"/>    

</h:form>

What just happened?

We have created a JavaScript function to validate e-mail using Regex. Using the jQuery API we have added an info/error message notifying us whether the e-mail is valid or invalid. We have hooked up this function to the onchange event of the e-mail inputText element. So validateEmail() gets invoked as soon as the e-mail value is changed and shows the message.

We got the e-mail field using $("#userForm\\:email"), where userForm is the ID of the form and email is the ID of the e-mail inputText field. JSF generates the IDs with colon (:) separator, but jQuery has a special meaning for colon .So we have replaced the colon (:) with \\:

Instead of replacing the colon by yourself, you can use the PrimeFaces.escapeClientId() utility function as follows:

function validateEmail() 
{
  var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
  var email = $.trim($(PrimeFaces.escapeClientId("userForm:email")).val());
  if(email ==''){
    $(PrimeFaces.escapeClientId("userForm:emailMsg")).text("");
    $(PrimeFaces.escapeClientId("userForm:emailMsg")).attr("class", "");
    return;
  }
  if( emailReg.test( email ) ) {
    $(PrimeFaces.escapeClientId("userForm:emailMsg")).text("Valid Email");    
    $(PrimeFaces.escapeClientId("userForm:emailMsg")).attr("class", "ui-messages-info ui-widget ui-corner-all ui-messages-info-summary");       
  } else {
    $(PrimeFaces.escapeClientId("userForm:emailMsg")).text("Invalid Email");
    $(PrimeFaces.escapeClientId("userForm:emailMsg")).attr("class", "ui-message-error ui-widget ui-corner-all ui-message-error-detail");
   }
}

Tip

Since JSF2.x, we can also change the JSF ID separator character using the following <context-param> configuration in web.xml:

<context-param>
    <param-name>javax.faces.SEPARATOR_CHAR</param-name>
    <param-value>-</param-value>
</context-param>

The preceding client-side validation process involves performing manual validations using JavaScript/jQuery. PrimeFaces-4.0 introduced the Client Side Validation (CSV) framework with more powerful features, which we will discuss in Chapter 4, Introducing the PrimeFaces Client Side Validation Framework.

Visually different images
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
PrimeFaces Beginner's Guide
End of Section 1
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon