2. WHAT IS VID?
● Rebol Visual Interface Dialect
● Layer over View composition engine
● Powerful method of describing user interface
● Simple to learn
3. Simple VID example
view layout [
text "Hello world!"
field "enter any string"
text-list 200x100 data ["item 1" "item 2"
"item 3"]
button "Ok"
]
4. VID styles
● text,field, text-list, button are styles
● style describes face(s) structure
● REBOL has more than 50 predefined styles
5. Facets
view layout [
● Facets are default text "Hello world!" bold font-size 20 red
attributes of style ]
● modify: text, size,
color, images,
actions...
● can be optionaly used
in layout definition
6. Custom styles
● shortcuts that save time
● completely new GUI elements
● can be defined in layout using STYLE keyword
(usually quick shortcuts)
● outside layout block using STYLIZE function
(handy for creating stylesheet(s))
7. Custom styles
● Example
view layout [
style rtext text bold font-size 20 red
text "Hello world!"
rtext "Hello world!"
]
9. Custom styles
● enhancement of master stylesheet:
stylize/master [
rtext: text bold font-size 20 red
h1u: h1 underline
gbut: button green
]
view layout [
h1 "Hello world!"
h1u "Hello world!"
text "Hello world!"
rtext "Hello world!"
button "Hello world!"
gbut "Hello world!"
]
10. WITH keyword
● direct (re)definition of face
stylize/master [
my-banner: banner underline with [
font: make font [
shadow: none
color: white
]
image: make image! [1x4
#{A4C8FFA4C8FF808080808080}]
effect: [tile]
]
]
view layout [
banner "Hello world!"
my-banner "Hello world!"
]
11. Creation of style from scratch
● use 'template' object system/view/vid/vid-face
● vid-face object equals to predefined FACE style
● minimal definition
stylize/master [
my-style: face with [
size: 100x100
init: []
]
]
view layout [
my-style "Hello world!"
]
12. Useful vid-face fields
● INIT: block! contaning 'startup' code of style
● MULTI: object! specifies handling of arguments
● WORDS: block! with custom defined Facets
● FLAGS: block! holding flags (behaviour
attributes)
● ACCESS: object! with basic accessor functions
● DOC: object! with style documentation strings
13. Useful vid-face fields
● RESIZE: function! hadling the style during
resizing
● UPDATE: function! used to actualize style data
etc.
● RESET: function! used to reset style to initial
state
14. Custom style example
Let's create a:
● window style
● draggable titlebar
● set content
● set colors
● basic resize
16. Custom style example
● FEEL object:
feel: make feel [
engage: func [f a e][
if a = 'down [
click: e/offset
]
if a = 'up [
click: none
]
if all [click find [over away] a][
f/offset: f/offset + (e/offset – click)
show f
]
]
]
17. Custom style example
● INIT block:
init-code: does [
titlebar: make face [
edge: none
color: any [all [colors colors/2] white]
size: 0x20
text: title
]
if dirty? [
pane: reduce [titlebar layout/offset data 0x20]
size: second span? Pane
]
titlebar/size/x: size/x
pane/2/color: any [color blue]
dirty?: false
]
init: [
init-code
]
18. Custom style example
● WORDS block:
words: [
content [
new/data: second args
next args
]
]
19. Custom style example
● MULTI object:
multi: make multi [
text: func [face blk][
if pick blk 1 [
face/title: first blk
]
]
file: image: block: none
]
