Controlling the Link's Look

Developing with the SDK > Using CSS Syntax in the Style Sheet > Customizing General Links in the Style Sheet > Controlling the Link's Look

Controlling the Link's Look

INDEX

PREVIOUS NEXT

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.

Figure 3.4 Three Possible Link 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' ; 
}

Code Sample 3.4 Basic Link Settings and Three Possible Modes

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 3.5 Three Possible Link 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 ; 
}

Code Sample 3.4 Basic Link Properties and Three Possible Borders

Different Border Effects

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

Figure 3.6 Using Two Colors in Link Borders


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 ; 
}

Code Sample 3.4 Rounded Two-Color Links

Line (Stroke) Ends and Joins

IlvGeneralLink inherits from ilog.views.graphic.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 Figure 3.7.

Figure 3.7 Three Possible End and Join Style 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 ; 
}

Code Sample 3.5 Basic Link Properties and Three Possible End and Join Combinations

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 Figure 3.8.

Figure 3.8 An Attractively Curved Link

Code Sample 3.6 Basic Line Properties and a Curve in Three Different Line Styles

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 Figure 3.9) unless the borderStyle property overrides it (not shown).

Figure 3.9 Three Uses of Dashes for Links


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 ; 
}

Code Sample 3.6 Basic Link Properties and Three Links with Dashes (One a Curve)

PREVIOUS NEXT