View Overview

Overview of Graphical User Interfaces using REBOL/View

About this document

The purpose of this document, and the documents related to it, is to document concepts, features, tip and techniques relating to REBOL/View and GUIs.

This document is a work in progress. As I learn more about REBOL/View and as my understanding of it changes I intend to change this document.

You can read this document as HTML on the codeconscious.com website or as a text file or much better than both of those as a Easy* reader document from the codeconscious.com rebsite. The benefit of the rebsite Easy* version is that most code examples within the document are executable - click on them to see them work. If they don't work in the reader they will be copied to the clipboard.

To use the interative Easy* reader version, start REBOL/View, ensure you are connected to the internet by clicking on "local" at bottom left if necessary, click on the "REBOL.com" icon, then on "Sites", then on "Code C.", then finally "Docs".

!Read this document after reading the official documents. I don't want you blaming me because I got something wrong ;^)

Please let me know if I did get something wrong please I'd like this document to be robust.

Versions

I'm writing this document using REBOL/View 1.2.1.3.1 (21-Jun-2001).

I've seen some of my REBOL/View programs work directly on REBOL/Link 1.0.0.3.1 (31-Jan-2002). Though I note there is some changes in the VID master stylesheet.

Overview of REBOL/View GUI Support

Starting out to program screens with REBOL/View gives one satisfaction. Simple to moderate screens are really easy to do using REBOL/View's VID dialect. After a while people find that want to implement more niceties and they find that they need to learn REBOL/View in some more depth.

VID is responsible for that initial flush of success. VID makes it easy to "knock up" a screen because the language of VID has been designed to be very productive in producing screens.

VID sits atop some more fundamental graphical technology in REBOL/View. This is the level of faces and feels. When you specify BUTTON in VID a face object is created that looks like a button. When you click on this face with your mouse a feel object responds to the action by modify the look of the face so that the button goes down and up.

So REBOL/View gives you two levels of GUI specification. One more abstract - VID, and another more low level - Faces and Feels.

VID - Visual Interface Dialect

Earlier I referred in passing to the "language of VID".

VID is a dialect. The purpose of VID is to describe faces in a language which is easier to write than creating faces directly using object notation. The structure of VID and the machinery that supports it comprise an ingenious solution to this problem. Producing simple GUIs with VID is probably very important to the uptake of Rebol/View. For those that have not programmed before VID provides a very easy entry to building a GUI.

Dialects share the same datatypes as "ordinary" REBOL but differ in their grammar. This sometimes confuses people because they are expecting that all REBOL code will work in all parts of a REBOL script. Sometimes the dialects provide points in their grammar where code will be evaluated exactly like "ordinary" REBOL code, but usually you should expect otherwise, because the whole point of a dialect is that it is purpose designed to solve a specific computing problem more efficiently than general REBOL code.

VID has been purposed designed to very quickly produce working screens.

The main interpreter of VID is the LAYOUT function. This function takes a VID specification and create the faces. It returns a face which encompasses all the faces created from the VID specification.

A working VID example is this:

view layout [
    title "REBOL ROCKS!"
    button "I agree" [
        view/new layout [Banner "Cool!"]
    ]
]

The VID part of this code is the block that begins after "layout" and which contains "title" and "button". You'll read in the official REBOL/View documentation that "title" and "button" are VID styles.

VID Styles are implemented in REBOL/View using more fundamental (lower level) objects called "faces" and "feels". So when the LAYOUT function has finished a number of face objects will have been created. These face objects viewed via the VIEW function give the final window appearance.

I have more information about VID in my "VID Notes" document.

Faces

The most fundamental graphical element of Rebol/View is the Face. Faces in Rebol are represented as objects and on the screen are represented by a rectangular visual image. One can manipulate the objects to achieve effects on the screen.

Here's an example of a face being made directly.

view/offset make face [
    color: blue
    size: 200x50
] 25x25

Faces can contain other faces. REBOL/View allows flexible face composition. So objects end up referring to other objects which as a whole is an object model.

This is described in more detail in my "View Notes" document.

Rebol View uses the model you create (an object model) to render the screen. The object model also contains words and functions that react to various events. The VIEW function takes a face (which may comprise other faces - ie it is the a root of an object model) and renders it.

Feels

Feels are another type of special REBOL/View object. They are implemented using the REBOL object! datatype, but must conform to a special field ordering (see the "View Notes" document).

Feel objects are the main interface to event handling in REBOL/View. In general they provide the responsiveness that faces exhibit. For example, a button visually depresses and then raises again after a click with the mouse - this is done through the feel object that implements button behaviour.

Is understanding VID enough?

While, I believe VID achieves the goal of creating screen representations easily, there comes a point where one wants to create a more complex user interface using VID. By complex I mean where there is a relationship between one "widget" on screen and another. Such relationships are common in user interfaces. For example, press a button and something becomes disabled, or move a slider and something scrolls.

When programming at this level, I believe it helps to keep in mind what work VID is accomplishing for you - creating faces and adding them to an object model of faces.

I also think that one should remember that Rebol/View interprets the face object model in order to create the screen representation (image) and to react to events. This concept helps when one encounters an unexpected behaviour. For example moving a slider and seeing the text on a different window scrolling. In this case one should remember how words and values are treated in Rebol.

Consider strings, this code [a: "the cat" b: a clear b] - would result in the string referred to by a being empty. In the same way, faces are objects that point to all sorts of values. If a value is shared amongst different faces and one changes that value what is the effect? All faces sharing the same string value or object value, etc would be changed.

This can be useful - it can also be very confusing when you have worked with other GUI development tools and you bring along a few habits of thought from those environments.

So is understanding VID enough? Most definitely sometimes and perhaps not other times :)

Conclusion

The points to take away from your reading of this documents are: