Chapter 2. Displaying and Editing Graphs

Table of Contents

Model-View-Controller Paradigm
Graph Structure
Events
Look-up Support
Class DefaultGraph
Look-up Support
Working with DefaultGraph
Visual Representation of Graph Elements
Styles
Node Styles
Edge Styles
Port Styles
Label Styles
Working with Styles
Creating Custom Styles
Style Renderers
Node Style Renderers
Edge Style Renderers
Port Style Renderers
Label Style Renderers
Port Support
Port Location Model Parameter
Label Support
Label Model Parameter
Node Label Models
Edge Label Models
Generic Label Model
Styles-related Features
Arrows
Rendering-related Features
Bridges
Z-Ordering
Layer Policies
Z-Order Indices
View Implementations
Class GraphCanvasComponent
General Features
Scene Graph Addendum
Application-level Features
Class CanvasComponent
General Features
World and View Coordinates
Viewport
Hit-testing
Application-level Features
Scene Graph and Canvas Objects
Class GraphOverviewComponent
User Interaction
Class GraphEditorInputMode
General Features
Customizing GraphEditorInputMode Interaction Functionality
Support for Orthogonal Edge Paths
Support for Interactive Snapping of Graph Elements
Class MainInputMode
Other Input Modes
Class MoveViewportInputMode
Creating Custom Context Menus
Customizing Input Modes
Customizing User Interaction Behavior
Customizing Edge Creation using Port Candidates
Creating a custom IPortCandidateProvider
Tabular Data Presentation
Concepts
Table Model
Working with the Table Model
Visual Representation
Rows and Columns
User Interaction
Interaction Customization
Hit-testing
Automatic Layout

This chapter shows how to display a graph in a specialized Flex UI component and how user interaction with both graph elements and the component containing a graph is handled. It presents the types that are responsible for the visual representation of graph elements and explains their contribution to the "look and feel" of an application.

Model-View-Controller Paradigm

yFiles FLEX provides user interface (UI) functionality comprising two main aspects, namely the presentation of a graph structure to the user and the interaction of a user with the graph structure.

The Model-View-Controller (MVC) paradigm is reflected in yFiles FLEX, i.e., among the classes there can be distinguished the following three types, each having specific responsibilities:

  • Model classes: hold data specific to the application
  • View classes: present information to the user
  • Controller classes: modify the model

In terms of MVC, the types around interface IGraph and around interface IVisualStyle make up the model which holds data and state. Class GraphCanvasComponent provides the view which presents the information to the user. Finally, the so-called input modes, i.e., in particular, class GraphEditorInputMode enable convenient modification of the model by means of a variety of supported user gestures.

The respective parts of MVC are further described in the following sections:

Figure 2.1, “Model-View-Controller paradigm in yFiles FLEX” depicts the interdependencies of the three parts. The view, an instance of class GraphCanvasComponent, displays the model consisting of an IGraph and the INode, IEdge, ILabel, etc. model item instances it contains. The view also propagates user interface events to the controller(s): IInputMode implementations, with GraphEditorInputMode being the most comprehensive. According to these events, the controllers then change state on either view or model.

Figure 2.1. Model-View-Controller paradigm in yFiles FLEX

Model-View-Controller paradigm in yFiles FLEX.