Question

我已经从primefaces展示中实现了示例图。我有另一个清除元素的按钮，我希望这也刷新图表本身的实际值。这将要求我以1.以某种方式从另一个xhtml元素（按钮）触发刷新，或者2.从JavaScript设置图表的值。这里的问题是，这需要我从managedbean获取图模型对象。从我发现你可以使用remoteCommand调用一个managedbean方法，但是这不允许你将bean本身的值返回给JavaScript。

基本上，是否可以编辑以下内容以使commandButton（或使用任何其他类型的组件）刷新图表的值？

<?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:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<script type="text/javascript">
    function updateModel() {
        //refresh diagram
    }
</script>
<style type="text/css">
    /* snip css */
</style>
<h:body>
    <p:diagram id="diagram" value="#{diagramFlowChartView.model}" style="height:600px" styleClass="ui-widget-content" />
    <h:form>
        <p:commandButton style="margin: 3px;" icon="fa fa-key" value="Refresh" onclick="updateModel();"/>
    </h:form>
</h:body>
</html>

这是否可以通过我设置的JS块来完成，或者是否有办法强制图元素以其他方式刷新它的值。

Answer 1

Primefaces组件p:diagram使用jsPlumb JavaScript库。 jsPlumb提供了强大的API，但Primefaces JSF库仅支持开箱即用的基本功能（至少在6.1版本中）。如果你想充分利用jsPlumb，你需要深入挖掘原生JavaScript API。

因此，根据您实现“清除元素”功能的方式，有2种刷新/更新方法：

<强> 1。客户端方法

首先将Primefaces widgetVar添加到p:diagram这样的

<p:diagram id="diagram" widgetVar="diagramWidget" value="#{diagramFlowChartView.model}" style="height:600px" styleClass="ui-widget-content" />

然后在您的updateModel（）JavaScript方法中，您可以获取jsPlumb对象并使用数据（和UI呈现）进行操作。例如，

function updateModel() {
        //refresh diagram

        //get jsPlumb instance
        var jsPlumbObj=PF('diagramWidget').canvas;
        //log in JS console so that you can see all available properties and methods of jsPlumb
        console.log(jsPlumbObj);
        //delete all connectors in your flow chart
        jsPlumbObj.deleteEveryEndpoint();
        //do other stuff
        ....
    }

执行此操作后，您将看到元素之间的所有连接都被删除。但请注意，您只使用客户端数据进行操作，而服务器端模型数据仍然未受影响。

<强> 2。服务器端方法

如果您通过修改服务器端的模型来清除/删除元素，那么我认为您已将bean范围从RequestScoped更改为ViewScoped并且您添加了类似于此的托管bean方法

public void clearElements(){
    //clear model elements
    model.clear();                        
}

在这种情况下，根本不需要JavaScript。您只需要稍微修改p:commandButton这样的

<p:commandButton style="margin: 3px;" icon="fa fa-key" value="Refresh 
server" actionListener="#{diagramFlowChartView.clearElements()}" 
update="diagram"/>

您将看到图表刷新（在这种情况下它将为空）。

顺便说一句...... 实际上，您可以使用p:remoteCommand来调用托管bean方法并将值返回给JavaScript。

将此方法添加到托管bean

public void doSomethingWithModel(){
    //for example, delete 1st element
    model.getElements().remove(0);      
    //serialize model and push it to client
    RequestContext rc = RequestContext.getCurrentInstance();        
    rc.addCallbackParam("returnedObjectValue", model);
}

在xhtml页面中添加此JS方法

function getResultFromManagedBean(xhr, status, args){
   var returnedValue = args.returnedObjectValue;
   //you will see how Primefaces DefaultDiagramModel looks like in JS console after you deleted 1st element
   console.log(returnedValue);
   //do something with it
   //...
}

添加remoteCommand

<p:remoteCommand name="modifyModel"
     action="#{diagramFlowChartView.doSomethingWithModel()}"
     oncomplete="getResultFromManagedBean(xhr, status, args);" update="diagram"/>

最后像这样修改 p：commandButton

<p:commandButton style="margin: 3px;" icon="fa fa-key" value="Refresh" onclick="modifyModel();"/>

您将看到第一个元素消失，并且JS控制台在客户端显示模型中仅有4个元素。现在，您可以按照自己的方式在JavaScript中使用returnedValue。

从javascript更新p：图表的值

1 个答案: