圖表元素中的JSF/primefaces事件

Question

我需要訪問managedBean中org.primefaces.model.diagram.Element的數據對象，只需單擊此元素即可。我正在使用primefaces 5.2。 我嘗試了多種方法來確定這一點，但目前爲止沒有任何工作。下面是一個方法：

XHTML：

的想法是，通過一個commandLink action屬性（其爲例如數據表正常工作）的元素：

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

的inital積聚原型圖：

@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屬性「元素」的點擊不會被付諸屬性映射，所以在聽者screenFlowItemObj解析爲空。難道我做錯了什麼？可能有另一種方法來實現這一點？

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

謝謝

貢納爾

Answer 1

有關於在jsPlumb框架PrimeFaces使用「元素」沒有點擊事件，所以一個「AJAX」 select事件是不可能的，而不是直接反正。

你可以做的是：

1. 給每個元素一個明確的ID在你的模型（例如start.setId（「開始」））
2. 在圖後，你的頁面添加一些代碼，增加了事件處理程序的圖元素（這些是可以通過類（`在事件處理程序的UI-圖元件）
3. 識別呼叫PrimeFaces遠程命令調用與所點擊的元素的id一個ActionListener添加到它

添加事件處理程序：

$(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 stackoverflow Q/A

讀我檢查步驟1和2與之前使用3。它所有的作品，我只是沒有將它們結合起來呢，但應該是不困難的

Answer 2

感謝Kukeltje的做法，我是能夠實現成功的功能reqiurement：

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

適合我。我不明白，爲什麼我必須在一個元素數組中傳遞參數，但確定 - 它正在工作。

謝謝你讓我走向正確的方向。

貢納爾