JSF-JQuery 2
Your trail: 

This page (revision-6) was last changed on 22-Nov-2017 10:56 by Dieter Käppel

This page was created on 17-Mar-2017 11:26 by Dieter Käppel

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Page revision history

Version Date Modified Size Author Changes ... Change note
6 22-Nov-2017 10:56 19 KB Dieter Käppel to previous
5 22-Nov-2017 10:56 19 KB Dieter Käppel to previous | to last
4 26-Mar-2017 10:37 18 KB Dieter Käppel to previous | to last
3 26-Mar-2017 10:32 17 KB Dieter Käppel to previous | to last
2 26-Mar-2017 10:16 13 KB Dieter Käppel to previous | to last
1 17-Mar-2017 11:26 7 KB Dieter Käppel to last

Page References

Incoming links Outgoing links
JSF-JQuery 2
JSF-JQuery 2

Version management

Difference between version and

At line 169 added 233 lines
!!Vis-Network
Vis-Network ist eine Javascript-Bibliothek zum Rendern von Netzwerkdiagrammen mittels HTML5. Im Folgenden ist das entsprechende JQueryWidget aufgezeigt, mit dem die Bibliothenk in JSF integriert wird.
Die Komponente:
{{{
@FacesComponent(namespace = JQueryComponent.NAMESPACE, createTag = true)
@ResourceDependencies({
@ResourceDependency(name = "jquery/jquery.js", library = "primefaces"),
@ResourceDependency(name = "jsf-jquery.js", library = "jquery-js"),
@ResourceDependency(name = "vis.min.js", library = "jquery-js"),
@ResourceDependency(name = "vis-network.js", library = "jquery-js"),
@ResourceDependency(name = "vis.min.css", library = "jquery-css")
})
public class VisNetwork extends JQueryWidget implements ClientBehaviorHolder {
public static class Position {
private int x;
private int y;
public int getX() {
return x;
}
public void setX(int x) {
this.x = x;
}
public int getY() {
return y;
}
public void setY(int y) {
this.y = y;
}
}
public static class NodeEvent extends AjaxBehaviorEvent {
private static final long serialVersionUID = 1L;
private Node node;
private Position position;
public NodeEvent(UIComponent component, Behavior behavior) {
super(component, behavior);
setPhaseId(PhaseId.INVOKE_APPLICATION);
}
public Node getNode() {
return node;
}
public void setNode(Node node) {
this.node = node;
}
public Position getPosition() {
return position;
}
public void setPosition(Position position) {
this.position = position;
}
@Override
public boolean isAppropriateListener(FacesListener facesListener) {
return (facesListener instanceof AjaxBehaviorListener);
}
@Override
public void processListener(FacesListener listener) {
if (listener instanceof AjaxBehaviorListener) {
((AjaxBehaviorListener)listener).processAjaxBehavior(this);
}
}
}
public static final String DEFAULT_EVENT = "click";
public static final Collection<String> EVENT_NAMES = Arrays.asList(DEFAULT_EVENT);
public Boolean getHover() {
return (Boolean)getStateHelper().eval("hover");
}
public void setHover(Boolean hover) {
getStateHelper().put("hover", hover);
}
public String getShape() {
return (String)getStateHelper().eval("shape");
}
public void setShape(String shape) {
getStateHelper().put("shape", shape);
}
public String getBackground() {
return (String)getStateHelper().eval("background");
}
public void setBackground(String background) {
getStateHelper().put("background", background);
}
public String getBorder() {
return (String)getStateHelper().eval("border");
}
public void setBorder(String border) {
getStateHelper().put("border", border);
}
public String getColor() {
return (String)getStateHelper().eval("color");
}
public void setColor(String color) {
getStateHelper().put("color", color);
}
public String getOnclick() {
return (String)getStateHelper().eval("onclick");
}
public void setOnclick(String onclick) {
getStateHelper().put("onclick", onclick);
}
@Override
public Collection<String> getEventNames() {
return EVENT_NAMES;
}
@Override
public String getDefaultEventName() {
return DEFAULT_EVENT;
}
@Override
public String getOptions(Object... properties) {
return super.getOptions("value", "shape", "background", "border", "color", "click");
}
public Node getNode(String id) {
if (id == null)
return null;
for (Node node : ((Network)getValue()).getNodes()) {
if (id.equals(node.getId()))
return node;
}
return null;
}
@Override
public void queueEvent(FacesEvent event) {
Map<String, String> params = getFacesContext().getExternalContext().getRequestParameterMap();
NodeEvent nodeEvent = new NodeEvent(this, ((BehaviorEvent)event).getBehavior());
nodeEvent.setNode(getNode(params.get(getClientId() + ":node")));
nodeEvent.setPosition(JQueryHelper.fromJson(params.get(getClientId() + ":position"), Position.class));
nodeEvent.setPhaseId(event.getPhaseId());
super.queueEvent(nodeEvent);
}
}
}}}
Das JQuery-Widget:
{{{
$.widget("ext.VisNetwork", $.ext.JQueryWidget, {
options: {
hover: true,
shape: "box",
background: "#d7ebf9",
border: "#aed0ea",
color: "#2779aa"
},
_create: function() {
this._super();
this.render();
},
_destroy: function() {
this.cleanup();
this._super();
},
render: function() {
this.cleanup(); // TODO update possible?
this.network = this.createNetwork(this.options.value);
var widget = this;
this.network.on("click", function(param) {
widget.onclick(param);
});
},
cleanup: function() {
if (this.network) {
this.network.off("click");
this.network.destroy();
this.network = null;
}
},
createNetwork: function(data) {
return new vis.Network(this.element[0], data, {
interaction: {
hover: this.options.hover
},
nodes: {
shape: this.options.shape,
color: {
background: this.options.background,
border: this.options.border
},
font: {
color: this.options.color
}
}
});
},
onclick: function(param) {
if (param.nodes.length != 0) {
var data = {};
data[this.element.attr("id") + ":node"] = param.nodes;
data[this.element.attr("id") + ":position"] = $.stringify(param.pointer.DOM);
this.ajaxParam(data);
this.options.click(param);
}
},
onsuccess: function(request, response, options) {
this.network.setData(response);
this.network.redraw();
}
});
}}}
__Erklärung:__ Die Daten für die eigentliche Grafik werden synchorn mit den Options im HTML-Code durch JSF herausgerendert und im HTTP-Dokument-Request übertragen. Natürlich könnte man auch hier über die Action-Funktion gehen und asynchron nachladen, wie dies im Beispiel für Anychart beschrieben wurde. Die Action-Funktion wird hier jedoch für das Klicken auf die Netzwerkknoten genutzt. Daraus wird eine Faces-Behavior erzeugt, mit der man weitere Elemente auf der JSF-Seite steuern kann.
JSF-Seitig sieht es dann so aus:
{{{
<j:visNetwork id="net" value="#{visNetworkController.network}" style="height: 600px;">
<p:ajax listener="#{visNetworkController.action}" update="@this"/>
</j:visNetwork>
}}}
This page (revision-6) was last changed on 22-Nov-2017 10:56 by Dieter Käppel Top
Übersicht
Startseite
Das Unternehmen
Produkte
Consulting
Referenzen

Jobmarkt
Jobangebote
Profile

Hilfe
Suche
Seitenindex
Letzte Änderungen
Sichere Verbindung

Systeme
Tickets
Jenkins
Nexus
SVN
Email Client
5148 Aufrufe

referenziert von
Activate JS
Intersult Produkte
JSF-JQuery 2
Main

© 2022 Intersult GmbH | Jobs | Kontakt | Presse | AGB | Impressum | Cookies | Datenschutz | Serverzeit 2024.11.21 18:53:04 GMT