The purpose of this document is to provide a quick introduction to developing interactive content through the consumer interface dialect (CID). This is just one of many user interface dialects. With CID, in just about ten minutes you will known enough to create consumer-oriented content on your own.
To see this tutorial in action, type the following at the REBOL/View prompt:
do %cidinfo.r
Also refer to the REBOL/View User's Guide (viewdoc.html) for more information.
REBOL/View combines the networking strengths of REBOL/Core with a powerful method of creating graphical interfaces. Its compositing engine allows an extremely wide variety of user interface designs, including special custom gadgets with their own look and feel. Like the rest of REBOL, simple things are simple to do and your interactive content remains small and portable (machine independent).
In REBOL there are two ways to build graphical interfaces. The easiest is to use a dialect that accepts simple descriptions and converts them to their underlying graphical objects. We've provided the Consumer Interface Dialect to let you create the style of content that is typical for consumer presentation. Other dialects will also become available, and you can always write your own as needed.
The other approach to building interfaces is to define the necessary graphical objects directly. This will be covered in a separate document.
Both user interface methods have advantages. For most applications, using a dialect produces the quickest results with the least effort.
You specify the styles and attributes of the objects that you want to put on the screen. It can include text, images, buttons, backdrops and many other types of objects.
demo-screen: layout 640x480 [
backdrop %carlwaves.jpg
title "My Example Screen"
text "This is a simple example."
data: area "REBOL is ..."
across
button "Send" [print "sending"]
button "Clear" [clear data/text show data]
]
So a layout is simply a series of styles.
To view the screen, all you need to do is:
view demo-screen
You can have any number of such screens.
Each screen is composed of a number of items that are of a specific style. There are a number of predefined styles:
TITLE - a title line
SUBTITLE - a subtitle line
TEXT - normal text
LABEL - text used as a label
IMAGE - a graphic image
FRAME - image with a border
BACKDROP - an image for the screen
BACKTILE - a tiled screen image
BUTTON - a click button
TOGGLE - button that's on or off
FIELD - single line text entry
AREA - multi-line text entry
In addition, you can create your own special styles.
However, to do so requires more detailed knowledge of REBOL face objects.
stylize [
big-text text [font: [size: 40]]
red-button button [body: [color: 200.5.5]] ]
The new style BIG-TEXT comes from the style TEXT with its font size increased to 40 point. The RED-BUTTON is the same as a BUTTON, but is red in color.
As each style is specified, it may include any of these attributes.
Text: The textual contents to be displayed. The string used for text areas, buttons, fields, etc.
Size: The width and height of the button as a pair. For instance, 100x24 would be 100 wide and 24 high.
Color: The color of the text, button, or image. Written as an RGB value, as in 240.140.40 for orange.
Image: Filename of a graphic (JPEG, GIF, or BMP) to be used for images, backdrops, and buttons. Must have a % to show that it's a filename.
Action: An action block to take when user clicks on buttons, hot text, or images. Must be a block of REBOL code.
Examples:
text "A Line" 200.0.0
button "Press" 40x30 [print "Pressed"]
image %ukiah.jpg
In addition, some styles will accept other attributes following those above. For instance, text can be CENTER, LEFT, or RIGHT. A button can have ALT strings to be displayed when it is selected.
The order of items within the layout block determines how they are positioned on the screen. If you specify an image then a button, the image will come first, followed by the button. The layout of the screen starts at the top left and proceeds downward. Spacing is automatic, depending on the sizes of items
In addition, you can specify the spacing between items with an XY pair such as 100x20. There are various words to control this:
PAD - add space before next item
INDENT - space toward the right
SPACE - set the auto spacing
ACROSS - auto layout to the right
DOWN - auto layout downward
AT - put item at given position
ORIGIN - origin position
For example:
ORIGIN 100x100
BUTTON "Hello"
BUTTON "WORLD"
PAD 20 TEXT "Ukiah"
INDENT 30 TEXT "Calpella"
ACROSS BUTTON "1" BUTTON "2"
The text, title, and subtitle styles are predefined. These can be colored or aligned in various ways. Text that has an action block will become hot text automatically.
title "Title Text"
subtitle "Subtitle Text"
text "White, Left"
text "Green, Center" 600x24 0.255.0 center
text "Red, Right" 600x24 255.0.0 right
text "Hot Text" [print "hot text"]
text "Blue Hot" 0.0.255 [print "blue hot"]
text paragraph-example
text paragraph-example 255.80.150 right
You can define additional styles when you require other fonts, bold, italic, sizes, etc
stylize [
italic text [font: [style: [italic]]
text14 text [font: [size: 14]]]
Images are easy to specify. Click on each image to see the code that created it. You can use either the IMAGE style or the FRAME style. The FRAME style places a border around the edge of the image.
A color can be provided to colorize the image and the size of the image can be scaled.
Images can be placed anywhere on the screen and scaled to any size. Quite often you will want to provide an image that serves as a backdrop for the entire screen. The BACKDROP and BACKTILE styles have been provided for this purpose.
The BACKDROP style takes an image and scales it to the size of the entire screen. You can also colorize it.
The BACKTILE style will tile the image over the entire screen. It can also be colorized.
You can create a wide variety of buttons from the standard button styles that are provided. In addition you can define new sytles and behaviors for buttons as you require.
Here's the code:
example {
button "Simple Button"
button "Red Button" 200.50.50
button "Image" %carlwaves.jpg
button "Red Image" %carlwaves.jpg 200.50.50
button "Bay Image" %bay.jpg
button "Big Bay Image" %bay.jpg 100x50
toggle "Toggle" alt "Down"
toggle "Up" %carlwaves.jpg 10.200.10 alt "Down"
You can create single line or multiline string fields with the FIELD and AREA sytles. Examples:
field "Single line field"
area "Multiline text area.
REBOL Technologies is very interested in the problems you may have found. To report a bug, use the feedback script included with this release. Start REBOL, then enter:
do %feedback.r
If your REBOL system is configured to send email, the script will prompt you for information, then email your information directly to our support department.