GLayout

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:

• glayout.r from: http://www.rebol.org/download-a-script.r?script-name=glayout.r 
• slim.r from:  http://www.rebol.org/download-a-script.r?script-name=slim.r

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]

choiche 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