primefaces教程_Primefaces仪表板组件示例教程

primefaces教程

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.

我们之前已经提到过， Primefaces是领先的库之一，它为您提供了一套了不起的UI控件，使您无需开发任何可能需要的组件。

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.

本教程旨在涵盖Dashboard组件， Primefaces AccordionPanel教程中已提供了有关创建maven Primefaces项目的一些基本细节。

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仪表板为您提供门户式布局，并具有基于拖放的重新排序功能。让我们看一下有助于您了解仪表板组件的基本信息和属性。

Primefaces仪表板 (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

类型	仪表板类
组件类别	org.primefaces.component.dashboard.Dashboard
组件族包	org.primefaces.component
组件模型	org.primefaces.model.DashboardModel
成分栏	org.primefaces.model.DashboardColumn
渲染组件	org.primefaces.component.dashboard.DashboardRendered
组件重新订购事件	org.primefaces.event.DashboardReorderEvent

Primefaces仪表板属性 (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

名称	类型	默认	描述
ID	串	空值	组件的唯一标识符
呈现	布尔型	真正	布尔值，用于指定组件的呈现。如果为false，则不会渲染组件
捆绑	目的	空值	映射到服务器端的EL表达式支持bean中的UIComponent实例
widgetVar	串	空值	客户端小部件的名称
模型	仪表板型号	空值	UI布局的DashboardModel实例
残障人士	布尔型	假	禁用渲染
样式	串	空值	组件的内联CSS样式
styleClass	串	空值	用于为组件样式指定CSS类

Primefaces仪表板入门 (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.

仪表板由DashboardModel支持，并且由面板组件。仪表板模型仅定义列数以及要放置在每列中的小部件。让我们找出您可能使用仪表板组件开发的最简单的示例。

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.

我们假设您熟悉创建Maven项目以准备开始开发Primefaces组件的所有必需步骤，这些步骤可以通过创建项目本身或通过使用所需的依赖项和XML配置进行配置来进行。如果您到目前为止还没有这些实践，建议您在阅读AccordionPanel示例或Primefaces初学者教程时查看这些实践。

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

完成创建步骤后，Eclipse IDE中的项目结构将如下所示

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.

我们添加了两个附加文件： index.xhtml （代表JSF / Primefaces视图）和DashboardManagedBean，代表将保留所需业务的类。

开发简单的Primefaces仪表板样本 (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.

为了正确使用仪表板组件，您必须将index.xhtml中定义的仪表板组件与DashboardManagedBean中定义的模型绑定。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="https://www.w3.org/1999/xhtml"xmlns:ui="https://java.sun.com/jsf/facelets"xmlns:h="https://java.sun.com/jsf/html"xmlns:f="https://java.sun.com/jsf/core"xmlns:p="https://primefaces.org/ui"><h:head><title>Dashboard</title><script name="jquery/jquery.js" library="primefaces"></script></h:head><h:body><div style="height:500px"><h:form><p:dashboard id="board" model="#{dashboardManagedBean.model}"><p:panel id="Finance" header="Finance" closable="true" toggleable="true"><h:outputText value="Finance Content"></h:outputText></p:panel><p:panel id="Sports" header="Sports" closable="true" toggleable="true"><h:outputText value="Sports Content"></h:outputText></p:panel><p:panel id="News" header="News" closable="true" toggleable="true"><h:outputText value="News Content"></h:outputText></p:panel></p:dashboard></h:form></div></h:body>
</html>

package com.journaldev.primefaces.beans;import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;import org.primefaces.model.DashboardColumn;
import org.primefaces.model.DashboardModel;
import org.primefaces.model.DefaultDashboardColumn;
import org.primefaces.model.DefaultDashboardModel;@ManagedBean
@SessionScoped
public class DashboardManagedBean {private DashboardModel model;public DashboardManagedBean(){// Initialize the dashboard modelthis.model = new DefaultDashboardModel();// Initialize the dashboard column #1DashboardColumn column1 = new DefaultDashboardColumn();// Initialize the dashboard column #2DashboardColumn column2 = new DefaultDashboardColumn();// Initialize the dashboard column #3DashboardColumn column3 = new DefaultDashboardColumn();// Add widget into column1column1.addWidget("Sports");// Add widget into column2column2.addWidget("Finance");// Add widget into column3column3.addWidget("News");     // Add columns into your modelthis.model.addColumn(column1);this.model.addColumn(column2);this.model.addColumn(column3);}public DashboardModel getModel() {return model;}public void setModel(DashboardModel model) {this.model = model;}
}

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.

正如您在前面的代码片段中所注意到的；您通常已将仪表板定义到与托管Bean中的模型相关联的页面中。您可以将任意数量的列添加到仪表板中。您添加的列可以保留小部件 ，这些小部件代表普通的<p：panel />组件，您可以在仪表板内部或外部定义它们，然后可以使用column.addWidget（）（接受面板名称）。下面看一个使用仪表板组件的非常简单的示例。

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仪表板– Ajax行为事件 (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.

仪表板为开发人员提供了一个且仅一个ajax事件，对仪表板面板进行重新排序时会触发此事件。通过传递包含有关重排序信息的org.primefaces.event.DashboardReorderEvent实例，将调用已定义的侦听器。

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.

我们已经引入了ajax事件概念，并且为了正确使用，您必须为仪表板组件提供p：ajax 。 p：ajax具有两个主要属性，一个属性用于触发ajax的事件类型，第二个属性是用于处理触发操作的侦听器。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="https://www.w3.org/1999/xhtml"xmlns:ui="https://java.sun.com/jsf/facelets"xmlns:h="https://java.sun.com/jsf/html"xmlns:f="https://java.sun.com/jsf/core"xmlns:p="https://primefaces.org/ui"><h:head><title>Dashboard</title><script name="jquery/jquery.js" library="primefaces"></script></h:head><h:body><div style="height:500px"><h:form><p:growl id="msgs" showDetail="true" /><p:dashboard id="board" model="#{dashboardManagedBean.model}"><p:ajax event="reorder" listener="#{dashboardManagedBean.handleReorder}" update="msgs" /><p:panel id="Finance" header="Finance" closable="true" toggleable="true"><h:outputText value="Finance Content"></h:outputText></p:panel><p:panel id="Sports" header="Sports" closable="true" toggleable="true"><h:outputText value="Sports Content"></h:outputText></p:panel><p:panel id="News" header="News" closable="true" toggleable="true"><h:outputText value="News Content"></h:outputText></p:panel><p:panel id="Cooking" header="Cooking" closable="true" toggleable="true"><h:outputText value="Cooking Content"></h:outputText></p:panel><p:panel id="Technology" header="Technology" closable="true" toggleable="true"><h:outputText value="Technology Content"></h:outputText></p:panel></p:dashboard></h:form></div></h:body>
</html>

package com.journaldev.primefaces.beans;import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;import org.primefaces.event.DashboardReorderEvent;
import org.primefaces.model.DashboardColumn;
import org.primefaces.model.DashboardModel;
import org.primefaces.model.DefaultDashboardColumn;
import org.primefaces.model.DefaultDashboardModel;@ManagedBean
@SessionScoped
public class DashboardManagedBean {private DashboardModel model;public DashboardManagedBean() {// Initialize the dashboard modelthis.model = new DefaultDashboardModel();// Initialize the dashboard column #1DashboardColumn column1 = new DefaultDashboardColumn();// Initialize the dashboard column #2DashboardColumn column2 = new DefaultDashboardColumn();// Initialize the dashboard column #3DashboardColumn column3 = new DefaultDashboardColumn();// Add widgets into column1column1.addWidget("Sports");column1.addWidget("Technology");// Add widgets into column2column2.addWidget("Finance");column2.addWidget("Cooking");// Add widget into column3column3.addWidget("News");// Add columns into your modelthis.model.addColumn(column1);this.model.addColumn(column2);this.model.addColumn(column3);}public DashboardModel getModel() {return model;}public void setModel(DashboardModel model) {this.model = model;}public void handleReorder(DashboardReorderEvent event) {FacesMessage message = new FacesMessage();message.setSeverity(FacesMessage.SEVERITY_INFO);message.setSummary("Reordered: " + event.getWidgetId());message.setDetail("Item index: " + event.getItemIndex()+ ", Column index: " + event.getColumnIndex()+ ", Sender index: " + event.getSenderColumnIndex());addMessage(message);}private void addMessage(FacesMessage message) {FacesContext.getCurrentInstance().addMessage(null, message);}}

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仪表板–添加新的小部件 (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.

通过在仪表板上添加外部面板，也可以将新的小部件添加到仪表板上。这是通过使用<p：draggable />组件 （用于确定要拖动的组件）和用于保留所拖动的组件的组件来实现的。

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.

现在，您可能会问，即使被拖动的面板仍被拖动到仪表板中，为什么仍然在外部保留该面板。这里最大的答案是您在具有克隆值的可拖动组件中提供的help属性。克隆值表示已拖动要拖动的面板以完成拖动操作。您可能会询问此处显示的消息，以通知您有关拖动操作的信息。消息组件将在以后的单独教程中进行讨论。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="https://www.w3.org/1999/xhtml"xmlns:ui="https://java.sun.com/jsf/facelets"xmlns:h="https://java.sun.com/jsf/html"xmlns:f="https://java.sun.com/jsf/core"xmlns:p="https://primefaces.org/ui"><h:head><title>Dashboard</title><script name="jquery/jquery.js" library="primefaces"></script></h:head><h:body><div style="height:500px"><h:form><p:growl id="msgs" showDetail="true" /><h:panelGrid columns="2"><p:dashboard id="board" model="#{dashboardManagedBean.model}"><p:ajax event="reorder" listener="#{dashboardManagedBean.handleReorder}" update="msgs" /><p:panel id="Finance" header="Finance" closable="true" toggleable="true"><h:outputText value="Finance Content"></h:outputText></p:panel><p:panel id="Sports" header="Sports" closable="true" toggleable="true"><h:outputText value="Sports Content"></h:outputText></p:panel><p:panel id="News" header="News" closable="true" toggleable="true"><h:outputText value="News Content"></h:outputText></p:panel><p:panel id="Cooking" header="Cooking" closable="true" toggleable="true"><h:outputText value="Cooking Content"></h:outputText></p:panel><p:panel id="Technology" header="Technology" closable="true" toggleable="true"><h:outputText value="Technology Content"></h:outputText></p:panel></p:dashboard><p:panel id="draggable"><h:outputLabel value="Drag Panel Into Your Dashboard"></h:outputLabel></p:panel><p:draggable for="draggable" helper="clone" dashboard="board"></p:draggable></h:panelGrid></h:form></div></h:body>
</html>

package com.journaldev.primefaces.beans;import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;import org.primefaces.event.DashboardReorderEvent;
import org.primefaces.model.DashboardColumn;
import org.primefaces.model.DashboardModel;
import org.primefaces.model.DefaultDashboardColumn;
import org.primefaces.model.DefaultDashboardModel;@ManagedBean
@SessionScoped
public class DashboardManagedBean {private DashboardModel model;public DashboardManagedBean() {// Initialize the dashboard modelthis.model = new DefaultDashboardModel();// Initialize the dashboard column #1DashboardColumn column1 = new DefaultDashboardColumn();// Initialize the dashboard column #2DashboardColumn column2 = new DefaultDashboardColumn();// Initialize the dashboard column #3DashboardColumn column3 = new DefaultDashboardColumn();// Add widgets into column1column1.addWidget("Sports");column1.addWidget("Technology");// Add widgets into column2column2.addWidget("Finance");column2.addWidget("Cooking");// Add widget into column3column3.addWidget("News");// Add columns into your modelthis.model.addColumn(column1);this.model.addColumn(column2);this.model.addColumn(column3);}public DashboardModel getModel() {return model;}public void setModel(DashboardModel model) {this.model = model;}public void handleReorder(DashboardReorderEvent event) {FacesMessage message = new FacesMessage();message.setSeverity(FacesMessage.SEVERITY_INFO);message.setSummary("Reordered: " + event.getWidgetId());message.setDetail("Item index: " + event.getItemIndex()+ ", Column index: " + event.getColumnIndex()+ ", Sender index: " + event.getSenderColumnIndex());addMessage(message);}private void addMessage(FacesMessage message) {FacesContext.getCurrentInstance().addMessage(null, message);}
}

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仪表板摘要 (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.

本教程旨在为您提供有关如何使用Dashboard组件以及仪表板组件能够提供哪些功能的完整说明。您可以从下面的链接下载示例项目，然后尝试使用其他属性来了解更多信息。

Download PrimeFaces Dashboard Project下载PrimeFaces仪表板项目

翻译自: https://www.journaldev.com/3084/primefaces-dashboard-component-example-tutorial

primefaces教程