This is just one of several computer projects that I occasionally work on. The state of this project is work in progress.

SUID (SWIT User Interface Designer)

Introduction

I have always wanted to implement a graphical user interface designer. So, that is what this project is about. It is implemented in my own programming language called STIPPLE. It is generates STIPPLE code that uses my SWIT (STIPPLE Window Interface Toolkit) library.

To Do List

This is not most logical place to put a "to-do" list, but I find it convienient here.

• Get something basic going.
• Make exit button work.

Design

The basic idea behind SUID is to keep the entire design really simple. The model supported by SUID is that a graphical application consists of 1 or more top-level frames, where each top-level frame consists of a variety of widgets (e.g. entry fields, labels, etc.) and other nested frames. The first version of SUID will have a fixed palette of widgets rather than an extensible palette. (Maybe some future version of SUID will have an extensible palette.) The only layout manager that will be supported is a grid layout. The code generation strategy is to generate one or more STIPPLE modules which use call back procedures to actually perform the application specific behavior. The generated code will not support the ablity to edit the generated code; everthing must be accomplished via the call back procedures that are in separately edited and compiled modules that are all linked together. The code generator can be invoked in batch mode (e.g. from a Makefile) without having to bring anything up on the screen. The ultimate goal of version 1 of SUID is to use it to recursively design and maintain the SUID user interface.

Tutorial

SUID is started as follows:

    prompt%  suid {file}.suid
								

In order to kill SUID, do the following:

    prompt%  # Type Control-Z
    prompt%  kill %suid
								

Here is a quick little tutorial:

1. Start SUID.
2. In the Entry field under the [Create] button, type `Window1'.
3. In the `Widget Palette', click on the [Frame] button. (It is probably already selected.)
4. Click on the [Create] button. This should cause a number of things to occur. First, an approximately one inch square window should show up on your screen. Second, label with `Window1' should show up under the label `'. `Window1' should be highlighted.
5. If `Window1' is not highlighted, please click on it to force it to be highlighted.
6. Click on the [Frame Down] button. This causes the list of widgets associated with `Window1' to be displayed. Since there are no widgets associated with `Window1', the list is empty.
7. In the `Widget Palette', click on the [Button] button.
8. In the entry field under the [Create] button, type `Button1'.
9. Click on the [Create] button. A button labeled `Button1' should show up in the Window1 window. The borders will be shrink wrapped around the button.
10. In the entry field under the [Create] button, change `Button1' to `Button2'.
11. Click on [Create] button again. This should cause a second button labeled `Button2' to show up to the right of Button1.
12. Using the previous two steps, create two more buttons called `Button3' and `Button4'.
13. Under `Widget Properites' there are 3 diamond shaped button sets labeled `Move', `Span', and `Sticky'. Experiment with the Move butons by clicking on [Up], [Down], [Left], and [Right]. You can select which button to move by selecting on the appropriate button in the list. Please notice that as you move the buttons around, the Row and Column numbers under the Move buttons change.
14. Now experiment with the Span buttons. Put `Button4' on a row all by itself. Move it to the far left. Now click on the Span [Right] button. The button should now span two columns. Similarly, put `Button3' in its own column and move it to the far top. Now click on the Span [Down] button. The button should now span two rows. Please notice that the Row Span and Column Span numbers under the Span buttons change as you change the span properties.
15. The Sticky buttons require a little getting used to. When a button is highlighted, it means that the widget will `stick' to that side of the cell it is in. Most widgets created with all four sticky bits set. This means that by default, all widgets fill up all of their cell. Make `Button4' span two columns. Now click on the Sticky [Left] button. The button snaps shrinks down to minimal size and snaps to the right because sticky right is still on. Now click on the Sticky [Right] button. Now `Button4' is centered between the two columns because it is not sticking to either the left or the right side. Do the same experimenting with `Button3' by putting it in its own column that spans two rows and clicking on the Sticky [Up] and Sticky [Down] buttons.
16. Now we get to play with remaining widget properites. You can change background and forground colors to `yellow' and `blue' respectively. Remember to click on the [Apply] button. Similarly, You can change the internal name for the button and the displayed button name.
17. If you want to change the background and forground colors for all of the buttons, you can do that by setting the background and forground colors for the parent frame. Click on the [Frame Up] button, click on the [Window1] button, enter the frame background and foreground colors and click on [Apply].
18. To see what the generated code looks like, just click on the [Generate] button.
19. To save the results into your file, click on the [Save] button.
20. If yow want a complete clone of the entire application, click on the [Clone] button.
21. That's all folks.

Summary

The derived interfaces and source code are available.