Customised scrollbars can be created by writing a template file and
then referring to its location in this field. You will be required to
configure the look of the scrollbar for both vertical and horizontal
arrangements. This is done by writing a series of script procedures for
the different areas of the scrollbar.
The following extract is from the default templates:scrollbardef.xml
file. Notice that there are three areas to define, all of which relate to
the creation of a vertical scrollbar. The procedures are: vbar - defines
the background graphic for the entire scrollbar area; vslider - defines the
graphical content of the slider; vbuttons - creates the buttons for the
scrollbar. For a horizontal scrollbar the procedures are named hbar,
hslider and hbuttons. A special 'scroll' argument may be referenced if you
need to talk to the scroll object that controls the scrollbar slider. This
is necessary for registering buttons in the scrollbar (note use of the Scroll class'
AddButton method).
<dml procedure="vbar">
<set object="[owner]" width="18" topmargin="=[owner.width]-1" bottommargin="=[owner.width]-1"/>
<gradient firstcolour="192,192,192" lastcolour="90,90,90" direction="vertical"/>
<box border="64,64,64"/>
</dml>
<dml procedure="vslider">
<box boxes="(r0,0,!0,!0) (r1,1,!1,!1)" highlight="64,64,64"
highlight(1)="255,255,255" shadow="64,64,64" shadow(1)="175,175,175" colour="230,230,230"/>
<image src="environment:images/scrollbar" align="center"/>
</dml>
<dml procedure="vbuttons">
<button x="0" y="0" height="[owner.width]" xoffset="0" flags="!nofocus">
<arrow drawable="[owner.region]" align="center" arrowwidth="7" arrowheight="4" direction="up" colour="60,60,60"/>
<action method="addbutton" object="[{scroll}]" &button="[owner]" &direction="1"/>
</button>
<button x="0" yoffset="0" height="[owner.width]" xoffset="0" flags="!nofocus">
<arrow drawable="[owner.region]" align="center" arrowwidth="7" arrowheight="4" direction="down" colour="60,60,60"/>
<action method="addbutton" object="[{scroll}]" &button="[owner]" &direction="2"/>
</button>
</dml>
|