Directory

← Back

Network Component

Network provides an easy way to display network graph on web pages

Author

Rating

Popularity

100+

Network is Java API for web component for Vaadin 14+ in NPM Mode. It provides an easy way to display network on web pages.

Known limitations

  • This component does not work in a vaadin dialog.
  • This component does not work on IE11 and Edge.

License & Author

This Add-on is distributed under Apache 2.0

Component Factory Network is written by Vaadin Ltd.

Major pieces of development of this add-on has been sponsored by multiple customers of Vaadin. Read more about Expert on Demand at: Support and Pricing

Sample code

Network<NetworkNodeImpl, NetworkEdgeImpl> network = new Network<>(NetworkNodeImpl.class,NetworkEdgeImpl.class);
network.setHeight("600px");
network.setWidthFull();
// Hide panel for reusable components
network.setTemplatePanelVisible(false);
Network<NetworkNodeImpl, NetworkEdgeImpl> network = new Network<>(NetworkNodeImpl.class,NetworkEdgeImpl.class);
network.setHeight("600px");
network.setWidthFull();
// Hide panel for reusable components
network.setTemplatePanelVisible(false);

// There are more examples in ListenerExampleView
network.addNetworkSelectionListener(event -> {
    Notification.show("Nodes selected "+ event.getNetworkNodes());
    Notification.show("Edges selected "+ event.getNetworkEdges());
});
Network<CustomNetworkNode, CustomNetworkEdge> network = new Network<>(CustomNetworkNode.class,CustomNetworkEdge.class);
network.setHeight("600px");
network.setWidthFull();
// Hide panel for reusable components
network.setTemplatePanelVisible(false);

// You can see the full code in the demo source code
network.addNodeEditor(new CustomNetworkNodeEditorImpl());
public static class TemplateEditorView extends VerticalLayout {

    // Primary Network component
    private VerticalLayout networkContainer = new VerticalLayout();
    private Network<NetworkNodeImpl, NetworkEdgeImpl> network = new Network<>(NetworkNodeImpl.class,NetworkEdgeImpl.class);

    // Network component for editing the template
    private VerticalLayout templateNetworkContainer = new VerticalLayout();
    private TextField labelField;
    private Network<NetworkNodeImpl, NetworkEdgeImpl> templateNetwork;

    public TemplateEditorView() {
        setPadding(false);
        setSpacing(false);
        setSizeFull();
        network.setWidthFull();
        network.addNetworkUpdateTemplateListener(event -> openTemplateEditor(event.getTemplate()));
        networkContainer.setPadding(false);
        networkContainer.setSpacing(false);
        networkContainer.add(new H3("Edit Network"));
        networkContainer.addAndExpand(network);

        templateNetworkContainer.setPadding(false);
        templateNetworkContainer.setSpacing(false);
        add(networkContainer, templateNetworkContainer);

    }

    private void openTemplateEditor(NetworkNodeImpl template) {
        templateNetwork = new Network<>(NetworkNodeImpl.class,NetworkEdgeImpl.class, template);

        templateNetwork.setTemplatePanelVisible(false);
        templateNetwork.setLeftPanelOpened(false);
        templateNetwork.setRightPanelOpened(false);
        Button closeButton = new Button("Save and close", e -> closeTemplateEditor());
        networkContainer.setVisible(false);
        templateNetwork.setSizeFull();
        templateNetworkContainer.setVisible(true);
        templateNetworkContainer.add(new H3("Edit template"));
        labelField = new TextField("Name of your template");
        templateNetworkContainer.addAndExpand(labelField,templateNetwork);
        templateNetworkContainer.add(closeButton);
        // bind
        labelField.setValue(template.getLabel());
    }

    private void closeTemplateEditor() {
        NetworkNodeImpl template = templateNetwork.getRootData();
        template.setLabel(labelField.getValue());
        network.updateTemplate(template);
        templateNetworkContainer.removeAll();
        networkContainer.setVisible(true);
        templateNetworkContainer.setVisible(false);
    }

}

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Update license to Apache 2.0

Released
2020-12-10
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 14
Browser
Google Chrome

Network Component - Vaadin Add-on Directory

Network provides an easy way to display network graph on web pages Network Component - Vaadin Add-on Directory
Network is Java API for [](https://github.com/vaadin-component-factory/vcf-network) web component for Vaadin 14+ in NPM Mode. It provides an easy way to display network on web pages. ### Known limitations * This component does not work in a vaadin dialog. * This component does not work on IE11 and Edge. ## License & Author This Add-on is distributed under Apache 2.0 Component Factory Network is written by Vaadin Ltd. ### Sponsored development Major pieces of development of this add-on has been sponsored by multiple customers of Vaadin. Read more about Expert on Demand at: [Support](https://vaadin.com/support) and [Pricing](https://vaadin.com/pricing)
Online