如何滑动和刷新 Primefaces 图表

Question

我真的有麻烦了！

我需要一些绝妙的主意来获得一个 jsf 页面，其中 7 个图表每 20 秒一个接一个地滑动，我需要这些图表是每 30 秒刷新一次。

我尝试了一些解决方案但效果不佳：

1.Slideshow + 投票

<h:form>
    <div align="center">
        <p:panel id="chartcontainer" style="border: none;">
            <p:imageSwitch style="width: 100%" 
                               id="slider" 
                               widgetVar="chartSlideShow" 
                               effect="turnDown" 
                               slideshowSpeed="5000">
                <ui:include src="/charts/chart1.xhtml"/>
                <ui:include src="/charts/chart2.xhtml"/>
                <ui:include src="/charts/chart3.xhtml"/>
                <ui:include src="/charts/chart4.xhtml"/>
                <ui:include src="/charts/chart5.xhtml"/>
                <ui:include src="/charts/chart6.xhtml"/>
                <ui:include src="/charts/chart7.xhtml"/>
            </p:imageSwitch>
        </p:panel>
        <p:poll widgetVar="pollWidget" 
                           update="@form"
                           interval="30"
                           oncomplete="PF('btnPlayWidget').disable();"/>
    </div>   
</h:form>

此解决方案的问题是幻灯片放映和投票不同步，因此当我观看图表 3 时，例如执行投票时，我不希望更改和幻灯片从第一个图表重新开始。这真的很烦人！

2.Poll 本身

<h:form>
    <div align='center'>
        <p:panel id="chartcontainer" style="border: none;">
            <ui:include src="#{slideView.slide}"/>  
        </p:panel>
        <p:poll widgetVar="pollWidget"
            update="@form"
            interval="20" 
            listener="#{slideView.next()}"
            oncomplete="PF('btnPlayWidget').disable();"/>
    </div>
</h:form>

这是我的 slideView 的 bean：

package com.tvop.beans;

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

@ManagedBean
@ViewScoped
public class SlideView implements Serializable {
    private int index = 0;
    String slide = "/charts/chart1.xhtml";

    private final String[] slides = new String[] {
        "/charts/chart1.xhtml",
        "/charts/chart2.xhtml",
        "/charts/chart3.xhtml",
        "/charts/chart4.xhtml",
        "/charts/chart5.xhtml",
        "/charts/chart6.xhtml",
        "/charts/chart7.xhtml"
    };

    public String getSlide() {
        return slide;
    }

    public void setSlide(String slide) {
        this.slide = slide;
    }

    public String next() {
        index %= slides.length;
        this.slide = slides[index];
        index++;
        return slide;
    }
}

此解决方案运行或多或少，但轮询的时间间隔不准确，尤其是在页面加载开始时。第一个和第二个图表之间的第一次变化发生在 30/35 秒之后，而不是 20 秒，如民意测验的间隔中设置的那样。

我真的需要一些好主意，我不想被解雇。

谢谢所有的朋友！

Answer 1

已解决！

解决方法是自己使用poll组件；每 20 秒更新一次投票，它模拟 imageSwitch 的行为！修改 java bean 使其工作也很重要。

解决方法如下：

xhtml 投票：

<div align='center'>
  <p:panel id="chartcontainer" style="border: none;">
    <p:panel style="border: 0px">
      <ui:include src="#{slideView.slide}" />
    </p:panel>
  </p:panel>
  <p:poll widgetVar="pollWidget"
          update="chartcontainer"
          interval="20" 
          listener="#{slideView.next()}"
          oncomplete="PF('btnPlayWidget').disable();"/>
</div>

slideview bean：

package com.tvop.beans;

import com.tvop.exceptions.DMLException;
import com.tvop.persistence.TkResourceJPA;
import com.tvop.persistence.dbentities.TkResource;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.context.ExternalContext;
import javax.faces.context.FacesContext;

@ManagedBean
@ViewScoped
public class SlideView implements Serializable {
private SessionManager sessionManager = null;
private List<TkResource> resources;

private int index;
private String slide;
private final List<String> slides = new ArrayList<>();

public SlideView() {
    // Ottengo i privilegi sui chart tramite il bean sessionManager
    FacesContext ctx = FacesContext.getCurrentInstance();
    ExternalContext extCtx = ctx.getExternalContext();
    Map<String, Object> sessionMap = extCtx.getSessionMap();
    sessionManager = (SessionManager) sessionMap.get("sessionManager");

    try {
        resources = TkResourceJPA.getCharts();
    } catch (DMLException ex) {
        ex.printStackTrace();
    }

    SessionPrivileges privileges = sessionManager.getSessionPrivileges();

    for(TkResource resource : resources) {
        // Se è definito un privilegio controllo che privilegio è
        if (privileges.contains(resource.getResourceid())) {
            boolean currentResRendered = privileges.getRendered(resource.getResourceid());

            if(currentResRendered){
                slides.add(resource.getUrl());
            }
        }
    }

    index = 0;
    slide = slides.get(index);
}

public String getSlide() {
    return slide;
}

public void setSlide(String slide) {
    this.slide = slide;
}

public String next() {
    index %= slides.size();
    if (index == slides.size() - 1) {
        index = -1;
    }
    index++;
    this.slide = slides.get(index);

    return slide;
}

public String previous() {
    if (index == 0) {
        index = slides.size();
    }
    --index;
    this.slide = slides.get(index);
    return slide;
}
}

尽情享受吧:)

如何滑动和刷新 Primefaces 图表

How to slide and refresh Primefaces charts

jsf

slideshow

primefaces