Interface Builder Example Project


This is a very simple interface builder for DUIM that can be used to build up a top-level DUIM window (a frame) and then generate code for it which can then be compiled and run, or modified by hand.

This is not intended to be a real GUI builder by any stretch of the imagination, but it will hopefully be useful as a learning tool. It is a work in progress.

Tutorial

To build an interface, use the menu item File > New to create a new interface and then use the Edit > Add... and Edit > Remove... menu items to add and remove items from the interface. As you build your interface you will see the hierarchy of UI elements displayed in the main window and the interface itself will be displayed in its own window so you can see what you've built so far.

Note that the Add/Remove commands always operate on the selected item in the hierarchy window. Be sure to select the correct item before using one of the commands. Note that the Add command only makes sense for UI elements that can have children, such as layouts or frames, so if you select (for example) a push button, the Add command will be disabled.

As a first attempt, try the following sequence:

  1. Select File > New
  2. Select Edit > Add... and choose Column Layout
  3. Select column-layout in the hierarchy window and add a Text Field.
  4. Select column-layout again and add another Text Field.
  5. Select column-layout and add a Row Layout.
  6. Select row-layout and add a Push Button.
  7. Select row-layout and add a Push Button.
  8. You should now have a frame that looks like this:

  9. Select File > Save to generate Dylan code for this interface.

The resulting code looks like this:

Module: my-module

define frame <my-frame> (<simple-frame>)
  pane text-field-1 (frame)
    make(<text-field>);
  pane text-field-2 (frame)
    make(<text-field>);
  pane push-button-1 (frame)
    make(<push-button>);
  pane push-button-2 (frame)
    make(<push-button>);
  layout (frame)
    vertically ()
      frame.text-field-1;
      frame.text-field-2;
      horizontally ()
        frame.push-button-1;
        frame.push-button-2;
      end;
    end;
  keyword title: = "My Frame";
end frame <my-frame>;

Notice that each visible UI element corresponds to a pane clause in the define frame form. There is one layout clause which defines how the panes are arranged on screen. The column-layout and row-layout were converted into calls to the vertically and horizontally macros, respectively.

To see how the code looks when run, you can cut-and-paste it into the Dylan Playground and then use the following expression to start it:

start-frame(make(<my-frame>));