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
        button "Submit"
        button "Cancel" [quit]

    out: layout [
        h3 "Panel Scrolling Example" return
        space 0
        p1: box 300x300 coal frame black
        s1: scroller 16x300 [scroll-panel-vert p1 s1]
        s2: scroller 300x16 [scroll-panel-horz p1 s2]

    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.

2006 REBOL Technologies REBOL.com REBOL.net