图表元素中的 JSF / primefaces 事件

Question

我需要在单击此元素时访问 managedBean 中 org.primefaces.model.diagram.Element 的数据对象。我正在使用 primefaces 5.2。我尝试了多种方法来确定这一点，但 none 到目前为止确实有效。这是一种方法：

xhtml:

想法是，通过 commandLink 操作属性传递元素（这适用于例如数据表）：

 <fl:composition template="/WEB-INF/template.xhtml" xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" xmlns:fl="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui">
   <fl:define name="content">
      <h:form id="form">
         <p:diagram style="height:600px" value="#{flowDiagramBean.model}" var="el">
            <f:facet name="element">
               <p:commandLink actionListener="#{flowDiagramBean.onElementClicked}" update="@form" value="#{el.actionElementLabelText}">
                  <f:attribute name="element" value="#{el}"/>
               </p:commandLink>
            </f:facet>
         </p:diagram>
      </h:form>
   </fl:define>
</fl:composition>

原型图的初始构建：

@PostConstruct
   public void init() {
      setModel(new DefaultDiagramModel());
      getModel().setMaxConnections(-1);

      getModel().getDefaultConnectionOverlays().add(new ArrowOverlay(20, 20, 1, 1));
      FlowChartConnector connector = new FlowChartConnector();
      connector.setPaintStyle("{strokeStyle:'#C7B097',lineWidth:3}");
      getModel().setDefaultConnector(connector);

      ScreenFlowItemObj screenFlowItemObj = new ScreenFlowItemObj();
      screenFlowItemObj.setActionElementLabelText("test");

      Element start = new Element(screenFlowItemObj, "20em", "6em");
      start.addEndPoint(new BlankEndPoint(EndPointAnchor.BOTTOM));
      start.addEndPoint(new BlankEndPoint(EndPointAnchor.LEFT));

      Element trouble = new Element(screenFlowItemObj, "20em", "18em");
      trouble.addEndPoint(new BlankEndPoint(EndPointAnchor.TOP));
      trouble.addEndPoint(new BlankEndPoint(EndPointAnchor.BOTTOM));
      trouble.addEndPoint(new BlankEndPoint(EndPointAnchor.RIGHT));

      model.addElement(start);
      model.addElement(trouble);

   }

可以看到，类型ScreenFlowItemObj是每个元素传入的数据对象

actionListener 如下所示：

public void onElementClicked(ActionEvent event) {
      ScreenFlowItemObj screenFlowItemObj = (ScreenFlowItemObj) event.getComponent().getAttributes().get("element");
   }

不幸的是，在单击 commandLink 时，属性 "element" 没有被放入属性映射中，因此在侦听器中 screenFlowItemObj 解析为 null。难道我做错了什么？是否有另一种方法可以做到这一点？

我在带有 JSF 2.2 的 1.7 tomee 上使用 primefaces 5.2。

谢谢，

贡纳尔

Answer 1

在 PrimeFaces 使用的 jsPlumb 框架中 'elements' 上没有点击事件，所以 'ajax' select 事件是不可能的，反正不能直接。

您可以做的是：

为模型中的每个元素指定一个明确的 ID（例如 start.setId('start')）
在图表后的页面中添加一些代码，将事件处理程序添加到图表元素（这些可以通过它们的 class (`ui-diagram-element)
在事件处理程序中调用一个 PrimeFaces 远程命令，该命令调用一个 actionListener，其中添加了被点击元素的 ID

添加事件处理程序：

$(document).on('click', '.ui-diagram > .ui-diagram-element', function(info){
  console.log(info.target.id); // change this to call the remote command
});

如何将 info.target.id 传递给远程命令可以在 this Whosebug Q/A

中阅读

我检查了第1步和第2步，之前用过第3步。一切正常，我只是还没有把它们结合起来，但应该不难

Answer 2

感谢 Kukeltje 方法，我能够成功实现功能需求：

xhtml:

<fl:composition template="/WEB-INF/template.xhtml"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:fl="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
    <fl:define name="content">
        <h:form id="screenFlowForm">
            <p:diagram value="#{flowDiagramBean.model}" var="el"
                style="height:600px">
                <f:facet name="element">
                    <h:outputText value="#{el.actionElementLabelText}" />
                </f:facet>
            </p:diagram>
            <p:remoteCommand name="elementClicked"
                actionListener="#{flowDiagramBean.onElementClicked}"/>
            <script type="text/javascript">
                        $(document).on('click',
                                '.ui-diagram > .ui-diagram-element',
                                function(info) {
                                    elementClicked([ {
                                        name : 'elementId',
                                        value : info.target.id
                                    } ]);
                                });
            </script>
        </h:form>
    </fl:define>
</fl:composition>

ActionListener：

public void onElementClicked() {
        logger.info(FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("elementId"));
    }

适合我。我不明白，为什么我必须在单元素数组中传递参数，但是没关系 - 它正在工作。

谢谢你把我引向正确的方向。

贡纳尔

图表元素中的 JSF / primefaces 事件

JSF / primefaces eventing in diagram elements

jsf

primefaces

jsf-2

managed-bean