Question

我试图弄清楚当单击饼图中的元素时如何打开对话框。我是Primefaces的新手，所以我在搜索中找到的大部分内容都比我想要完成的内容更复杂。使用Dialog Framework打开对话框。我已经能够通过命令按钮打开对话框没问题了，所以我很确定问题不在于对话框本身。

这是首页：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >
    <body>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:s="http://jboss.com/products/seam/taglib"
                xmlns:p="http://primefaces.org/ui"
                xmlns:pm="http://primefaces.org/mobile"
                >

    <p:panel header="Dashboard" toggleable="true">

    <h:form>
    <p:growl id="growl" showDetail="true" />
        <h:panelGrid columns="2">

        <p:chart type="pie" model="#{dashboardPieChart.pieModel1}" style="width:350px; height:200px" >

            <p:ajax event="itemSelect" listener="#{dashboardPieChart.itemSelect}"/>

        </p:chart>

    </h:panelGrid>

    <h:outputText id="out" value="#{dashboardPieChart.seriesText}" />

    </h:form>

</p:panel>

      <script type="text/javascript">
         PrimeFaces.info ('Info message');
         PrimeFaces.debug('Debug message');
         PrimeFaces.warn ('Warning message');
         PrimeFaces.error('Error message');
      </script>


</ui:composition>
</body>
</html>

支持bean：

package com.company.project.model;

import java.io.Serializable;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

import org.primefaces.context.RequestContext;
import org.primefaces.event.ItemSelectEvent;
import org.primefaces.model.chart.PieChartModel;

@ManagedBean
@ViewScoped
public class DashboardPieChart implements Serializable {

    private static final long serialVersionUID = -9056199453379512637L;

    private PieChartModel pieModel1;
    private String seriesText;

    /*
    public DashboardPieChart()
    {
        init();
    }
    */
    @PostConstruct
    public void init() {
        System.out.println("DashboardPieChart - inside init()");
        createPieModels();
    }

    public PieChartModel getPieModel1() {
        return pieModel1;
    }

    private void createPieModels() {
        createPieModel1();
    }

    private void createPieModel1() {
        pieModel1 = new PieChartModel();

        pieModel1.set("Proposals in Progress", 12);
        pieModel1.set("Proposals Completed", 15);

        pieModel1.setTitle("Proposals");
        pieModel1.setLegendPosition("w");
        pieModel1.setDiameter(100);
    }

    public void itemSelect(ItemSelectEvent event) {

        String msgText = "Item Index: " + event.getItemIndex() + ", Series Index:" + event.getSeriesIndex();

        System.out.println (msgText);

        this.seriesText = msgText;

        RequestContext.getCurrentInstance().openDialog("pieChartDrillDownDialog");
    }

    public String getSeriesText() {
        return seriesText;
    }

    public void setSeriesText(String seriesText) {
        this.seriesText = seriesText;
    }

}

这是我试图打开的对话框：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pm="http://primefaces.org/mobile"
      > 

<h:head>
<title>Proposal Status Detail</title>
</h:head>

<h:body>
        <h:form>

            <p:chart type="pie" model="#{dashboardPieChartDrillDown.pieModel}" style="width:350px; height:200px" >
            </p:chart>

        </h:form>
</h:body>
</html>

Answer 1

我能够使用remoteCommand使其工作：

XHTML：

<p:remoteCommand name="fnc" actionListener="#{playgroundController.showDialog()}"/>

<p:chart type="pie" model="#{playgroundController.pieModel1}" style="width:400px;height:300px">
    <p:ajax event="itemSelect" listener="#{playgroundController.itemSelect}" oncomplete="fnc()" />
</p:chart>

BEAN：

public void showDialog() {
    RequestContext.getCurrentInstance().openDialog("pieChartDrillDownDialog");
}

public void itemSelect(ItemSelectEvent event) {
    FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Item selected",
                    "Item Index: " + event.getItemIndex() + ", Series Index:" + event.getSeriesIndex());
    FacesContext.getCurrentInstance().addMessage(null, msg);
}

Primefaces：单击饼图中的元素时打开对话框

1 个答案: