yFiles FLEX Web Application

The GraphCanvas Demo Application demonstrates graph parsing, layout, navigation and editing with yFiles FLEX. You can load various GraphML files that are located in a predefined directory on the server using the provided combobox.

The files will be sent from the server to the client and stored in the client application. The server implementation for this demo is stateless.

At first, the graph will be loaded with the node coordinates specified in the GraphML file. The layout can be changed using the Layout combobox. This will tell the server to compute a new layout for the current graph. For this to work the graph is sent to the stateless server that computes the layout and sends back the layout data to the client.

On the second tab labeled "GraphML" the GraphML file format can be explored in a simple roundtrip fashion. As soon as a graph has been created on the first tab, the GraphML representation can be loaded into the second tab using the corresponding button. The text area then displays the GraphML code which can be modified directly. Clicking the second button will load the GraphML file back into the editor.

Additionally there is a save button that downloads the GraphML file to the client. Due to limitations of the Flex sandbox, this is done via the server.

The graph can be moved by pressing the shift button and moving the mouse. For additional navigation and editing functionality see the help tab in the demo application. If the currently loaded graph provides descriptions 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 for the corresponding items will contain an option that will load the corresponding URL in a new Browser window.

The TemplateStyle Demo shows how to use the TemplateNodeStyle and TemplateLabelStyle for creating complex node- and label visualizations using Flex MXML components.

The yFiles FLEX template styles allow to use arbitrary MXML components for graph item visualization, while being able to access all relevant context information from the component implementation.
Most context properties can be used with data-binding.

This demo uses so-called "user-tags" to associate complex custom data objects with graph items.

In addition, the demo features proper (de)serialization of the template styles and user tags for client-server communication.

The DOM Tree Demo demonstrates the powerful combination of a yFiles powered server, the yFiles FLEX API and standard Flash animation and effect capabilities.

The DOMTree Demo provides a text input field to enter URLs. The HTML page that is found at the given location is parsed into a tree structure on the server side. In addition, the server 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.

Links (indicated by red circles) can be followed by using the context menu. Note that this will work only for standard links that link to pages with standard HTML content.

The CustomStyle Demo demonstrates how to implement a custom style for nodes.

It shows how to properly serialize and deserialize the custom style instance to and from GraphML files and demonstrates the round tripping capability of the yFiles for Flex server component.

The user may create a graph using the common graph editing gestures and press the round trip button to send the graph to the server. The server will calculate a new layout for the graph and additionally determine the centrality values for the nodes in the graph. The results of running that algorithm is encoded visually into the custom style and transferred back to the client.

The AuxComponent Demo demonstrates how to add an arbitrary auxiliary component to nodes using a custom style implementation.

The example Dialog that is attached to each node allows to add parent and child nodes and siblings.

The Grouping Demo demonstrates the handling of grouped graphs with yFiles FLEX.

It features the yFiles FLEX hierarchy tree view component that allows to easily navigate through the nesting structure of hierarchic graphs.

The Folding Demo demonstrates "folding", an extension of the grouping concept which provides additional functionality on top of it. Basically, folding provides support for collapsing group nodes and for the reverse operation, expanding previously collapsed group nodes. Collapsing a group node means hiding away all of its contents, expanding a previously collapsed group node results in the contents being visible again.

This demo shows how to navigate through a graph hierarchy, opening and closing of group nodes and navigating into the contents of group nodes.

The yFiles Java Compatibility Demo demonstrates the support for yFiles for Java visual features by the yFiles FLEX client.

The yFiles Java Export Demo demonstrates how to export a flex graph to an image file using a Java server.

The Callout Demo demonstrates how to add callouts (persistent, expandable tooltips) that provide additional information about graph items.

The DelegatingStyle Demo demonstrates how to decorate existing styles with additional visual features such as effects, transparency or filters.

Moreover, it demonstrates how to hide elements temporarily from the user using an invisible style.

The Bridge Demo demonstrates how to create bridges when edges cross an obstacle. In addition to bridges for edges/edge intersections, this demo also shows how to create bridges for other obstacles like group node boundaries.

The CollapsibleTree Demo is an example yFiles FLEX application that provides some functionality beyond the standard navigation and editing functions contained in the yFiles FLEX API.

For the tree that is loaded into the editor, each inner node may either be collapsed or expanded. The children of collapsed nodes are not visible in the editor. In addition, the layout algorithm may be changed.

The application demonstrates custom behavior of both the view shown in the client and the Servlets the client communicates with. In addition, the nodes are rendered with custom icons that indicate their current state.

The Drag and Drop Demo 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 containing different 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.

The DrillDown Demo demonstrates drill-down navigation behavior: Single nodes in a graph represent distinct graphs that can be loaded by clicking the nodes.

The demo also features a modified overview component that facilitates navigation in the graph hierarchy.

The GraphWiki Demo is a simple demo that implements a Wiki-like graph repository.

Users may load, edit, and save graph instances, add descriptions and urls to the nodes in the graphs and share them with other users simply by telling them the name of the graph.

Create nodes and edges using the common graph editing gestures of all demos and attach a description or an url to the nodes by righclicking on them and using the action in the provided popup menu.

The graphs are stored on the server under the name that can be entered at the top of the form.

The IncrementalHierarchicGrouping Demo demonstrates expand/collapse functionality for grouped graphs.

The Grid Demo demonstrates how to use a grid in the yFiles FLEX canvas. The grid restricts creation and repositioning of graph items to discrete coordinates.

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 NodeStyles using shapes according to the elements specified in BPMN 1.1
• Usage of the ComponentNodeStyle for swimlanes and pools
• Custom EdgeStyle with custom Arrows according to the relations specified in BPMN 1.1
• Usage of "user tags" to link data model objects to the nodes and edges
• Usage of group node insets for swimlanes and pools
• Node creation via Drag'n'Drop
• Usage of a "port candidate provider" to restrict edge creation according to the BPMN 1.1 specification
• Usage of custom input modes
• Usage of a custom position handler to handle movement of nodes
• Usage of custom (de)serializers for business model objects
• Usage of swimlanes for visualization and editing on the client side as well as for the layout on server side
• Usage of custom layout stages during the layout calculation

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.

The orgchart demo uses the following techniques offered by/using the yFiles FLEX library:

• An OrgChartCanvasComponent is used which conveniently wraps the functionality to display a graph based on a xml file
• XML files are used as data model for an automatically generated graph
• In the local view mode a subgraph of the current model graph is displayed
• The TemplateNodeStyle is used to visualize each node's content based on it's corresponding xml data node
• The Node visualization changes on different zoom levels
• A MoveViewportKeyboardInputMode allows moving and zooming the canvas with the cursor keys and the +/- keys
• A custom OverviewGraphPaintable is used to color the nodes in the overview according to their corresponding xml data node
• A reusable ZoomEffectAnimation is used to create an effect while zooming