PrimeFaces Tutorial With Examples

Recently we have published a lot of Primefaces tutorial. PrimeFaces is one of the most popular reference implementation of Java ServerFaces specifications.

PrimeFaces is very easy to use and comes with a lot of components to create awesome effect on view pages, we have looked through most of the important ones in earlier posts.

One of the most useful feature of PrimeFaces is the support for creating responsive view pages, that is a must have for current web pages. This post is an index of all the articles we have published on Primefaces tutorial, I would suggest you to go through them in the given order for better learning experience. You might also want to bookmark this post for future reference of primefaces tutorial.

All of these tutorials come with downloadable source code, so that you can quickly start with it and experiment with changes to learn more.

  • JSF PrimeFaces TutorialJSF is the leading framework in creating view pages, there are a lot of implementations for JSF specs such as Mojarra and Apache MyFaces. PrimeFaces is one of the most widely used implementation for JSF specs. This article explains about the JSF and it’s lifecycle, what is new in JSF 2.0 and how to get started with PrimeFaces. This primefaces tutorial is a good read for anyone who is beginner to JSF and PrimeFaces. The article provide complete details about getting started with PrimeFaces and creating your first Hello World PrimeFaces web application with downloadable source code for your ease.
  • PrimeFaces AccordionPanel Example TutorialPrimeFaces comes with tons of UI components to help us in creating view pages easily, AccordionPanel is a container component that we can use to displays content in a stacked format. This primefaces tutorial explains about AccordionPanel basic information, attributes and how to load dynamic content in an accordion panel container. This article also dives into using Ajax when tab change event is triggered.
  • PrimeFaces Dashboard ExamplePrimefaces Dashboard UI component is used to create widgets like component in the view pages with drag and drop functionality. You can close the Dashboard, make ajax calls for any events such as reordering of dashboards or when adding a new widget.
  • PrimeFaces Calendar Component ExampleCalendars are very common in web pages, it helps end users in selecting dates easily and applications to avoid getting wrong input because of formatting issue. PrimeFaces tutorial for calendar component provide extensive support for creating different types of calendars with paging, localization, selecting date range and making ajax calls.
  • PrimeFaces BlockUI Component Example TutorialPrimeFaces BlockUI component is used to blocking other components or set of components, it’s used to make sure a component content is not modified when an event occurs or an ajax call is in process.
  • PrimeFaces Toolbar, ToolbarGroup and Tooltip Component Example TutorialThis article explains about the Toolbar component that we can use to create navigation menus, we can group them using ToolbarGroup component and Tooltip component can be used to add tooltip to any HTML element in the web page. We can have a message as well as image in the tooltip component.
  • PrimeFaces Tree, TreeNode and TreeTable Components Example TutorialPrimefaces Tree and TreeTable component can be used to create hierarchical data and create site navigation menus. Every Tree component is associated with a TreeNode instance called root that can have child nodes. This primefaces tutorial also explains how to create dynamic tree with multiple tree nodes and how to make ajax calls when a node is expanded, collapsed, selected or unselected.This article also explains about Selection and SelectionMode, Node Cache and OnNodeClick, drag and drop, Horizontal Tree, Context Menu, TreeTable Ajax Behavior Events, sorting utilities in detail.
  • PrimeFaces Menu Example TutorialMost of the web pages have menus that is useful for better user experience. Primefaces provides a bunch of components for different types of menus.
    • Menu: Is a navigation component with submenus and menu items.
    • MenuBar: Is a horizontal navigation component.
    • MenuButton: Is used to display different commands in a popup menu.
    • TieredMenu: Is used to display nested submenus with overlays.
    • SlideMenu: Is used to display nested submenus with sliding animation.
  • PrimeFaces Tab, TabMenu, TabView, TagCloud Example TutorialThis article explains about following components from Primefaces library.
    • Tab: Is generic container component used by other Primefaces components such as tabView and AccordionPanel.
    • TabMenu: Is a navigation component that displays menu items as tabs.
    • TabView: Is a container component to group content in a tabs.
    • TagCloud: Displays a collection of tag with different strengths.
  • PrimeFaces Panel, PanelGrid and PanelMenu Example TutorialPrimefaces provides us a vast amount of variant components that would be used for achieving different business scenarios.One of the major intrusive things most of developers want to avoid is the process of laying out form’s components. Primefaces had solved this issue dramatically by providing set of relevant components; Panel and PanelGrid are mainly used for this purpose.

    Meanwhile, PanelMenu provides you a way of organizing submenus and menu items in a hierarchical form mixed with accordionPanel behavior.

  • PrimeFaces CommandButton, CommandLink, Confirm, FileDownload ComponentsPrimefaces has a huge components library. Different components are provided to serve you solve your problems without any need for writing any line of code. This tutorial will spotlight into the following components:
    • CommandButton: is an extended version of standard commandButton.
    • CommandLink: is an extended version of standard commandLink.
    • Confirm: is a behavior element used to integrate with global confirm dialog.
    • ConfirmDialog: is a replacement to the legacy javascript confirmation box. Skinning, customization and avoiding popup blockers are notable advantages over classic javascript confirmation.
    • FileDownload: is a component used for providing an easier way to present binary data to the client.
  • PrimeFaces Selective Components Example TutorialPrimefaces library has provided different forms of components that make use selective function. As such, this tutorial will cover all of required information that’s relevant for each type of them.
    • SelectBooleanButton
    • SelectBooleanCheckbox
    • SelectCheckboxMenu
    • SelectManyButton
    • SelectManyCheckbox
    • SelectManyMenu
    • SelectOneButton
    • SelectOneListbox
    • SelectOneMenu
    • SelectOneRadio
  • PrimeFaces Message, Messages and Growl Component Example TutorialMessages are normally used for notifying, informing and keep the users aware of the actions that they are achieved. Typically, messages used for displaying information, errors, warnings and so on.Primefaces like all of JSF implementations, provides different types of components that are used for doing so. Messages, message and growl are the only components get used for this purpose. This tutorial will help you getting featured these components into your application.
  • PrimeFaces Wizard Component Example TutorialPrimefaces Wizard Component provides an ajax enhanced UI to implement a workflow easily in a single page. Wizard consists of several child tab components where each tab represents a step in the proc
    ess. This article starts with basic wizard component features and move forward with FlowListener and Client side callback examples.
  • PrimeFaces FileUpload Component ExampleProviding a file upload functionality within your application isn’t simple task as a much of developer might think. It may expense a couple of hours for implementing it, and though keeping you aware of a lot of technical details that you may not take advantage of them practically.As you’ve experienced, HTML provides you a type file for input tag, that needs a much more of coding for making it applicable for the upload use. Regardless of conforming with the legacy browsers headache, Primefaces has cut-off that burden by providing you a ready-made FileUpload component that help you seamlessly getting files uploaded into your server with minimal amount of cost.

    This tutorial clarifies the all features that bundled with the FileUpload component for getting started using it in your application wisely.

  • PrimeFaces Utilities ExamplesPrimefaces is a leading JSF library, it provides vast amount of components and facilitates so many kind of utilities and frameworks. This tutorial will highlight the most beneficial utilities and frameworks as well as explain how can we make use all of them more effective in development process.Some of these utilities discussed in this tutorial are RequestContext, EL Functions, Dialog Framework & Search Expression Framework.
  • PrimeFaces Mobile TutorialPrimefaces provides a mobile version of its library, Primefaces Mobile or (PFM). Primefaces Mobile is a UI kit to create a JSF based application with responsive design for mobile devices.PFM is built on top of jQuery Mobile library that is a touch-optimized HTML5 UI framework, providing support for various mobile platforms.

    This tutorial is intended to provide you a full-fledged explanations for how you could leverage Primefaces Mobile library and create responsive applications suitable for mobile devices too.

  • PrimeFaces Themes ExamplePrimefaces integrated with powerful ThemeRoller CSS framework. Currently there are 30+ pre-designed themes that you can preview and download from Primefaces theme gallery. This tutorial will provide you complete explanation of how you could deal with the theme feature for applying a new theme and creating new one.
  • Primefaces AjaxBehavior and AjaxExceptionHandler Component ExampleThis tutorial aimed to help you gathering the required information that makes the use of ajax component much easier.Beside all of those important information that you will get here about ajax component, following also the life-cycle of the ajax request/response phases as it’s supported by the JSF 2 framework.

    Ajax behavior was introduced in the JSF 2 specification, and Primefaces is one of those libraries built on, so you will not find a big difference between standard JSF ajax component f:ajax and Primefaces ajax component p:ajax except the latter used with the Primefaces components.

  • Primefaces Spring & Hibernate Integration Example TutorialThis is one of the integration example where we have explained how to integrate PrimeFaces with Spring and Hibernate framework. This is a very commonly used combination to get the most out of each of the frameworks.
  • PrimeFaces Spring 4 with JPA (Hibernate 4/EclipseLink) Example TutorialJava Persistence API is a standard specification. It provides a persistence model that’s implemented by different numerous of implementer.Hibernate & EclipseLink are two most popular implementations used for persisting given business model against some sort of persistence store like relational database. As such, this primefaces tutorial will provide you a full-fledged example containing all required configuration steps to developer a layered application that uses Primefaces components to develop a compelling User Interface, Hibernate/EclipseLink implementations to develop an Object/Relational Mapping beneath JPA umbrella and Spring framework as a kind of glue that get everything attached each together.
  • PrimeFaces Hibernate SpringRoo Integration ExampleSpringRoo is an open source software tool that uses convention-over-configuration concept to facilitate producing Java-Based enterprise software application in a driven command-line way.This primefaces tutorial explains about integration between SpringRoo, PrimeFaces and Hibernate frameworks.
  • Primefaces Spring EclipseLink NoSQL with MongoDB & Oracle NoSQL DB

    This article provide details about integration between PrimeFaces, Spring and NoSQL databases such as MongoDB and Oracle NoSQL database.

By admin

Leave a Reply

%d bloggers like this: