Tutorial 3 - Application Features
This tutorial is an introduction to the features of the yFiles for HTML diagramming library for building an application. It covers a broad range of topics including building graphs from JSON data, drag and drop, tooltips, snapping (guide lines), etc.
It is intended for developers who are interested in how to implement specific application features. If you are new to the yFiles for HTML diagramming library, we recommend to start with the Getting Started tutorial. Then, have a look at the samples of this tutorial that cover the features you are interested in.
To make full use of this tutorial, we also recommend to review and possibly modify the source code for each sample project.
Running a Feature Sample
To execute a specific programming sample, either follow the corresponding link from the table below or open the
index.html in the specific demo directory. It is also possible to deploy the samples to a web
server and load them from there.
These demos use ECMAScript 6 features that your browser does not support.
Please switch to a browser with support for ECMAScript 6 (Chrome, Firefox, Edge, Safari 10) or use the included deployment tool to convert the demos to ECMAScript 5. The converted demos are also available online.
Note that ECMAScript 6 is a requirement of the demos, only. The yFiles for HTML library itself is compatible with ECMAScript 5.
Due to strict cross domain policies in both Internet Explorer and Google Chrome, some demos work only partially or not at all when viewed from a filesystem location in these browsers. Therefore, it is recommended to access the demos through a Web server. Install and start scripts for a local Node.js Express server are included:
> cd %YFILES_HTML_DISTRIBUTION_DIR%/demos/demo-server/ > npm install > npm start
Google Chrome can also be instructed to use a more tolerant policy by starting
chrome.exe with the
--allow-file-access-from-files command line option. In addition, all demos are available online.
In Firefox, the demos should run well from a filesystem location, since its cross domain policy is tolerant by default.
Samples in this Tutorial
|Base Application||The base application for the feature specific samples in this tutorial.|
|Building Graph from Data||Shows how to create nodes and edges using data stored in JSON format.|
|Building Swimlanes from Data||Shows how to create swimlanes with nodes and edges using data stored in JSON format.|
|Save and Load GraphML||Shows how to enable basic serialization and deserialization of the graph as GraphML file.|
|Custom Data in GraphML||Shows how to read and write data that is bound to graph elements to and from a GraphML file.|
|Drag and Drop||
Shows how to drag nodes from a separate panel into the graph component by using the
|Folding||Shows how to enabled folding.|
|Filtering with Folding||Shows how to enabled filtering and folding in the same graph.|
|Orthogonal Edges||Shows how to enable interactive orthogonal edge editing.|
|Snapping||Shows how to enable snapping (guide lines) for graph elements.|
|Grid Snapping||Shows how to enable grid snapping for graph elements.|
|Tooltips||Shows how to enable tooltips for graph items.|
|External Links||Shows how to add labels that act like external links and open in a new window.|
|Clickable Style Decorator||Shows how to handle clicks on specific areas of an item style.|
|Native Listeners||This demo illustrates an approach on how to use native listeners on SVG-elements in the style.|
|Label Text Wrapping||Shows how to enable the text wrapping (or trimming) feature provided by the default label style.|