diff --git a/doc/addressbook-sdk.qdoc b/doc/addressbook-sdk.qdoc index eed7f573f3248389de3fd8f6433bbc67897d18d1..bff44eedded69eaa50ad8c0c608257bc9ecb3119 100644 --- a/doc/addressbook-sdk.qdoc +++ b/doc/addressbook-sdk.qdoc @@ -136,6 +136,7 @@ Now that we have all the files we need, let's move on to designing the user interface. + \section1 Placing Widgets on the Form In the \gui{Project Sidebar}, double-click on the \c{addressbook.ui} file. @@ -153,14 +154,21 @@ earlier. We use a QGridLayout to position our labels and input fields in a structured manner. QGridLayout divides the available space into a grid and places widgets in the cells we specify with row and column numbers. The - diagram below shows the layout cells and the position of our widgets. + diagram below shows the layout cells and the position of our widgets. Place + your widgets accordingly and save the form by choosing + \gui{File | Save} or using the \key{Ctrl+S} shortcut. \image addressbook-tutorial-part1-labeled-screenshot.png - Place your widgets accordingly and save the form by choosing - \gui{File | Save} or using the \key{Ctrl+S} shortcut. - - A common + A common mistake when designing user interfaces with \QD is overlooking the + top level widget's layout. Unlike sub-layouts, which \QD displays with a + red border, top level layouts have no graphical representation. Layouts are + necessary for top level widgets, in this case QWidget, to ensure that when + the window is resized, the widgets on the form will resize accordingly. You + can try this out by pressing \key{Ctrl+R} now. To correct it, simply click + anywhere on the form and select \gui{Lay out Horizontally} or + \gui{Lay out Vertically}. The output will be the same. Now your widgets + will resize correctly. \section1 The AddressBook Class @@ -280,7 +288,9 @@ ## image Select all the objects on the form (use \key{Ctrl+A}) and lay them out in a - grid. + grid. Lastly, set the top level widget's layout by right-clicking anywhere + on the widget and selecting \gui{Lay out Horizontally} or + \gui{Lay out Vertically}.