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.

Fundamentals

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
    across 
    title "(Title) Rebol styles"
    return
    banner "(Banner) Rebol styles"
    return
    h1 "h1" h2 "h2" h3 "h3" h4 "h4" h5 "h5" tab
    text "text" txt "txt"  tt "tt" code "code"
    return
    vh1 "vh1" vh2 "vh2" vh3 "vh3" label "label" vtext "vtext"
    tab  btn "Btn"
    return
    button "Button" toggle green "toggle" red "TOGGLE"
    rotary "Rotary" "ROTARY" red "Rotary" "rOtArY"
    choice "Choice" "CHOICE" "choice" "choICE"
    return
    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 ]
    return
    field "field (editable)" info "info (not editable)"
    return
    area "area 200x50" 200x50
    box "box 200x50 red" 200x50 red
    return
    check text "check"
      tab radio text "radio" tab arrow text "arrow"
      tab led text "led"
    return
    text "progress:" bar: progress white brown 100x16 0.25 tab
    text "slider:" slider 100x16 0.25 [bar/data: value show bar]
    return
    panel white 400x50 [ across at 20x10
        text-list "text-list" "text-list" 200x30
    ]
]

Styles

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.

Arrangement

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

Relative positioning