VID User Guide

 

Rebol Visual Interface Dialect User Guide Copyright 2007 Rebol Technologies
Table of Contents Welcome Getting Started Hello Rebol Hello with button explained Customization Stylize Style Quick Reference Style Option Reference button options material gradients Welcome elcome to the Rebol VID User Guide. This manual introduces the Visual Interface Dialect, or VID. As a dialect, VID represents the application writer's layer of a multi-layered graphics system. VID is used to write the Graphical User Interface, the GUI, in Rebol. Getting Started First, you will need a Rebol executable for your computer and Operating System. Rebol is compiled on many different platforms, and the good people at Rebol Technologies have made it easy to download the correct version for your system. This all starts at http://www.rebol.com. Point your web browser to rebol.com and from there follow the Download link, click the downloader for your operating system and then install Rebol. Detailed instructions for installing can be found on the download web pages of rebol.com. Hello Rebol Starting small; from the Rebol console, try typing view [text "Hello World"] and you will have a graphical window of Rebol VID announcing itself to the world. You'll have to close the window using the system menu that comes with your windowing system, usually an × in the very top left or top right corner. So let's fix that, and add our own close button. view [ text "Hello World" button "Goodbye" [unview none] ] Press the goodbye button and the window will go away. Hello with button explained So what is going on? view is a Rebol function for building and displaying windows VID is a Rebol dialect for building windows. The VID input is the block! that follows the view function and will be used as the argument for view. VID input block. As VID processes the dialect input it matches a style called text and will then match against arguments allowed for text styles. The dialect scanner matches a string!. That is accepted by the text style and the VID engine fills in a graphical face with a type of text and our string salutation. Next the VID parser detects another style called button and will then match against arguments acceptable for buttons. In this case there is a string! which the VID parser will use to label the button. It also matches a block! which the button style matches as a code block that can be used for the button action. The VID parser fills in another face with a type of button. The button has a string label and an action block of unview none. The action block will be evaluated when somebody clicks the Goodbye button. unview is a Rebol function for removing windows from the screen. An argument of none is a special argument meaning 'the last window you viewed', in this case; Hello World. Customization Now for an example of how VID simplfies some aspects of Graphical User Interface development. view [progress slider attach] While of no real use beyond demonstration; that short three word VID input block creates a functional window. You end up with a progress meter that is attached to a slider. Move the slider right and left, and the progress bar will fill in, to match where the slider is. And yet, it still needs a close button. view [ progress slider attach button "Goodbye" [unview none] ] The Goodbye button is fairly easy code to type, somewhat easy to remember, but there may be a better way. VID allows for certain customizations that enable consistent look and feel within and across applications. Stylize VID allows for the development of new styles. New styles can be created from scratch; allowing you to create application specific styles. simple tweaks to existing elements enabling a consistent look and feel for all of your progams. everything in between. Tweak a little bit, add behaviour, change the skin. There is a whole section of this document on STYLIZE but for now; lets just create a simple button we can use for to close example windows. stylize [ goodbye: button [ [ on-init: override :on-init [ super face spec spec/text: copy "Goodbye" spec/action: [unview none] ] ] [] ] ]	Style Quick Reference Style elements area action: block! options: block! size: pair! text: string! text-mask: string! blank color: tuple! draw: block! image: image! size: pair! shrink: pair! source: file! stretch: pair! btn   Based on button button text: string! action: block! draw   Based on blank field text: string! action: block! text-mask: string! filler   Based on blank group columns: integer! pane: block! pane-values: object! background: tuple! background-draw: block! padding: pair! h1   Based on text h2   Based on text icon-list size: pair! icons: block! selected: block! action: block! background: tuple! background-draw: block! image   Based on blank label   Based on text led state: logic! color: tuple! pad   Based on blank progress size: pair! value: percent! scroll-panel columns: integer! pane: block! pane-values: object! background: tuple! background-draw: block! size: pair! scroller   Based on slider slider action: block! value: percent! size: pair! text text: string! text-rich: block! text-list size: pair! rows: block! selected: block! action: block! background: tuple! background-draw: block!
Style Options
Style Option Reference VID offers a lot. There are many styles and each have a variety of options. Options are applied to styles using the options keyword and a block! holding the option specification. For example button "Quit" options [rounding: 10 material: 'sand] Would build a button in the layout with more rounded corners than the default, and a white beach sand look. button options Option Accepts Default Description rounding integer! 3 Defines the rounding radius of the corners material word! 'aluminum The background gradient. See material gradients size pair! 120x24 The default size, subject to change by auto layout resizing shrink pair! 20x0 The amount the button will shrink during resize stretch pair! 10x0 The amount of stretch in the button Some Examples Example Look button "Rounding 10" options [rounding:] No Description (Not Found) button "Rounding 0" options [rounding:] No Description (Not Found) button "50x20" options [size:] No Description (Not Found) material gradients Material Example aluminum No Description (Not Found) blue-aluminum No Description (Not Found) dark-aluminum No Description (Not Found) gloss No Description (Not Found) sand No Description (Not Found)