问题p：仪表板模型动态更新 [英] Problem with p:dashboard model dynamically update
问题描述
我正在尝试开发一个特定的仪表板。我想创建一个初始的空仪表板，并用元素动态填充它。
I'm trying to develop a particular Dashboard. I want to create an initial empty dashboard, and dynamically fill it with elements.
首先，我创建一个空的仪表板：
XHTML --->
First of all, I create an empty dashboard: XHTML --->
<p:dashboard id="dash" model ="#{homeReceptionDashboardBck.model}">
<c:forEach
items="#{homeReceptionDashboardBck.widgets}"
var="widgetsElement">
<p:panel id = "widgetsElement.idWidget" header="widgetsElement.name">
<c:forEach
items="#{homeReceptionDashboardBck.uploadBooking(widgetsElement)"
var="bookings">
<h:outputText value="#{booking.owner.ragioneSociale}">
</h:outputText>
</c:forEach>
</p:panel>
</c:forEach>
</p:dashboard>
这是我用来通过 。
- fist foreach用于验证用户插入到MODEL中的窗口小部件数量
- 第二个foreach to popolate每个面板都有不同的元素称为预订。
我创建了一个在应用程序启动时加载的空模型：
I create an empty model that is loaded ad the application startup :
for(i = 0;i<officesList.size();i++) {
DashboardColumn columnTmp = new DefaultDashboardColumn();
model.addColumn(columnTmp);
columnDashboard.add(columnTmp);
List<MeetingRoom> tempMeetingRoom = new ArrayList<>();
tempMeetingRoom = meetingmr.getAllByOffice(
officesList.get(i).getId(),
true,
JSFUtil.getActiveUser());
for(x = 0;x<tempMeetingRoom.size();x++)
{
//popolo la lista che mi serve all'inizio per la lista dei Panel da inserire
meetingRoomByOffice.add(tempMeetingRoom.get(x));
}
officePositionAndColumn[i][0] = (int) (long) officesList.get(i).getId();
officePositionAndColumn[i][1] = i;
}
在这部分代码中，我正在做一个很多东西，但重要的是创建并添加一个新的空列。我创建了一个在Java代码中使用的DashboardColumn列表，名为 columnDashboard 。
In this part of the code, I'm doing a lot of things but the important one is "create" and add a new empty column. I create a List of DashboardColumn to use inside the java code, called columnDashboard.
I创建一个特定的菜单，在模型中添加一个小部件：
XHTML --->
I create a particular menu to add a widget inside the model : XHTML --->
<smifn:actionsMenu id="tableAddMeetingRoom" styleClass="col-xs-8 col-md-12 text-right"
title="#{msg['booking.add_meeting_room']}">
<c:forEach items="#{homeReceptionDashboardBck.meetingRoomByOffice}"
var="meetingRoomElement">
<p:menuitem id="#{homeReceptionDashboardBck.getMenuItemId(meetingRoomElement)}"
actionListener="#{homeReceptionDashboardBck.onAddPanel(meetingRoomElement)}"
process="@this" partialSubmit="true"
value="#{meetingRoomElement.name}"
icon="icon-add-3"
iconPos="left"
>
<p:ajax process="widgetBookingReception" update="widgetBookingReception"/>
</p:menuitem> <!-- oncomplete="PF('bookingSelect').show()"-->
</c:forEach>
</smifn:actionsMenu>
当有人决定添加Widget时，我使用方法 onAddPanel修改模型
When someone decide to add a Widget, I modify the model with the method onAddPanel
JAVA ---->
JAVA ---->
public void onAddPanel(MeetingRoom panelSelected) {
int i;
//splitto il nome per creare l'id
String [] nameMeetingRoom = panelSelected.getName().split(" ");
String idWidget = nameMeetingRoom[0]+"_"+nameMeetingRoom[1];
//oggetto di tipo DashboardWidget
DashboardWidget tmp = new DashboardWidget();
//imposto l'id, nome della stanza e l'ufficio relativo
tmp.setIdWidget(idWidget);
tmp.setName(panelSelected.getName());
tmp.setOffice(panelSelected.getOffice());
//aggiungo alla lista dei widget l'oggetto relativo
widgets.add(tmp);
//stringa per la posizione della colonna
int columnPosition = -1;
//faccio un for per passare tutte le colonne relative
for(i = 0;i<officePositionAndColumn.length;i++)
{
//se l'id che era stato impostato è uguale a quello passato
if(officePositionAndColumn[i] [0] == panelSelected.getOffice().getId())
//posizione della colonna che va da 0 a n.
columnPosition = officePositionAndColumn[i][1];
}
//se è stato trovata la posizione della colonna
if(columnPosition>=0) {
//mi ricavo la colonna
DashboardColumn columnSelected = new DefaultDashboardColumn();
columnSelected = columnDashboard.get(columnPosition);
//imposto l'id al widget
columnSelected.addWidget(idWidget);
//sovrascrivo la colonna con quella modificata
columnDashboard.set(columnPosition, columnSelected);
//reimposto il modello e ricarico le colonne
setModel(new DefaultDashboardModel());
for(i = 0;i<columnDashboard.size();i++)
{
this.model.addColumn(columnDashboard.get(i));
}
for(i = 0;i<meetingRoomByOffice.size();i++)
{
if(meetingRoomByOffice.get(i).equals(panelSelected))
{
meetingRoomByOffice.remove(i);
}
}}
我已经验证了这种方法，但我可以' t可视化结果。
如何更新仪表板的型号？
我已经尝试过了，但我认为这不行;（
I already verify this method, but I can't visualize the result. How can i UPDATE the model of the Dashboard? I already try this, but I think that this shouldn't work ;(
public void createDashboardDinamically（）{
public void createDashboardDinamically() {
int i;
FacesContext fc = FacesContext.getCurrentInstance();
Application app = fc.getApplication();
dashboard = (Dashboard) app.createComponent(
fc,
"org.primefaces.component.Dashboard",
"org.primefaces.component.DashboardRenderer");
dashboard.setId("dash");
dashboard.setModel(model);
Panel panel1 = (Panel) app.createComponent(
fc,
"org.primefaces.component.Panel",
"org.primefaces.component.PanelRenderer");
panel1.setId("Sala_Demo");
panel1.setToggleable(true);
panel1.setClosable(true);
panel1.setHeader("Sala Demo");
for(i = 0;i<widgets.size();i++)
{
Panel panel = (Panel) app.createComponent(
fc,
"org.primefaces.component.Panel",
"org.primefaces.component.PanelRenderer");
panel.setId(widgets.get(i).getIdWidget());
panel.setToggleable(true);
panel.setClosable(true);
panel.setHeader(widgets.get(i).getName());
getDashboard().getChildren().add(panel);
}
有人能帮帮我吗？如果它工作，我将分享整个代码，以驱动PrimeFaces仪表板。非常感谢，我被困住了:(
Can somebody help me? If it works, I'll share the entire code to dinamically popolate a PrimeFaces Dashboard. Thanks a lot guys, i'm stuck :(
推荐答案
我找到了这个解决方案：
I found this solution :
这是一个例子，任何人都会发现我在创建 动态仪表板 时遇到的相同难度（一切都是动态的）。
this is an example for anyone who will find the same difficulty that I met in the creation of a Dynamic Dashboard (everything is dynamic).
项目是： 显示一个空的仪表板，用户将可视化右侧的菜单 FORM 与al ist of Meeting Room avaiable 。
点击一个会议室后，模型将更新并且面板在右栏中可视化（预先指定了其ID）。
我动态分配每个ID，列数，面板数和每个面板内可视化元素数。
The project is : Display an empty dashboard, the user will visualize a menu in the right side of the FORM with a list of Meeting Room avaiable. After the click of one Meeting Room, the model will be update and the panel visualized in the right column (pre - assigned with its ID). I assign dynamically every ID, numer of column, number of panel and number of element visualized inside each panel.
首先，设想 Ja带空列的va DashboardModel ：
First of all, popolate a Java DashboardModel with empty column :
private DashboardModel model;
private List<DashboardColumn> dashboardColumn;
DashboardColumn columnTmp = new DefaultDashboardColumn();
model.addColumn(columnTmp);
columnDashboard.add(columnTmp);
逻辑上你必须创建 getter 和模型的 setter 。
我创建了一个DashboardColumn列表，以便轻松管理每一列。
Logically you have to create getter and setter for the model. I create a List of DashboardColumn for an easy management of each column.
Popolate一个名为meetingRoomByOffice的meetingRoom对象列表。
此列表对 actionMenu 是必要的，以便在菜单中创建动态元素。
Popolate a list of meetingRoom object called meetingRoomByOffice. This list will be necessary to the actionMenu to create dynamic element inside the menu.
for(x = 0;x<tempMeetingRoom.size();x++)
{
meetingRoomByOffice.add(tempMeetingRoom.get(x));
}
我popolate一个二维数组来保存每列的ID（column1 = 1办公室ID）与列表中的实际位置（ID：450 - 列表内的位置0等）
I popolate a bidimensional Array to save the ID of each column ( column1 = 1 office ID) with the real position inside the list (ID : 450 - position inside the list 0 etc)
for(i = 0;i<officesList.size();i++) {
officePositionAndColumn[i][0] = (int) (long) officesList.get(i).getId();
officePositionAndColumn[i][1] = i;
}
在此之后，创建 元素内部 XHTML
第一个是actionMenu
After this, create the element inside the XHTML The first one is the actionMenu
注意
我有一个个性化的，没有特别的修改
<smifn:actionsMenu id="tableAddMeetingRoom" styleClass="col-xs-8 col-md-12 text-right"
onclick="@this.update()"
title="#{msg['booking.add_meeting_room']}">
<c:forEach items="#{homeReceptionDashboardBck.meetingRoomByOffice}" var="meetingRoomElement">
<p:menuitem id="#{homeReceptionDashboardBck.getMenuItemId(meetingRoomElement)}"
action="#{homeReceptionDashboardBck.onAddPanel(meetingRoomElement)}"
process="@this"
value="#{meetingRoomElement.name}"
icon="icon-add-3"
iconPos="left"
update ="widgetBookingReception">
</p:menuitem> <!-- oncomplete="PF('bookingSelect').show()"-->
</c:forEach>
</smifn:actionsMenu>
- 第一个foreach --->获取元素列表并浏览它们一个接一个地使用meetingRoomElement的名称
- 为了获取ID，我做了一个特定的方法调用getMenuItemId，它生成一个具有会议室名称的ID，已经拆分。这样的事情：姓名：Sala Demo - > ID：Sala__Demo
- 动作调用主要方法修改模型，我将在此列表后解释。
-
update =widgetBookingReception>更新整个表格非常重要
- First foreach ---> get a List of element and browse them one by one with the "name" of meetingRoomElement
- To get the ID, I have done a particular method call getMenuItemId that generate an ID with the name of the meeting room, splitted. Something like this : Name : Sala Demo --> ID : Sala__Demo
- action call the main method to modify the model, I'll explain it after this list.
update ="widgetBookingReception">is important to update the entire FORM
方法onAddPanel
Method onAddPanel
我有一个包含两个主要对象的特殊类：
I have a special class with two main object :
- idWidget 它是一个字符串
- meetingRoom 它是一个对象MeetingRoom
- idWidget that it is a string
- meetingRoom that it is an object MeetingRoom
首先，我用一个下划线创建ID
First of all, I create the ID with one underscore
String [] nameMeetingRoom = panelSelected.getName().split(" ");
String idWidget = nameMeetingRoom[0]+"_"+nameMeetingRoom[1];
创建并添加到TMP对象中，之后在列表中插入widget窗口小部件由用户插入模型中。这对于避免丢失小部件很重要。
Create, and add it into a TMP object, after that insert the "widget" inside a list of widget insert in the model by the user. This is important to avoid lost widgets.
DashboardWidget tmp = new DashboardWidget();
tmp.setIdWidget(idWidget);
tmp.setName(panelSelected.getName());
tmp.setOffice(panelSelected.getOffice());
widgets.add(tmp);
现在我将在列表中找到位置，更新模型并在菜单中更新listOfMeetingRoom 。
Now i'll find the position inside the list, update the model and the listOfMeetingRoom avaible inside the menu.
for(i = 0;i<officePositionAndColumn.length;i++)
{
//se l'id che era stato impostato è uguale a quello passato
if(officePositionAndColumn[i] [0] == panelSelected.getOffice().getId())
//posizione della colonna che va da 0 a n.
columnPosition = officePositionAndColumn[i][1];
}
//se è stato trovata la posizione della colonna
if(columnPosition>=0) {
//mi ricavo la colonna
DashboardColumn columnSelected = new DefaultDashboardColumn();
columnSelected = columnDashboard.get(columnPosition);
//imposto l'id al widget
columnSelected.addWidget(idWidget);
//sovrascrivo la colonna con quella modificata
columnDashboard.set(columnPosition, columnSelected);
//reimposto il modello e ricarico le colonne
setModel(new DefaultDashboardModel());
for(i = 0;i<columnDashboard.size();i++)
{
this.model.addColumn(columnDashboard.get(i));
}
for(i = 0;i<meetingRoomByOffice.size();i++)
{
if(meetingRoomByOffice.get(i).equals(panelSelected))
{
meetingRoomByOffice.remove(i);
}
}
这是我更新整个模型的方法。
但是现在 我们必须将它更新 到XHTML中。
This is how I update the entire model. But now we have to update it into the XHTML.
我创建了一个完整的动态仪表板，这是代码：
I create a full dynamic dashboard, this is the code :
<p:dashboard widgetVar="dash" model ="#{homeReceptionDashboardBck.model}">
<c:when test="not empty #{homeReceptionDashboardBck.widgets}">
<c:forEach items="#{homeReceptionDashboardBck.widgets}" var="Element">
<p:panel id="#{Element.idWidget}" header="#{Element.name}">
<c:when test="not empty #{homeReceptionDashboardBck.uploadBooking(Element)}">
<c:forEach items="#{homeReceptionDashboardBck.uploadBooking(Element)}" var="row">
<h:outputText value="#{homeReceptionDashboardBck.getEventGeneralInfo(row)}"> </h:outputText>
<h:outputText> <br/></h:outputText>
</c:forEach>
</c:when>
<c:otherwise>
<c:when test="#{homeReceptionDashboardBck.uploadBooking(Element)}">
<h:outputText value="Nessun evento prenotato"> </h:outputText>
<h:outputText> <br/></h:outputText>
</c:when>
</c:otherwise>
</p:panel>
</c:forEach>
</c:when>
</p:dashboard>
小心，在foreach内部你不能传递null List或空List。我使用 WHEN 来防止这种情况发生。
Be careful, inside the foreach you can't pass null List or empty List. I use WHEN to prevent that.
如果您有任何疑问，我很乐意回答并分享部分代码。
很快见到你：D
If you have any question, I'm happy to answer and share part of my code. See you soon :D
这篇关于问题p：仪表板模型动态更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
