20.1 Creating the basic layout

This section shows you how to create the basic layout for your interface, without specifying any attributes. Normally, this stage would take you only a few seconds. The process is described in detail here, to illustrate the way that the Interface Builder ensures that the most appropriate item is selected in the graphs of both the layouts and menus views, so as to minimize the steps you need to take when creating an interface.

1. Create an Interface Builder, if you do not already have one.
2. Choose File > New or click on the
toolbar button.

A new, empty, interface skeleton appears.

3. If the layouts view is not displayed, click the Layouts tab in the Interface Builder.

To begin, you need to add the main column layout to the interface using the buttons panels at the bottom of the Interface Builder. The Layouts tab at the bottom of the Interface Builder (as distinct from the Layouts tab you use to switch to the layouts view), lists the different types of layout that you can add to an interface.

4. Click Column in the button panel.

A column layout object is added as a child of the interface object. Nothing appears in the interface skeleton yet, since a column layout is a container for other window objects, and cannot itself be displayed. Note that the column layout remains selected in the layout graph. This is because column layouts are objects which can themselves have children, and the Interface Builder assumes that you are going to add some children next.

5. In the button panel, click the Graph Panes tab, and then click Graph to add a graph pane to the interface.

The graph pane object is added as the child of the column layout, and a graph pane appears in the interface skeleton.

6. Next, click the Basic Panes tab and then click Display .
7. Next, click List Panel .

The objects that you specify are added to the interface, and the interface skeleton is updated accordingly. Note that the column layout object remains selected throughout. You have now created the basic layout for the interface.

Next, suppose that you decide to add a title to the left of the display pane. You might want to do this make it clear what information is being shown in the display pane.

To do this, you can create a new row layout, add a title pane to it, and then move the existing display pane into this new row-layout. In addition, you must reorganize some of the elements in the interface.

1. Ensure that Column-Layout-1 is still selected in the Layout hierarchy area.

The new row layout needs to be added as a child of the column layout.

2. In the button panel at the bottom of the Interface Builder, click the Layouts tab to display the available layouts once more.
3. Click on Row .

Notice that the new row layout remains selected, ready for you to add objects to it.

4. Click the Basic Panes tab again, and click Title .

Next, you must move the display pane you have already created, so that it is contained in the new row layout.

5. In the Layout hierarchy area, select Display-Pane-1 and choose Edit > Cut .
6. Select Row-Layout-1 and choose Edit > Paste .

The items have already been placed in the row layout in the positions you want them. However, the row layout itself has been added to the bottom of the interface; you want it to be in the same position as the display pane you initially created. To do this, move the list panel to the bottom of the interface.

7. Select List-Panel-1 and choose Object > Lower from the menu bar on the Interface Builder itself.

You have now finished creating the layout for the example interface. The next step is to name the elements of the interface in a sensible fashion.