Controlling Link Decorations

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

Controlling Link Decorations

INDEX

PREVIOUS NEXT

IlvGeneralLink allows you to place an IlvGraphic object onto a link, at a relative position. You can place the decoration above the link or beside the link (the default).

Note that the syntax to enter the decorationPosition value is an array. You can enter all the values at once as a comma-separated list of values or enter the array elements one by one.

Another array property, decorationOptions, alters the way in which the decoration is displayed. This property is a bit set of values, so you can specify several options at the same time using the vertical bar operator | as follows:

DECORATION_FIXED_SIZE: If set, the decoration will not zoom.
DECORATION_ROTATE: If set, the decoration is rotated to follow the link shape.
DECORATION_ANIMATE: If set, the decoration will move along the link. The speed is defined by the property animateSpeed.
DECORATION_NOTHING: Means default values (zoomable, no rotation, no animation).

To place the decoration over the link, set the option DECORATION_OVER , then set additional options to control the position of the decoration with respect to the center of the link:

DECORATION_ANCHOR_TOP: Shifts the decoration below the link at the center.
DECORATION_ANCHOR_BOTTOM: Shifts the decoration above the link at the center.
DECORATION_ANCHOR_LEFT: Shifts the decoration to the right of the link at the center.
DECORATION_ANCHOR_RIGHT: Shifts the decoration to the left of the link at the center.

It is possible to mix options: DECORATION_ANCHOR_TOP|DECORATION_ANCHOR_LEFT places the top-left corner of the decoration at the link center. The default behavior places the center of the decoration at the center of the link, and you can apply an offset with the x, y values for the decoration bounding box.

Figure 3.11 shows three decorations, one is a label and two are icons on the same link.

Figure 3.11 Decorations on Links


Subobject#label {
        class            :\ 
'ilog.views.sdm.graphic.IlvGraphicFactories$ZoomableLabel' ;
        label            : "smile!" ;
        antialiasing     : true ;
        leftMargin       : 5 ;
        rightMargin      : 5 ;
        topMargin        : 5 ;
        bottomMargin     : 5 ;
        foreground       : white ;
        borderOn         : true ;
        stroke           : @=stroke ;
        strokePaint      : @=borderPaint ;
        backgroundOn     : true ;
        backgroundPaint  : @=bgPaint ;
}

// border is cyan
Subobject#borderPaint {
        class            : ilog.views.sdm.graphic.IlvPaint ;
        color            : cyan ;
}

// background is blue
Subobject#bgPaint {
        class            : ilog.views.sdm.graphic.IlvPaint ;
        color            : blue ;
}

// stroke for the text
Subobject#stroke {
        class            : ilog.views.sdm.graphic.IlvBasicStroke ;
        lineWidth        : 1 ;
}

// smiley icon
Subobject#smiley {
  class         : "ilog.views.sdm.graphic.\
IlvGraphicFactories$Icon"
  IlvRect       : 0,0,12,12 ; 
  imageLocation : file:smiley.gif ; 
}

Code Sample 3.6 Decorations on Links

Note the convenient property called label that quickly accesses the first decoration implementing the IlvLabelInterface. If no decoration is found, a simple IlvZoomableLabel is created at the first available slot of the current decorations array.

PREVIOUS NEXT