About yFiles FLEX

yFiles FLEX provides essential building blocks for web-based applications that need to visualize, animate, and edit graphs, diagrams, or networks.

Web diagramming applications using yFiles FLEX offer a user experience that was known previously only from desktop applications. And all that in your web browser.

• No browser compatibility issues! Your yFiles FLEX application will look the same no matter which browser and operating system it runs in. The only requirement to run a Flex 2 application is an installed Flash Player version 9. The Adobe Flash Player is installed on most internet-enabled PCs today.
• Full-featured web-based graph viewing, editing and animation. The yFiles FLEX framework allows you to easily create rich internet applications (RIAs) providing the same user experience as regular desktop applications. You will benefit from the usual advantages of RIAs over thin client approaches: richer user interfaces, higher responsiveness, better client/server work balance, asynchronous communication, and higher network efficiency.
• Benefit from our graph drawing software experience. All our expertise from the development of our other successful graph drawing products (yFiles for Java, yFiles.NET and yEd) was leveraged for the development of the yFiles FLEX API.

Outstanding Features

• Highly customizable node and edge styles: The style API of yFiles FLEX offers easy to use default style classes as well as a convenient framework to create your own node and edge styles. Nodes may also be represented by image files (both bitmap based and scalable formats are supported) or SWF movies.
• GraphML: Using the yFiles FLEX API, your web client application can parse graph structure and style information given in the human readable GraphML format. The format can be used to communicate with any server software component that can export graphs in GraphML format, like e.g., yFiles Complete for Java and yFiles.NET Complete or to load local GraphML files into a standalone yFiles FLEX application.
• Interaction: The client API provides default implementations of various interaction modes that could be needed in diagramming applications and elaborate support for concurrently enabled interaction modes. The yFiles FLEX framework already includes customizable implementations for creating, moving, and resizing graph items and for providing tooltips and context menus for any objects shown in the view component.
• Animation: yFiles FLEX can create easily customizable morphing animations between different graph layouts. In addition, the framework allows you to effortlessly create hover effects for nodes shown in the view.
• Remote API: The framework provides convenience classes to facilitate the communication with a yFiles server component.

Using yFiles FLEX

Although it is possible to use yFiles FLEX as a standalone diagramming application that runs in a web browser or as an Adobe® AIR™ application, most use cases will require an additional server component that is responsible at least for graph layout calculation and centralized data storage.

The perfect complement for yFiles FLEX are the yFiles Complete for Java and yFiles.NET Complete libraries which provide state-of-the-art graph analysis and layout algorithms. yFiles FLEX already contains convenience classes for communicating with a yFiles Complete for Java or yFiles.NET Complete server.

Usually, yFiles FLEX will only have to communicate with the server component when a new graph layout is to be calculated or when changes have to be loaded from or submitted to the data storage. Since all other tasks that need to be performed in a diagramming application can be conducted on the client and since client and server communicate asynchronously, users will experience a web-based application that is almost as responsive as a normal desktop application.

Demo Applications

Graph Canvas

The graph canvas demo application demonstrates graph parsing, layout and navigation with yFiles FLEX.
Various GraphML files that are present in a defined directory on the server can be loaded into the view using the provided combobox. At first, the graph will be loaded using the node coordinates specified in the GraphML file.
The graph layout can be changed using the Layout combobox. This will prompt the server to compute a new layout for the current graph.
The Help tab in the application documents the various possibilities of user interaction with the diagram shown in the view component.

Launch Demo  

If the currently loaded graph provides description data for any nodes or edges, this data will be shown in tooltips that appear when hovering over the graph items. If the graph provides URLs, the context menu of the corresponding items will contain an entry that will load the URL in a new Browser window.

Organization Chart

The organization chart demo application shows how an interactive view for an organization chart can be created using yFiles FLEX. The displayed graph is generated using XML data models. The user can switch between several different sized example org-charts, where one of these also features group nodes to illustrate departments.

Among other things, the organization chart demo shows

• how to create a custom, specialized graph visualization component,
• how to create a yFiles FLEX graph structure from XML data,

Launch Demo  

• how to use the template node style for complex node visualizations,
• how to use different levels of detail for the node visualizations, depending on the zoom level,
• how to customize the yFiles FLEX overview component,
• how to create a custom zoom effect

The Business Process Diagram Demo

The business process diagram demo shows how an editor for business process diagrams can be created using yFiles FLEX.

The visualization and business logic is based on the BPMN 1.1 specification but isn't meant to implement all aspects of the specification. Instead, it demonstrates what techniques offered by yFiles FLEX can be used to create such an editor: custom node styles, using Flex components for node visualizations, custom edge styles and arrows, grouping functionality, swimlanes, drag 'n' drop, customized edge creation, custom input modes, custom data objects associated with graph items, and customized server-based layout calculation.

Launch Demo  

DOM Tree

The DOM tree demo application demonstrates the powerful combination of a yFiles Complete for Java server, yFiles FLEX API and standard Flash animation and effect capabilities.
The demo provides a text input field for entering URLs. The HTML page that is found at the given location is parsed into a tree structure on the server. In addition, the server calculates a layout for the resulting tree structure and annotates the nodes with their HTML tag type.
The client then displays the generated tree. When the user hovers over a node, a flash effect is triggered which enlarges the node and displays the corresponding HTML tag type as a label.

Launch Demo  

Grouping

The Grouping demo application demonstrates the handling of grouped graphs.

Nodes can be grouped and ungrouped using the toolbar buttons. A node can also be added to a group node or removed from a group node by dragging it with the Shift key held down. The group which will be the node's parent is indicated by highlighted corners.

The hierarchy tree component on the left can be used to browse the hierarchic structure of the graph

Launch Demo  

Drag and Drop

The Drag and Drop demo application demonstrates the interaction of the yFiles FLEX client library and the Flex Component and Drag and Drop framework. The demo features an accordion component containing three palettes each holding different kinds of node styles. The node styles can be selected as the default node style for node creation or nodes can be created by dragging a node style from the palette to the view. In addition, automatic layouts can be calculated for the manually created graph.

Launch Demo  

Documentation

• yFiles FLEX Developer's Guide (online)
• API documentation (online) of the yFiles FLEX client library
• Knowledge Base articles (online), which answer frequently asked questions, or present solutions concerning yFiles FLEX

Commercial Information

Learn more about the terms for the commercial or academic use of yFiles FLEX:

• license types
• ordering

For ordering information and prices, please contact: sales@yWorks.com.

Evaluate yFiles FLEX

You can test and experience the yFiles FLEX with a 30-day, fully functional evaluation version.