1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>wx Basics — wxGlade 1.1.1 documentation</title>
<link rel="stylesheet" href="_static/classic.css" type="text/css" />
<link rel="stylesheet" href="_static/pygments.css" type="text/css" />
<link rel="stylesheet" href="_static/css/custom.css" type="text/css" />
<script type="text/javascript">
var DOCUMENTATION_OPTIONS = {
URL_ROOT: './',
VERSION: '1.1.1',
COLLAPSE_INDEX: false,
FILE_SUFFIX: '.html',
HAS_SOURCE: true,
SOURCELINK_SUFFIX: '.txt'
};
</script>
<script type="text/javascript" src="_static/jquery.js"></script>
<script type="text/javascript" src="_static/underscore.js"></script>
<script type="text/javascript" src="_static/doctools.js"></script>
<link rel="index" title="Index" href="genindex.html" />
<link rel="search" title="Search" href="search.html" />
<link rel="next" title="Tutorial Project: Calculator" href="tutorial.html" />
<link rel="prev" title="wxGlade Overview and Quick Start" href="intro.html" />
</head>
<body>
<div class="related" role="navigation" aria-label="related navigation">
<h3>Navigation</h3>
<ul>
<li class="right" style="margin-right: 10px">
<a href="genindex.html" title="General Index"
accesskey="I">index</a></li>
<li class="right" >
<a href="tutorial.html" title="Tutorial Project: Calculator"
accesskey="N">next</a> |</li>
<li class="right" >
<a href="intro.html" title="wxGlade Overview and Quick Start"
accesskey="P">previous</a> |</li>
<li class="nav-item nav-item-0"><a href="index.html">wxGlade 1.1.1 documentation</a> »</li>
</ul>
</div>
<div class="document">
<div class="documentwrapper">
<div class="bodywrapper">
<div class="body" role="main">
<div class="section" id="wx-basics">
<h1>wx Basics<a class="headerlink" href="#wx-basics" title="Permalink to this headline">¶</a></h1>
<div class="section" id="concept">
<h2>Concept<a class="headerlink" href="#concept" title="Permalink to this headline">¶</a></h2>
<p>wxPython is a Wrapper around the wxWidgets GUI library, which is written in C++.</p>
<dl class="docutils">
<dt>You may want to visit these pages for more information:</dt>
<dd><ul class="first last simple">
<li>The wxPython home page: <a class="reference external" href="https://wxpython.org/">https://wxpython.org/</a></li>
<li>The <strong>wxPython API</strong> documentation: <a class="reference external" href="https://docs.wxpython.org/">https://docs.wxpython.org/</a></li>
<li>An overview including a <cite>Hello World</cite> application example: <a class="reference external" href="https://wxpython.org/pages/overview/">https://wxpython.org/pages/overview/</a></li>
<li>A more comprehensive <cite>Getting Started</cite> guide: <a class="reference external" href="https://wiki.wxpython.org/Getting%20Started">https://wiki.wxpython.org/Getting%20Started</a></li>
<li>The wxWidgets home page: <a class="reference external" href="https://www.wxwidgets.org/">https://www.wxwidgets.org/</a></li>
</ul>
</dd>
</dl>
<p>The wxGlade documentation is intended to be readable without previous wx knowledge.
It will teach you how to create windows, handle events and how to integrate with your ‘business logic’ code.
Sooner or later you will have to look into the wx documentation, though.</p>
<p>If you are new to wx/Python, make sure that you work through this documentation at least up to and including section
“Create and Use Source Code”.</p>
<p>Also please note that the <strong>wxPython demo</strong> is probably most important resource for exploring the available controls!
The demo has examples and example code for most widgets, including the more complicated and powerful ones like the
grid control.</p>
<p>If you don’t have the demo, have a look here: <a class="reference external" href="https://extras.wxpython.org/wxPython4/extras/">https://extras.wxpython.org/wxPython4/extras/</a> <br/>
Go to the subdirectory matching your wxPython version and download the demo archive. <br/>
Then unpack the archive and run <code class="docutils literal"><span class="pre">demo.py</span></code>.</p>
</div>
<div class="section" id="sizers-layout-managers">
<h2>Sizers (Layout Managers)<a class="headerlink" href="#sizers-layout-managers" title="Permalink to this headline">¶</a></h2>
<dl class="docutils">
<dt>With wxWidgets / wxPython and similar toolkits, usually controls are not placed at pixel positions on their windows, but the layout of a window is managed by <em>sizers</em>.</dt>
<dd><ul class="first last simple">
<li>There are <em>horizontal box sizers</em>, <em>vertical box sizers</em> and <em>grid sizers</em>.</li>
<li>The <em>box sizers</em> may have a label and a box around them. In that case they’re called <em>static box sizers</em>.</li>
<li>There are also variants of the <em>box sizers</em>, called <em>wrap sizers</em>.
These will wrap around if there’s not enough space for it’s children.</li>
<li>Each sizer and contained sizer items can be fixed size or grow to fill the available space, e.g. when the window is resized.</li>
<li>Typically in a main window or frame the sizer makes the contents fill the available space, while dialogs will
be sized to the minimum required space.</li>
</ul>
</dd>
</dl>
<div class="section" id="sizer-examples">
<h3>Sizer Examples<a class="headerlink" href="#sizer-examples" title="Permalink to this headline">¶</a></h3>
<table border="1" class="colwidths-given docutils align-center">
<colgroup>
<col width="60%" />
<col width="40%" />
</colgroup>
<tbody valign="top">
<tr class="row-odd"><td><p class="first"><strong>Vertical BoxSizer</strong></p>
<ul class="last simple">
<li>This sizer stacks the controls it manages one above the other.</li>
<li>This example shows three buttons arranged in this way.</li>
</ul>
</td>
<td><a class="reference internal" href="_images/vertical.png"><img alt="vertical" src="_images/vertical.png" style="width: 120px;" /></a></td>
</tr>
<tr class="row-even"><td><p class="first"><strong>Horizontal BoxSizer</strong></p>
<ul class="last simple">
<li>This sizer arranges its controls alongside of one another.</li>
<li>This example shows three button arranged in this way.</li>
</ul>
</td>
<td><a class="reference internal" href="_images/horizontal.png"><img alt="horizontal" src="_images/horizontal.png" style="width: 280px;" /></a></td>
</tr>
<tr class="row-odd"><td><p class="first"><strong>Allowing controls to grow and/or expand</strong></p>
<ul class="simple">
<li>Controls in a horizontal sizer can “grow” horizontally, or “expand” vertically in response to changes in window size.</li>
<li>In this three button example, using a horizontal BoxSizer:</li>
</ul>
<blockquote class="last">
<div><ul class="simple">
<li>The middle button has been allowed to grow horizontally.</li>
<li>The third button has been allowed to expand vertically.</li>
</ul>
</div></blockquote>
</td>
<td><a class="reference internal" href="_images/horizontal2.png"><img alt="horizontal2" src="_images/horizontal2.png" style="width: 280px;" /></a></td>
</tr>
<tr class="row-even"><td><p class="first"><strong>Alignment of controls</strong></p>
<ul class="simple">
<li>The alignment of controls within a sizer can also be specified. <br/>
This example also uses a horizontal BoxSizer to specify that:</li>
</ul>
<blockquote class="last">
<div><ul class="simple">
<li>The first button is “top” aligned.</li>
<li>The middle button is “bottom” aligned.</li>
<li>The third button has been given a border that provides some space around it on all sides.</li>
</ul>
</div></blockquote>
</td>
<td><a class="reference internal" href="_images/horizontal3.png"><img alt="horizontal3" src="_images/horizontal3.png" style="width: 280px;" /></a></td>
</tr>
<tr class="row-odd"><td><p class="first"><strong>StaticBoxSizer</strong></p>
<ul class="last simple">
<li>This sizer puts a border around its edges and provides a label to describe its contents.</li>
<li>In this example, a horizontal StaticBoxSizer has been used to contain the three buttons
(which have the same properties set as those in the previous example). <br/></li>
<li>StaticBoxSizers can be either horizontal or vertical, just like their “non-static” equivalents.</li>
</ul>
</td>
<td><a class="reference internal" href="_images/static_horizontal.png"><img alt="static_horizontal" src="_images/static_horizontal.png" style="width: 280px;" /></a></td>
</tr>
<tr class="row-even"><td><p class="first"><strong>GridSizer</strong></p>
<ul class="last simple">
<li>GridSizers arrange their contained controls in a grid made up of equally sized rows and columns.</li>
<li>In this example, the grid has been set to two rows and two columns.</li>
<li>Each cell in the example contains a button, which has been centred in the cell.</li>
</ul>
</td>
<td><a class="reference internal" href="_images/grid1.png"><img alt="grid1" src="_images/grid1.png" style="width: 300px;" /></a></td>
</tr>
<tr class="row-odd"><td><p class="first"><strong>Expanding, growing and aligning in a grid cell</strong></p>
<dl class="last docutils">
<dt>In this example:</dt>
<dd><ul class="first last simple">
<li>The first button has been aligned LEFT.</li>
<li>The second button has been aligned BOTTOM.</li>
<li>The third button has been allowed to expand.</li>
<li>The fourth button has been aligned RIGHT and CENTER.</li>
</ul>
</dd>
</dl>
</td>
<td><a class="reference internal" href="_images/grid2.png"><img alt="grid2" src="_images/grid2.png" style="width: 300px;" /></a></td>
</tr>
<tr class="row-even"><td><p class="first"><strong>FlexGridSizer</strong></p>
<ul class="last simple">
<li>The FlexGridSizer allows a little more flexibility over cell sizes by allowing individual
rows and columns to grow and/or expand.</li>
<li>In this example, the first column has been allowed to grow horizontally and
the second one allowed to grow vertically. <br/>
Note that this becomes obvious when the window is resized by the user.</li>
</ul>
</td>
<td><a class="reference internal" href="_images/flex_grid.png"><img alt="flex_grid" src="_images/flex_grid.png" style="width: 300px;" /></a></td>
</tr>
<tr class="row-odd"><td><p class="first"><strong>GridBagSizer</strong></p>
<ul class="last simple">
<li>This example uses a 3x3 grid and five buttons.</li>
<li>It shows how a GridBagSizer can allow controls to span multiple columns and/or rows.</li>
<li>All the buttons have their EXPAND property set so that they fill all the space in the cell(s).</li>
</ul>
</td>
<td><a class="reference internal" href="_images/gridbag.png"><img alt="gridbag" src="_images/gridbag.png" style="width: 300px;" /></a></td>
</tr>
<tr class="row-even"><td><p class="first"><strong>WrapSizer</strong></p>
<ul class="last simple">
<li>This sizer is similar to a BoxSizer, but allows to overflow to multiple rows/columns.</li>
<li>The example shows the same sizer with three buttons with two different widths of the containing frame.</li>
</ul>
</td>
<td><a class="reference internal" href="_images/wrap1.png"><img alt="wrap1" src="_images/wrap1.png" style="width: 300px;" /></a> <a class="reference internal" href="_images/wrap2.png"><img alt="wrap2" src="_images/wrap2.png" style="width: 215px;" /></a></td>
</tr>
</tbody>
</table>
<p>In wxGlade you can easily change the sizer type:</p>
<table border="1" class="docutils">
<colgroup>
<col width="100%" />
</colgroup>
<tbody valign="top">
<tr class="row-odd"><td><a class="first last reference internal image-reference" href="_images/SizerTypes.png"><img alt="_images/SizerTypes.png" src="_images/SizerTypes.png" style="width: 242px;" /></a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="section" id="example-application-calculator-window">
<h3>Example application: Calculator window<a class="headerlink" href="#example-application-calculator-window" title="Permalink to this headline">¶</a></h3>
<table border="1" class="docutils">
<colgroup>
<col width="100%" />
</colgroup>
<tbody valign="top">
<tr class="row-odd"><td><a class="first last reference internal image-reference" href="_images/Calculator_06_preview.png"><img alt="_images/Calculator_06_preview.png" src="_images/Calculator_06_preview.png" style="width: 200px;" /></a>
</td>
</tr>
</tbody>
</table>
<p>This window is managed by <font color="green"> <strong>one vertical box sizer with six slots</strong> </font> for the five rows,
plus a horizontal line and five <font color="blue"> <strong>horizontal box sizers</strong> </font> for the horizontally arranged controls
they contain (i.e. label plus text control, label plus radio box or button plus button):</p>
<table border="1" class="docutils align-center">
<colgroup>
<col width="50%" />
<col width="50%" />
</colgroup>
<tbody valign="top">
<tr class="row-odd"><td>The <em>Design</em> and <em>Preview</em> windows look like this, but without the colored frames for the horizontal and vertical sizers: <br/>
<a class="reference internal" href="_images/Calculator_06_sizers.png"><img alt="Calculator_06_sizers" class="align-middle" src="_images/Calculator_06_sizers.png" style="width: 200px;" /></a> <br/>
Each blue frame is a horizontal sizer with two slots each.
The (invisible) borders between slots are indicated by dashed lines. <br/> <br/>
The inputs for Value 1 and 2 are set to grow horizontally;
the Result output is growing horizontally and EXPANDing vertically.</td>
<td>In the <em>Tree</em> window, you can see the hierarchical structure: <br/>
<a class="reference internal" href="_images/Calculator_06_tree.png"><img alt="Calculator_06_tree" class="align-middle" src="_images/Calculator_06_tree.png" style="width: 200px;" /></a> <br/> <br/>
Note that <font color="blue"> horizontal </font> and <font color="green"> vertical </font> sizers are <br/>
visualized with different icons: <img alt="sizer_h" src="_images/sizer_h.png" /> <img alt="sizer" src="_images/sizer.png" /> .</td>
</tr>
</tbody>
</table>
<p>Later we’ll have a look at alternative structures which allow better alignment of the fields.</p>
<div class="admonition note">
<p class="first admonition-title">Note</p>
<ul class="last simple">
<li>For your own projects, always use the simplest available sizers.
Usually you will need mainly box sizers and maybe one or two FlexGridSizers.</li>
<li>Use nested sizers to match the hierarchical / logical structure of your project. This will make it easy
to re-arrange things to find the best user interface.</li>
<li><strong>Never ever try to use a Grid(Bag)Sizer as main sizer</strong> of a window trying to resemble pixel placement or
Tkinter’s grid geometry manager. This is a mess to create and maintain.
Actually, a GridBagSizer is rarely needed.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sphinxsidebar" role="navigation" aria-label="main navigation">
<div class="sphinxsidebarwrapper">
<p class="logo"><a href="index.html">
<img class="logo" src="_static/wxglade.png" alt="Logo"/>
</a></p>
<h3><a href="index.html">Table Of Contents</a></h3>
<ul>
<li><a class="reference internal" href="#">wx Basics</a><ul>
<li><a class="reference internal" href="#concept">Concept</a></li>
<li><a class="reference internal" href="#sizers-layout-managers">Sizers (Layout Managers)</a><ul>
<li><a class="reference internal" href="#sizer-examples">Sizer Examples</a></li>
<li><a class="reference internal" href="#example-application-calculator-window">Example application: Calculator window</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<h4>Previous topic</h4>
<p class="topless"><a href="intro.html"
title="previous chapter">wxGlade Overview and Quick Start</a></p>
<h4>Next topic</h4>
<p class="topless"><a href="tutorial.html"
title="next chapter">Tutorial Project: Calculator</a></p>
<div role="note" aria-label="source link">
<h3>This Page</h3>
<ul class="this-page-menu">
<li><a href="_sources/wxbasics.rst.txt"
rel="nofollow">Show Source</a></li>
</ul>
</div>
<div id="searchbox" style="display: none" role="search">
<h3>Quick search</h3>
<form class="search" action="search.html" method="get">
<div><input type="text" name="q" /></div>
<div><input type="submit" value="Go" /></div>
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
</div>
<script type="text/javascript">$('#searchbox').show(0);</script>
</div>
</div>
<div class="clearer"></div>
</div>
<div class="related" role="navigation" aria-label="related navigation">
<h3>Navigation</h3>
<ul>
<li class="right" style="margin-right: 10px">
<a href="genindex.html" title="General Index"
>index</a></li>
<li class="right" >
<a href="tutorial.html" title="Tutorial Project: Calculator"
>next</a> |</li>
<li class="right" >
<a href="intro.html" title="wxGlade Overview and Quick Start"
>previous</a> |</li>
<li class="nav-item nav-item-0"><a href="index.html">wxGlade 1.1.1 documentation</a> »</li>
</ul>
</div>
<div class="footer" role="contentinfo">
© Copyright 2017-2025, Dietmar Schwertberger.
Created using <a href="http://sphinx-doc.org/">Sphinx</a> 1.6.4.
</div>
</body>
</html>
|
