What is Glayout?
Glayout is a new dialect for making wonderful resizable GUI, like RebGUI, here an example:
Developer page of Glayout is:
http://www.pointillistic.com/open-REBOL/moa/steel/glayout/index.html
a demo is here:
http://www.rebol.org/download-a-script.r?script-name=glayout-demo.r
unfortunately there isn't a good documentation, so I'll try to explain how it works and how to use it; otherwise you could try to contact the author at:
moliad@aei.ca
First of all you have to download two scripts:
Slim is a tool to avoid to overwrite system words, creating new object inside the slim object, glayout use slim because it recreates a new VID dialect without interfering with it.
Now our script must start this way:
Rebol[]
do %slim.r
do %glayout.r
then we must start the glayout engine:
gl: slim/open 'glayout none
this way we created a
gl object that contains all names and functions of VID, but different from the classic VID.
Remember always to add:
do-events
at the end of you script.
The main difference between VID and Glayout is the items arrangement: if you don't specify object position or a object nesting objects, items will be one over another.
Here an example:
wrong
gl/view [button "Hello" button "world" ]
correct
gl/view [row [button "Hello" button "world"]]
So the best way is to alway put elements in
row,
column or other elastic sub-panels (see below for more information).
Another interesting topic is that you don't need to use the
layout function, you can send you block of gui elements directly to the
gl/view function.
Snaphsot
You can made a snapshot of every GUI with
SHIFT+F8.
Separators
You can use
spacer and
elastic to add a fixed or elastic space between elements:
elastic
header "Hello"
spacer 30
text "world"
elastic
Styles
Text
The text styles are:
- text: simple text
- wtext: white text
- vtext: video text
- lvtext: left aligned video text
- rvtext: right aligned video text
- grp-text: video text with shadow on the top
- label: label style
- banner: a text inside a banner
- header: title style
- vh3: video style bold italic
- hitext: yellow text
Buttons
Buttons are of just two types:
button and
btn. They both automatically resize to the length of the text.
You have many keywords to change their aspect:
- shrink: is text is few, and you need a smaller button than standard, use shrink
- corner: you can specify button corner radius
- the first color specify outline color
- the second color specify the inner color
- deep: you can specify the inner color without specifying the outline color
Fields
- field
- tel-fld: Field with input filter (america phone number: ###-###-####)
- text-area
Toggles
- check: a simple check, you can access to the state with refinement /data
- toggle-text: a line of text, if you selects a toggle text, the other toggle-text are deselected. You can't access to the state, but you can add action like other VID elements
Drop-down menu
menu-choice is a drop-down menu with submenus. You can add submenu as sub-blcks of the main blocks. You can add separator lines with
separator keyword. You can access to the selected with the
data keyword. Look this example
menu-choice "Menu-choice 1" ["one" "two" separator "three" "four" ["submenu" "AAA" "BBB" "CCC"]] [gl/inform join "Selected: " data]
is a simple drop-down menu.
Scroller
It's a simple
scroller style
Progress
It' a simple
progress bar, data starts from 0.0 (0%) to 1.0 (1%).
File browser box
This is a very useful box, just use the
filebox keyword. You can access to the current dir and current file with:
/current-dir and
/current-file.
Tu update the box use
/browse-path/update and the directory to show You must alway put filebox in a scrollpanel to avoid problems in filelist size; here an example:
do %slim.r
do %glayout.r
gl: slim/open 'glayout none
gl/view [
column [
scrollpane [ fbx: filebox browse-path what-dir ]
row [
button "root" [fbx/browse-path/update %/ ]
button "up" [fbx/browse-path/update 'parent]
]
]
]
do-events
Groups
You can/must groups elements with elastic sub-panels, you can nest them indefinitely:
- center: it centers content, it has borders
- row: it disposes content in a row, no borders
- column: it disposes content in a column, no borders
- hpane: it disposes content in a row, video borders
- vpane: it disposes content in a column, video borders
- hform: it disposes content in a row, edge borders
- vform: it disposes content in a column, edge borders
- hblack: it disposes content in a row, black edge borders
- vblack: it disposes content in a column, black edge borders
- scrollpane: automatic scrollable container
Requestors
- gl/request-confirm: confirmation pop up, after a description string put a block containing buttons to show
- gl/inform: ultra basic modal dialog
- gl/request-file: file requester
- gl/request-text: text requester
- gl/request-error: first string title, second string error number/type, third string close button text, /help help button
Object browser
The best feature of GLayout, you can explore every object without limit:
gl/request-inspector
