Scrolling a GUI Panel
Author: Carl Sassenrath
This example requires REBOL/View
Return to REBOL Cookbook
This example shows how to scroll a sub-panel. See examples #29
for text scrolling and #35 for image scrolling.
Scrolling a GUI panel is done in the same way as scrolling an
image. You place the panel within another face, then move it
relative to that face (using its OFFSET field).
The code below creates a panel (sub-panel) and puts it into a
box that can be scrolled with vertical and horizontal scroll
bars. See the notes that follow to understand what's going on.
sub-panel: layout [
across origin 5
style label text bold right 60
h2 leaf "Scrolling Sub Panel" return
label "Name:" f1: field return
label "Email:" f2: field return
label "Info:" f3: area wrap return
l1: text-list data system/locale/months return
label "Day:" s1: slider 200x20 return
button "Cancel" [quit]
out: layout [
h3 "Panel Scrolling Example" return
p1: box 300x300 coal frame black
s1: scroller 16x300 [scroll-panel-vert p1 s1]
s2: scroller 300x16 [scroll-panel-horz p1 s2]
scroll-panel-vert: func [pnl bar][
pnl/pane/offset/y: negate bar/data *
(max 0 pnl/pane/size/y - pnl/size/y)
scroll-panel-horz: func [pnl bar][
pnl/pane/offset/x: negate bar/data *
(max 0 pnl/pane/size/x - pnl/size/x)
update-panel: func [pnl vbar hbar] [
s1/data: s2/data: 0
vbar/redrag pnl/size/y / pnl/pane/size/y
hbar/redrag pnl/size/x / pnl/pane/size/x
show [pnl vbar hbar]
update-panel p1 s1 s2
Notice that the sub-panel is still active. You can still click
on its user interface elements.
The trick to this code is the p1/pane. Every face can contain
one or more subfaces in a pane. So p1 is a box that holds the
sub-panel and scrolling is done by moving the offset for that
The update-panel function resets the offset the scroll bars.
When you click on a scroll bar, the SCROLL-IMG functions are
called. They use the position of the scroll bar, the size of the
panel, and the size of the viewing area (the box) to calculate a
new offset for the panel within the box.
| Use Newer REBOL/View|
To run this example, you will need to use a newer version of
REBOL/View that defines the SCROLLER style.