Quick example of Cytoscape being used with Primefaces

Question

I am looking for an example (complete xhtml) of a simple graph created with cytoscape.js in a webapplication using Primefaces. Right now, I am unsure of how to integrate the jquery with primefaces.

Answer 1

Unless I'm mistaken, you'll have to either build your own JSF wrapper for Cytoscape.js or else you'll have to integrate in manually with handwritten JS. So, to continue to use JSF you'll have to either invest in "porting" Cytoscape.js to JSF or use a potentially fragile integration on the JS side (the JSF may generate different results with version updates etc).

In any case, the main thing is that you'll need your Java code to generate JSON data that Cytoscape.js can consume. You can do all the processing on the Java side, outputting Cytoscape.js-compatible JSON. Or, you can generate JSON that aligns with your model, then transforming it on the JS side so Cytoscape.js can consume it.

Here's an article that describes processing JSON in Java: http://www.oracle.com/technetwork/articles/java/json-1973242.html

--

My opinion of JSF:

If you want to build complex webapps with custom UI (outside of the components JSF provides), you're better off not using JSF and writing real JS for the JS frontend. Otherwise, you're stuck in the (limited) JSF ecosystem.

In general, tools that abstract away the HTML+CSS+JS model from the frontend limit what you can do. Things like JSF are great if you're just creating something like a simple internal corporate form, but not so for more complicated apps.