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.
A new, empty, interface skeleton appears.
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.
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.
The graph pane object is added as the child of the column layout, and a graph pane appears in the interface skeleton.
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.
Column-Layout-1is still selected in the Layout hierarchy area.
The new row layout needs to be added as a child of the column layout.
Notice that the new row layout remains selected, ready for you to add objects to it.
Next, you must move the display pane you have already created, so that it is contained in the new row layout.
Display-Pane-1and choose Edit > Cut .
Row-Layout-1and 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.
List-Panel-1and 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.