Visualizing a Partition Grid with yFiles FLEX

Defining and Visualizing a Partition Grid Using Table Nodes

Since version 1.7 yFiles FLEX supports the organization of nodes in a tabular way by so-called table nodes. The partition grid is defined in a table structure defined by the ITable interface. This table structure is backed by a group node, and the diagram's proper nodes, i.e., the actual content nodes, need to be set up so that they are child nodes of this group node. The group node and the ITable model are linked by a special node style, the TableNodeStyle.

The table structure, which typically shows some rows and columns within which the content nodes lie, directly results from the table model which actually defines these rows and columns.

User interaction with the table structure is supported by a specialized input mode, the TableEditorInputMode, which makes avaliable support for resizing rows and columns, re-parenting them, or editing their labels, for example.

The TableLayoutDemo, which is part of the yFiles FLEX source code demos, shows how to define and visualize table nodes and how to set up the layouter.

At the time this article was written there was no chapter about this topic in the yFiles FLEX Developer's Guide. However, the Developer's Guide for yFiles WPF provides a Chapter about Tabular Data Presentation which applies to yFiles FLEX, too (except for the code examples which have to be translated into ActionScript, of course).

Visualizing a Partition Grid on a yFiles FLEX Client without Table Nodes

yFiles for Java offers convenient support for partitioning a graph into rows and columns through class PartitionGrid. In a yFiles for Java application, the rows and columns of a partioned graph can also be visualized easily using a TableGroupNodeRealizer. However, there are no classes in the yFiles FLEX client library that provide similar functionality. The source code attached to this article demonstates how a partition grid can be transferred to the client, and how the client-side representation of the partition grid can be visualized.

The attached demo application renders the partition grid as shown in the image below. Of course, the sources can be customized to provide a more complex visualization.

The attached sources consist of the following files:

• Server sources:
  • PartitionGridOutputHandler.java: An output handler that serializes the yFiles for Java PartitionGrid instance.
  • PartitionGridServlet.java: A Servlet that creates an example graph, defines a partition grid for the example graph, registers the custom output handler, and sends the serialized graph and partition grid to the client
• Client sources:
  • PartitionGridInputHandler.as: An input handler that parses the GraphML representation of the partition grid that has been generated by the server-side PartitionGridOutputHandler.
  • PartitionGridPaintable.as: An IPaintable implementation that renders the client-side representation of the partition grid.
  • PartitionGrid.as, PartitionGridColumn.as, PartitionGridRow.as: A simple model for the client-side representation of the partition grid.
  • PartitionGridDemo.mxml: The yFiles FLEX application that configures the RoundtripHandler and displays the graph and partition grid sent from the server.