A Guide to Diagram – Part 3 – Styling your Links

In the last article we looked at nodes and what you could put in them, so to round off the basic story we need to follow that up with links. 
There's not really too much to configure when it comes to links, if you have a look at the tag doc for the <dvt:diagramLink> you'll see pretty much what you would expect in terms of the ability to set the color, thickness and style of the links through attributes. So we could, for example, enhance the sample diagram that I've been using for these articles with something a little more interesting.  In this case I've extended the data-model for the links to create two extra attributes; weight and status.
Then we can amend the <dvt:diagramLinks> section of the diagram definition with multiple types of links based on the combination of the new status and weight attributes:
<dvt:diagramLinks id="dls1" value="#{diagramModel.links}" var="link">
  <dvt:diagramLink id="dl1" rendered="#{link.status eq 'COMMITTED'}" 
                   linkWidth="#{link.weight}" linkStyle="dash"/>
  <dvt:diagramLink id="dl2" rendered="#{link.status eq 'PLANNED'}" 
                   linkWidth="#{link.weight}" linkStyle="dot"/>
  <dvt:diagramLink id="dl3" rendered="#{link.status eq 'COMPLETE'}"
                   linkWidth="#{link.weight}" linkStyle="solid"/>                 

Here's the result:

Sample diagram with styled links


The final look and feel control over the link is of course the startConnectorType and endConnectorType.  Out of the box you have the following options:

arrow Arrow connector
arrowConcave Concave arrow connector
arrowOpen Open arrow connector
circle Circle connector
rectangle Rectangle connector
rectangleRounded Rounded rectangle connector

So we can apply some of those to the link definition in the sample diagram e.g.

<dvt:diagramLink id="dl1"
                 rendered="#{link.status eq 'COMMITTED'}" 
                 linkWidth="#{link.weight}" linkStyle="dash"

With the following result:

Sample diagram with connectors
You'll notice that there is a bit of a collision going on between the label and the connectors of the Third Node, just because the label happens to be on the bottom of the node where the two links are anchored. Don't worry though, when we come on to discuss custom layouts in a later article we'll cover how you can control the termination point of the links to avoid this. 

Link Facets

Diagram links, just like nodes, support some facets to add a little more flexibility.

Label Facet

Not surprisingly, links can be labeled and the label can either be applied using the link label attribute on the diagramLink component, or using the label facet.   In this case I've added an additional getLabel() property to the SampleLink class and I'm displaying it using the label attribute of the diagramLink component. 
Sample diagram with the addition of link labels
The label facet of the link is not as generous as that of the diagram node, so you can't use it to define complex layouts for the link label.  You are only allowed to use a either a single <af:outputText> or <dvt:marker> as the child of this facet, no layouts or other fancy stuff.  The use of a marker, however, will provide you with the capability to add an image onto the link (it will overlay the link line).  Note that just like the background facet on the <dvt:diagramNode> the marker image in this case is passive and any action associated with the marker will be ignored.  In a later article, I'll look at the selection and eventing model of diagram and we'll see how actions can be carried out when a link is selected.
You'll notice that you don't have any obvious control over the position of the label, relative to the link. In the example above, it's just overlaid on the midpoint of the link.  Agaiin, when we look at diagram layouts, I'll show how you can control this. 

StartConnector / endConnector Facet

As shown, there are a number of pre-built connectors built into the link component, however, if you have the need for something different, you can use these two facets to provide your own link terminators to augment the standard shapes.  Not surprisingly, the component to nest here would be a <dvt:marker> pointing to the image that you want to use.  Again an SVG image should be used for preference, just to ensure clean scaling as the connector will be scaled to match the line width - something you can see with the three different line widths in our sample.  Just like the label facet, markers used here will be passive and purely decorative.

In the Next Article 

That's it for links, a pretty short topic. We still have a lot of good stuff to talk about in relation to the diagram event model, grouping and stacking.  However, to really progress much further, we need to start looking at layouts and how to create your own, so that will be the subject of the next set of articles in this series.


Post a Comment:
  • HTML Syntax: NOT allowed

Oracle Data Visualizations provide a broad range of beautiful, interactive components for viewing and understanding data. This blog covers topics on the new features in Oracle Data Visualization components and how-to articles on advanced functionality.


« February 2015