REST Application client avec diagramme de topologie

Question

Je suppose de développer un client REST de gestion de réseau avec un diagramme de topologie (comme une image ci-dessous). Avec cette application, l'utilisateur doit pouvoir créer un diagramme de topologie par glisser-déposer, modifier les positions des nœuds en les faisant glisser, modifier les propriétés des nœuds et supprimer les éléments du nœud.

Maintenant, je fais une étude de faisabilité comment puis-je aborder cette tâche avec un client HTML 5 ou un client épais Java. J'ai vu une API appelée esri mais elle est commercialisée.

J'ai prévu de développer cette application Angularjs ou JavaFX. Mais aucun d'entre eux n'a de bibliothèques inbuild pour cela (je préfère plutôt développer cette application cliente avec AngularJs). Pourriez-vous s'il vous plaît m'aider à trouver des frameworks JavaScript ou des bibliothèques Java disponibles pour accomplir cette tâche (alors je peux les intégrer avec AngularJs ou JavaFX).

J'ai vu un type similaire de question chez StackOverflow, il était trop vieux mais maintenant il peut être disponible de nouveaux frameworks.

Merci

Answer 1

Nous pouvons être accomplir cette tâche avec certains HTML 5 cadres de l'interface utilisateur liés qui peuvent visualiser des graphiques interactifs (utilisateur peut créer, mettre à jour, lire et supprimer les éléments du graphique). Certains d'entre eux sont comme suit,

• GoJS

GoJS est une bibliothèque JavaScript riche en fonctionnalités pour la mise en œuvre des diagrammes interactifs et personnalisés visualisations complexes à travers les navigateurs web modernes et des plates-formes. La bibliothèque facilite la construction de diagrammes JavaScript de nœuds complexes, de liens et de groupes avec des modèles et des mises en page personnalisables. Licence commerciale.

source: https://gojs.net/latest/extensions/SnapLinkReshaping.html

• JointJS

JointJS est un HTML 5 moderne bibliothèque JavaScript pour la visualisation et l'interaction avec des diagrammes et des graphiques. Il peut être utilisé pour créer des diagrammes statiques ou, plus important encore, des outils de création de diagrammes entièrement interactifs tels que des éditeurs de workflow, des outils de gestion de processus, des systèmes IVR, des intégrateurs API, des applications de présentation, etc. Licence sous licence Open Source (moins de fonctionnalités) et licence commerciale (plus de fonctionnalités).

source: https://resources.jointjs.com/demos/kitchensink

• mxGraph

mxGraph est une bibliothèque JavaScript schématisant qui permet graphique interactif et tracer des applications à créer rapidement fonctionnant en mode natif dans un navigateur majeur. Sous licence Apache 2.0 (gratuite et open source). Prise en charge de JavaScript, Java, .NET et PHP.

1) mxDraw

source: https://jgraph.github.io/mxgraph/javascript/examples/editors/diagrameditor.html

2) éditeur de graphes

source: https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/index.html

• vis.js

vis.js est une bibliothèque de visualisation dynamique, basée sur un navigateur. La bibliothèque est conçue pour être facile à utiliser, pour gérer de grandes quantités de données dynamiques et pour permettre la manipulation et l'interaction avec les données. Sous licence sous Apache 2.0 (gratuit et open source) et MIT (licence open source).

source: vis.js library

• d3.js

D3.js est une bibliothèque JavaScript pour manipuler les documents basés sur des données. D3 donne vie aux données en utilisant HTML, SVG et CSS. L'accent mis par D3 sur les standards Web vous donne toutes les capacités des navigateurs modernes, combinant des composants de visualisation puissants et une approche basée sur les données pour la manipulation DOM. Sous licence BSD (initiative open source).

source: http://bl.ocks.org/rkirsling/5001347

Conclusion

Selon les caractéristiques de GoJS, il est le cadre le plus pratique pour visualiser des graphiques interactifs, parce que l'interface utilisateur peut personnaliser facilement et peut sauver le modèle de diagramme au format JSON. Mais ceci est sous licence commerciale (2995 $ par développeur). JointJS offre moins de fonctionnalités avec leur version de licence open source, JointJS fournit donc moins de fonctionnalités avec leur version de licence open source, donc doit acheter la version commerciale pour répondre à nos exigences. Il peut être difficile de personnaliser leur interface utilisateur complexe. D3.js est plus convivial, mais nous devons procéder plus d'efforts pour l'affiner selon nos exigences telles que, procéder à la création de nœud via une icône d'outil, permettre à l'utilisateur de personnaliser la valeur de la légende du nœud , supprime certains effets visuels existants, etc.
Nécessite d'explorer le format d'enregistrement (JSON, XML, TXT, etc.) du modèle de diagramme.Selon mes conclusions, nous pouvons choisir la bibliothèque JavaScript mxGraph ou vis.js pour nos développements.

mxGraph: Il semble que nous pouvons facilement personnaliser l'application de dessin 'mxDraw' (éditeur de diagramme de style Web 2.0) et la réutiliser. L'application de l'éditeur de diagrammes 'Graph Editor' est plus avancée et il peut prendre plus de temps pour la personnaliser et doit explorer le format d'enregistrement du modèle de diagramme. : Est plus convivial que 'mxGraph' mais il se peut que nous ayons à faire des efforts de développement pour explorer le format d'enregistrement des modèles de diagramme et supprimer les effets visuels existants.