p:仪表板关闭后保持排序顺序

时间:2017-11-07 17:48:18

标签: jsf primefaces jsf-2

我想使用这个primefaces仪表板 https://www.primefaces.org/showcase/ui/panel/dashboard.xhtml

dashboard.xhtml

<div style="height:500px">
    <h:form>
        <p:growl id="msgs" showDetail="true" />

        <p:dashboard id="board" model="#{dashboardView.model}">
            <p:ajax event="reorder" listener="#{dashboardView.handleReorder}" update="msgs" />

            <p:panel id="sports" header="Sports">
                <h:outputText value="Sports Content" />
            </p:panel>

            <p:panel id="finance" header="Finance">
                <h:outputText value="Finance Content" />
            </p:panel>

            <p:panel id="lifestyle" header="Lifestyle">
                <h:outputText value="Lifestyle Content"  />
            </p:panel>

            <p:panel id="weather" header="Weather">
                <h:outputText value="Weather Content" />
            </p:panel>

            <p:panel id="politics" header="Politics">
                <h:outputText value="Politics Content" />
            </p:panel>
        </p:dashboard>

        <div style="clear:both" />
    </h:form>
</div>

DashBoardView.java

package org.primefaces.showcase.view.panel;

import java.io.Serializable;
import javax.annotation.PostConstruct;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.context.FacesContext;

import org.primefaces.event.CloseEvent;
import org.primefaces.event.DashboardReorderEvent;
import org.primefaces.event.ToggleEvent;
import org.primefaces.model.DashboardColumn;
import org.primefaces.model.DashboardModel;
import org.primefaces.model.DefaultDashboardColumn;
import org.primefaces.model.DefaultDashboardModel;

@ManagedBean
@ViewScoped
public class DashboardView implements Serializable {

    private DashboardModel model;

    @PostConstruct
    public void init() {
        model = new DefaultDashboardModel();
        DashboardColumn column1 = new DefaultDashboardColumn();
        DashboardColumn column2 = new DefaultDashboardColumn();
        DashboardColumn column3 = new DefaultDashboardColumn();

        column1.addWidget("sports");
        column1.addWidget("finance");

        column2.addWidget("lifestyle");
        column2.addWidget("weather");

        column3.addWidget("politics");

        model.addColumn(column1);
        model.addColumn(column2);
        model.addColumn(column3);
    }

    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);
    }

    public void handleClose(CloseEvent event) {
        FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Panel Closed", "Closed panel id:'" + event.getComponent().getId() + "'");

        addMessage(message);
    }

    public void handleToggle(ToggleEvent event) {
        FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, event.getComponent().getId() + " toggled", "Status:" + event.getVisibility().name());

        addMessage(message);
    }

    private void addMessage(FacesMessage message) {
        FacesContext.getCurrentInstance().addMessage(null, message);
    }

    public DashboardModel getModel() {
        return model;
    }
}

enter image description here

这是非常酷的功能。

我做了一些拖放

enter image description here

并关闭浏览器的标签并再次打开它然后全部变为默认值。

enter image description here

我需要以某种方式保持这个顺序。

可能以某种方式或任何其他方式使用cookie。有可能,如果是的话怎么做?

重要的是应该为每个用户保存小部件的顺序。我的意思是两个选项之一

  1. 每个记录的用户都可以在每个设备中看到此订单
  2. 无需登录浏览器,但在打开新浏览器时,默认情况下应该是订单。或者其他一些用户打开该订单应该是默认的。

1 个答案:

答案 0 :(得分:2)

肯定不是最佳解决方案,而是解决方案:

我想我会将handleReorder(DashboardReorderEvent事件)中的事件保存在数据库或文件中。并在postconstruct init中加载订单。你觉得怎么样?

编辑就像在评论中写的那样,我无法为这个事件序列化事件。

我的第二次尝试是这样的:

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);

        serializeEvent(event);
    }

serializeEvent方法没有序列化事件,因为这对我来说是失败的,但是它使用必要的信息序列化了一个Object。

private void serializeEvent(DashboardReorderEvent event) {
        String userName = userBean.getUserName();
        StackoverflowObject e = new StackoverflowObject(event);
        try {
            FileOutputStream fileOut =
            new FileOutputStream("c:/tmp/events"+userName+".txt");
            ObjectOutputStream out = new ObjectOutputStream(fileOut);
            out.writeObject(e);
            //out.writeObject(event.getWidgetId()+";"+  event.getItemIndex()+";"+ event.getColumnIndex());
            out.close();
            fileOut.close();

         } catch (Exception i) {
            i.printStackTrace();
         }
    }

在postconstruct init中,您读取序列化对象并决定放置窗口小部件的位置。这将向您展示这个想法(现在是将近上午1点,所以我只是向您展示)

@PostConstruct
    public void init() {
        model = new DefaultDashboardModel();
        DashboardColumn column1 = new DefaultDashboardColumn();
        DashboardColumn column2 = new DefaultDashboardColumn();
        DashboardColumn column3 = new DefaultDashboardColumn();
        StackoverflowObject e =   deserializeEvent("politics");

        if (e != null &&"politics".equalsIgnoreCase(e.getWidgetId()) && e.getColumnId() == 0){
            column1.addWidget("politics");
        } else   if (e != null &&"politics".equalsIgnoreCase(e.getWidgetId()) && e.getColumnId() == 1){
            column2.addWidget("politics");
        }
        else{
            column3.addWidget("politics");
        }

..对所有其他小部件执行相同操作

现在您还有一个问题是每个用户都这样做。方法deserializeEvent确定用户并为该用户读取正确的文件。

如果您问自己如何吸引用户。在大多数情况下像这样

FacesContext.getCurrentInstance().getExternalContext().getRemoteUser()

如果您的示例中有loginbean,则可以从userBean获取。

编辑stackoverflowObject看起来像这样

public class StackoverflowObject implements Serializable{


/**
 * 
 */
private static final long serialVersionUID = -4921468076398836905L;
private String widgetId;
private int columnId;
private int itenId;
public StackoverflowObject(DashboardReorderEvent event) {
    this.setWidgetId(event.getWidgetId());
    this.setColumnId(event.getColumnIndex());
    this.setItenId(event.getItemIndex());
}

// + getter and setter