javascriptのp：diagramの値を更新する

私は、素形のショーケースからサンプル図を実装しました。私は要素をクリアする別のボタンを持っていますが、これはダイアグラム自体の実際の値をリフレッシュするためにも必要です。これは、私に何か1の必要があります。どういうわけか、別のxhtml要素（ボタン）からリフレッシュをトリガーするか、またはJavaScriptからダイアグラムの値を設定します。ここで問題となるのは、マネージドビーンからダイアグラムモデルオブジェクトを取得する必要があるということです。 remoteCommandを使用してマネージドビーンメソッドを呼び出すことができますが、これによってBean自体の値をJavaScriptに戻すことはできません。javascriptのp：diagramの値を更新する

基本的に、次のように編集して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ブロックを介して行われるかどうかは問題ではない、または更新するためにダイアグラム要素を強制する方法がある場合には、他の方法で値です。

出典

2017-11-02 user1339253

プライムフェイスコンポーネントp:diagramは、jsPlumb JavaScriptライブラリを使用します。 jsPlumbは強力なAPIを提供しますが、Primeface JSFライブラリは、（少なくともバージョン6.1では）すぐに使用できる基本機能のみをサポートしています。 jsPlumbを最大限に活用するには、ネイティブJavaScript APIを詳しく調べる必要があります。

ですから、「要素をクリアし、」あなたの機能を実装する方法に応じて、ある2リフレッシュ/更新が近づい：

1.クライアント側のアプローチ

は、まず、このようなあなたのp:diagramにPrimefaces widgetVarを追加

updateModel（）JavaScriptメソッドでは、jsPlumbオブジェクトを取得し、データ（およびUIレンダリング）を操作できます。たとえば、

これを実行すると、要素間のすべての接続が削除されます。しかし、サーバー側モデルのデータはそのままで、クライアント側のデータで操作するだけであることに注意してください。

2.サーバ側のアプローチ

あなたは/が、私はあなたがViewScopedにRequestScopedからのBeanのスコープを変更して、あなたのような類似したマネージドBeanのメソッドを追加したことをしたとし、サーバ側でモデルを変更することで、要素を削除したクリアケースでこの

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

この場合、JavaScriptはまったく必要ありません。あなたはわずかにこの

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

のようなあなたのp:commandButtonを変更する必要があり、あなたは（それがこの場合は空になります）にリフレッシュ図が表示されます。ところで

... あなたが実際にあなたは、管理対象Beanメソッドを呼び出し、JavaScriptに戻って値を返すために p:remoteCommandを使用することができます。

これはXHTMLページ内の方法

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変更JS追加マネージド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); }

を、このメソッドを追加します。このようなのcommandButtonを

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

第1要素が消えて、JSコンソールにクライアント側のモデル内に4つの要素しか表示されないことがわかります。これで、JavaScriptでreturnedValueを好きなように使うことができます。

出典

2017-11-12 16:59:08

javascriptのp：diagramの値を更新する

答えて

関連する問題