You are previewing PrimeFaces Beginner's Guide.
O'Reilly logo
PrimeFaces Beginner's Guide

Book Description

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.

  • 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

  • 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.

    Table of Contents

    1. PrimeFaces Beginner's Guide
      1. Table of Contents
      2. PrimeFaces Beginner's Guide
      3. Credits
      4. About the Author
      5. About the Reviewers
      6. www.PacktPub.com
        1. Support files, eBooks, discount offers and more
          1. Why Subscribe?
          2. Free Access for Packt account holders
      7. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Time for action – heading
          1. What just happened?
        6. Reader feedback
        7. Customer support
          1. Downloading the example code
          2. Errata
          3. Piracy
          4. Questions
      8. 1. Introduction to PrimeFaces
        1. Introducing the features of PrimeFaces
        2. Installing and configuring PrimeFaces
        3. Time for action – installing and configuring PrimeFaces
          1. What just happened?
        4. Creating a HelloWorld application using PrimeFaces
        5. Time for action – creating a HelloWorld program using PrimeFaces
          1. What just happened?
        6. Creating simple forms using PrimeFaces
        7. Time for action – creating a user registration form
          1. What just happened?
        8. Performing form validations
        9. Time for action – validating the user registration form
          1. What just happened?
        10. Performing client-side validations
        11. Time for action – client-side e-mail validation
          1. What just happened?
        12. Understanding partial page rendering (PPR)
        13. Time for action – partial processing on the user details form
          1. What just happened?
          2. Submitting partial data to the server
        14. Updating the view using AJAX
        15. Time for action – updating the view using AJAX
          1. What just happened?
        16. Updating the view using AJAX listeners
        17. Time for action – validate the UserName using AJAX listeners
          1. What just happened?
        18. Performing tasks periodically using a poll component
        19. Time for action – using the poll component to display the current time
          1. What just happened?
          2. Controlling the polling process using external triggers
        20. Time for action – manually start and stop polling
          1. What just happened?
        21. Invoking server-side methods from JavaScript using RemoteCommand
        22. Time for action – validate e-mail using RemoteCommand
          1. What just happened?
        23. Summary
      9. 2. Introducing Sample Application TechBuzz
        1. Understanding the requirements of the TechBuzz application
        2. Understanding the high-level design of the TechBuzz application
        3. Understanding the TechBuzz data model
        4. Looking at TechBuzz screenshots
          1. User authentication
          2. TechBuzz home page
          3. User account screen
          4. Creating a post screen
          5. User roles management
          6. Posts in tree view
          7. Posts frequency charts
        5. Setting up of the development environment for TechBuzz
        6. Time for action – installing the required software
          1. What just happened?
        7. Summary
      10. 3. Using PrimeFaces Common Utility Components
        1. Introducing the Message component
        2. Time for action – displaying FacesMessage using <p:message>
          1. What just happened?
          2. Displaying messages with HTML content
        3. Time for action – displaying FacesMessage with HTML content
          1. What just happened?
        4. Introducing the Messages component
        5. Time for action – displaying FacesMessage using <p:messages>
          1. What just happened?
        6. Displaying notifications using the growl component
        7. Time for action – displaying FacesMessages with growl
          1. What just happened?
        8. Displaying tooltips using the Tooltip component
        9. Time for action – displaying tooltip for UI components
          1. What just happened?
          2. Using global tooltips
        10. Time for action – using global tooltips
          1. What just happened?
        11. Partial Processing and Rendering using the Fragment component
        12. Time for action – using the Fragment component
          1. What just happened?
        13. Introducing the Sticky component
        14. Introducing the RequestContext utility
          1. Updating UI components
        15. Time for action – updating UI components using RequestContext.update()
          1. What just happened?
          2. Executing JavaScript from server-side code
        16. Time for action – executing JavaScript using RequestContext.execute()
          1. What just happened?
          2. Adding AJAX callback parameters
        17. Time for action – adding callback parameters using RequestContext.addCallbackParam()
          1. What just happened?
          2. Scrolling to a component
        18. Displaying pop-up dialogs using the Dialog component
        19. Time for action – displaying a dialog
          1. What just happened?
          2. Using the Dialog component's client-side callbacks
        20. Time for action – client-side callbacks for onShow and onHide
          1. What just happened?
          2. Handling the dialog close event
        21. Time for action – the Dialog component close event listener
          1. What just happened?
          2. Working with a Dialog component containing forms
        22. Time for action – creating dialog with a registration form
          1. What just happened?
        23. Introducing dialog framework
        24. Time for action – showing the search users screen in dialog
          1. What just happened?
          2. Passing data from the dialog back to the source page
        25. Time for action – passing data from the search users dialog to the source page
          1. What just happened?
          2. Displaying FacesMessage in dialog
        26. Introducing the ConfirmDialog component
        27. Time for action – creating a confirmation dialog
          1. What just happened?
          2. Using the global ConfirmDialog component
        28. Displaying notifications using the NotificationBar component
        29. Time for action – displaying notification messages
          1. What just happened?
          2. Hiding NotificationBar automatically
        30. Time for action – automatically hiding NotificationBar
          1. What just happened?
        31. Blocking a region using the BlockUI component
        32. Time for action – blocking the form
          1. What just happened?
        33. Understanding PrimeFaces selectors
        34. Time for action – updating UI components using jQuery Selectors
          1. What just happened?
        35. Introducing the search expression framework
        36. Summary
      11. 4. Introducing the PrimeFaces Client Side Validation Framework
        1. Configuring and using the Client Side Validation framework
        2. Time for action – performing client-side validations
          1. What just happened?
        3. Triggering client-side validations based on events
        4. Supporting I18N for validation messages
        5. Extending the CSV framework with custom JSF validators
        6. Time for action – using the custom JSF validator on the client side
          1. What just happened?
        7. Extending the CSV framework with custom JSF converters
        8. Time for action – using the custom JSF converter on the client side
          1. What just happened?
        9. Using the CSV framework with the Bean Validation API
        10. Time for action – using the CSV framework with the Bean Validation API
          1. What just happened?
        11. Extending the CSV framework with custom Bean Validation annotations
        12. Time for action – using the custom Bean Validation annotation with the CSV framework
          1. What just happened?
        13. Summary
      12. 5. Introducing Text Input Components
        1. Getting text input with the InputText component
        2. Time for action – using the InputText component
          1. What just happened?
        3. Introducing the InputTextarea component
        4. Time for action – using InputTextarea
          1. What just happened?
        5. Getting formatted input using the InputMask component
        6. Time for action – reading formatted input using InputMask
          1. What just happened?
        7. Introducing the Password component
        8. Time for action – using password strength indicator and match mode
          1. What just happened?
        9. Introducing the Editor component
        10. Time for action – using editor client-side API methods
          1. What just happened?
        11. Inplace editing using the Inplace component
        12. Time for action – using the Inplace editor
          1. What just happened?
        13. Providing completion suggestions using the AutoComplete component
        14. Time for action – using basic AutoComplete
          1. What just happened?
          2. Using AutoComplete with POJO support
        15. Time for action – using AutoComplete with POJO support
          1. What just happened?
          2. Selecting multiple items
        16. Time for action – selecting multiple items using AutoComplete
          1. What just happened?
          2. Handling the ItemSelect and ItemUnselect Events
        17. Time for action – using the ItemSelect and ItemUnselect events
          1. What just happened?
          2. Displaying tooltips using the Itemtip facet
        18. Time for action – displaying tooltips on suggested items using the Itemtip facet
          1. What just happened?
        19. Summary
      13. 6. Working with Selection Input Components
        1. Creating the toggle button using SelectBooleanButton
        2. Time for action – using the SelectBooleanButton component
          1. What just happened?
        3. Creating the On or Off options using SelectBooleanCheckbox
        4. Time for action – using the SelectBooleanCheckbox component
          1. What just happened?
        5. Introducing SelectManyCheckbox
        6. Time for action – using the SelectManyCheckbox component
          1. What just happened?
        7. Introducing SelectOneRadio
        8. Time for action – using the SelectOneRadio component
          1. What just happened?
        9. Introducing SelectOneButton
        10. Time for action – using the SelectOneButton component
          1. What just happened?
        11. Introducing SelectManyButton
        12. Time for action – using the SelectManyButton component
          1. What just happened?
        13. Creating drop-down lists using SelectOneMenu
        14. Time for action – using SelectOneMenu with editable and filter features
          1. What just happened?
          2. Using SelectOneMenu with POJOs
        15. Time for action – using SelectOneMenu with POJOs
          1. What just happened?
          2. Grouping options in SelectOneMenu
        16. Time for action – grouping options in SelectOneMenu
          1. What just happened?
        17. Introducing SelectOneListbox
        18. Time for action – using SelectOneListbox with POJOs
          1. What just happened?
        19. Introducing SelectManyMenu
        20. Time for action – using SelectManyMenu
          1. What just happened?
        21. Creating the overlay menu using SelectCheckboxMenu
        22. Time for action – using SelectCheckboxMenu
          1. What just happened?
        23. Creating the overlay menu with a default command using SplitButton
        24. Time for action – using SplitButton
          1. What the just happened?
        25. Introducing the PickList component
        26. Time for action – using the basic PickList component
          1. What just happened?
          2. Using the PickList component with POJO support
        27. Time for action – using the advanced PickList component
          1. What just happened?
        28. Introducing the MultiSelectListbox component
        29. Time for action – using the MultiSelectListbox component
          1. What just happened?
        30. Summary
      14. 7. Introducing Advanced Input Components
        1. Introducing the Calendar component
        2. Time for action – displaying a pop-up Calendar with navigator
          1. What just happened?
          2. Understanding Internationalization (I18N) and Localization (L10N)
        3. Time for action – displaying a multipage calendar with Localization and the dateSelect event listener
          1. What just happened?
          2. Restricting the date selection within the date range
        4. Time for action – using Calendar with a date range
          1. What just happened?
          2. Using Calendar with advanced customization options
        5. Time for action – using Calendar's advanced customization options
          1. What just happened?
          2. Using the Calendar component's time picker options
        6. Time for action – Calendar with the time picker options
          1. What just happened?
          2. Star-based rating using the Rating component
        7. Time for action – using the Rating component
          1. What just happened?
          2. Introducing the Spinner component
        8. Time for action – using the Spinner component
          1. What just happened?
          2. Getting input on a scale using the Slider component
        9. Time for action – using the Slider component
          1. What just happened?
          2. Preventing spam and bots using CAPTCHA validation
        10. Time for action – using CAPTCHA for user registration
          1. What just happened?
          2. Uploading files using the FileUpload component
        11. Time for action – using the FileUpload component
          1. What just happened?
          2. Downloading files using the FileDownload component
        12. Time for action – using the FileDownload component
          1. What just happened?
        13. Summary
      15. 8. Working with Data Components
        1. Introducing the DataList component
        2. Time for action – displaying unordered and ordered data using DataList
          1. What just happened?
          2. Using DataList with pagination support
        3. Time for action – using DataList with pagination
          1. What just happened?
        4. Displaying tabular data using the DataTable component
          1. Using pagination support
        5. Time for action – using DataTable with pagination
          1. What just happened?
          2. Using columns sorting support
          3. Using column filtering support
        6. Time for action – using DataTable with filtering
          1. What just happened?
          2. Selecting DataTable rows
            1. Selecting a single row
            2. Selecting rows using a row click
            3. Selecting rows using a radio button / checkbox
        7. Time for action – using DataTable with multiple row selection support
          1. What just happened?
          2. Using the row expansion feature
          3. Using the inline row editing feature
        8. Time for action – using DataTable with row editing support
          1. What just happened?
          2. Using the cell editing feature
        9. Time for action – using DataTable with cell editing support
          1. What just happened?
          2. Loading data leisurely
        10. Time for action – loading the DataTable data leisurely
          1. What just happened?
          2. Using the column grouping support
          3. Using the scrolling feature
          4. Using the frozenRows feature
          5. Applying custom styles for rows
          6. Using the resizable and draggable columns feature
        11. Displaying data in the grid layout using the DataGrid component
        12. Exporting data into PDF/XLS/XML/CSV formats using the DataExporter component
        13. Time for action – using DataExporter to export data into XLS and PDF formats
          1. What just happened?
        14. Summary
      16. 9. Introducing Advanced Data Visualization Components
        1. Displaying data with sliding effects using the Carousel component
        2. Time for action – creating Carousel using tabs
          1. What just happened?
        3. Introducing the TagCloud component
        4. Time for action – displaying tags as TagCloud
          1. What just happened?
        5. Time for action – choosing a tag in TagCloud with the select Event
          1. What just happened?
        6. Displaying hierarchical data using the Tree component
        7. Time for action – creating a Tree component
          1. What just happened?
            1. Loading tree nodes dynamically using AJAX
            2. Selecting tree nodes
            3. Handling node expand, collapse, select and unselect events
            4. Rendering the tree horizontally
            5. Displaying nodes with icons
            6. Reordering Tree nodes using Drag and Drop
        8. Introducing the TreeTable component
        9. Time for action – displaying posts using the TreeTable component
          1. What just happened?
        10. Introducing the Schedule component
        11. Time for action – creating the Schedule component
          1. What just happened?
        12. Summary
      17. 10. Working with Layout Components
        1. Introducing the Panel component
        2. Time for action – using Panel with event listeners
          1. What just happened?
          2. Using Panel with pop-up menu
          3. Using Panel with custom actions
        3. Time for action – creating Panel with custom actions
          1. What just happened?
        4. Introducing the PanelGrid component
        5. Time for action – using PanelGrid with rowspan and colspan features
          1. What just happened?
        6. Displaying overflowed content using ScrollPanel
        7. Time for action – using a ScrollPanel component
          1. What just happened?
        8. Creating workflows using a Wizard component
        9. Time for action – using Wizard to implement workflows
          1. What just happened?
        10. Creating stacked panels using the AccordionPanel component
          1. Loading tabs content dynamically
          2. Creating a dynamic number of tabs
          3. Handling tabChange and tabClose events
        11. Time for action – creating AccordionPanel with dynamic tabs and event listener
          1. What just happened?
        12. Creating a tabbed panel using a TabView component
          1. Loading tabs content dynamically
          2. Creating TabView with closable tabs
          3. Tab headers with different orientations
          4. Creating TabView with a dynamic number of tabs
          5. Creating TabView with scrollable tabs
          6. Handling TabView component's events
        13. Time for action – using TabView with dynamic tabs and event listeners support
          1. What just happened?
        14. Creating complex layouts using the Layout component
        15. Time for action – creating FullPage layout
          1. What just happened?
          2. Creating an element-based layout
          3. Creating nested layouts
          4. Handling layout events
        16. Creating portal like layout using a Dashboard component
        17. Time for action – creating a Dashboard layout
          1. What just happened?
        18. Summary
      18. 11. Introducing Navigation Components
        1. Understanding MenuModel
          1. Building menus declaratively
          2. Building menus programmatically
        2. Introducing the Menu component
        3. Time for action – creating a simple Menu
          1. What just happened?
          2. Displaying Menu based on trigger
        4. Time for action – displaying an overlay menu with trigger
          1. What just happened?
        5. Introducing the MenuButton component
        6. Time for action – creating MenuButton
          1. What just happened?
        7. Displaying multilevel nested menus using TieredMenu
        8. Time for action – displaying a multilevel menu using TieredMenu
          1. What just happened?
        9. Creating nested menus with SlideMenu
        10. Time for action – creating the SlideMenu component
          1. What just happened?
        11. Creating a horizontal navigation menu using Menubar
        12. Time for action – creating a Menubar component
          1. What just happened?
        13. Creating a multicolumn menu using MegaMenu
        14. Time for action – creating MegaMenu with multiple columns
          1. What just happened?
        15. Creating tab-based menus using TabMenu
        16. Time for action – creating the TabMenu component
          1. What just happened?
        17. Time for action – tracking an active tab dynamically
          1. What just happened?
        18. Introducing the PanelMenu component
        19. Time for action – creating the PanelMenu component
          1. What just happened?
        20. Introducing ContextMenu
        21. Time for action – creating ContextMenu
          1. What just happened?
          2. Integrating DataTable with ContextMenu
        22. Time for action – creating ContextMenu for DataTable
          1. What just happened?
          2. Integrating Tree with ContextMenu
        23. Time for action – creating ContextMenu for the Tree component
          1. What just happened?
        24. Introducing the Breadcrumb navigation menu
        25. Time for action – creating the Breadcrumb menu
          1. What just happened?
        26. Time for action – creating the Breadcrumb menu programmatically
          1. What just happened?
        27. Summary
      19. 12. Drawing Charts
        1. Creating a Line chart
        2. Time for action – creating a Line chart
          1. What just happened?
        3. Creating an Area chart
        4. Creating a Bar chart
        5. Time for action – creating a Bar chart
          1. What just happened?
        6. Creating a Pie chart
        7. Time for action – creating a Pie chart
          1. What just happened?
        8. Creating a Donut chart
        9. Exporting charts as images
        10. Rendering dynamic charts using the JFreeChart API
        11. Time for action – creating a Pie chart using the JFreeChart API
          1. What just happened?
        12. Creating interactive charts using the ItemSelect AJAX event
        13. Summary
      20. 13. Using PrimeFaces Themes
        1. Configuring and using themes
        2. Using stateless ThemeSwitcher
        3. Time for action – using the stateless ThemeSwitcher component
          1. What just happened?
        4. Using stateful ThemeSwitcher
        5. Time for action – applying a user-specific theme using stateful ThemeSwitcher
          1. What just happened?
        6. Creating and using a custom theme
        7. Time for action – creating a new theme
          1. What just happened?
          2. Drag-and-drop support
          3. Working with GoogleMaps using the GMap component
          4. Multimedia components
          5. PrimeFaces push
          6. The PrimeFaces extensions
        8. Time for action – installing and configuring PrimeFaces extensions
          1. What just happened?
          2. PrimeFaces mobile
          3. PrimeUI
        9. Summary
      21. Index