A Concise Guide to Rebol/View
Fall 2010, David Matuszek

VID, the Visual Interface Dialect, is a dialect of Rebol that lies on top of Rebol/View and supports GUI programming. This summary is based on the REBOL/View VID Developer's Guide.


The two most basic functions are view and layout. Layout takes a block as an argument; the data within the block is VID dialect code that describes the GUI. View takes a layout as an argument, and displays it.

Widgets, or GUI components, are called styles in VID. A style is a face, and new styles can be created. The following code demonstrates most of the styles.

Example GUI
Rebol [
    Author: David Matuszek
    Date: 6-Jan-2011

view layout [
    backdrop %parchment.jpg
    title "(Title) Rebol styles"
    banner "(Banner) Rebol styles"
    h1 "h1" h2 "h2" h3 "h3" h4 "h4" h5 "h5" tab
    text "text" txt "txt"  tt "tt" code "code"
    vh1 "vh1" vh2 "vh2" vh3 "vh3" label "label" vtext "vtext"
    tab  btn "Btn"
    button "Button" toggle green "toggle" red "TOGGLE"
    rotary "Rotary" "ROTARY" red "Rotary" "rOtArY"
    choice "Choice" "CHOICE" "choice" "choICE"
    image to-image load %rebol-view-image.png
    anim 200x60 rate 20 frames [
        %rebol-anim-1.png %rebol-anim-2.png %rebol-anim-3.png
        %rebol-anim-4.png %rebol-anim-5.png %rebol-anim-6.png
        %rebol-anim-7.png %rebol-anim-8.png %rebol-anim-9.png ]
    field "field (editable)" info "info (not editable)"
    area "area 200x50" 200x50
    box "box 200x50 red" 200x50 red
    check text "check"
      tab radio text "radio" tab arrow text "arrow"
      tab led text "led"
    text "progress:" bar: progress white brown 100x16 0.25 tab
    text "slider:" slider 100x16 0.25 [bar/data: value show bar]
    panel white 400x50 [ across at 20x10
        text-list "text-list" "text-list" 200x30


Styles (widgets, graphical components) have facets which affect their display.

Each style may be given a label, for example, field_name: field. This allows the code to access the attributes of a style, using the syntax field_name/text for retrieval and field_name/text: "New text to display" show field_name for assignment. The Rebol documentation isn't much help in finding out what those attributes are, but here are some of them:

A group of facets can be declared with style-name: style existing-style facet ... facet. The style-name can then be used just like any other style, and may be given additional facets.

Radio buttons are grouped together with the word of followed by a word, for example, radio of 'group-1.


The default arrangement of styles is to put each below the previous one. The following functions provide control.

Relative positioning