1. VID STYLE CREATION AND DESIGN ByRichard Cyphre Smolak2005

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 exampleview 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 redattributes of style ] modify: text, size,color, images,actions... can be optionaly usedin 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 Exampleview layout [style rtext text bold font-size 20 redtext "Hello world!"rtext "Hello world!" ] 8. Custom styles Strict style definitionview layout/styles [button "Hello world!"rtext "Hello world!" ] stylize [rtext: text bold font-size 20 redbutton: 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: nonecolor: 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 definitionstylize/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 (behaviourattributes) ACCESS: object! with basic accessor functions DOC: object! with style documentation strings 13. Useful vid-face fields RESIZE: function! hadling the style duringresizing UPDATE: function! used to actualize style dataetc. RESET: function! used to reset style to initialstate 14. Custom style exampleLets 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: nonecolor: any [all [colors colors/2] white]size: 0x20text: 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