3.5 Adding a tool bar

So far, you have seen how to experiment interactively to create an initial interface design. You have also seen how you can take that initial design and turn it into a more rigorous definition, for use within project source code, using a frame class. However, the design of the interface still leaves a lot to be desired, and the application still does not do anything. In this section, you start to look at improving the overall design of the interface.

To begin with, add a tool bar to the interface of the application. Most modern applications have a tool bar that runs along the top edge of the main application window, beneath the application menu bar. Tool bars contain a number of buttons that give you quick access to some of the most common commands in the application. Each button has a label that designates its use, or, more often, a small icon. Although you have already added buttons to the interface that perform important tasks, they have the appearance of buttons in a dialog box, rather than buttons in the main window of an application. The solution is to use a tool bar.

Adding a tool bar to the definition of a frame class is very similar to defining the overall layout of the panes in a frame class. You need to create the tool bar as a pane in the frame definition, and then incorporate it using the tool-bar clause, as shown below:

pane task-tool-bar (frame)
  make(<tool-bar>, child: ...);
  // more definitions here
tool-bar (frame) frame.task-tool-bar;

A tool bar has a layout as its child, and each button in the tool bar is defined as a child of that layout. You can either define each button within the definition of the tool bar itself, or, more appropriately, define each button as a pane in the frame, and then refer to the names of these panes in the tool bar definition.

In fact, the buttons you defined in the earlier interface design can be used just as easily in a tool bar as they can within the main layout of the application itself. However, first you must remove the buttons from the task-layout pane of the definition of <task-frame>. (If you fail to do this, DUIM attempts to use the same buttons in two different parts of the interface, with undefined results.) A complete definition of a simple tool bar containing two buttons is as follows:

pane task-tool-bar (frame)
  make(<tool-bar>, child: horizontally ()
                            frame.add-button;
                            frame.remove-button
                          end);

// more definitions here

tool-bar (frame) frame.task-tool-bar;

A tool bar that only contains two buttons is on the lean side, however, so let's add two more buttons to open a file and save a file to disk.

pane open-button (frame)
  make(<push-button>, label: "Open file",
       activate-callback: not-yet-implemented);
pane save-button (frame)
  make(<push-button>, label: "Save file",
       activate-callback: not-yet-implemented);

// more definitions here

pane task-tool-bar (frame)
  make(<tool-bar>,
       child: horizontally ()
                frame.open-button;
                frame.save-button;
                frame.add-button;
                frame.remove-button
              end); 
// more definitions here
tool-bar (frame) frame.task-tool-bar;

More commonly, an icon is used to label buttons in a tool bar, rather than a text label. You can do this by supplying an instance of <image> to the label: init-keyword when you define the button, rather than an instance of <string>.

So now the application has a tool bar. Somewhat oddly, it does not yet have a menu bar or a system of menus -- most tool bars represent a subset of the commands already available from the application's menu system. A menu system is added to the task list manager in Chapter 4, "Adding Menus To The Application".

---

Building Applications Using DUIM - 26 May 1999