GUI Creator for Ruby + Fox

Guide Contents

Main Screen - Widget Tree, Selection, Properties

The foxGUIb screen is composed of three areas:

  • The widget tree, representing widgets contained within frames.
  • The widget selection menus
  • The property settings for the selected widget
In addition, there is the design window, holding the GUI that you are creating.

The Widget Tree

This provides an indented textual version of your layout. For example:

shows a main window containing a vertical frame - itself containing two buttons. The right-mouse allows cutting/pasting of branches of the tree. When copying parts of a tree, widgets are re-named. Copying is rare though - often you will move existing widgets to investigate layouts, rather than duplicate them.

Look at the layout example for details on right-mouse options.

Widget Selection

A left-click adds the widget after the one that is currently selected in the tree. However, a right-click provides the options of adding before, after, or inside (relative to the selected widget in the tree). For example, you might select a layout frame in the tree, than use 'add inside' to place a new widget within it. Look at the layout example to see this in action.


The right-hand side of foxGUIb lets you set properties for the selected widget. A widget can be selected via the tree, or by clicking on it in the design window.

In many cases, the default setting are what you require.

To modify properties, check the appropriate check box to make them editable. Some properties can be set by direct manipulation of the widget in the design window. Exploration is the best way to get familiar with this. For example, put a check box and a text field on the design window. Modify the text box state, and the text of the field. Click on the component in the tree to refresh the display of its properties.


Guide Contents