If you want to create a scrollbar with a custom look, you can use
basescrollbar
along with helper classes
basescrolltrack
,
basescrollthumb
, and
basescrollarrow
. These classes will allow you
to change resources, colors, and the position or presence of various
elements.
Example 37. An unconventional scrollbar
<canvas
height
="120
" bgcolor
="silver
">
<class
name
="myscrollbar
" extends
="basescrollbar
" width
="20
">
<view
name
="scrolltrack
" width
="100%
" options
="releasetolayout
">
<basescrolltrack
x
="5
" direction
="-1
" width
="${parent.width-10}
" height
="${parent.thumb.y}
" bgcolor
="yellow
"/>
<basescrollthumb
name
="thumb
" x
="1
" width
="${parent.width-2}
" bgcolor
="green
"/>
<basescrolltrack
x
="5
" direction
="1
" y
="${parent.thumb.y+parent.thumb.height}
" width
="${parent.width-10}
" height
="${parent.height - parent.thumb.y - parent.thumb.height}
" bgcolor
="yellow
"/>
</view
>
<basescrollarrow
direction
="-1
" x
="2
" bgcolor
="yellow
">
<text
>up
</text
>
</basescrollarrow
>
<basescrollarrow
direction
="1
" x
="2
" bgcolor
="yellow
">
<text
>dn
</text
>
</basescrollarrow
>
<resizelayout
spacing
="4
"/>
</class
>
<view
x
="10
" y
="10
" bgcolor
="white
" width
="200
" height
="100
" clip
="true
">
<text
multiline
="true
" width
="180
">
Man through his scientific genius has been able to draw distance and
save time and space. He has been able to carry highways through the
stratosphere. We read just the other day that a rocket plane went 1900
miles in one hour. Twice as fast as the speed of sound. This is the
new age. Bob Hope has described this new age, this jet age; it is an
age in which planes will be moving so fast that we will have a
non-stop flight from New York to Los Angeles, when you start out you
might develop the hiccups and you will hic in New York and cup in Los
Angeles. This is an age in which it will be possible to leave Tokyo on
a Sunday morning and arrive in Seattle, Washington on the preceding
Saturday night. When your friends meet you at the airport and ask what
time did you leave Tokyo, you will have to say I left tomorrow. That
is this new age. We live in one world geographically. We face the
great problem of making it one spiritually.
<br
/>
Through our scientific means we have made of the world a
neighborhood and now the challenge confronts us through our
moral and spiritual means to make of it a brotherhood. We must
live together, we are not independent we are interdependent. We
are all involved in a single process. Whatever affects one
directly affects all indirectly for we are tied together in a
single progress. We are all linked in the great chain of
humanity.
<br
/>
Martin Luther King, Jr.
<br
/>
11 August 1956
</text
>
<myscrollbar
/>
</view
>
</canvas
>
Scrollbar arrows are optional or may be placed anywhere within the
scrollbar. The thumb and track elements expect to be inside a view
named scrolltrack
. It may seem odd that the
scrolltrack is placed twice, but this allows a more flexible
appearance as well as particular behaviors that you may want to
trigger differently when the user clicks the track to scroll up or
down.
For another example of using basescrollbar
,
you can look at lps/components/lz/scrollbar.lzx to see the code for
the lz scrollbar
class. An easy way to make
your own scrollbar is to copy that file and replace resources and
modify attributes or views to suit your design goals.
Name (CSS property) | Type (tag) | Type (js) | Default | Category |
---|---|---|---|---|
axis
|
string | String | y | initialize-only |
Axis may be "x" or "y", controls the orientation and default scrollattr | ||||
focusview
|
expression | any | null | read/write |
The view to which the scrollbar should listen for focus events. If not set, it will be set to the scrolltarget or the immediateparent of the scrollbar, whichever is focusable | ||||
mousewheelactive
|
boolean | boolean | false | readonly |
If true, the mousewheel is active for the focusview. | ||||
mousewheelevent_off
|
string | String | onblur | read/write |
The event that deactivates the mousewhen when sent from the focusview | ||||
mousewheelevent_on
|
string | String | onfocus | read/write |
The event that activates the mousewhen when sent from the focusview | ||||
pagesize
|
number | Number | null | initialize-only |
The maximum distance to scroll, default: the height or width of the scrollbar. | ||||
scrollable
|
expression | any | true | readonly |
True if the scrolltarget is bigger than the containing view therefore the scrollbar is active. The scrollbar appears disabled when scrollable is false. You can make the scrollbar invisible when there is nothing to scroll by setting visible="${scrollable}" | ||||
scrollattr
|
string | String | initialize-only | |
The attribute of the scrolltarget that is modified by the scrollbar, default: value of axis attribute. | ||||
scrollmax
|
number | Number | null | read/write |
The maximum distance to scroll, default: the height or width of the scrolltarget. | ||||
scrolltarget
|
expression | any | null | initialize-only |
The view that is controlled by the scrollbar. | ||||
stepsize
|
expression | any | 10 | read/write |
The amount that the scrolltarget is moved when the user clicks on the scrolltrack or when the step method is called. | ||||
usemousewheel
|
expression | any | true | read/write |
If true, this scrollbar listens for mousewheel events |
doesenter, enabled, hasdefault, isdefault, style, styleable, text
aaactive, aadescription, aaname, aasilent, aatabindex, align, backgroundrepeat, bgcolor, cachebitmap, capabilities, clickable, clickregion, clip, colortransform, context, contextmenu, cornerradius, cursor, fgcolor, focusable, focustrap, font, fontsize, fontstyle, frame, framesloadratio, hasdirectionallayout, hassetheight, hassetwidth, height, layout, loadratio, mask, opacity, pixellock, playing, proxyurl, resource, resourceheight, resourcewidth, rotation, shadowangle, shadowblurradius, shadowcolor, shadowdistance, showhandcursor, source, stretches, subviews, tintcolor, totalframes, unstretchedheight, unstretchedwidth, usegetbounds, valign, visibility, visible, width, x, xoffset, xscale, y, yoffset, yscale
classroot, cloneManager, data, datapath, defaultplacement, id, ignoreplacement, immediateparent, inited, initstage, name, nodeLevel, options, parent, placement, styleclass, subnodes, transition
Methods
acceptValue, doEnterDown, doEnterUp, doSpaceDown, doSpaceUp, presentValue, setStyle, setTint, updateDefault
bringToFront, containsPt, getAttributeRelative, getBounds, getColor, getColorTransform, getCurrentTime, getDepthList, getDisplayObject, getID3, getMouse, getNextSelection, getPan, getPrevSelection, getProxyURL, getTotalTime, getVolume, init, isBehind, isInFrontOf, isMouseOver, measureHeight, measureWidth, play, proxyurl, searchSubviews, seek, sendAAEvent, sendBehind, sendInFrontOf, sendToBack, setAccessible, setAttributeRelative, setColor, setColorTransform, setPan, setProxyPolicy, setSource, setVolume, shouldYieldFocus, stop, unload, updateResourceSize
animate, applyConstraintMethod, applyData, childOf, completeInstantiation, construct, createChildren, dataBindAttribute, destroy, determinePlacement, getOption, getUID, init, lookupSourceLocator, releaseConstraint, releaseConstraintMethod, searchImmediateSubnodes, searchSubnodes, setOption, setSelected, updateData
onaddsubview, onbackgroundrepeat, onblur, onclick, onclickable, onclip, oncontext, oncornerradius, ondblclick, onerror, onfocus, onframe, onframesloadratio, ongesture, onheight, onkeydown, onkeyup, onlastframe, onload, onloadratio, onmousedown, onmousedragin, onmousedragout, onmouseout, onmouseover, onmousetrackout, onmousetrackover, onmousetrackup, onmouseup, onmouseupoutside, onopacity, onplay, onplaying, onremovesubview, onshadowangle, onshadowblurradius, onshadowcolor, onshadowdistance, onstop, ontimeout, ontouch, onvisible, onwidth, onx, ony
Copyright © 2002-2010 Laszlo Systems, Inc. All Rights Reserved. Unauthorized use, duplication or distribution is strictly prohibited. This is the proprietary information of Laszlo Systems, Inc. Use is subject to license terms.