Rebol VID STYLE CREATION AND DESIGN, by Richard 'Cyphre' Smolak, 2005. Custom styles for your GUI.

1. VID STYLE CREATION AND DESIGN
By
Richard 'Cyphre' Smolak
2005

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!"
]

8. Custom styles
● Strict style definition
view layout/styles [
button "Hello world!"
rtext "Hello world!"
] stylize [
rtext: text bold font-size 20 red
button: button
]

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

15. Custom style example
● face skeleton:
window: face with [
title: "noname"
color: none
titlebar: none
size: 100x100
dirty?: true
click: none
]
feel: …
init: …
words: …
multi: …
access: …
update: …
resize: …
doc: …
]

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
]

20. Custom style example
● ACCESS object:
access: make object! [
set-face*: func [face value][
face/data: value face/dirty?: true
]
get-face*: func [face][face/data]
clear-face*: func [face][
face/data: [size 100x100] face/dirty?: true
]
reset-face*: func [face][
face/data: [size 100x100] face/dirty?: true
]
]

21. Custom style example
● UPDATE function:
update: does [
init-code
show self/parent-face
]

22. Custom style example
● RESIZE object:
resize: func [new /x /y][
either any [x y] [
if x [size/x: new]
if y [size/y: new]
][
size: any [new size]
]
pane/1/size/x: size/x
pane/2/size: size
foreach f pane/2/pane [
f/size/x: new/x - (2 * f/offset/x)
]
]

23. Custom style example
● DOC object:
doc: make object! [
info: "document text"
string: "window title"
image: none
logic: none
integer: "width of window"
pair: "width and height of window"
tuple: ["background color" "titlebar color"]
file: none
url: none
decimal: none
time: none
block: none
keywords: [content "content layout of window"]
]

24. ● Demo code:
view layout [
size 640x480
win: window "My window" content [button "test"] red green
button "get face" [probe get-face win]
button "set face" [set-face win [field "test"]]
button "clear face" [clear-face win]
button "resize" [win/resize 40x40 + random 300x300]
button "update" [win/update]
]

25. Real world examples

26. Real world examples

27. Real world examples

28. Real world examples

29. Real world examples

30. THANKS FOR YOUR ATTENTION
cyphre@seznam.cz