VID STYLE CREATION AND DESIGN                 By      Richard Cyphre Smolak            2005
WHAT IS VID?●   Rebol Visual Interface Dialect●   Layer over View composition engine●   Powerful method of describing user...
Simple VID exampleview layout [    text "Hello world!"    field "enter any string"    text-list 200x100 data ["item 1" "it...
VID styles●   text,field, text-list, button are styles●   style describes face(s) structure●   REBOL has more than 50 pred...
Facets                             view layout [●   Facets are default           text "Hello world!" bold font-size 20 red...
Custom styles●   shortcuts that save time●   completely new GUI elements●   can be defined in layout using STYLE keyword  ...
Custom styles●   Example    view layout [        style rtext text bold font-size 20 red        text "Hello world!"        ...
Custom styles●   Strict style definition    view layout/styles [        button "Hello world!"        rtext "Hello world!" ...
Custom styles●   enhancement of master stylesheet:    stylize/master [         rtext: text bold font-size 20 red         h...
WITH keyword●   direct (re)definition of face     stylize/master [        my-banner: banner underline with [           fon...
Creation of style from scratch●   use template object system/view/vid/vid-face●   vid-face object equals to predefined FAC...
Useful vid-face fields●   INIT: block! contaning startup code of style●   MULTI: object! specifies handling of arguments● ...
Useful vid-face fields●   RESIZE: function! hadling the style during    resizing●   UPDATE: function! used to actualize st...
Custom style example    Lets create a:●   window style●   draggable titlebar●   set content●   set colors●   basic resize
Custom style example●   face skeleton:         window: face with [             title: "noname"             color: none    ...
Custom style example●   FEEL object:    feel: make feel [          engage: func [f a e][            if a = down [         ...
Custom style example●   INIT block:    init-code: does [         titlebar: make face [              edge: none            ...
Custom style example●   WORDS block:    words: [        content [           new/data: second args           next args     ...
Custom style example●   MULTI object:    multi: make multi [         text: func [face blk][             if pick blk 1 [   ...
Custom style example●   ACCESS object:    access: make object! [        set-face*: func [face value][           face/data:...
Custom style example●   UPDATE function:    update: does [       init-code       show self/parent-face     ]
Custom style example●   RESIZE object:    resize: func [new /x /y][         either any [x y] [            if x [size/x: ne...
Custom style example●   DOC object:    doc: make object! [         info: "document text"         string: "window title"   ...
●   Demo code:    view layout [         size 640x480         win: window "My window" content [button "test"] red green    ...
Real world examples
Real world examples
Real world examples
Real world examples
Real world examples
THANKS FOR YOUR ATTENTION     cyphre@seznam.cz
Upcoming SlideShare
Loading in...5
×

Rebol VID STYLE CREATION AND DESIGN

2,214

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,214
On Slideshare
0
From Embeds
0
Number of Embeds
45
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Rebol VID STYLE CREATION AND DESIGN"

  1. 1. VID STYLE CREATION AND DESIGN By Richard Cyphre Smolak 2005
  2. 2. WHAT IS VID?● Rebol Visual Interface Dialect● Layer over View composition engine● Powerful method of describing user interface● Simple to learn
  3. 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. 4. VID styles● text,field, text-list, button are styles● style describes face(s) structure● REBOL has more than 50 predefined styles
  5. 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. 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. 7. Custom styles● Example view layout [ style rtext text bold font-size 20 red text "Hello world!" rtext "Hello world!" ]
  8. 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. 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. 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. 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. 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. 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. 14. Custom style example Lets create a:● window style● draggable titlebar● set content● set colors● basic resize
  15. 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. 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. 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. 18. Custom style example● WORDS block: words: [ content [ new/data: second args next args ] ]
  19. 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. 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. 21. Custom style example● UPDATE function: update: does [ init-code show self/parent-face ]
  22. 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. 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. 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. 25. Real world examples
  26. 26. Real world examples
  27. 27. Real world examples
  28. 28. Real world examples
  29. 29. Real world examples
  30. 30. THANKS FOR YOUR ATTENTION cyphre@seznam.cz
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×