2.3.2 Redesigning the layout

To address the issue of layout first, you should group the text field and the Add task button in a row; since the two elements are inherently connected (the task you add is the one whose text is displayed in the text field), it makes sense to group them visually as well.

The following code creates the necessary row layout:

horizontally () 
  make (<text-field>, label: "Task text:");
  make (<push-button>, label: "Add task");
end

Note that the macro horizontally has been used here. This macro takes any expressions that are passed to it and creates a row layout from the results of evaluating those expressions. The macro vertically works in a similar way, creating a column layout from its arguments. Use vertically to combine the row layout you just created with the Remove task button that still needs to be incorporated:

vertically () 
  horizontally () 
    make (<text-field>, label: "Task text:");
    make (<push-button>, label: "Add task");
  end;
  make (<push-button>, label: "Remove task");
end

Finally, you need to add this sheet hierarchy to another row layout, so that the main list box for the application is on the left, and the sheet hierarchy containing the buttons and text field is on the right:

horizontally ()
  make (<list-box>, items: #(), lines: 15); 
  vertically () 
    horizontally () 
      make (<text-field>, label: "Task text:");
      make (<push-button>, label: "Add task");
    end;
    make (<push-button>, label: "Remove task");
  end;
end

In the last few steps, you have exclusively used horizontally and vertically. In fact, it does not matter if you use these macros, or if you create instances of <row-layout> and <column-layout> explicitly using make.

Note: You may have to resize the window to see everything.

---

Building Applications Using DUIM - 26 May 1999