Controlling the link’s look

> > > > >

Controlling the link’s look involves:

In the description of each of these items, the figure shows three possible customizations and the code that follows the figure shows the style sheet setting for each customization in the same order.

Modes

The link has three major different looks, associated with the property mode . For the first and second looks, the foreground property sets the main color.

Three possible link modes

Basic link settings and three possible modes

link {
        lineWidth   : 10
        foreground  : pink ; 
}

link.top {
        mode     : MODE_UNICOLOR ; 
}

link.center {
        mode     : MODE_GRADIENT ; 
}

link.bottom {
        mode     : MODE_TEXTURE ; 
        texture  : 'file:/home/kaplan/JViews30/\
bin/composer/images/textures/wood2.gif' ; 
}

Adding a border

A border is painted when the borderWidth property is greater than 0 , its default value. The default border color is black, and two other properties control the line style (for example, dashes).

Figure
showing three link with different border properties. The links are
vertically aligned. All have a green fill color and a double bend.
The top link has a solid red border, the middle link has a green dashed-line
border, and the bottom link has a black border..

Three possible link borders

Basic link properties and three possible borders

link {
        lineWidth   : 10 ; 
        foreground  : 144,238,144 ; 
        endCap      : CAP_BUTT ; 
}

link.top {
        borderWidth   : 4 ; 
        borderUpColor : red ; 
}

link.center {
        borderWidth   : 4 ; 
        borderUpColor : gray ; 
        borderStyle   : 10,5 ; 
}

link.bottom {
        borderWidth : 2 ; 
}

Different border effects

The border can have two colors: one for the upper edge and one for the lower edge.

Figure
showing three link with different fill color and border properties.
The links are vertically aligned. All have a a double bend and rounded
ends. The top link has a pink fill color with a solid white border
on its top edge, and a solid black border on its bottom edge, the
middle link has an orange fill color with a white dashed-line border
at its top edge and a black dashed-line border at its bottom edge.
The bottom link has a green fill color with a solid yellow border
at its top edge and a solid blue border at its bottom edge.

Using two colors in link borders

Rounded two-color links

link {
        lineWidth       : 10 ; 
        endCap          : CAP_ROUND ; 
        lineJoin        : JOIN_ROUND ;
        borderWidth     : 4 ; 
        borderUpColor   : white ;
        borderDownColor : black ; 
        mode            : MODE_UNICOLOR ; 
}

link.top {
        foreground   : pink ; 
}

link.center {
        foreground   : orange ; 
        borderStyle  : 10,10 ; 
}

link.bottom {
        borderUpColor   : yellow ; 
        borderDownColor : blue ; 
        foreground      : 30, 200, 50 ;
}

Line (stroke) ends and joins

IlvGeneralLink inherits from IlvPolylineLinkImage. The default stroke parameters are JOIN_MITER and CAP_SQUARE . A miter join is a sharp join formed by extending one edge of each link. You can change the end cap and join styles, as shown in the following figure.

Figure
showing three link with different end and join style combinations.
The links are vertically aligned. All have a blue fill color with
solid black borders and a double bend. The top link has rounded ends
and joins, the middle link has open or butt ends and mitered joins,
while the bottom link has square ends and beveled joins.

Three possible end and join style combinations

Basic link properties and three possible end and join combinations

link {
        lineWidth   : 10 ; 
        foreground  : 154,154,255 ; 
        borderWidth : 2 ; 
}

link.top {
        endCap   : CAP_ROUND ; 
        lineJoin : JOIN_ROUND ; 
}

link.center {
        endCap   : CAP_BUTT   ; 
        lineJoin : JOIN_MITER ; 

}

link.bottom {
        endCap   : CAP_SQUARE ; 
        lineJoin : JOIN_BEVEL ; 
}

Curves

The curved property uses the link points to feed a Bezier function which renders a curved link. Intermediate points show the path for the Bezier computation. With two points, a standard deviation applies, that is, at 1/4 before the end of the link. The curved value is a floating-point value between 0f and 1f . A value of 0 means no curve at all (the default), and a value of 1 means the sharpest curve. Use a value of 0.65f for an attractive curve, see the following figure.

Figure
showing three curved links with a pink fill color. The links are vertically
aligned. The top link has rounded ends and a thin black border. The
middle link consists of a sequence of small rectangles with black
borders, and gives the appearance of a dashed line following a very
slight curve. The bottom link has a black dashed-line border.

An attractively curved link

Basic line properties and a curve in three different line styles

link {
        lineWidth   : 10 ; 
        endCap      : CAP_ROUND ; 
        lineJoin    : JOIN_ROUND ; 
        foreground  : 255,218,185 ; 
        borderWidth : 2 ; 
        curved      : 0.65 ; 
}

link.top { 
        mode : MODE_UNICOLOR ; 
}

link.center { 
        endCap    : CAP_SQUARE ; 
        lineStyle : 10,20 ; 
}       

link.bottom { 
        borderStyle : 1,10 ; 
        borderWidth : 6 ; 
}

Dashes

Dashes provide interesting effects when combined with endCap values. Dashes are controlled by the lineStyle property. They are expressed as a float array. Alternate entries in the array represent lengths of the opaque and transparent segments of the dashes. Note that the lineStyle specification is not affected by zooming.

Note that the dash specification also applies to the border (as shown in the following figure) unless the borderStyle property overrides it (not shown).

Figure
showing three vertically-aligned dashed-line links, each with solid
black borders. The top link has a blue fill color and one double-bend
with a round join. Its rounded ends give the dashes in this link the
appearance of small, well separated circles. The middle link has an
orange fill color. Its dashed segments are contiguous, so its rounded
ends give the link the appearance of a chain of oblong shapes, with
a kink near the middle for the one double bend with the rounded join.
The third link has a red fill color and follows a slight curve. The
dashes in this link are smaller and more numerous than those in the
other two links. The butt ends leave the dashes without borders on
their left and right flanks, giving the link the appearance of a segment
of railroad tracks without the connecting rails.

Three uses of dashes for links

Basic link properties and three links with dashes (one a curve)

link {
        lineWidth   : 10 ; 
        endCap      : CAP_BUTT ; 
        lineJoin    : JOIN_ROUND ; 
        borderWidth : 2 ; 
}

link.top {
        foreground  : #55BEF3  ; 
        lineStyle   : 1,15  ; 
}

link.center { 
        foreground : orange ; 
        lineStyle  : 10,8,20,8 ;  
}       

link.bottom { 
        foreground : red ; 
        mode       : MODE_UNICOLOR ; 
        endCap     : CAP_BUTT ; 
        lineStyle  : 4,4 ; 
        curved     : 0.65 ; 
}

Current section

Customizing general links in the style sheet