]> git.saurik.com Git - wxWidgets.git/blob - docs/doxygen/overviews/sizer.h
Add IEEE 754 single/double precision support to wxDataStream classes.
[wxWidgets.git] / docs / doxygen / overviews / sizer.h
1 /////////////////////////////////////////////////////////////////////////////
2 // Name: sizer.h
3 // Purpose: topic overview
4 // Author: wxWidgets team
5 // RCS-ID: $Id$
6 // Licence: wxWindows licence
7 /////////////////////////////////////////////////////////////////////////////
8
9 /**
10
11 @page overview_sizer Sizers Overview
12
13 @tableofcontents
14
15 Sizers, as represented by the wxSizer class and its descendants in the
16 wxWidgets class hierarchy, have become the method of choice to define the
17 layout of controls in dialogs in wxWidgets because of their ability to create
18 visually appealing dialogs independent of the platform, taking into account
19 the differences in size and style of the individual controls. Unlike the
20 original wxWidgets Dialog Editor, editors such as wxDesigner, DialogBlocks,
21 XRCed and wxWorkshop create dialogs based exclusively on sizers, practically
22 forcing the user to create platform independent layouts without compromises.
23
24 The next section describes and shows what can be done with sizers. The
25 following sections briefly describe how to program with individual sizer
26 classes.
27
28 For information about the wxWidgets resource system, which can describe
29 sizer-based dialogs, see the @ref overview_xrc.
30
31 @see wxSizer, wxBoxSizer, wxStaticBoxSizer, wxGridSizer, wxFlexGridSizer,
32 wxGridBagSizer
33
34
35
36 @section overview_sizer_idea The Idea Behind Sizers
37
38 The layout algorithm used by sizers in wxWidgets is closely related to layout
39 systems in other GUI toolkits, such as Java's AWT, the GTK toolkit or the Qt
40 toolkit. It is based upon the idea of individual subwindows reporting their
41 minimal required size and their ability to get stretched if the size of the
42 parent window has changed. This will most often mean that the programmer does
43 not set the start-up size of a dialog, the dialog will rather be assigned a
44 sizer and this sizer will be queried about the recommended size. This sizer in
45 turn will query its children (which can be normal windows, empty space or other
46 sizers) so that a hierarchy of sizers can be constructed. Note that wxSizer
47 does not derive from wxWindow and thus does not interfere with tab ordering and
48 requires very few resources compared to a real window on screen.
49
50 What makes sizers so well fitted for use in wxWidgets is the fact that every
51 control reports its own minimal size and the algorithm can handle differences
52 in font sizes or different window (dialog item) sizes on different platforms
53 without problems. For example, if the standard font as well as the overall
54 design of Linux/GTK widgets requires more space than on Windows, the initial
55 dialog size will automatically be bigger on Linux/GTK than on Windows.
56
57 There are currently five different kinds of sizers available in wxWidgets. Each
58 represents either a certain way to lay out dialog items in a dialog or it
59 fulfills a special task such as wrapping a static box around a dialog item (or
60 another sizer). These sizers will be discussed one by one in the text below.
61 For more detailed information on how to use sizers programmatically, please
62 refer to the section @ref overview_sizer_box.
63
64
65 @section overview_sizer_features Common Features
66
67 All sizers are containers, that is, they are used to lay out one dialog item
68 (or several dialog items), which they contain. Such items are sometimes
69 referred to as the children of the sizer. Independent of how the individual
70 sizers lay out their children, all children have certain features in common:
71
72 <b>A minimal size</b>: This minimal size is usually identical to the initial
73 size of the controls and may either be set explicitly in the wxSize field of
74 the control constructor or may be calculated by wxWidgets, typically by setting
75 the height and/or the width of the item to -1. Note that only some controls can
76 calculate their size (such as a checkbox) whereas others (such as a listbox)
77 don't have any natural width or height and thus require an explicit size. Some
78 controls can calculate their height, but not their width (e.g. a single line
79 text control):
80
81 @image html overview_sizer_03.png
82
83 @image html overview_sizer_04.png
84
85 @image html overview_sizer_05.png
86
87 <b>A border</b>: The border is just empty space and is used to separate dialog
88 items in a dialog. This border can either be all around, or at any combination
89 of sides such as only above and below the control. The thickness of this border
90 must be set explicitly, typically 5 points. The following samples show dialogs
91 with only one dialog item (a button) and a border of 0, 5, and 10 pixels around
92 the button:
93
94 @image html overview_sizer_00.png
95
96 @image html overview_sizer_01.png
97
98 @image html overview_sizer_02.png
99
100 <b>An alignment</b>: Often, a dialog item is given more space than its minimal
101 size plus its border. Depending on what flags are used for the respective
102 dialog item, the dialog item can be made to fill out the available space
103 entirely, i.e. it will grow to a size larger than the minimal size, or it will
104 be moved to either the centre of the available space or to either side of the
105 space. The following sample shows a listbox and three buttons in a horizontal
106 box sizer; one button is centred, one is aligned at the top, one is aligned at
107 the bottom:
108
109 @image html overview_sizer_06.png
110
111 <b>A stretch factor</b>: If a sizer contains more than one child and it is
112 offered more space than its children and their borders need, the question
113 arises how to distribute the surplus space among the children. For this
114 purpose, a stretch factor may be assigned to each child, where the default
115 value of 0 indicates that the child will not get more space than its requested
116 minimum size. A value of more than zero is interpreted in relation to the sum
117 of all stretch factors in the children of the respective sizer, i.e. if two
118 children get a stretch factor of 1, they will get half the extra space each
119 <em>independent of whether one control has a minimal sizer inferior to the
120 other or not</em>. The following sample shows a dialog with three buttons, the
121 first one has a stretch factor of 1 and thus gets stretched, whereas the other
122 two buttons have a stretch factor of zero and keep their initial width:
123
124 @image html overview_sizer_07.png
125
126 Within wxDesigner, this stretch factor gets set from the @e Option menu.
127
128
129 @section overview_sizer_hiding Hiding Controls Using Sizers
130
131 You can hide controls contained in sizers the same way you would hide any
132 control, using the wxWindow::Show method. However, wxSizer also offers a
133 separate method which can tell the sizer not to consider that control in its
134 size calculations. To hide a window using the sizer, call wxSizer::Show. You
135 must then call Layout on the sizer to force an update.
136
137 This is useful when hiding parts of the interface, since you can avoid removing
138 the controls from the sizer and having to add them back later.
139
140 @note This is supported only by wxBoxSizer and wxFlexGridSizer.
141
142 @subsection overview_sizer_hiding_box wxBoxSizer
143
144 wxBoxSizer can lay out its children either vertically or horizontally,
145 depending on what flag is being used in its constructor. When using a vertical
146 sizer, each child can be centered, aligned to the right or aligned to the left.
147 Correspondingly, when using a horizontal sizer, each child can be centered,
148 aligned at the bottom or aligned at the top. The stretch factor described in
149 the last paragraph is used for the main orientation, i.e. when using a
150 horizontal box sizer, the stretch factor determines how much the child can be
151 stretched horizontally. The following sample shows the same dialog as in the
152 last sample, only the box sizer is a vertical box sizer now:
153
154 @image html overview_sizer_08.png
155
156 @subsection overview_sizer_hiding_static wxStaticBoxSizer
157
158 wxStaticBoxSixer is the same as a wxBoxSizer, but surrounded by a static box.
159 Here is a sample:
160
161 @image html overview_sizer_09.png
162
163 @subsection overview_sizer_hiding_grid wxGridSizer
164
165 wxGridSizer is a two-dimensional sizer. All children are given the same size,
166 which is the minimal size required by the biggest child, in this case the text
167 control in the left bottom border. Either the number of columns or the number
168 or rows is fixed and the grid sizer will grow in the respectively other
169 orientation if new children are added:
170
171 @image html overview_sizer_10.png
172
173 For programming information, see wxGridSizer.
174
175 @subsection overview_sizer_hiding_flexgrid wxFlexGridSizer
176
177 Another two-dimensional sizer derived from wxGridSizer. The width of each
178 column and the height of each row are calculated individually according to the
179 minimal requirements from the respectively biggest child. Additionally, columns
180 and rows can be declared to be stretchable if the sizer is assigned a size
181 different from the one it requested. The following sample shows the same dialog
182 as the one above, but using a flex grid sizer:
183
184 @image html overview_sizer_11.png
185
186
187 @section overview_sizer_box Programming with wxBoxSizer
188
189 The basic idea behind a wxBoxSizer is that windows will most often be laid out
190 in rather simple basic geometry, typically in a row or a column or several
191 hierarchies of either.
192
193 As an example, we will construct a dialog that will contain a text field at the
194 top and two buttons at the bottom. This can be seen as a top-hierarchy column
195 with the text at the top and buttons at the bottom and a low-hierarchy row with
196 an OK button to the left and a Cancel button to the right. In many cases
197 (particularly dialogs under Unix and normal frames) the main window will be
198 resizable by the user and this change of size will have to get propagated to
199 its children. In our case, we want the text area to grow with the dialog,
200 whereas the button shall have a fixed size. In addition, there will be a thin
201 border around all controls to make the dialog look nice and - to make matter
202 worse - the buttons shall be centred as the width of the dialog changes.
203
204 It is the unique feature of a box sizer, that it can grow in both directions
205 (height and width) but can distribute its growth in the main direction
206 (horizontal for a row) @e unevenly among its children. In our example case, the
207 vertical sizer is supposed to propagate all its height changes to only the text
208 area, not to the button area. This is determined by the @e proportion parameter
209 when adding a window (or another sizer) to a sizer. It is interpreted as a
210 weight factor, i.e. it can be zero, indicating that the window may not be
211 resized at all, or above zero. If several windows have a value above zero, the
212 value is interpreted relative to the sum of all weight factors of the sizer, so
213 when adding two windows with a value of 1, they will both get resized equally
214 much and each half as much as the sizer owning them. Then what do we do when a
215 column sizer changes its width? This behaviour is controlled by @e flags (the
216 second parameter of the Add() function): Zero or no flag indicates that the
217 window will preserve it is original size, wxGROW flag (same as wxEXPAND) forces
218 the window to grow with the sizer, and wxSHAPED flag tells the window to change
219 it is size proportionally, preserving original aspect ratio. When wxGROW flag
220 is not used, the item can be aligned within available space. wxALIGN_LEFT,
221 wxALIGN_TOP, wxALIGN_RIGHT, wxALIGN_BOTTOM, wxALIGN_CENTER_HORIZONTAL and
222 wxALIGN_CENTER_VERTICAL do what they say. wxALIGN_CENTRE (same as
223 wxALIGN_CENTER) is defined as (wxALIGN_CENTER_HORIZONTAL |
224 wxALIGN_CENTER_VERTICAL). Default alignment is wxALIGN_LEFT | wxALIGN_TOP.
225
226 As mentioned above, any window belonging to a sizer may have a border, and it
227 can be specified which of the four sides may have this border, using the wxTOP,
228 wxLEFT, wxRIGHT and wxBOTTOM constants or wxALL for all directions (and you may
229 also use wxNORTH, wxWEST etc instead). These flags can be used in combination
230 with the alignment flags above as the second parameter of the Add() method
231 using the binary or operator |. The sizer of the border also must be made
232 known, and it is the third parameter in the Add() method. This means, that the
233 entire behaviour of a sizer and its children can be controlled by the three
234 parameters of the Add() method.
235
236 @code
237 // We want to get a dialog that is stretchable because it
238 // has a text ctrl at the top and two buttons at the bottom.
239
240 MyDialog::MyDialog(wxFrame *parent, wxWindowID id, const wxString &title )
241 : wxDialog(parent, id, title, wxDefaultPosition, wxDefaultSize,
242 wxDEFAULT_DIALOG_STYLE | wxRESIZE_BORDER)
243 {
244 wxBoxSizer *topsizer = new wxBoxSizer( wxVERTICAL );
245
246 // create text ctrl with minimal size 100x60
247 topsizer->Add(
248 new wxTextCtrl( this, -1, "My text.", wxDefaultPosition, wxSize(100,60), wxTE_MULTILINE),
249 1, // make vertically stretchable
250 wxEXPAND | // make horizontally stretchable
251 wxALL, // and make border all around
252 10 ); // set border width to 10
253
254 wxBoxSizer *button_sizer = new wxBoxSizer( wxHORIZONTAL );
255 button_sizer->Add(
256 new wxButton( this, wxID_OK, "OK" ),
257 0, // make horizontally unstretchable
258 wxALL, // make border all around (implicit top alignment)
259 10 ); // set border width to 10
260 button_sizer->Add(
261 new wxButton( this, wxID_CANCEL, "Cancel" ),
262 0, // make horizontally unstretchable
263 wxALL, // make border all around (implicit top alignment)
264 10 ); // set border width to 10
265
266 topsizer->Add(
267 button_sizer,
268 0, // make vertically unstretchable
269 wxALIGN_CENTER ); // no border and centre horizontally
270
271 SetSizerAndFit(topsizer); // use the sizer for layout and size window
272 // accordingly and prevent it from being resized
273 // to smaller size
274 }
275 @endcode
276
277 Note that the new way of specifying flags to wxSizer is via wxSizerFlags. This
278 class greatly eases the burden of passing flags to a wxSizer.
279
280 Here's how you'd do the previous example with wxSizerFlags:
281
282 @code
283 // We want to get a dialog that is stretchable because it
284 // has a text ctrl at the top and two buttons at the bottom.
285
286 MyDialog::MyDialog(wxFrame *parent, wxWindowID id, const wxString &title )
287 : wxDialog(parent, id, title, wxDefaultPosition, wxDefaultSize,
288 wxDEFAULT_DIALOG_STYLE | wxRESIZE_BORDER)
289 {
290 wxBoxSizer *topsizer = new wxBoxSizer( wxVERTICAL );
291
292 // create text ctrl with minimal size 100x60 that is horizontally and
293 // vertically stretchable with a border width of 10
294 topsizer->Add(
295 new wxTextCtrl( this, -1, "My text.", wxDefaultPosition, wxSize(100,60), wxTE_MULTILINE),
296 wxSizerFlags(1).Align().Expand().Border(wxALL, 10));
297
298 wxBoxSizer *button_sizer = new wxBoxSizer( wxHORIZONTAL );
299
300 //create two buttons that are horizontally unstretchable,
301 // with an all-around border with a width of 10 and implicit top alignment
302 button_sizer->Add(
303 new wxButton( this, wxID_OK, "OK" ),
304 wxSizerFlags(0).Align().Border(wxALL, 10));
305
306 button_sizer->Add(
307 new wxButton( this, wxID_CANCEL, "Cancel" ),
308 wxSizerFlags(0).Align().Border(wxALL, 10));
309
310 //create a sizer with no border and centered horizontally
311 topsizer->Add(
312 button_sizer,
313 wxSizerFlags(0).Center() );
314
315 SetSizerAndFit(topsizer); // use the sizer for layout and set size and hints
316 }
317 @endcode
318
319
320
321 @section overview_sizer_types Other Types of Sizers
322
323 wxGridSizer is a sizer which lays out its children in a two-dimensional table
324 with all table fields having the same size, i.e. the width of each field is the
325 width of the widest child, the height of each field is the height of the
326 tallest child.
327
328 wxFlexGridSizer is a sizer which lays out its children in a two-dimensional
329 table with all table fields in one row having the same height and all fields in
330 one column having the same width, but all rows or all columns are not
331 necessarily the same height or width as in the wxGridSizer.
332
333 wxStaticBoxSizer is a sizer derived from wxBoxSizer but adds a static box
334 around the sizer. Note that this static box has to be created separately.
335
336 wxGridBagSizer is a rather special kind of sizer which, unlike the other
337 classes, allows to directly put the elements at the given position in the
338 sizer. Please see its documentation for more details.
339
340 @section overview_sizer_button CreateButtonSizer
341
342 As a convenience, wxDialog::CreateButtonSizer(long flags) can be used to create a
343 standard button sizer in which standard buttons are displayed. The following
344 flags can be passed to this function:
345
346 @code
347 wxYES_NO // Add Yes/No subpanel
348 wxYES // return wxID_YES
349 wxNO // return wxID_NO
350 wxNO_DEFAULT // make the wxNO button the default,
351 // otherwise wxYES or wxOK button will be default
352
353 wxOK // return wxID_OK
354 wxCANCEL // return wxID_CANCEL
355 wxHELP // return wxID_HELP
356
357 wxFORWARD // return wxID_FORWARD
358 wxBACKWARD // return wxID_BACKWARD
359 wxSETUP // return wxID_SETUP
360 wxMORE // return wxID_MORE
361 @endcode
362
363 */