Script Writing The GUI

Domain Specific Dialecting. Doctors express their ideas in medical terms, stockbrokers in trade terms, and quarterbacks in football terms. Why? Because it's more efficient and productive. That's the benefit of dialecting. Dialecting is the ability to create sub-languages that provide you with extra leverage and productivity by expressing your solutions in terms that are best suited to your purpose. VID is Rebol's Visual Interface Dialect. A dialect is an extension of the Rebol language that makes it easier to express or describe information, actions, or interfaces. VID is a dialect that provides a powerful method of describing user interfaces.

Table of Contents General Syntax Of The Visual Interface Dialect Begin with Buttons Adding Faces Another example

General Syntax Of The Visual Interface Dialect

GUI's are created by specifying a series of faces and their attributes. The script to the right illustrates the general syntax of a face written with the VID dialect:

''variable: face inline-options'' OPTIONS ''options'' '' actions''

variable - used to refer to the face face - the type of the face to create (field, button, ...) inline-options - options, distinguished by datatype, listed in any order. What options are specified by what datatype is dependend on how the style parse the inline-options. And, it's not possible to have two inline-options with the same datatype while keeping inline-options positional independent.	options - a block of less common options actions - specify special actions using keywords with data options
The full syntax is not always required. A variable name does not always have to be specified for example.

Here are some examples to illustrate how the syntax may be applied:

field field "Enter Data" field "Enter Data" options [area-color:] field submit main-url Customer-Address: field Customer-Address: field "Enter Data" options [area-color:]

"field" is an inbuilt face, (field is it's style) "Enter Data", the field text as an inline option "[area-color:]", field color as an options block "submit main-url" is the action "Customer-Address" is the face variable variable, face, inline option, options block

Note: The images shown here with a temporary, prototype skin designed for development purposes only.

Begin with Buttons

Just to provide a simple starting point, here's a GUI that consists of two buttons:

<TD WIDTH=50%>

<TD WIDTH=50%>

Rebol []

load-gui

view [

button]

</td>
<TD align=center valign=MIDDLE>

view is a function that is given a block that constructs a panel and displays it in a window. button is an in-built Rebol face. The buttons' text "Rebol" & "Close", are inline options of the 2 faces. browse and close are the buttons' actions.

Rebol scripts must have the header Rebol []. If using the R3 alpha version, load-gui must also be included in the script to ensure the latest version will be downloaded and used.	To run a script, copy and paste the examples into a text file headed with Rebol [], include the load-gui function, and save this file with a ".r" extension. Then either from the console type: do %example.r, or drag the script file icon onto the Rebol file icon.
It should be noted that the view function is one of several ways to construct GUIs. In addition to view, R3 will also allow you to evaluate GUI code directly, similar to an HTML page. Therefore, to make this document simpler, we could just write the contents of the panel. For example,	button "Rebol" browse http://www.rebol.com button "Quit" quit More on this later.

Adding Faces

For the sake of illustration, let's toss in a few more faces and their styles to the example:

Rebol [] load-gui view [ title] </td> <TD align=center valign=MIDDLE>[[images/Gui-basics-survey2.jpg|216px 221px]] 1. Several more faces (title, text, panel, etc.) along with their options have been added. 2. Panels and groups have been used to define the layout. A group creates a sub-panel within a panel. 3. No size information had to be added to the script to display the faces. 4. The radio buttons automatically know how to exclude each other when one is selected in the GUI. 5. And, when clicked, the new Submit and Reset buttons respectively submit or reset the text of the input fields of the panel to their initial values.

Another example

<TD align=center valign=MIDDLE>[[images/Gui-basics-test-panel2.jpg|298px 393px]]

Rebol [] load-gui view [ group]

Here is another example that we use for the R3 GUI test program. It tests the features of a scroll-bar, both on input from the user as well as from other GUI objects. It shows that a small amount of GUI code can make a useful panel.