Monday, 26 November 2012


What is Glayout?
Glayout is a new dialect for making wonderful resizable GUI, like RebGUI, here an example:
Developer page of Glayout is:
a demo is here:
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:
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:

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:


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:
gl/view [button "Hello" button "world" ]
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.


You can made a snapshot of every GUI with SHIFT+F8.


You can use spacer and elastic to add a fixed or elastic space between elements:
header "Hello"
spacer 30
text "world"



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 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


  • field
  • tel-fld: Field with input filter (america phone number: ###-###-####)
  • text-area


  • 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.


It's a simple scroller style


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]


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


  • 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

No comments:

Post a Comment