Update-Wert eines p: Diagramm von Javascript

Ich habe das Beispieldiagramm von der primefaces Schaufenster implementiert. Ich habe eine andere Schaltfläche, die die Elemente löscht, und ich möchte, dass dies auch den tatsächlichen Wert des Diagramms selbst aktualisiert. Dies würde entweder erfordern, dass ich eine Aktualisierung von einem anderen xhtml-Element (die Schaltfläche) auslösen würde, oder 2. setze den Wert des Diagramms aus JavaScript. Das Problem hier ist, dass ich dafür das Diagrammmodell-Objekt von der ManagedBean holen müsste. Nach dem, was ich gefunden habe, können Sie eine managedbean-Methode mit remoteCommand aufrufen, aber Sie können damit keinen Wert von der Bean selbst zurück an das JavaScript übergeben.Update-Wert eines p: Diagramm von Javascript

Im Wesentlichen, wäre es möglich, das folgende zu bearbeiten, um das commandButton (oder einen anderen Typ von Komponente zu verwenden) den Diagrammwert zu aktualisieren?

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

Es spielt keine Rolle, ob diese durch die JS Block durchgeführt werden, die ich einrichten, oder wenn es eine Möglichkeit, das Diagrammelement zu zwingen, es ist Wert auf andere Weise zu aktualisieren.

Quelle

2017-11-02 user1339253

Primefaces-Komponente p:diagram verwendet jsPlumb JavaScript-Bibliothek. jsPlumb bietet leistungsfähige API, aber Primefaces JSF-Bibliothek unterstützt nur grundlegende Funktionen out-of-box (mindestens in Version 6.1). Wenn Sie jsPlumb in vollem Umfang nutzen möchten, müssen Sie tiefer in die native JavaScript API einsteigen.

Also je nachdem, wie Sie Ihre Funktion implementiert dort "die die Elemente löscht" sind 2 Refresh/Update Ansätze:

1. Client Seite Ansatz

Erste Primefaces widgetVar zu Ihrem p:diagram wie folgt hinzufügen

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

dann in Ihrem Updatemodel() JavaScript-Methode Sie jsPlumb Objekt erhalten und manipulieren mit Daten (und UI-Rendering). Beispiel:

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

Nach der Ausführung sehen Sie, dass alle Verbindungen zwischen Elementen gelöscht werden. Beachten Sie jedoch, dass Sie nur mit clientseitigen Daten manipuliert haben, während serverseitige Modelldaten noch nicht bearbeitet wurden.

2. Server-Seite Ansatz

Falls Sie gelöschte Elemente gelöscht/nach Modell auf Server-Seite ändern, dann bean Umfang Ich nehme an, Sie RequestScoped-ViewScoped geändert haben und dass Sie hinzugefügt Bean Methode ähnlich verwaltet wie diese

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

In diesem Fall gibt es keine Notwendigkeit für JavaScript, um alle an. Sie brauchen nur ein wenig Ihre p:commandButton wie diese

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

verändern und Sie werden sehen, Sie diagram aktualisiert (es wird in diesem Fall leer sein).

By the way ... Sie können tatsächlich p:remoteCommand verwenden Managed Bean-Methode aufrufen und Wert zurück zu JavaScript zurück.

Fügen Sie diese Methode zu Managed 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); 
}

diese Methode in xhtml Seite JS hinzufügen

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 
    //... 
}

Add Remotecommand

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

und schließlich p ändern: command wie diese

Sie werden sehen, dass das erste Element verschwunden ist und dass die JS-Konsole nur 4 Elemente in Ihrem Modell auf der Client-Seite zeigt. Jetzt können Sie returnedValue in JavaScript auf die von Ihnen gewünschte Weise verwenden.

Quelle

2017-11-12 16:59:08

Update-Wert eines p: Diagramm von Javascript

Antwort

Verwandte Themen