Chapter 6. Using yFiles FLEX with a yFiles Server

Table of Contents

Communicating with yFiles Java on the Server
Using the yFiles FLEX Native GraphML Extension with a yFiles for Java Server
Using the yFiles for Java GraphML Extension with yFiles FLEX
GenericNodeRealizer
Communicating with yFiles.NET on the Server
Handling Fonts
Client side
Server side

This chapter explains the formats that are used for communication and file I/O in yFiles applications.

All yFiles libraries use the GraphML format to read and write graph structures and visual attributes of graph items. How to work with yFiles FLEX and the respective GraphML extensions of yFiles Java and yFiles.NET is explained in the sections dealing with the corresponding server technology:

For details on the specific server APIs, see the corresponding chapters, Chapter 7, yFiles FLEX Java Server API and Chapter 8, yFiles FLEX .NET Server API.

Communicating with yFiles Java on the Server

The architecture used by yFiles Java for defining and rendering the visual representation of graph items differs from the architecture used in yFiles FLEX.

yFiles Java uses so-called "realizers" to draw nodes and edges. A realizer contains all properties that are necessary to draw the visual representation of a graph item as well as the code that performs the actual painting. Node realizers and edge realizers also draw the labels assigned to a node or edge. In contrast, in yFiles FLEX a "style" defines the visual properties of a node, an edge, or a label. The drawing code is contained in a separate renderer implementation that knows how to draw a specific style. Also, the location and size of a node (its "layout") is part of the node itself in yFiles FLEX. In yFiles Java, the node layout is a property of the node's realizer.

Because of these architectural differences, the native GraphML format of yFiles FLEX and yFiles Java differs. Example 6.1, “GraphML Format Comparison” compares a labeled node's GraphML serialization using both products.

Example 6.1. GraphML Format Comparison

yFiles FLEX GraphML format

<node id="n0_OLD">
  <data key="d8">
    <y:IShapeNodeStyle>
      <y:Shape>Rectangle</y:Shape>
      <y:Pen name="SolidColor" color="Black" width="1"/>
      <y:Brush name="SolidBrush" color="#ffffcc00"/>
    </y:IShapeNodeStyle>
  </data>
  <data key="d9">
    <y:Labels>
      <y:Label>
        <y:ISimpleLabelStyle>
          <y:Font family="Serif" points="12" style="Regular"/>
          <y:Brush name="SolidBrush" color="Black"/>
        </y:ISimpleLabelStyle>
        <y:InteriorLabelModel position="Center">
          <y:ModelState>
            <y:Insets left="0" right="0" top="0" bottom="0"/>
          </y:ModelState>
        </y:InteriorLabelModel>
        <y:Text>A Label</y:Text>
        <y:PreferredSize width="46" height="19"/>
      </y:Label>
    </y:Labels>
  </data>
  <data key="d10">
    <y:Geometry x="281" y="341" width="30" height="30"/>
  </data>
</node>

The yFiles FLEX GraphML extensions serialize style, labels, and geometry using separate data elements.

yFiles Java GraphML format

<node id="n0_OLD">
  <data key="d1">
    <y:ShapeNode>
      <y:Geometry x="281" y="341" width="30" height="30"/>
      <y:NodeLabel modelName="internal" modelPosition="c" x="-23" y="9.5" 
                width="46" height="19" fontFamily="Serif" fontSize="12" 
                fontStyle="plain" textColor="#000000">A Label</y:NodeLabel>
      <y:Shape type="rectangle"/>
      <y:Fill color="#ffcc00" transparent="false"/>
      <y:BorderStyle color="#000000" type="line" width="1"/>
    </y:ShapeNode>
  </data>
</node>

The serialization of a yFiles Java shape node contains all graphical information for the node as well as the label visualization properties and the node geometry.

As shown in Figure 6.1, “GraphML extensions for communication with a yFiles for Java server”, both GraphML extensions can be used for communication between a yFiles FLEX client and a yFiles Java server. The necessary configuration steps as well as the shortcomings and benefits of both approaches will be described below.

Figure 6.1. GraphML extensions for communication with a yFiles for Java server

GraphML extensions for communication with a yFiles for Java server

Important

It is strongly recommended to use the yFiles FLEX native GraphML extension. Using the yFiles for Java GraphML extension has serious limitations in visual appearance of the nodes and in label placement.

To find out how to work with yFiles FLEX and either of the two GraphML extensions, please see the corresponding section:

Using the yFiles FLEX Native GraphML Extension with a yFiles for Java Server

For most yFiles FLEX applications using a yFiles Java server component, it is recommended to use the native GraphML extension of yFiles FLEX.

To use the native GraphML extension of yFiles FLEX, no special configuration is needed on the client. A plain RoundtripHandler can be used for communication with the server. If a default GraphRoundtripSupport instance is used for reading and writing the graph on the server, the yFiles FLEX native GraphML format will be correctly parsed on the server.

In order to manipulate yFiles FLEX styles, labels and label models on a yFiles Java server easily, the following prerequisites have to be met:

  • The "document fragments mode" of the GraphRoundtripSupport instance used for client-server communication has to be turned off ( See setDocumentFragmentMode(boolean)). This compatibility mode for previous yFiles FLEX versions is turned off as default.
  • Compatibility implementations of the styles and label models that are used on the client have to exist on the server. This is true for the default styles and label models that come with yFiles FLEX. The compatibility implementations provided by the yFiles FLEX server api are contained in the package com.yworks.yfiles.server.graphml.flexio.data.
  • The GraphML data sent from the client has to include the style and label model information. Please see the the section called “Class RoundtripHandler” for details.

For details on reading, writing and accessing yFiles FLEX client style, label and label model data on a yFiles Java server, pleae see the section called “Manipulating yFiles FLEX Styles, Labels, and Label Models”

Using the yFiles for Java GraphML Extension with yFiles FLEX

It is not recommended to use the yFiles for Java GraphML extension to transfer data between client and server.

There are, however, use cases where one needs a yFiles for Java compatible graph with visual features:

  • export into a vector based format using the yExport extension package
  • export into a yFiles for Java application, e.g. yEd.

For these case it is recommended to use Flex native GraphML for the data transfer to the client and create a Graph2D exclusively for the export.

If the yFiles Java GraphML format is chosen for a yFiles FLEX application because the visual properties offered by the default yFiles Java realizers seem sufficient, note that once any additional visual properties are required for the application that are not supported by the default realizers, it will be harder to implement these additional properties using this approach.

No matter which server technology is used, it will be easier to add custom visual appearances to a yFiles FLEX application if the yFiles FLEX native GraphML format is used instead of the yFiles Java GraphML extension. However, if the Java application uses only the default realizer implementations provided by yFiles for Java or if the (de)serialization for custom realizers has already been implemented using custom realizer serializers, using the yFiles for Java compatibility features of yFiles FLEX allows to migrate the graphical appearance of the diagrams to the client without much effort.

The JavaCompatDemo included in the yFiles FLEX distribution shows how a Graph2D instance that uses arbitrarily configured default and custom yFiles for Java realizers can be displayed with a yFiles FLEX client.

In order to enable reading and writing of the yFiles Java GraphML extension, class JavaCompatGraphMLIOHandler is used. Please see API Excerpt 4.3, “Using a GraphMLIOHandler for reading and writing yFiles Java GraphML data” for details on using JavaCompatGraphMLIOHandler.

For backward compatibility reasons, there are two modes of the JavaCompatGraphMLIOHandler. The mode is determined by a boolean value passed to the Constructor. For best possible compatibility with the yFiles Java GraphML format, true should be passed to the Constructor. This will cause the I/O handler to use style implementations that were created specifically for compatibility with yFiles Java. Table 6.1, “yFiles Java compatibility styles” lists the mapping from yFiles Java realizers to yFiles FLEX styles, depending on the mode of the JavaCompatGraphMLIOHandler. If a yFiles Java realizer is parsed on the client, the corresponding style listed in the table will be created.

Table 6.1. yFiles Java compatibility styles

yFiles Java realizer yFiles Flex style (useJavaStyles=true) yFiles Flex style (useJavaStyles=false)
ShapeNodeRealizer JavaShapeNodeStyle ShapeNodeStyle
ImageNodeRealizer JavaImageNodeStyle ImageNodeStyle
PolyLineEdgeRealizer PolylineEdgeStyle
ProxyShapeNodeRealizer There are no corresponding proxy node styles in yFiles FLEX. Instead, the client's ProxyShapeNodeRealizerSerializer tries to find a suitable realizer serializer for the currently active realizer of the proxy realizer and delegates the actual parsing to that realizer serializer.
ProxyAutoBoundsNodeRealizer
GroupNodeRealizer JavaGroupNodeStyle

The client library's AbstractJavaNodeStyle corresponds to the abstract NodeRealizer in yFiles Java.

GenericNodeRealizer

Another abstract style class, the JavaGenericNodeStyle faciliates transferring GenericNodeRealizer to yFiles Flex styles. For each GenericNodeRealizer configuration a subclass of JavaGenericNodeStyle and JavaGenericNodeStyleRenderer has to be created.

The custom rendering implementations have to be implemented in a subclass of JavaGenericNodeStyleRenderer. Table 6.2, “JavaGenericNodeStyleRenderer methods and the corresponding java implementations.” shows which Flex methods correspond to the GenericNodeRealizer implementations. Generally, it is sufficient to refactor the Java methods to Flex / ActionScript.

Table 6.2. JavaGenericNodeStyleRenderer methods and the corresponding java implementations.

Purpose Java implementation Flex implementation
Rendering GenericNodeRealizer.Painter.paintNode() paintNode()
Hit testing GenericNodeRealizer.ContainsTest.contains() isHit()
Intersection GenericNodeRealizer.IntersectionTest.findIntersection() getIntersection()
Bounds calculation GenericNodeRealizer.UnionRectCalculator.calcUnionRect() calculateBounds()

As GenericNodeRealizers are serialized only with their configuration name, the JavaGenericNodeRealizerSerializer searches for the configuration names in its configuration map for appropriate styles. Thus, when initializing this serializer/deserializer, appropriate styles have to be mapped to their corresponding styles.

Example 6.2. Initializing the JavaGenericNodeRealizerSerializer

// Add GenericNodeRealizer configurations. JavaBevelNodeStyle and 
// FloatingNodeStyle are subclasses of JavaGenericNodeStyle.
JavaGenericNodeRealizerSerializer.instance.addConfiguration(
    "Bevel", new JavaBevelNodeStyle());
JavaGenericNodeRealizerSerializer.instance.addConfiguration(
    "Floating", new FloatingNodeStyle());

The configuration property will be set automatically to the serialized configuration name for styles which are deserialized from GraphML. Styles which are created on the client must have their configuration property set to a valid configuration name in order to get serialized properly. If that configuration is not in the serializer's configuration map, it will be stored there automatically if such a style is serialized.

A special implementation of JavaGenericNodeStyle is the JavaGenericNodeStyleWrapper. This implementation can wrap an existing node style into a generic node style. This class can be used to handle GenericNodeRealizer which can be represented by an existing node style, e.g. a Realizer which uses a BevelNodePainter can be emulated with a BevelNodeStyle. It is possible to use this class without subclassing it. However, in some cases the style's properties correspond to some realizer related properties. For example: The BevelNodeStyle's color property has to be set depending on the fillColor property of the realizer. In this case, one has to subclass JavaGenericNodeStyleWrapper and override the fillColor setter to set the color property of the wrapped BevelNodeStyle, too. Usually, it is not necessary to write a custom renderer, however.

Example 6.3. Wrapping a BevelNodeStyle in a JavaGenericNodeStyleWrapper

public class JavaBevelNodeStyle extends JavaGenericNodeStyleWrapper {	
  // Creates a new instance.
  // If no style is provided, then a new one will be created by createStyle().
  // If no renderer is provided, a new instance of 
  // JavaGenericNodeStyleWrapperRenderer will be used.
  public function JavaBevelNodeStyle(style:BevelNodeStyle=null,
                                     renderer:JavaNodeStyleRenderer=null) {
    super(style, renderer);
  }
  // Creates a new instance of the wrapped style.
  protected override function createStyle():INodeStyle {
    var style:BevelNodeStyle = new BevelNodeStyle();
    style.radius = 5;
    return style;
  }
  // Delegates setting the fillColor to the wrapped style.
  public override function set fillColor(value:SolidColor):void {
    BevelNodeStyle(wrapped).color = value.color;
    super.fillColor = value;
  }
  // Creates a copy of this style.
  protected override function createClone():AbstractJavaNodeStyle {
    return new JavaBevelNodeStyle(wrapped.clone() as BevelNodeStyle, 
                                  styleRenderer as JavaNodeStyleRenderer);
  }
}