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
backcolor tan
h2 leaf "Scrolling Sub Panel" return
label "Name:" f1: field return
label "Email:" f2: field return
label "Info:" f3: area wrap return
label "Month:"
l1: text-list data system/locale/months return
label "Day:" s1: slider 200x20 return
label
button "Submit"
button "Cancel" [quit]
]
out: layout [
across
h3 "Panel Scrolling Example" return
space 0
p1: box 300x300 coal frame black
s1: scroller 16x300 [scroll-panel-vert p1 s1]
return
s2: scroller 300x16 [scroll-panel-horz p1 s2]
return
]
p1/pane: sub-panel
scroll-panel-vert: func [pnl bar][
pnl/pane/offset/y: negate bar/data *
(max 0 pnl/pane/size/y - pnl/size/y)
show pnl
]
scroll-panel-horz: func [pnl bar][
pnl/pane/offset/x: negate bar/data *
(max 0 pnl/pane/size/x - pnl/size/x)
show pnl
]
update-panel: func [pnl vbar hbar] [
pnl/pane/offset: 0x0
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
view out
|
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
panel face.
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.
|
| 