We’ve mentioned earlier, Primefaces is one of leading libraries that provide you set of amazing UI control that makes you avoid the need of developing any components that you might need.

This tutorial intended to cover the Dashboard component, some of the basic details about creating maven Primefaces projects are already provided in Primefaces AccordionPanel tutorial.

Primefaces Dashboard provides you portal like layout with drag&drop based reorder capabilities. Let’s take a look at the basic information and attributes that would help you understand the Dashboard component.

Primefaces Dashboard

Type Dashboard Class
Component Class org.primefaces.component.dashboard.Dashboard
Component Family Package org.primefaces.component
Component Model org.primefaces.model.DashboardModel
Component Column org.primefaces.model.DashboardColumn
Component Rendered org.primefaces.component.dashboard.DashboardRendered
Component Reorder Event org.primefaces.event.DashboardReorderEvent

Primefaces Dashboard Attributes

Name Type Default Description
id String null Unique identifier of the component
rendered Boolean true Boolean value to specify the rendering of component.
If false, component will not be rendered
binding Object null EL expression that maps to a server side
UIComponent instance in a backing bean
widgetVar String null Name of the client side widget
model DashboardModel null DashboardModel instance for UI layout
disabled Boolean false To disable the rendering
style String null Inline CSS style of the component
styleClass String null For specifying CSS class for component style

Getting started with Primefaces dashboard

Dashboard is backed by a DashboardModel and consists of panel components. Dashboard model simply defines the number of columns and the widgets to be placed in each column. Let’s find out the most simple example that you might develop using the Dashboard component.

We assumed that you are familiar with the all required steps for making your Maven project ready for starting developing Primefaces component either by creating the project itself or by configuring it with the required dependencies and XML configurations. If you didn’t have these practices till now, it’s recommended for you seeing those while reading the AccordionPanel Example or Primefaces Beginners Tutorial.

The structure of the project inside Eclipse IDE will be like below after accomplished the creation steps

Dashboard-Project-Structure

We’ve added two additional files, index.xhtml which represents the JSF/Primefaces view and the DashboardManagedBean which represents the class that will be retaining the needed business.

Developing Simple Primefaces Dashboard Sample

For proper usage of dashboard component, you have to bind the dashboard component that’s defined in the index.xhtml with its model that’s defined within the DashboardManagedBean.

As you’ve noticed in the previous fragment of code; you’ve normally defined the dashboard into your page associated with its model that in the managed bean. You can add any number of columns you want into your dashboard. The columns you’ve added are able of retaining widgets, those widgets represent a normal <p:panel/> components that you might define them inside the dashboard or outside of it and you can add them into your columns by using column.addWidget() which accept the panel name. Look below at a very simple example might be made for using the dashboard component.

Dashboard-Three-Columns-Three-Widgets

If you’ve looked into deeply, you must find that the dashboard component has defined three columns, each of these defined columns has retained a widget inside. Truly, those defined widgets are just a panels component.

Primefaces Dashboard – Ajax Behavior Events

The dashboard provides the developer one and only one ajax event, this event is fired when dashboard panels are reordered. A defined listener will be invoked by passing an org.primefaces.event.DashboardReorderEvent instance containing information about reorder.

Already, we’ve introduced the ajax event concept and for proper usage, you have to provide your dashboard component with p:ajax. The p:ajax has two major attributes, one for the event type at which the ajax has fired and the second is the listener by which the fired action is handled.

Dashboard-Before-Initiated-Reorder-Event1

Dashboard-Before-Initiated-Reorder-Event1

For reordering a certain panel, all that you should have to do is just by drag the panel and drop it into the column you want. An event of reordering has fired and the associated listener will be invoked. The listener finds out the index of the reordered item, retaining column index and the sender column index as a message will be displaying listed all of this information.

Also, and as you’ve noticed above, all of the panels are closable and toggleable. Those attributes are configured using the closable and toggleable attributes for the panel component.

Primefaces Dashboard – Add New Widgets

The ability to add new widgets into your dashboard is also applicable, by adding an external panel into your dashboard. That’s happening through using of <p:draggable/> component which used for determining the component being dragged and the component that used for retaining the dragged component.

Dashboard-Before-Dragging-External-Panel-Into-Dashboard

Dashboard-Before-Dragging-External-Panel-Into-Dashboard

 Now, you may ask about why the panel dragged has still retained externally even it’s dragged into dashboard. The big answer here was with help attribute that you provide at the draggable component which has clone value. Clone value means that the panel which dragged has been cloned for completing the dragging operation. You might ask about the messages that displayed here for notifying you about dragging operation. Messages component will be discussed in a separate tutorial in the future.

In case you’ve closed the widgets (panels) and you want them again reloaded into your page, you can reload them by doing a page refresh or by dragging them again into your dashboard from an external panel if you have it.

Primefaces Dashboard Summary

This tutorial intended for providing you a full-fledged explanation for how could use Dashboard component and what are the features that dashboard component able to provide. You can download the sample project from the below link and try using other attributes to learn more.

By admin

Leave a Reply