Primefaces仪表板组件示例教程
时间：2020-02-23 14:41:38 来源:igfitidea点击:
如前所述，Primefaces是领先的库之一，它为您提供了一套令人惊叹的UI控件，使您无需开发任何可能需要的组件。
本教程旨在涵盖Dashboard组件，Primefaces AccordionPanel教程中已经提供了有关创建maven Primefaces项目的一些基本细节。
Primefaces仪表板为您提供门户式布局，并具有基于拖放的重新排序功能。
让我们看一下有助于您了解仪表板组件的基本信息和属性。
Primefaces仪表板
| 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仪表板属性
| 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 |
Primefaces仪表板入门
仪表板由DashboardModel支持，由面板组件组成。
仪表板模型仅定义列数以及要放置在每列中的小部件。
让我们找出您可能会使用仪表板组件开发的最简单的示例。
我们假设您熟悉创建Maven项目以准备开始开发Primefaces组件的所有必需步骤，这些步骤可以通过创建项目本身或者通过使用所需的依赖项和XML配置进行配置来进行。
如果您到目前为止还没有这些做法，建议您在阅读"手风琴面板示例"或者" Primefaces教程"时查看这些做法。
完成创建步骤后，Eclipse IDE中的项目结构将如下所示
我们添加了两个附加文件，分别是表示JSF/Primefaces视图的index.xhtml和表示将保留所需业务的类的DashboardManagedBean。
开发简单的Primefaces仪表板示例
为了正确使用仪表板组件，您必须将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.theitroad.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 model
this.model = new DefaultDashboardModel();
//Initialize the dashboard column #1
DashboardColumn column1 = new DefaultDashboardColumn();
//Initialize the dashboard column #2
DashboardColumn column2 = new DefaultDashboardColumn();
//Initialize the dashboard column #3
DashboardColumn column3 = new DefaultDashboardColumn();
//Add widget into column1
column1.addWidget("Sports");
//Add widget into column2
column2.addWidget("Finance");
//Add widget into column3
column3.addWidget("News");
//Add columns into your model
this.model.addColumn(column1);
this.model.addColumn(column2);
this.model.addColumn(column3);
}
public DashboardModel getModel() {
return model;
}
public void setModel(DashboardModel model) {
this.model = model;
}
}
正如您在前面的代码片段中所注意到的那样；您通常已将仪表板定义到与托管Bean中的模型相关联的页面中。
您可以将任意数量的列添加到仪表板中。
您添加的列可以保留小部件，这些小部件代表普通的<p：panel 组件，您可以在仪表板内部或者外部定义它们，然后可以使用column.addWidget( )(接受面板名称)。
下面看一个使用仪表板组件的非常简单的示例。
如果深入研究，您必须发现仪表板组件已定义了三列，这些定义的列中的每一个都其中保留了一个小部件。
确实，那些定义的窗口小部件仅是面板组件。
Primefaces仪表板– Ajax行为事件
仪表板为开发人员提供了一个且仅一个ajax事件，当对仪表板面板进行重新排序时会触发此事件。
定义的侦听器将通过传递包含有关重排信息的org.primefaces.event.DashboardReorderEvent实例来调用。
我们已经引入了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.theitroad.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 model
this.model = new DefaultDashboardModel();
//Initialize the dashboard column #1
DashboardColumn column1 = new DefaultDashboardColumn();
//Initialize the dashboard column #2
DashboardColumn column2 = new DefaultDashboardColumn();
//Initialize the dashboard column #3
DashboardColumn column3 = new DefaultDashboardColumn();
//Add widgets into column1
column1.addWidget("Sports");
column1.addWidget("Technology");
//Add widgets into column2
column2.addWidget("Finance");
column2.addWidget("Cooking");
//Add widget into column3
column3.addWidget("News");
//Add columns into your model
this.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);
}
}
要对某个面板进行重新排序，只需要做的就是拖动面板并将其放到所需的列中。
重新排序的事件已触发，并且关联的侦听器将被调用。
侦听器找出重新排序的项目的索引，保留列索引和发送者列索引，因为一条消息将显示列出的所有此信息。
另外，就像您在上面注意到的那样，所有面板都是可关闭和可切换的。
这些属性是使用面板组件的可关闭和可切换属性来配置的。
Primefaces仪表板–添加新的小部件
通过向仪表板添加外部面板，也可以将新的小部件添加到仪表板中。
这是通过使用<p：draggable 组件来实现的，该组件用于确定要拖动的组件和用于保留被拖动的组件的组件。
现在，您可能会问，即使拖动的面板仍拖到仪表板中，为什么仍然在外部保留了它。
这里最大的答案是您在具有克隆价值的可拖动组件处提供的帮助属性。
克隆值表示已拖动要拖动的面板以完成拖动操作。
您可能会询问此处显示的消息，以通知您有关拖动操作的信息。
消息组件将在以后的单独教程中进行讨论。
<!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.theitroad.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 model
this.model = new DefaultDashboardModel();
//Initialize the dashboard column #1
DashboardColumn column1 = new DefaultDashboardColumn();
//Initialize the dashboard column #2
DashboardColumn column2 = new DefaultDashboardColumn();
//Initialize the dashboard column #3
DashboardColumn column3 = new DefaultDashboardColumn();
//Add widgets into column1
column1.addWidget("Sports");
column1.addWidget("Technology");
//Add widgets into column2
column2.addWidget("Finance");
column2.addWidget("Cooking");
//Add widget into column3
column3.addWidget("News");
//Add columns into your model
this.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);
}
}
如果您已经关闭了小部件(面板)并希望将它们重新加载到页面中，则可以通过刷新页面或者将它们从外部面板再次拖动到仪表板中来重新加载它们。
