yFiles FLEX Web Application
This web application provides some demo applications that demonstrate the versatility of the yFiles FLEX API in combination with a yFiles powered server.Demo Categories
Use the categories to filter the demo applications.
- Example Application
- Visual Aspects
- User Interaction
- Expand/Collapse Navigation
- Client-Server Communication
- Layout
- Grouping and Folding
- All
The Auxiliary Component Demo
Category: Visual Aspects
The Auxiliary Component 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 Bridge Demo
Category: Visual Aspects
The Bridge Demo demonstrates how to create bridges when edges cross an obstacle. In addition to bridges for edge/edge intersections, this demo also shows how to create bridges for other obstacles like group node boundaries.
The Business Process Diagram Demo
Category: Example Application
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 TemplateNodeStyle for swim lanes 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 swim lanes 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 PartitionGrid for the layout on server side
- Usage of custom layout stages during the layout calculation
The Callout Demo
Categories: User Interaction, Visual Aspects
The Callout Demo demonstrates how to add callouts (persistent, expandable tooltips) that provide additional information about graph items.
The Collapsible Tree Demo
Category: Expand/Collapse Navigation
The Collapsible Tree 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 Custom Snapping Demo
Category: User Interaction
The Custom Snapping Demo demonstrates how the snapping feature can be customized.
It demonstrates how to add additional snap lines at labels and how to add additional graph independent snap lines that are visualized and can be moved around the canvas.
The Custom Style Demo
Categories: Visual Aspects, Client-Server Communication
The Custom Style 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 roundtripping capability of the yFiles FLEX server component.
The user may create a graph using the common graph editing gestures and press the Roundtrip 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 Delegating Style Demo
Category: Visual Aspects
The Delegating Style 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 DOM Tree Demo
Categories: Client-Server Communication, Visual Aspects
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 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.
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 Drag and Drop Demo
Category: User Interaction
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 a Flex 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.
The Drill Down Demo
Category: Expand/Collapse Navigation
The Drill Down 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 Edge Labeling Demo
Categories: Layout, Visual Aspects
The Edge Labeling Demo shows how to configure edge labels and the corresponding edge label models as well as how to apply the generic labeling algorithm.
The Folding Demo
Categories: Grouping and Folding, Client-Server Communication
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 Graph Canvas Demo
Category: Example Application
The Graph Canvas Demo 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 combo box.
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 combo box. 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 integrated help 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 Graph Wiki Demo
Category: Client-Server Communication
The Graph Wiki 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 a URL to the nodes by right-clicking 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 Grid Demo
Categories: User Interaction, Visual Aspects
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 Grouping Demo
Category: Grouping and Folding
The Grouping Demo demonstrates the handling of grouped graphs with yFiles FLEX.
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.
It features the yFiles FLEX hierarchy tree view component that allows to easily navigate the nesting structure of the graph.
The Incremental Hierarchic Grouping Demo
Categories: Expand/Collapse Navigation, Grouping and Folding
The Incremental Hierarchic Grouping Demo demonstrates expand/collapse functionality for grouped graphs.
The Incremental Hierarchic Layouter Demo
Categories: Layout, User Interaction,
The Incremental Hierarchic Layouter Demo shows how to use the IncrementalHierarchicLayouter together with sophisticated customized user interaction functionality.
The application will automatically perform a new layout whenever the user makes changes to the graph. The layout does not change the layer assignment of the nodes. Moreover, the sequence of nodes within each layer is preserved.
The Layer Constraints Demo
Category: Layout
The Layer Constraints Demo shows how to use layer constraints with the IncrementalHierarchicLayouter to restrict the node layering.
The Layout Module Demo
Categories: Example Application, Layout, Client-Server Communication
The Layout Module Demo demonstrates the most important layout algorithms available with yFiles. It also shows how complex configurations for yFiles layout algorithms can be created interactively and executed remotely.
When a layout algorithm is selected, a form is shown that allows to configure the individual properties of the layout algorithm. The properties are set on a data object that is sent to the server, using the automatic serialization capabilities of yFiles FLEX.
The API that is used for editing the layouter properties is part of the demo source code.
Supported layout styles are:
- Hierarchic
- Orthogonal
- Organic
- Circular
- Tree
The Lookup Decorator Demo
Category: User Interaction
The Lookup Decorator Demo demonstrates how to customize aspects of display and user interaction by modifying the item-specific lookup mechanism. In this example, the repositioning and resizing behavior of nodes and bends is changed.
The Mixed Layout Demo
Categories: Layout, Client-Server Communication
The Mixed Layout Demo shows how to use the recursive group layouter to apply different layouts to the contents of group nodes.
The Organization Chart Demo
Categories: Example Application, Expand/Collapse Navigation, Visual Aspects
The Organization Chart Demo 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 organization chart example of different sizes, where one of these also features group nodes to illustrate departments.
The 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
- A subgraph of the current model graph is displayed and can be extended and collapsed interactively
- The TemplateNodeStyle is used to visualize each node's content based on its 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
The Orthogonal Edges Demo
Category: User Interaction
The Orthogonal Edges Demo shows how orthogonal edge editing can be customized by implementing the IOrthogonalEdgeHelper interface and adding instances to the lookup chain of the edges in the graph via the ILookupDecorator mechanism.
The Port Candidate Demo
Categories: Layout, Client-Server Communication
The Port Candidate Demo shows how PortCandidateSets can be used with IncrementalHierarchicLayouter to control from what side edges connect to certain node types in the automatic layout process.
The Sequence Constraints Demo
Categories: Layout, User Interaction
The Sequence Constraints Demo shows how to use sequence constraints with the IncrementalHierarchicLayouter to restrict the node sequencing.
The Snap Line Demo
Category: User Interaction
The Snap Line Demo demonstrates the snapping feature.
It demonstrates how the snapping behavior can be influenced by diverse setting options.
The Template Style Demo
Categories: Visual Aspects, Client-Server Communication
The Template Style 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 yFiles for Java Compatibility Demo
Category: Client-Server Communication
The yFiles for Java Compatibility Demo demonstrates the yFiles FLEX client support for visual features of yFiles for Java.
The yFiles for Java Export Demo
Category: Client-Server Communication
The yFiles for Java Export Demo demonstrates how to export a Flex graph to an image file using a yFiles for Java server.