Glayout is a new dialect for making wonderful resizable GUI, like RebGUI, here an example:
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: email@example.com
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
Now our script must start this way:
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"]]
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.
SnaphsotYou can made a snapshot of every GUI with SHIFT+F8.
SeparatorsYou can use spacer and elastic to add a fixed or elastic space between elements:
TextThe 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
ButtonsButtons 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
- tel-fld: Field with input filter (america phone number: ###-###-####)
- 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 menumenu-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.
ScrollerIt's a simple scroller style
ProgressIt' a simple progress bar, data starts from 0.0 (0%) to 1.0 (1%).
File browser boxThis 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:
gl: slim/open 'glayout none
scrollpane [ fbx: filebox browse-path what-dir ]
button "root" [fbx/browse-path/update %/ ]
button "up" [fbx/browse-path/update 'parent]
GroupsYou 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