Diagram Data Binding
This article explains how to bind the Diagram component to a data source using descriptor classes. Data binding provides an alternative to defining shapes and connections declaratively with tags.
The Diagram supports binding to collections of shapes and connections through two main parameters:
ShapesData—accepts aList<DiagramShapeDescriptor>that defines the shapes and their properties.ConnectionsData—accepts aList<DiagramConnectionDescriptor>that defines the connections between shapes and their properties.
The descriptor classes mirror the properties of the declarative tags <DiagramShape> and <DiagramConnection>, allowing you to configure the Diagram elements programmatically.
Descriptor Classes
The data binding mechanism uses descriptor classes that correspond to the declarative component tags. For each tag, there is a descriptor class with the same properties:
DiagramShapeDescriptor—corresponds to<DiagramShape>and contains properties likeId,X,Y,Width,Height,Fill,Content, and more.DiagramConnectionDescriptor—corresponds to<DiagramConnection>and contains properties likeFromId,ToId,Stroke,Content, and more.
Nested properties (such as Fill, Stroke, and Content) also have their own descriptor classes:
DiagramShapeFillDescriptor—defines the fill color and gradient of a shape.DiagramShapeContentDescriptor—defines the text and text color displayed inside a shape.DiagramShapeContentBlockDescriptor—defines a block inside the Shape that can hold text or image children.DiagramShapeContentBlockDescriptor—defines a single child within a Shape content block.DiagramConnectionStrokeDescriptor—defines the stroke color and width of a connection.DiagramConnectionContentDescriptor—defines the text and text color displayed on a connection.DiagramConnectionEditableDescriptor—configures connection editing behavior, including point editing, dragging, and removal.DiagramConnectionEditablePointsDescriptor—configures connection point editing behavior, including enabling point editing and snap distance.
Binding Data from Custom Models
You can map data from your existing model classes to the descriptor classes. This approach provides flexibility and allows you to integrate the Diagram with your application data.
The example below demonstrates how to:
- Use a custom model class (
DiagramEmployee). - Map the model data to
DiagramShapeDescriptorandDiagramConnectionDescriptor. - Set shape and connection properties such as color, text, and position.
- Use rich content in the Shapes declaratively.
Binding the Diagram to data from custom models
Direct Descriptor Initialization
You can also create the descriptor objects directly without mapping from custom models. This approach is useful when you don't have an existing data structure or prefer to define the Diagram data inline.
Direct initialization of descriptor objects