Qt
Internal/Contributor docs for the Qt SDK. Note: These are NOT official API docs; those are found at https://doc.qt.io/
Loading...
Searching...
No Matches
designer-manual.qdoc
Go to the documentation of this file.
1
// Copyright (C) 2016 The Qt Company Ltd.
2
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
3
4
/*!
5
\page qtdesigner-manual.html
6
7
\title Qt Widgets Designer Manual
8
\ingroup qttools
9
\keyword Qt Widgets Designer
10
11
\QD is the Qt tool for designing and building graphical user
12
interfaces (GUIs) with \l {Qt Widgets}. For user interface design with
13
\l {Qt Quick}, see \l {Qt Design Studio Manual} {Qt Design Studio}.
14
15
You can compose and customize your windows or dialogs in a
16
what-you-see-is-what-you-get (WYSIWYG) manner, and test them using different
17
styles and resolutions. Widgets and forms created with \QD integrate
18
seamlessly with programmed code, using Qt's signals and slots mechanism, so
19
that you can easily assign behavior to graphical elements. All properties
20
set in \QD can be changed dynamically within the code. Furthermore, features
21
like widget promotion and custom plugins allow you to use your own
22
components with \QD.
23
24
\note You have the option of using \l {Qt Quick} and
25
\l {Qt Design Studio Manual}{Qt Design Studio} for user interface
26
design rather than widgets. It is a much easier way to write many kinds of
27
applications. It enables a completely customizable appearance,
28
touch-reactive elements, and smooth animated transitions, taking advantage
29
of hardware acceleration.
30
31
If you are new to \QD, you can take a look at the
32
\l{Getting To Know Qt Widgets Designer} document. For a quick tutorial on how to
33
use \QD, refer to \l{A Quick Start to Qt Widgets Designer}.
34
35
\image designer-multiple-screenshot.png
36
37
\section1 Table of Contents
38
39
\list
40
\li \l{A Quick Start to Qt Widgets Designer}
41
\li \l{Qt Widgets Designer's Editing Modes}
42
\list
43
\li \l{Qt Widgets Designer's Widget Editing Mode}{Widget Editing Mode}
44
\li \l{Qt Widgets Designer's Signals and Slots Editing Mode}
45
{Signals and Slots Editing Mode}
46
\li \l{Qt Widgets Designer's Buddy Editing Mode}
47
{Buddy Editing Mode}
48
\li \l{Qt Widgets Designer's Tab Order Editing Mode}
49
{Tab Order Editing Mode}
50
\endlist
51
\li \l{Using Layouts in Qt Widgets Designer}
52
\li \l{Saving, Previewing and Printing Forms in Qt Widgets Designer}
53
\li \l{Using Containers in Qt Widgets Designer}
54
\li \l{Creating Main Windows in Qt Widgets Designer}
55
\li \l{Editing Resources with Qt Widgets Designer}
56
\li \l{Using Stylesheets with Qt Widgets Designer}
57
\li \l{Using a Designer UI File in Your C++ Application}
58
\li \l{Using a Designer UI File in Your Qt for Python Application}
59
\li Advanced Use
60
\list
61
\li \l{Customizing Qt Widgets Designer Forms}
62
\li \l{Using Custom Widgets with Qt Widgets Designer}
63
\li \l{Creating Custom Widgets for Qt Widgets Designer}
64
\li \l{Creating Custom Widget Extensions}
65
\li \l{Qt Widgets Designer's UI File Format}
66
\endlist
67
\endlist
68
*/
69
70
71
/*!
72
\page designer-to-know.html
73
74
75
\title Getting to Know Qt Widgets Designer
76
77
\image designer-screenshot.png
78
79
\section1 Launching Designer
80
81
Once you have installed Qt, you can start \QD in the same way as any other
82
application on the development host. You can also launch \QD directly from
83
Qt Creator. Qt Creator automatically opens all .ui files in the integrated
84
\QD, in \gui Design mode.
85
86
Generally, the integrated \QD contains the same functions as the standalone
87
\QD. For more information about the differences, see the
88
\l{http://doc.qt.io/qtcreator/index.html}{Qt Creator Manual}.
89
90
If you have large forms that do not fit in the Qt Creator \gui Design mode,
91
you can open them in the stand-alone \QD.
92
93
\section1 The User Interface
94
95
When used as a standalone application, \QD's user interface can be
96
configured to provide either a multi-window user interface (the default
97
mode), or it can be used in docked window mode. When used from within an
98
integrated development environment (IDE) only the multi-window user
99
interface is available. You can switch modes in the \gui Preferences dialog
100
from the \gui Edit menu.
101
102
In multi-window mode, you can arrange each of the tool windows to suit your
103
working style. The main window consists of a menu bar, a tool bar, and a
104
widget box that contains the widgets you can use to create your user
105
interface.
106
107
\target MainWindow
108
\table
109
\row
110
\li \inlineimage designer-main-window.png
111
\li \b{Qt Widgets Designer's Main Window}
112
113
The menu bar provides all the standard actions for managing forms,
114
using the clipboard, and accessing application-specific help.
115
The current editing mode, the tool windows, and the forms in use can
116
also be accessed via the menu bar.
117
118
The tool bar displays common actions that are used when editing a form.
119
These are also available via the main menu.
120
121
The widget box provides common widgets and layouts that are used to
122
design components. These are grouped into categories that reflect their
123
uses or features.
124
\endtable
125
126
Most features of \QD are accessible via the menu bar, the tool bar, or the
127
widget box. Some features are also available through context menus that can
128
be opened over the form windows. On most platforms, the right mouse is used
129
to open context menus.
130
131
\target WidgetBox
132
\table
133
\row
134
\li \inlineimage designer-widget-box.png
135
\li \b{Qt Widgets Designer's Widget Box}
136
137
The widget box provides a selection of standard Qt widgets, layouts,
138
and other objects that can be used to create user interfaces on forms.
139
Each of the categories in the widget box contain widgets with similar
140
uses or related features.
141
142
You can display all of the available objects in a category by clicking
143
on the handle next to the category label. When in
144
\l{Qt Widgets Designer's Widget Editing Mode}{Widget Editing
145
Mode}, you can add objects to a form by dragging the appropriate items
146
from the widget box onto the form, and dropping them in the required
147
locations.
148
149
\QD provides a scratch pad feature that allows you to collect
150
frequently used objects in a separate category. The scratch pad
151
category can be filled with any widget currently displayed in a form
152
by dragging them from the form and dropping them onto the widget box.
153
These widgets can be used in the same way as any other widgets, but
154
they can also contain child widgets. Open a context menu over a widget
155
to change its name or remove it from the scratch pad.
156
\endtable
157
158
159
\section1 The Concept of Layouts in Qt
160
161
A layout is used to arrange and manage the elements that make up a user
162
interface. Qt provides a number of classes to automatically handle layouts
163
-- QHBoxLayout, QVBoxLayout, QGridLayout, and QFormLayout. These classes
164
solve the challenge of laying out widgets automatically, providing a user
165
interface that behaves predictably. Fortunately knowledge of the layout
166
classes is not required to arrange widgets with \QD. Instead, select one of
167
the \gui{Lay Out Horizontally}, \gui{Lay Out in a Grid}, etc., options from
168
the context menu.
169
170
Each Qt widget has a recommended size, known as \l{QWidget::}{sizeHint()}.
171
The layout manager will attempt to resize a widget to meet its size hint.
172
In some cases, there is no need to have a different size. For example, the
173
height of a QLineEdit is always a fixed value, depending on font size and
174
style. In other cases, you may require the size to change, e.g., the width
175
of a QLineEdit or the width and height of item view widgets. This is where
176
the widget size constraints -- \l{QWidget::minimumSize()}{minimumSize} and
177
\l{QWidget::maximumSize()}{maximumSize} constraints come into play. These
178
are properties you can set in the property editor. For example, to override
179
the default \l{QWidget::}{sizeHint()}, simply set
180
\l{QWidget::minimumSize()}{minimumSize} and \l{QWidget::maximumSize()}
181
{maximumSize} to the same value. Alternatively, to use the current size as
182
a size constraint value, choose one of the \gui{Size Constraint} options
183
from the widget's context menu. The layout will then ensure that those
184
constraints are met. To control the size of your widgets via code, you can
185
reimplement \l{QWidget::}{sizeHint()} in your code.
186
187
The screenshot below shows the breakdown of a basic user interface designed
188
using a grid. The coordinates on the screenshot show the position of each
189
widget within the grid.
190
191
\image addressbook-tutorial-part3-labeled-layout.png
192
193
\note Inside the grid, the QPushButton objects are actually nested. The
194
buttons on the right are first placed in a QVBoxLayout; the buttons at the
195
bottom are first placed in a QHBoxLayout. Finally, they are put into
196
coordinates (1,2) and (2,1) of the QGridLayout.
197
198
To visualize, imagine the layout as a box that shrinks as much as possible,
199
attempting to \e squeeze your widgets in a neat arrangement, and, at the
200
same time, maximize the use of available space.
201
202
Qt's layouts help when you:
203
204
\list 1
205
\li Resize the user face to fit different window sizes.
206
\li Resize elements within the user interface to suit different
207
localizations.
208
\li Arrange elements to adhere to layout guidelines for different
209
platforms.
210
\endlist
211
212
So, you no longer have to worry about rearranging widgets for different
213
platforms, settings, and languages.
214
215
The example below shows how different localizations can affect the user
216
interface. When a localization requires more space for longer text strings
217
the Qt layout automatically scales to accommodate this, while ensuring that
218
the user interface looks presentable and still matches the platform
219
guidelines.
220
221
\table
222
\header
223
\li A Dialog in English
224
\li A Dialog in French
225
\row
226
\li \image designer-english-dialog.png
227
\li \image designer-french-dialog.png
228
\endtable
229
230
The process of laying out widgets consists of creating the layout hierarchy
231
while setting as few widget size constraints as possible.
232
233
For a more technical perspective on Qt's layout classes, refer to the
234
\l{Layout Management} documentation.
235
*/
236
237
238
/*!
239
\page designer-quick-start.html
240
241
242
\title A Quick Start to Qt Widgets Designer
243
244
Using \QD involves \b four basic steps:
245
246
\list 1
247
\li Choose your form and objects
248
\li Lay the objects out on the form
249
\li Connect the signals to the slots
250
\li Preview the form
251
\endlist
252
253
\image rgbController-screenshot.png
254
255
Suppose you would like to design a small widget (see screenshot above) that
256
contains the controls needed to manipulate Red, Green and Blue (RGB) values
257
-- a type of widget that can be seen everywhere in image manipulation
258
programs.
259
260
\table
261
\row
262
\li \inlineimage designer-choosing-form.png
263
\li \b{Choosing a Form}
264
265
You start by choosing \gui Widget from the \gui{New Form} dialog.
266
\endtable
267
268
269
\table
270
\row
271
\li \inlineimage rgbController-arrangement.png
272
\li \b{Placing Widgets on a Form}
273
274
Drag three labels, three spin boxes and three vertical sliders on to your
275
form. To change the label's default text, simply double-click on it. You
276
can arrange them according to how you would like them to be laid out.
277
\endtable
278
279
To ensure that they are laid out exactly like this in your program, you
280
need to place these widgets into a layout. We will do this in groups of
281
three. Select the "RED" label. Then, hold down \key Ctrl while you select
282
its corresponding spin box and slider. In the \gui{Form} menu, select
283
\gui{Lay Out in a Grid}.
284
285
\table
286
\row
287
\li \inlineimage rgbController-form-gridLayout.png
288
\li \inlineimage rgbController-selectForLayout.png
289
\endtable
290
291
292
Repeat the step for the other two labels along with their corresponding
293
spin boxes and sliders as well.
294
295
The next step is to combine all three layouts into one \b{main layout}.
296
The main layout is the top level widget's (in this case, the QWidget)
297
layout. It is important that your top level widget has a layout; otherwise,
298
the widgets on your window will not resize when your window is resized. To
299
set the layout, \gui{Right click} anywhere on your form, outside of the
300
three separate layouts, and select \gui{Lay Out Horizontally}.
301
Alternatively, you could also select \gui{Lay Out in a Grid} -- you will
302
still see the same arrangement (shown below).
303
304
\image rgbController-final-layout.png
305
306
\note Main layouts cannot be seen on the form. To check if you have a main
307
layout installed, try resizing your form; your widgets should resize
308
accordingly. Alternatively, you can take a look at \QD's
309
\gui{Object Inspector}. If your top level widget does not have a layout,
310
you will see the broken layout icon next to it,
311
\inlineimage rgbController-no-toplevel-layout.png
312
.
313
314
When you click on the slider and drag it to a certain value, you want the
315
spin box to display the slider's position. To accomplish this behavior, you
316
need to connect the slider's \l{QAbstractSlider::}{valueChanged()} signal
317
to the spin box's \l{QSpinBox::}{setValue()} slot. You also need to make
318
the reverse connections, e.g., connect the spin box's \l{QSpinBox::}
319
{valueChanged()} signal to the slider's \l{QAbstractSlider::value()}
320
{setValue()} slot.
321
322
To do this, you have to switch to \gui{Edit Signals/Slots} mode, either by
323
pressing \key{F4} or selecting \gui{Edit Signals/Slots} from the \gui{Edit}
324
menu.
325
326
\table
327
\row
328
\li \inlineimage rgbController-signalsAndSlots.png
329
\li \b{Connecting Signals to Slots}
330
331
Click on the slider and drag the cursor towards the spin box. The
332
\gui{Configure Connection} dialog, shown below, will pop up. Select the
333
correct signal and slot and click \gui OK.
334
\endtable
335
336
\image rgbController-configure-connection1.png
337
338
Repeat the step (in reverse order), clicking on the spin box and dragging
339
the cursor towards the slider, to connect the spin box's
340
\l{QSpinBox::}{valueChanged()} signal to the slider's
341
\l{QAbstractSlider::value()}{setValue()} slot.
342
343
You can use the screenshot below as a guide to selecting the correct signal
344
and slot.
345
346
\image rgbController-configure-connection2.png
347
348
Now that you have successfully connected the objects for the "RED"
349
component of the RGB Controller, do the same for the "GREEN" and "BLUE"
350
components as well.
351
352
Since RGB values range between 0 and 255, we need to limit the spin box
353
and slider to that particular range.
354
355
\table
356
\row
357
\li \inlineimage rgbController-property-editing.png
358
\li \b{Setting Widget Properties}
359
360
Click on the first spin box. Within the \gui{Property Editor}, you will
361
see \l{QSpinBox}'s properties. Enter "255" for the
362
\l{QSpinBox::}{maximum} property. Then, click on the first vertical
363
slider, you will see \l{QAbstractSlider}'s properties. Enter "255" for
364
the \l{QAbstractSlider::}{maximum} property as well. Repeat this
365
process for the remaining spin boxes and sliders.
366
\endtable
367
368
Now, we preview your form to see how it would look in your application -
369
press \key{Ctrl + R} or select \gui Preview from the \gui Form menu. Try
370
dragging the slider - the spin box will mirror its value too (and vice
371
versa). Also, you can resize it to see how the layouts that are used to
372
manage the child widgets, respond to different window sizes.
373
*/
374
375
376
/*!
377
\page designer-editing-mode.html
378
\previouspage Getting to Know Qt Widgets Designer
379
\nextpage Using Layouts in Qt Widgets Designer
380
381
\title Qt Widgets Designer's Editing Modes
382
383
\QD provides four editing modes: \l{Qt Widgets Designer's Widget Editing Mode}
384
{Widget Editing Mode}, \l{Qt Widgets Designer's Signals and Slots Editing Mode}
385
{Signals and Slots Editing Mode}, \l{Qt Widgets Designer's Buddy Editing Mode}
386
{Buddy Editing Mode} and \l{Qt Widgets Designer's Tab Order Editing Mode}
387
{Tab Order Editing Mode}. When working with \QD, you will always be in one
388
of these four modes. To switch between modes, simply select it from the
389
\gui{Edit} menu or the toolbar. The table below describes these modes in
390
further detail.
391
392
\table
393
\header \li \li \b{Editing Modes}
394
\row
395
\li \inlineimage designer-widget-tool.png
396
\li In \l{Qt Widgets Designer's Widget Editing Mode}{Edit} mode, we can
397
change the appearance of the form, add layouts, and edit the
398
properties of each widget. To switch to this mode, press
399
\key{F3}. This is \QD's default mode.
400
401
\row
402
\li \inlineimage designer-connection-tool.png
403
\li In \l{Qt Widgets Designer's Signals and Slots Editing Mode}
404
{Signals and Slots} mode, we can connect widgets together using
405
Qt's signals and slots mechanism. To switch to this mode, press
406
\key{F4}.
407
408
\row
409
\li \inlineimage designer-buddy-tool.png
410
\li In \l{Qt Widgets Designer's Buddy Editing Mode}{Buddy Editing Mode},
411
buddy widgets can be assigned to label widgets to help them
412
handle keyboard focus correctly.
413
414
\row
415
\li \inlineimage designer-tab-order-tool.png
416
\li In \l{Qt Widgets Designer's Tab Order Editing Mode}
417
{Tab Order Editing Mode}, we can set the order in which widgets
418
receive the keyboard focus.
419
\endtable
420
421
*/
422
423
424
/*!
425
\page designer-widget-mode.html
426
\previouspage Qt Widgets Designer's Editing Modes
427
\nextpage Qt Widgets Designer's Signals and Slots Editing Mode
428
429
\title Qt Widgets Designer's Widget Editing Mode
430
431
\image designer-editing-mode.png
432
433
In the Widget Editing Mode, objects can be dragged from the main window's
434
widget box to a form, edited, resized, dragged around on the form, and even
435
dragged between forms. Object properties can be modified interactively, so
436
that changes can be seen immediately. The editing interface is intuitive
437
for simple operations, yet it still supports Qt's powerful layout
438
facilities.
439
440
441
To create and edit new forms, open the \gui File menu and select
442
\gui{New Form...} or press \key{Ctrl+N}. Existing forms can also be edited
443
by selecting \gui{Open Form...} from the \gui File menu or pressing
444
\key{Ctrl+O}.
445
446
At any point, you can save your form by selecting the \gui{Save From As...}
447
option from the \gui File menu. The UI files saved by \QD contain
448
information about the objects used, and any details of signal and slot
449
connections between them.
450
451
452
\section1 Editing A Form
453
454
By default, new forms are opened in widget editing mode. To switch to Edit
455
mode from another mode, select \gui{Edit Widgets} from the \gui Edit menu
456
or press the \key F3 key.
457
458
Objects are added to the form by dragging them from the main widget box
459
and dropping them in the desired location on the form. Once there, they
460
can be moved around simply by dragging them, or using the cursor keys.
461
Pressing the \key Ctrl key at the same time moves the selected widget
462
pixel by pixel, while using the cursor keys alone make the selected widget
463
snap to the grid when it is moved. Objects can be selected by clicking on
464
them with the left mouse button. You can also use the \key Tab key to
465
change the selection.
466
467
The widget box contains objects in a number of different categories, all of
468
which can be placed on the form as required. The only objects that require
469
a little more preparation are the \gui Container widgets. These are
470
described in further detail in the \l{Using Containers in Qt Widgets Designer}
471
chapter.
472
473
474
\target SelectingObjects
475
\table
476
\row
477
\li \inlineimage designer-selecting-widget.png
478
\li \b{Selecting Objects}
479
480
Objects on the form are selected by clicking on them with the left
481
mouse button. When an object is selected, resize handles are shown at
482
each corner and the midpoint of each side, indicating that it can be
483
resized.
484
485
To select additional objects, hold down the \key Control key and click on
486
them. If more than one object is selected, the current object will be
487
displayed with resize handles of a different color.
488
489
To move a widget within a layout, hold down \key Shift and \key Control
490
while dragging the widget. This extends the selection to the widget's
491
parent layout.
492
493
Alternatively, objects can be selected in the
494
\l{The Object Inspector}{Object Inspector}.
495
\endtable
496
497
When a widget is selected, normal clipboard operations such as cut, copy,
498
and paste can be performed on it. All of these operations can be done and
499
undone, as necessary.
500
501
The following shortcuts can be used:
502
503
\target ShortcutsForEditing
504
\table
505
\header \li Action \li Shortcut \li Description
506
\row
507
\li Cut
508
\li \key{Ctrl+X}
509
\li Cuts the selected objects to the clipboard.
510
\row
511
\li Copy
512
\li \key{Ctrl+C}
513
\li Copies the selected objects to the clipboard.
514
\row
515
\li Paste
516
\li \key{Ctrl+V}
517
\li Pastes the objects in the clipboard onto the form.
518
\row
519
\li Delete
520
\li \key Delete
521
\li Deletes the selected objects.
522
\row
523
\li Clone object
524
\li \key{Ctrl+drag} (leftmouse button)
525
\li Makes a copy of the selected object or group of objects.
526
\row
527
\li Preview
528
\li \key{Ctrl+R}
529
\li Shows a preview of the form.
530
\endtable
531
532
All of the above actions (apart from cloning) can be accessed via both the
533
\gui Edit menu and the form's context menu. These menus also provide
534
funcitons for laying out objects as well as a \gui{Select All} function to
535
select all the objects on the form.
536
537
Widgets are not unique objects; you can make as many copies of them as you
538
need. To quickly duplicate a widget, you can clone it by holding down the
539
\key Ctrl key and dragging it. This allows widgets to be copied and placed
540
on the form more quickly than with clipboard operations.
541
542
543
\target DragAndDrop
544
\table
545
\row
546
\li \inlineimage designer-dragging-onto-form.png
547
\li \b{Drag and Drop}
548
549
\QD makes extensive use of the drag and drop facilities provided by Qt.
550
Widgets can be dragged from the widget box and dropped onto the form.
551
552
Widgets can also be "cloned" on the form: Holding down \key Ctrl and
553
dragging the widget creates a copy of the widget that can be dragged to
554
a new position.
555
556
It is also possible to drop Widgets onto the \l {The Object Inspector}
557
{Object Inspector} to handle nested layouts easily.
558
\endtable
559
560
\QD allows selections of objects to be copied, pasted, and dragged between
561
forms. You can use this feature to create more than one copy of the same
562
form, and experiment with different layouts in each of them.
563
564
565
\section2 The Property Editor
566
567
The Property Editor always displays properties of the currently selected
568
object on the form. The available properties depend on the object being
569
edited, but all of the widgets provided have common properties such as
570
\l{QObject::}{objectName}, the object's internal name, and
571
\l{QWidget::}{enabled}, the property that determines whether an
572
object can be interacted with or not.
573
574
575
\target EditingProperties
576
\table
577
\row
578
\li \inlineimage designer-property-editor.png
579
\li \b{Editing Properties}
580
581
The property editor uses standard Qt input widgets to manage the
582
properties of objects on the form. Textual properties are shown in line
583
edits, integer properties are displayed in spinboxes, boolean
584
properties are displayed in check boxes, and compound properties such
585
as colors and sizes are presented in drop-down lists of input widgets.
586
587
Modified properties are indicated with bold labels. To reset them, click
588
the arrow button on the right.
589
590
Changes in properties are applied to all selected objects that have the
591
same property.
592
\endtable
593
594
Certain properties are treated specially by the property editor:
595
596
\list
597
\li Compound properties -- properties that are made up of more than one
598
value -- are represented as nodes that can be expanded, allowing
599
their values to be edited.
600
\li Properties that contain a choice or selection of flags are edited
601
via combo boxes with checkable items.
602
\li Properties that allow access to rich data types, such as QPalette,
603
are modified using dialogs that open when the properties are edited.
604
QLabel and the widgets in the \gui Buttons section of the widget box
605
have a \c text property that can also be edited by double-clicking
606
on the widget or by pressing \gui F2. \QD interprets the backslash
607
(\\) character specially, enabling newline (\\n) characters to be
608
inserted into the text; the \\\\ character sequence is used to
609
insert a single backslash into the text. A context menu can also be
610
opened while editing, providing another way to insert special
611
characters and newlines into the text.
612
\endlist
613
614
615
\section2 Dynamic Properties
616
617
The property editor can also be used to add new
618
\l{QObject#Dynamic Properties}{dynamic properties} to both standard Qt
619
widgets and to forms themselves. Since Qt 4.4, dynamic properties are added
620
and removed via the property editor's toolbar, shown below.
621
622
\image designer-property-editor-toolbar.png
623
624
To add a dynamic property, click on the \gui Add button
625
\inlineimage designer-property-editor-add-dynamic.png
626
. To remove it, click on the \gui Remove button
627
\inlineimage designer-property-editor-remove-dynamic.png
628
instead. You can also sort the properties alphabetically and change the
629
color groups by clickinig on the \gui Configure button
630
\inlineimage designer-property-editor-configure.png
631
.
632
633
\section2 The Object Inspector
634
\table
635
\row
636
\li \inlineimage designer-object-inspector.png
637
\li \b{The Object Inspector}
638
639
The \gui{Object Inspector} displays a hierarchical list of all the
640
objects on the form that is currently being edited. To show the child
641
objects of a container widget or a layout, click the handle next to the
642
object label.
643
644
Each object on a form can be selected by clicking on the corresponding
645
item in the \gui{Object Inspector}. Right-clicking opens the form's
646
context menu. These features can be useful if you have many overlapping
647
objects. To locate an object in the \gui{Object Inspector}, use
648
\key{Ctrl+F}.
649
650
Since Qt 4.4, double-clicking on the object's name allows you to change
651
the object's name with the in-place editor.
652
653
Since Qt 4.5, the \gui{Object Inspector} displays the layout state of
654
the containers. The broken layout icon ###ICON is displayed if there is
655
something wrong with the layouts.
656
657
\endtable
658
*/
659
660
661
/*!
662
\page designer-layouts.html
663
\previouspage Qt Widgets Designer's Widget Editing Mode
664
\nextpage Qt Widgets Designer's Signals and Slots Editing Mode
665
666
\title Using Layouts in Qt Widgets Designer
667
668
Before a form can be used, the objects on the form need to be placed into
669
layouts. This ensures that the objects will be displayed properly when the
670
form is previewed or used in an application. Placing objects in a layout
671
also ensures that they will be resized correctly when the form is resized.
672
673
Once widgets have been inserted into a layout, it is not possible to move
674
and resize them individually because the layout itself controls the
675
geometry of each widget within it, taking account of the hints provided by
676
spacers. Spacers can be added to the layout to influence the geometries of
677
the widgets.
678
679
Layouts can be nested to form a hierarchy. For example, to achieve a
680
typical dialog layout with a horizontal row of buttons, the dialog
681
elements can be laid out using a vertical box layout with a horizontal
682
box layout containing the buttons at the bottom. For an introduction to
683
the Qt layout system, refer to \l{Layout Management}.
684
685
To break a layout, press \key{Ctrl+0} or choose \gui{Break Layout} from
686
the form's context menu, the \gui Form menu or the main toolbar.
687
688
\section1 Setting A Top Level Layout
689
690
The form's top level layout can be set by clearing the selection (click the
691
left mouse button on the form itself) and applying a layout. A top level
692
layout is necessary to ensure that your widgets will resize correctly when
693
its window is resized. To check if you have set a top level layout, preview
694
your widget and attempt to resize the window by dragging the size grip.
695
696
\table
697
\row
698
\li \inlineimage designer-set-layout.png
699
\li \b{Applying a Layout}
700
701
To apply a layout, you can select your choice of layout from the
702
toolbar shown on the left, or from the context menu shown below.
703
\endtable
704
705
Similary, top level layouts are set on container widgets (QGroupBox)
706
or on pages of page-based container widgets (QTabWidget, QToolBox
707
and QStackedWidget), respectively. The container widget needs to be
708
selected for this to succeed.
709
710
Top level layouts are not visible as separate objects in the Object
711
Inspector. Their properties appear below the widget properties of the
712
main form, container widget, or page of a container widget in the
713
Property Editor.
714
715
\image designer-set-layout2.png
716
717
718
\section1 Layout Objects
719
720
Layout objects are created by applying a layout to a group of
721
existing objects. This is achieved by selecting the objects that you need
722
to manage and applying one of the standard layouts using the main toolbar,
723
the \gui Form menu, or the form's context menu.
724
725
The layout object is indicated by a red frame on the form and appears as
726
an object in the Object Inspector. Its properties (margins and constraints)
727
are shown in the Property Editor.
728
729
The layout object can be selected and placed within another layout along
730
with other widgets and layout objects to build a layout hierarchy.
731
732
When a child layout object is selected, its parent layout object can be
733
selected by pressing down the \key Shift key while clicking on it. This
734
makes it possible to select a specific layout in a hierarchy, which is
735
otherwise difficult due to the small frame.
736
737
738
\section1 Inserting Objects Into a Layout
739
\target InsertingObjectsIntoALayout
740
741
Objects can be inserted into an existing layout by dragging them from
742
their current positions and dropping them at the required location. A
743
blue cursor is displayed in the layout as an object is dragged over
744
it to indicate where the object will be added.
745
746
\image designer-layout-inserting.png
747
\caption Inserting Objects into a Layout
748
749
\section1 Layout Types
750
\section2 Horizontal and Vertical (Box) Layouts
751
752
The simplest way to arrange objects on a form is to place them in a
753
horizontal or vertical layout. Horizontal layouts ensure that the widgets
754
within are aligned horizontally; vertical layouts ensure that they are
755
aligned vertically.
756
757
Horizontal and vertical layouts can be combined and nested to any depth.
758
However, if you need more control over the placement of objects, consider
759
using the grid layout.
760
761
762
\section2 The Grid Layout
763
764
Complex form layouts can be created by placing objects in a grid layout.
765
This kind of layout gives the form designer much more freedom to arrange
766
widgets on the form, but can result in a much less flexible layout.
767
However, for some kinds of form layout, a grid arrangement is much more
768
suitable than a nested arrangement of horizontal and vertical layouts.
769
770
771
\section2 The Form Layout
772
773
The QFormLayout
774
class manages widgets in a two-column form; the left column holds labels
775
and the right column holds field widgets such as line edits, spin boxes,
776
etc. The QFormLayout class adheres to various platform look and feel
777
guidelines and supports wrapping for long rows.
778
779
\image designer-form-layout.png
780
781
The UI file above results in the previews shown below.
782
783
\table
784
\header
785
\li Windows XP
786
\li \macos
787
\li Cleanlooks
788
\row
789
\li \inlineimage designer-form-layout-windowsXP.png
790
\li \inlineimage designer-form-layout-macintosh.png
791
\li \inlineimage designer-form-layout-cleanlooks.png
792
\endtable
793
794
795
\section2 Splitter Layouts
796
797
Another common way to manage the layout of objects on a form is to place
798
them in a splitter. These splitters arrange the objects horizontally or
799
vertically in the same way as normal layouts, but also allow the user to
800
adjust the amount of space allocated to each object.
801
802
\image designer-splitter-layout.png
803
804
Although QSplitter is a container widget, \QD treats splitter objects as
805
layouts that are applied to existing widgets. To place a group of widgets
806
into a splitter, select them
807
\l{Qt Widgets Designer's Widget Editing Mode#SelectingObjects}{as described here}
808
then apply the splitter layout by using the appropriate toolbar button,
809
keyboard shortcut, or \gui{Lay out} context menu entry.
810
811
812
\section1 Shortcut Keys
813
814
In addition to the standard toolbar and context menu entries, there is also
815
a set of keyboard shortcuts to apply layouts on widgets.
816
817
\target LayoutShortcuts
818
\table
819
\header
820
\li Layout
821
\li Shortcut
822
\li Description
823
\row
824
\li Horizontal
825
\li \key{Ctrl+1}
826
\li Places the selected objects in a horizontal layout.
827
\row
828
\li Vertical
829
\li \key{Ctrl+2}
830
\li Places the selected objects in a vertical layout.
831
\row
832
\li Grid
833
\li \key{Ctrl+5}
834
\li Places the selected objects in a grid layout.
835
\row
836
\li Form
837
\li \key{Ctrl+6}
838
\li Places the selected objects in a form layout.
839
\row
840
\li Horizontal splitter
841
\li \key{Ctrl+3}
842
\li Creates a horizontal splitter and places the selected objects
843
inside it.
844
\row
845
\li Vertical splitter
846
\li \key{Ctrl+4}
847
\li Creates a vertical splitter and places the selected objects
848
inside it.
849
\row
850
\li Adjust size
851
\li \key{Ctrl+J}
852
\li Adjusts the size of the layout to ensure that each child object
853
has sufficient space to display its contents. See
854
QWidget::adjustSize() for more information.
855
\endtable
856
857
\note \key{Ctrl+0} is used to break a layout.
858
859
*/
860
861
862
/*!
863
\page designer-preview.html
864
\previouspage Using Layouts in Qt Widgets Designer
865
\nextpage Qt Widgets Designer's Buddy Editing Mode
866
\title Saving, Previewing and Printing Forms in Qt Widgets Designer
867
868
Although \QD's forms are accurate representations of the components being
869
edited, it is useful to preview the final appearance while editing. This
870
feature can be activated by opening the \gui Form menu and selecting
871
\gui Preview, or by pressing \key{Ctrl+R} when in the form.
872
873
\image designer-dialog-preview.png
874
875
The preview shows exactly what the final component will look like when used
876
in an application.
877
878
Since Qt 4.4, it is possible to preview forms with various skins - default
879
skins, skins created with Qt Style Sheets or device skins. This feature
880
simulates the effect of calling \c{QApplication::setStyleSheet()} in the
881
application.
882
883
To preview your form with skins, open the \gui Edit menu and select
884
\gui{Preferences...}
885
886
You will see the dialog shown below:
887
888
\image designer-preview-style.png
889
890
The \gui{Print/Preview Configuration} checkbox must be checked to activate
891
previews of skins. You can select the styles provided from the \gui{Style}
892
drop-down box.
893
894
\image designer-preview-style-selection.png
895
896
Alternatively, you can preview custom style sheet created with Qt Style
897
Sheets. The figure below shows an example of Qt Style Sheet syntax and the
898
corresponding output.
899
900
\image designer-preview-stylesheet.png
901
902
Another option would be to preview your form with device skins. A list of
903
generic device skins are available in \QD, however, you may also use
904
other QVFB skins with the \gui{Browse...} option.
905
906
\image designer-preview-deviceskin-selection.png
907
908
909
\section1 Viewing the Form's Code
910
911
Since Qt 4.4, it is possible to view code generated by the User Interface
912
Compiler (uic) for the \QD form.
913
914
\image designer-form-viewcode.png
915
916
Select \gui{View Code...} from the \gui{Form} menu and a dialog with the
917
generated code will be displayed. The screenshot below is an example of
918
code generated by the \c{uic}.
919
920
\image designer-code-viewer.png
921
922
\section1 Saving and Printing the Form
923
924
Forms created in \QD can be saved to an image or printed.
925
926
\table
927
\row
928
\li \inlineimage designer-file-menu.png
929
\li \b{Saving Forms}
930
931
To save a form as an image, choose the \gui{Save Image...} option. The file
932
will be saved in \c{.png} format.
933
934
\b{Printing Forms}
935
936
To print a form, select the \gui{Print...} option.
937
938
\endtable
939
*/
940
941
942
/*!
943
\page designer-connection-mode.html
944
\previouspage Using Layouts in Qt Widgets Designer
945
\nextpage Qt Widgets Designer's Buddy Editing Mode
946
947
948
\title Qt Widgets Designer's Signals and Slots Editing Mode
949
950
\image designer-connection-mode.png
951
952
In \QD's signals and slots editing mode, you can connect objects in a form
953
together using Qt's signals and slots mechanism. Both widgets and layouts
954
can be connected via an intuitive connection interface, using the menu of
955
compatible signals and slots provided by \QD. When a form is saved, all
956
connections are preserved so that they will be ready for use when your
957
project is built.
958
959
960
For more information on Qt's signals and sltos mechanism, refer to the
961
\l{Signals and Slots} document.
962
963
964
\section1 Connecting Objects
965
966
To begin connecting objects, enter the signals and slots editing mode by
967
opening the \gui Edit menu and selecting \gui{Edit Signals/Slots}, or by
968
pressing the \key F4 key.
969
970
All widgets and layouts on the form can be connected together. However,
971
spacers just provide spacing hints to layouts, so they cannot be connected
972
to other objects.
973
974
975
\target HighlightedObjects
976
\table
977
\row
978
\li \inlineimage designer-connection-highlight.png
979
\li \b{Highlighted Objects}
980
981
When the cursor is over an object that can be used in a connection, the
982
object will be highlighted.
983
\endtable
984
985
To make a connectionn, press the left mouse button and drag the cursor
986
towards the object you want to connect it to. As you do this, a line will
987
extend from the source object to the cursor. If the cursor is over another
988
object on the form, the line will end with an arrow head that points to the
989
destination object. This indicates that a connection will be made between
990
the two objects when you release the mouse button.
991
992
You can abandon the connection at any point while you are dragging the
993
connection path by pressing \key{Esc}.
994
995
\target MakingAConnection
996
\table
997
\row
998
\li \inlineimage designer-connection-making.png
999
\li \b{Making a Connection}
1000
1001
The connection path will change its shape as the cursor moves around
1002
the form. As it passes over objects, they are highlighted, indicating
1003
that they can be used in a signal and slot connection. Release the
1004
mouse button to make the connection.
1005
\endtable
1006
1007
The \gui{Configure Connection} dialog (below) is displayed, showing signals
1008
from the source object and slots from the destination object that you can
1009
use.
1010
1011
\image designer-connection-dialog.png
1012
1013
To complete the connection, select a signal from the source object and a
1014
slot from the destination object, then click \key OK. Click \key Cancel if
1015
you wish to abandon the connection.
1016
1017
\note If the \gui{Show all signals and slots} checkbox is selected, all
1018
available signals from the source object will be shown. Otherwise, the
1019
signals and slots inherited from QWidget will be hidden.
1020
1021
You can make as many connections as you like between objects on the form;
1022
it is possible to connect signals from objects to slots in the form itself.
1023
As a result, the signal and slot connections in many dialogs can be
1024
completely configured from within \QD.
1025
1026
\target ConnectingToTheForm
1027
\table
1028
\row
1029
\li \inlineimage designer-connection-to-form.png
1030
\li \b{Connecting to a Form}
1031
1032
To connect an object to the form itself, simply position the cursor
1033
over the form and release the mouse button. The end point of the
1034
connection changes to the electrical "ground" symbol.
1035
\endtable
1036
1037
1038
\section1 Editing and Deleting Connections
1039
1040
By default, connection paths are created with two labels that show the
1041
signal and slot involved in the connection. These labels are usually
1042
oriented along the line of the connection. You can move them around inside
1043
their host widgets by dragging the red square at each end of the connection
1044
path.
1045
1046
\target ConnectionEditor
1047
\table
1048
\row
1049
\li \inlineimage designer-connection-editor.png
1050
\li \b{The Signal/Slot Editor}
1051
1052
The signal and slot used in a connection can be changed after it has
1053
been set up. When a connection is configured, it becomes visible in
1054
\QD's signal and slot editor where it can be further edited. You can
1055
also edit signal/slot connections by double-clicking on the connection
1056
path or one of its labels to display the Connection Dialog.
1057
\endtable
1058
1059
\target DeletingConnections
1060
\table
1061
\row
1062
\li \inlineimage designer-connection-editing.png
1063
\li \b{Deleting Connections}
1064
1065
The whole connection can be selected by clicking on any of its path
1066
segments. Once selected, a connection can be deleted with the
1067
\key Delete key, ensuring that it will not be set up in the UI
1068
file.
1069
\endtable
1070
*/
1071
1072
1073
/*!
1074
\page designer-buddy-mode.html
1075
\previouspage Qt Widgets Designer's Signals and Slots Editing Mode
1076
\nextpage Qt Widgets Designer's Tab Order Editing Mode
1077
1078
\title Qt Widgets Designer's Buddy Editing Mode
1079
1080
\image designer-buddy-mode.png
1081
1082
One of the most useful basic features of Qt is the support for buddy
1083
widgets. A buddy widget accepts the input focus on behalf of a QLabel when
1084
the user types the label's shortcut key combination. The buddy concept is
1085
also used in Qt's \l{Model/View Programming}{model/view} framework.
1086
1087
1088
\section1 Linking Labels to Buddy Widgets
1089
1090
To enter buddy editing mode, open the \gui Edit menu and select
1091
\gui{Edit Buddies}. This mode presents the widgets on the form in a similar
1092
way to \l{Qt Widgets Designer's Signals and Slots Editing Mode}{signals and slots
1093
editing mode} but in this mode, connections must start at label widgets.
1094
Ideally, you should connect each label widget that provides a shortcut with
1095
a suitable input widget, such as a QLineEdit.
1096
1097
1098
\target MakingBuddies
1099
\table
1100
\row
1101
\li \inlineimage designer-buddy-making.png
1102
\li \b{Making Buddies}
1103
1104
To define a buddy widget for a label, click on the label, drag the
1105
connection to another widget on the form, and release the mouse button.
1106
The connection shown indicates how input focus is passed to the buddy
1107
widget. You can use the form preview to test the connections between
1108
each label and its buddy.
1109
\endtable
1110
1111
1112
\section1 Removing Buddy Connections
1113
1114
Only one buddy widget can be defined for each label. To change the buddy
1115
used, it is necessary to delete any existing buddy connection before you
1116
create a new one.
1117
1118
Connections between labels and their buddy widgets can be deleted in the
1119
same way as signal-slot connections in signals and slots editing mode:
1120
Select the buddy connection by clicking on it and press the \key Delete
1121
key. This operation does not modify either the label or its buddy in any
1122
way.
1123
*/
1124
1125
1126
/*!
1127
\page designer-tab-order.html
1128
\previouspage Qt Widgets Designer's Buddy Editing Mode
1129
\nextpage Using Containers in Qt Widgets Designer
1130
1131
\title Qt Widgets Designer's Tab Order Editing Mode
1132
1133
\image designer-tab-order-mode.png
1134
1135
Many users expect to be able to navigate between widgets and controls
1136
using only the keyboard. Qt lets the user navigate between input widgets
1137
with the \key Tab and \key{Shift+Tab} keyboard shortcuts. The default
1138
\e{tab order} is based on the order in which widgets are constructed.
1139
Although this order may be sufficient for many users, it is often better
1140
to explicitly specify the tab order to make your application easier to
1141
use.
1142
1143
1144
\section1 Setting the Tab Order
1145
1146
To enter tab order editing mode, open the \gui Edit menu and select
1147
\gui{Edit Tab Order}. In this mode, each input widget in the form is shown
1148
with a number indicating its position in the tab order. So, if the user
1149
gives the first input widget the input focus and then presses the tab key,
1150
the focus will move to the second input widget, and so on.
1151
1152
The tab order is defined by clicking on each of the numbers in the correct
1153
order. The first number you click will change to red, indicating the
1154
currently edited position in the tab order chain. The widget associated
1155
with the number will become the first one in the tab order chain. Clicking
1156
on another widget will make it the second in the tab order, and so on.
1157
1158
Repeat this process until you are satisfied with the tab order in the form
1159
-- you do not need to click every input widget if you see that the
1160
remaining widgets are already in the correct order. Numbers, for which you
1161
already set the order, change to green, while those which are not clicked
1162
yet, remain blue.
1163
1164
If you make a mistake, simply double click outside of any number or choose
1165
\gui{Restart} from the form's context menu to start again. If you have many
1166
widgets on your form and would like to change the tab order in the middle or
1167
at the end of the tab order chain, you can edit it at any position. Press
1168
\key{Ctrl} and click the number from which you want to start.
1169
Alternatively, choose \gui{Start from Here} in the context menu.
1170
1171
*/
1172
1173
1174
/*!
1175
\page designer-using-containers.html
1176
\previouspage Qt Widgets Designer's Tab Order Editing Mode
1177
\nextpage Creating Main Windows in Qt Widgets Designer
1178
1179
1180
\title Using Containers in Qt Widgets Designer
1181
1182
Container widgets provide high level control over groups of objects on a
1183
form. They can be used to perform a variety of functions, such as managing
1184
input widgets, providing paged and tabbed layouts, or just acting as
1185
decorative containers for other objects.
1186
1187
\image designer-widget-morph.png
1188
1189
\QD provides visual feedback to help you place objects inside your
1190
containers. When you drag an object from the widget box (or elsewhere) on
1191
the form, each container will be highlighted when the cursor is positioned
1192
over it. This indicates that you can drop the object inside, making it a
1193
child object of the container. This feedback is important because it is
1194
easy to place objects close to containers without actually placing them
1195
inside. Both widgets and spacers can be used inside containers.
1196
1197
Stacked widgets, tab widgets, and toolboxes are handled specially in \QD.
1198
Normally, when adding pages (tabs, pages, compartments) to these containers
1199
in your own code, you need to supply existing widgets, either as
1200
placeholders or containing child widgets. In \QD, these are automatically
1201
created for you, so you can add child objects to each page straight away.
1202
1203
Each container typically allows its child objects to be arranged in one or
1204
more layouts. The type of layout management provided depends on each
1205
container, although setting the layout is usually just a matter of
1206
selecting the container by clicking it, and applying a layout. The table
1207
below shows a list of available containers.
1208
1209
\table
1210
\row
1211
\li \inlineimage designer-containers-frame.png
1212
\li \b Frames
1213
1214
Frames are used to enclose and group widgets, as well as to provide
1215
decoration. They are used as the foundation for more complex
1216
containers, but they can also be used as placeholders in forms.
1217
1218
The most important properties of frames are \c frameShape,
1219
\c frameShadow, \c lineWidth, and \c midLineWidth. These are described
1220
in more detail in the QFrame class description.
1221
1222
\row
1223
\li \inlineimage designer-containers-groupbox.png
1224
\li \b{Group Boxes}
1225
1226
Group boxes are usually used to group together collections of
1227
checkboxes and radio buttons with similar purposes.
1228
1229
Among the significant properties of group boxes are \c title, \c flat,
1230
\c checkable, and \c checked, as described in the \l QGroupBox
1231
class documentation. Each group box can contain its own layout, and
1232
this is necessary if it contains other widgets. To add a layout to the
1233
group box, click inside it and apply the layout as usual.
1234
1235
\row
1236
\li \inlineimage designer-containers-stackedwidget.png
1237
\li \b{Stacked Widgets}
1238
1239
Stacked widgets are collections of widgets in which only the topmost
1240
layer is visible. Control over the visible layer is usually managed by
1241
another widget, such as combobox, using signals and slots.
1242
1243
\QD shows arrows in the top-right corner of the stack to allow you to
1244
see all the widgets in the stack when designing it. These arrows do not
1245
appear in the preview or in the final component. To navigate between
1246
pages in the stack, select the stacked widget and use the
1247
\gui{Next Page} and \gui{Previous Page} entries from the context menu.
1248
The \gui{Insert Page} and \gui{Delete Page} context menu options allow
1249
you to add and remove pages.
1250
1251
\row
1252
\li \inlineimage designer-containers-tabwidget.png
1253
\li \b{Tab Widgets}
1254
1255
Tab widgets allow the developer to split up the contents of a widget
1256
into different labelled sections, only one of which is displayed at any
1257
given time. By default, the tab widget contains two tabs, and these can
1258
be deleted or renamed as required. You can also add additional tabs.
1259
1260
To delete a tab:
1261
\list
1262
\li Click on its label to make it the current tab.
1263
\li Select the tab widget and open its context menu.
1264
\li Select \gui{Delete Page}.
1265
\endlist
1266
1267
To add a new tab:
1268
\list
1269
\li Select the tab widget and open its context menu.
1270
\li Select \gui{Insert Page}.
1271
\li You can add a page before or after the \e current page. \QD
1272
will create a new widget for that particular tab and insert it
1273
into the tab widget.
1274
\li You can set the title of the current tab by changing the
1275
\c currentTabText property in the \gui{Property Editor}.
1276
\endlist
1277
1278
\row
1279
\li \inlineimage designer-containers-toolbox.png
1280
\li \b{ToolBox Widgets}
1281
1282
Toolbox widgets provide a series of pages or compartments in a toolbox.
1283
They are handled in a way similar to stacked widgets.
1284
1285
To rename a page in a toolbox, make the toolbox your current pange and
1286
change its \c currentItemText property from the \gui{Property Editor}.
1287
1288
To add a new page, select \gui{Insert Page} from the toolbox widget's
1289
context menu. You can add the page before or after the current page.
1290
1291
To delete a page, select \gui{Delete Page} from the toolbox widget's
1292
context menu.
1293
1294
\row
1295
\li \inlineimage designer-containers-dockwidget.png
1296
\li \b{Dock Widgets}
1297
1298
Dock widgets are floating panels, often containing input widgets and
1299
more complex controls, that are either attached to the edges of the
1300
main window in "dock areas", or floated as independent tool windows.
1301
1302
Although dock widgets can be added to any type of form, they are
1303
typically used with forms created from the
1304
\l{Creating Main Windows in Qt Widgets Designer}{main window template}.
1305
1306
\endtable
1307
*/
1308
1309
1310
/*!
1311
\page designer-creating-mainwindows.html
1312
\previouspage Using Containers in Qt Widgets Designer
1313
\nextpage Editing Resources with Qt Widgets Designer
1314
1315
\title Creating Main Windows in Qt Widgets Designer
1316
1317
\QD can be used to create user interfaces for different purposes, and
1318
it provides different kinds of form templates for each user interface. The
1319
main window template is used to create application windows with menu bars,
1320
toolbars, and dock widgets.
1321
1322
\omit
1323
\image designer-mainwindow-example.png
1324
\endomit
1325
1326
Create a new main window by opening the \gui File menu and selecting the
1327
\gui{New Form...} option, or by pressing \key{Ctrl+N}. Then, select the
1328
\gui{Main Window} template. This template provides a main application
1329
window containing a menu bar and a toolbar by default -- these can be
1330
removed if they are not required.
1331
1332
If you remove the menu bar, a new one can be created by selecting the
1333
\gui{Create Menu Bar} option from the context menu, obtained by
1334
right-clicking within the main window form.
1335
1336
An application can have only \b one menu bar, but \b several
1337
toolbars.
1338
1339
1340
\section1 Menus
1341
1342
Menus are added to the menu bar by modifying the \gui{Type Here}
1343
placeholders. One of these is always present for editing purposes, and
1344
will not be displayed in the preview or in the finished window.
1345
1346
Once created, the properties of a menu can be accessed using the
1347
\l{Qt Widgets Designer's Widget Editing Mode#The Property Editor}{Property Editor},
1348
and each menu can be accessed for this purpose via the
1349
\l{Qt Widgets Designer's Widget Editing Mode#The Object Inspector}{The Object Inspector}.
1350
1351
Existing menus can be removed by opening a context menu over the label in
1352
the menu bar, and selecting \gui{Remove Menu 'menu_name'}.
1353
1354
1355
\target CreatingAMenu
1356
\div {class="float-left"}
1357
\inlineimage designer-creating-menu1.png
1358
\inlineimage designer-creating-menu2.png
1359
\br
1360
\inlineimage designer-creating-menu3.png
1361
\inlineimage designer-creating-menu4.png
1362
\enddiv
1363
1364
\section2 Creating a Menu
1365
1366
Double-click the placeholder item to begin editing. The menu text,
1367
displayed using a line edit, can be modified.
1368
1369
Insert the required text for the new menu. Inserting an
1370
ampersand character (&) causes the letter following it to be
1371
used as a mnemonic for the menu.
1372
1373
Press \key Return or \key Enter to accept the new text, or press
1374
\key Escape to reject it. You can undo the editing operation later if
1375
required.
1376
1377
\div {class="clear-both"}
1378
\enddiv
1379
1380
Menus can also be rearranged in the menu bar simply by dragging and
1381
dropping them in the preferred location. A vertical red line indicates the
1382
position where the menu will be inserted.
1383
1384
Menus can contain any number of entries and separators, and can be nested
1385
to the required depth. Adding new entries to menus can be achieved by
1386
navigating the menu structure in the usual way.
1387
1388
\target CreatingAMenuEntry
1389
\div {class="float-right"}
1390
\inlineimage designer-creating-menu-entry1.png
1391
\inlineimage designer-creating-menu-entry2.png
1392
\br
1393
\inlineimage designer-creating-menu-entry3.png
1394
\inlineimage designer-creating-menu-entry4.png
1395
\enddiv
1396
1397
\section2 Creating a Menu Entry
1398
1399
Double-click the \gui{Type Here} placeholder to begin editing, or
1400
double-click \gui{Add Separator} to insert a new separator line after
1401
the last entry in the menu.
1402
1403
The menu entry's text is displayed using a line edit, and can be
1404
modified.
1405
1406
Insert the required text for the new entry, optionally using
1407
the ampersand character (&) to mark the letter to use as a
1408
mnemonic for the entry.
1409
1410
Press \key Return or \key Enter to accept the new text, or press
1411
\key Escape to reject it. The action created for this menu entry will
1412
be accessible via the \l{#TheActionEditor}{Action Editor}, and any
1413
associated keyboard shortcut can be set there.
1414
1415
\div {class="clear-both"}
1416
\enddiv
1417
1418
Just like with menus, entries can be moved around simply by dragging and
1419
dropping them in the preferred location. When an entry is dragged over a
1420
closed menu, the menu will open to allow it to be inserted there. Since
1421
menu entries are based on actions, they can also be dropped onto toolbars,
1422
where they will be displayed as toolbar buttons.
1423
1424
\section1 Toolbars
1425
1426
\div {class="float-left"}
1427
\inlineimage designer-creating-toolbar.png
1428
\enddiv
1429
1430
\section2 Creating and Removing a Toolbar
1431
1432
Toolbars are added to a main window in a similar way to the menu bar:
1433
Select the \gui{Add Tool Bar} option from the form's context menu.
1434
Alternatively, if there is an existing toolbar in the main window, you can
1435
click the arrow on its right end to create a new toolbar.
1436
1437
Toolbars are removed from the form via an entry in the toolbar's context
1438
menu.
1439
1440
\div {class="clear-both"}
1441
\enddiv
1442
1443
\section2 Adding and Removing Toolbar Buttons
1444
1445
Toolbar buttons are created as actions in the
1446
\l{#TheActionEditor}{Action Editor} and dragged onto the toolbar.
1447
Since actions can be represented by menu entries and toolbar buttons,
1448
they can be moved between menus and toolbars.
1449
1450
\div {class="float-right"}
1451
\inlineimage designer-adding-toolbar-action.png
1452
\inlineimage designer-removing-toolbar-action.png
1453
\enddiv
1454
1455
To share an action between a menu and a toolbar, drag its icon from the
1456
action editor to the toolbar rather than from the menu where its entry is
1457
located. See \l{#Adding an Action}{Adding an Action} for more information
1458
about this process.
1459
1460
Toolbar buttons are removed via the toolbar's context menu.
1461
1462
\div {class="clear-both"}
1463
\enddiv
1464
1465
\section1 Actions
1466
1467
With the menu bar and the toolbars in place, it's time to populate them
1468
with actions. New actions for both menus and toolbars are created in the
1469
action editor window, simplifying the creation and management of actions.
1470
1471
\target TheActionEditor
1472
\div {class="float-left"}
1473
\inlineimage designer-action-editor.png
1474
\enddiv
1475
1476
\section2 The Action Editor
1477
1478
Enable the action editor by opening the \gui Tools menu, and switching
1479
on the \gui{Action Editor} option.
1480
1481
The action editor allows you to create \gui New actions and \gui Delete
1482
actions. It also provides a search function, \gui Filter, using the
1483
action's text.
1484
1485
\QD's action editor can be viewed in the classic \gui{Icon View} and
1486
\gui{Detailed View}. The screenshot below shows the action editor in
1487
\gui{Detailed View}. You can also copy and paste actions between menus,
1488
toolbars and forms.
1489
1490
\div {class="clear-both"}
1491
\enddiv
1492
1493
\section2 Creating an Action
1494
1495
To create an action, use the action editor's \gui New button, which will
1496
then pop up an input dialog. Provide the new action with a \gui Text --
1497
this is the text that will appear in a menu entry and as the action's
1498
tooltip. The text is also automatically added to an "action" prefix,
1499
creating the action's \gui{Object Name}.
1500
1501
In addition, the dialog provides the option of selecting an \gui Icon for
1502
the action, as well as removing the current icon.
1503
1504
Once the action is created, it can be used wherever actions are applicable.
1505
1506
\div {class="clear-left"}
1507
\enddiv
1508
1509
\target AddingAnAction
1510
\div {class="float-right"}
1511
\inlineimage designer-adding-menu-action.png
1512
\inlineimage designer-adding-toolbar-action.png
1513
\enddiv
1514
1515
\section2 Adding an Action
1516
1517
To add an action to a menu or a toolbar, simply press the left mouse
1518
button over the action in the action editor, and drag it to the
1519
preferred location.
1520
1521
\QD provides highlighted guide lines that tell you where the action
1522
will be added. Release the mouse button to add the action when you have
1523
found the right spot.
1524
1525
\div {class="clear-right"}
1526
\enddiv
1527
1528
\section1 Dock Widgets
1529
1530
Dock widgets are \l{Using Containers in Qt Widgets Designer}{container widgets}
1531
as well. They can be added to a form by dropping them onto the desired
1532
dock area.
1533
1534
\target AddingADockWidget
1535
1536
\div {class="float-left"}
1537
\inlineimage designer-adding-dockwidget.png
1538
\enddiv
1539
1540
\section2 Adding a Dock Widget
1541
1542
To add a dock widget to a form, drag one from the \gui Containers section
1543
of the widget box, and drop it onto the main form area. Do not add the
1544
dock widget to an existing layout. Instead, open the \gui{Property Editor}
1545
and enable the \gui{docked} property to place it in a dock area.
1546
1547
Note that it is sometimes easier to configure a dock widget if it is added
1548
to a form before a layout is applied to the central widget. For example,
1549
it is possible to undock it and resize it, making it more convenient to
1550
add child widgets.
1551
1552
Dock widgets can be optionally floated as independent tool windows.
1553
Hence, it is useful to give them window titles by setting their
1554
\l{QDockWidget::}{windowTitle} property. This also helps to identify them on the
1555
form.
1556
1557
\div {class="clear-both"}
1558
\enddiv
1559
*/
1560
1561
1562
/*!
1563
\page designer-resources.html
1564
\previouspage Creating Main Windows in Qt Widgets Designer
1565
\nextpage Using Stylesheets with Qt Widgets Designer
1566
1567
\title Editing Resources with Qt Widgets Designer
1568
1569
\image designer-resources-editing.png
1570
1571
\QD fully supports the \l{The Qt Resource System}{Qt Resource System},
1572
enabling resources to be specified together with forms as they are
1573
designed. To aid designers and developers manage resources for their
1574
applications, \QD's resource editor allows resources to be defined on a
1575
per-form basis. In other words, each form can have a separate resource
1576
file.
1577
1578
\section1 Defining a Resource File
1579
1580
To specify a resource file you must enable the resource editor by opening
1581
the \gui Tools menu, and switching on the \gui{Resource Browser} option.
1582
1583
\target ResourceFiles
1584
\table
1585
\row
1586
\li \inlineimage designer-resource-browser.png
1587
\li \b{Resource Files}
1588
1589
Within the resource browser, you can open existing resource files or
1590
create new ones. Click the \gui{Edit Resources} button
1591
\inlineimage designer-edit-resources-button.png
1592
to edit your resources. To reload resources, click on the \gui Reload
1593
button
1594
\inlineimage designer-reload-resources-button.png
1595
.
1596
\endtable
1597
1598
1599
Once a resource file is loaded, you can create or remove entries in it
1600
using the given \gui{Add Files}
1601
\inlineimage designer-add-resource-entry-button.png
1602
and \gui{Remove Files}
1603
\inlineimage designer-remove-resource-entry-button.png
1604
buttons, and specify resources (e.g., images) using the \gui{Add Files}
1605
button
1606
\inlineimage designer-add-files-button.png
1607
. Note that these resources must reside within the current resource file's
1608
directory or one of its subdirectories.
1609
1610
1611
\target EditResource
1612
\table
1613
\row
1614
\li \inlineimage designer-edit-resource.png
1615
\li \b{Editing Resource Files}
1616
1617
Press the
1618
\inlineimage designer-add-resource-entry-button.png
1619
button to add a new resource entry to the file. Then use the
1620
\gui{Add Files} button
1621
\inlineimage designer-add-files-button.png
1622
to specify the resource.
1623
1624
You can remove resources by selecting the corresponding entry in the
1625
resource editor, and pressing the
1626
\inlineimage designer-remove-resource-entry-button.png
1627
button.
1628
\endtable
1629
1630
1631
\section1 Using the Resources
1632
1633
Once the resources are defined you can use them actively when composing
1634
your form. For example, you might want to create a tool button using an
1635
icon specified in the resource file.
1636
1637
\target UsingResources
1638
\table
1639
\row
1640
\li \inlineimage designer-resources-using.png
1641
\li \b{Using Resources}
1642
1643
When changing properties with values that may be defined within a
1644
resource file, \QD's property editor allows you to specify a resource
1645
in addition to the option of selecting a source file in the ordinary
1646
way.
1647
1648
\row
1649
\li \inlineimage designer-resource-selector.png
1650
\li \b{Selecting a Resource}
1651
1652
You can open the resource selector by clicking \gui{Choose Resource...}
1653
to add resources any time during the design process.
1654
1655
\omit
1656
... check with Friedemann
1657
To quickly assign icon pixmaps to actions or pixmap properties, you may
1658
drag the pixmap from the resource editor to the action editor, or to the
1659
pixmap property in the property editor.
1660
\endomit
1661
1662
\endtable
1663
*/
1664
1665
1666
/*!
1667
\page designer-stylesheet.html
1668
\previouspage Editing Resources with Qt Widgets Designer
1669
\nextpage Using a Designer UI File in Your C++ Application
1670
1671
\title Using Stylesheets with Qt Widgets Designer
1672
1673
Since Qt 4.2, it is possible to edit stylesheets in \QD with the stylesheet
1674
editor.
1675
1676
\target UsingStylesheets
1677
\table
1678
\row
1679
\li \inlineimage designer-stylesheet-options.png
1680
\b{Setting a Stylesheet}
1681
1682
The stylesheet editor can be accessed by right-clicking a widget
1683
and selecting \gui{Change styleSheet...}
1684
1685
\row
1686
\li \inlineimage designer-stylesheet-usage.png
1687
\endtable
1688
1689
*/
1690
1691
1692
/*!
1693
\page designer-using-a-ui-file.html
1694
\previouspage Using Stylesheets with Qt Widgets Designer
1695
\nextpage Using a Designer UI File in Your Qt for Python Application
1696
1697
\keyword Using a Designer UI File in Your Application
1698
\title Using a Designer UI File in Your C++ Application
1699
1700
Qt Widgets Designer UI files represent the widget tree of the form in XML format. The
1701
forms can be processed:
1702
1703
\list
1704
\li \l{Compile Time Form Processing}{At compile time}, which means that forms
1705
are converted to C++ code that can be compiled.
1706
\li \l{Run Time Form Processing}{At runtime}, which means that forms are processed
1707
by the QUiLoader class that dynamically constructs the widget tree while
1708
parsing the XML file.
1709
\endlist
1710
1711
\section1 Compile Time Form Processing
1712
1713
You create user interface components with \QD and use Qt's integrated build tools,
1714
\l{qmake Manual}{qmake} and \l{User Interface Compiler (uic)}{uic}, to generate code
1715
for them when the application is built. The generated code contains the form's user
1716
interface object. It is a C++ struct that contains:
1717
1718
\list
1719
\li Pointers to the form's widgets, layouts, layout items,
1720
button groups, and actions.
1721
\li A member function called \c setupUi() to build the widget tree
1722
on the parent widget.
1723
\li A member function called \c retranslateUi() that handles the
1724
translation of the string properties of the form. For more information,
1725
see \l{Reacting to Language Changes}.
1726
\endlist
1727
1728
The generated code can be included in your application and used directly from
1729
it. Alternatively, you can use it to extend subclasses of standard widgets.
1730
1731
A compile time processed form can be used in your application with one of
1732
the following approaches:
1733
1734
\list
1735
\li \l{The Direct Approach}: you construct a widget to use as a placeholder
1736
for the component, and set up the user interface inside it.
1737
\li \l{The Single Inheritance Approach}: you subclass the form's base class
1738
(QWidget or QDialog, for example), and include a private instance
1739
of the form's user interface object.
1740
\li \l{The Multiple Inheritance Approach}: you subclass both the form's base
1741
class and the form's user interface object. This allows the widgets
1742
defined in the form to be used directly from within the scope of
1743
the subclass.
1744
\endlist
1745
1746
To demonstrate, we create a simple Calculator Form application. It is based on the
1747
original \l{Calculator Form} example.
1748
1749
The application consists of one source file, \c main.cpp and a UI
1750
file.
1751
1752
The \c{calculatorform.ui} file designed with \QD is shown below:
1753
1754
\image directapproach-calculatorform.png
1755
1756
When using \c CMake to build the executable, a \c{CMakeLists.txt}
1757
file is required:
1758
1759
\snippet uitools/calculatorform/CMakeLists.txt 0
1760
1761
The form is listed among the C++ source files in \c qt_add_executable().
1762
The option \c CMAKE_AUTOUIC tells \c CMake to run the \c uic tool
1763
to create a \c ui_calculatorform.h file that can be used
1764
by the source files.
1765
1766
When using \c qmake to build the executable, a \c{.pro} file is required:
1767
1768
\snippet uitools/calculatorform/calculatorform.pro 0
1769
1770
The special feature of this file is the \c FORMS declaration that tells
1771
\c qmake which files to process with \c uic. In this case, the
1772
\c calculatorform.ui file is used to create a \c ui_calculatorform.h file
1773
that can be used by any file listed in the \c SOURCES declaration.
1774
1775
\note You can use Qt Creator to create the Calculator Form project. It
1776
automatically generates the main.cpp, UI, and a project file for the
1777
desired build tool, which you can modify.
1778
1779
\section2 The Direct Approach
1780
1781
To use the direct approach, we include the \c ui_calculatorform.h file
1782
directly in \c main.cpp:
1783
1784
\snippet uitools/calculatorform/main.cpp 0
1785
1786
The \c main function creates the calculator widget by constructing a
1787
standard QWidget that we use to host the user interface described by the
1788
\c calculatorform.ui file.
1789
1790
\snippet uitools/calculatorform/main.cpp 1
1791
1792
In this case, the \c{Ui::CalculatorForm} is an interface description object
1793
from the \c ui_calculatorform.h file that sets up all the dialog's widgets
1794
and the connections between its signals and slots.
1795
1796
The direct approach provides a quick and easy way to use simple, self-contained
1797
components in your applications. However, componens created with \QD often
1798
require close integration with the rest of the application code. For
1799
instance, the \c CalculatorForm code provided above will compile and run,
1800
but the QSpinBox objects will not interact with the QLabel as we need a
1801
custom slot to carry out the add operation and display the result in the
1802
QLabel. To achieve this, we need to use the single inheritance approach.
1803
1804
\section2 The Single Inheritance Approach
1805
1806
To use the single inheritance approach, we subclass a standard Qt widget and
1807
include a private instance of the form's user interface object. This can take
1808
the form of:
1809
1810
\list
1811
\li A member variable
1812
\li A pointer member variable
1813
\endlist
1814
1815
\section3 Using a Member Variable
1816
1817
In this approach, we subclass a Qt widget and set up the user interface
1818
from within the constructor. Components used in this way expose the widgets
1819
and layouts used in the form to the Qt widget subclass, and provide a
1820
standard system for making signal and slot connections between the user
1821
interface and other objects in your application.
1822
The generated \c{Ui::CalculatorForm} structure is a member of the class.
1823
1824
This approach is used in the \l{Calculator Form} example.
1825
1826
To ensure that we can use the user interface, we need to include the header
1827
file that \c uic generates before referring to \c{Ui::CalculatorForm}:
1828
1829
\snippet calculatorform/calculatorform.h 0
1830
1831
The project file must be updated to include \c{calculatorform.h}.
1832
For \c CMake:
1833
1834
\snippet calculatorform/CMakeLists.txt 1
1835
1836
In specific cases, such as the example below where the include directive
1837
uses a relative path, \l{qt6_add_ui}{qt_add_ui} can be used to generate the
1838
\c{ui_calculatorform.h} file instead of relying on
1839
\l{CMake AUTOUIC Documentation}{AUTOUIC}.
1840
1841
\l{When to prefer qt_add_ui over AUTOUIC}
1842
1843
\code
1844
#include "src/files/ui_calculatorform.h"
1845
\endcode
1846
1847
\code
1848
qt_add_ui(calculatorform SOURCES calculatorform.ui
1849
INCLUDE_PREFIX src/files)
1850
\endcode
1851
1852
For \c qmake:
1853
1854
\snippet calculatorform/calculatorform.pro 0
1855
1856
The subclass is defined in the following way:
1857
1858
\snippet calculatorform/calculatorform.h 1
1859
1860
The important feature of the class is the private \c ui object which
1861
provides the code for setting up and managing the user interface.
1862
1863
The constructor for the subclass constructs and configures all the widgets
1864
and layouts for the dialog just by calling the \c ui object's \c setupUi()
1865
function. Once this has been done, it is possible to modify the user
1866
interface as needed.
1867
1868
\snippet calculatorform/calculatorform.cpp 0
1869
1870
We can connect signals and slots in user interface widgets in the usual
1871
way by adding the on_<object name> - prefix. For more information,
1872
see \l{widgets-and-dialogs-with-auto-connect}.
1873
1874
The advantages of this approach are its simple use of inheritance to
1875
provide a QWidget-based interface, and its encapsulation of the user
1876
interface widget variables within the \c ui data member. We can use this
1877
method to define a number of user interfaces within the same widget, each
1878
of which is contained within its own namespace, and overlay (or compose)
1879
them. This approach can be used to create individual tabs from existing
1880
forms, for example.
1881
1882
\section3 Using a Pointer Member Variable
1883
1884
Alternatively, the \c{Ui::CalculatorForm} structure can be made a pointer
1885
member of the class. The header then looks as follows:
1886
1887
\code
1888
1889
namespace Ui {
1890
class CalculatorForm;
1891
}
1892
1893
class CalculatorForm : public QWidget
1894
...
1895
virtual ~CalculatorForm();
1896
...
1897
private:
1898
Ui::CalculatorForm *ui;
1899
...
1900
1901
\endcode
1902
1903
The corresponding source file looks as follows:
1904
1905
\code
1906
#include "ui_calculatorform.h"
1907
1908
CalculatorForm::CalculatorForm(QWidget *parent) :
1909
QWidget(parent), ui(new Ui::CalculatorForm)
1910
{
1911
ui->setupUi(this);
1912
}
1913
1914
CalculatorForm::~CalculatorForm()
1915
{
1916
delete ui;
1917
}
1918
\endcode
1919
1920
The advantage of this approach is that the user interface object can be
1921
forward-declared, which means that we do not have to include the generated
1922
\c ui_calculatorform.h file in the header. The form can then be changed without
1923
recompiling the dependent source files. This is particularly important if the
1924
class is subject to binary compatibility restrictions.
1925
1926
We generally recommend this approach for libraries and large applications.
1927
For more information, see \l{Creating Shared Libraries}.
1928
1929
\section2 The Multiple Inheritance Approach
1930
1931
Forms created with \QD can be subclassed together with a standard
1932
QWidget-based class. This approach makes all the user interface components
1933
defined in the form directly accessible within the scope of the subclass,
1934
and enables signal and slot connections to be made in the usual way with
1935
the \l{QObject::connect()}{connect()} function.
1936
1937
We need to include the header file that \c uic generates from the
1938
\c calculatorform.ui file, as follows:
1939
1940
\snippet ../designer/calculatorform_mi/calculatorform.h 0
1941
1942
The class is defined in a similar way to the one used in the
1943
\l{The Single Inheritance Approach}{single inheritance approach}, except that
1944
this time we inherit from \e{both} QWidget and \c{Ui::CalculatorForm},
1945
as follows:
1946
1947
\snippet ../designer/calculatorform_mi/calculatorform.h 1
1948
1949
We inherit \c{Ui::CalculatorForm} privately to ensure that the user
1950
interface objects are private in our subclass. We can also inherit it with
1951
the \c public or \c protected keywords in the same way that we could have
1952
made \c ui public or protected in the previous case.
1953
1954
The constructor for the subclass performs many of the same tasks as the
1955
constructor used in the \l{The Single Inheritance Approach}
1956
{single inheritance} example:
1957
1958
\snippet ../designer/calculatorform_mi/calculatorform.cpp 0
1959
1960
In this case, the widgets used in the user interface can be accessed in the
1961
same say as a widget created in code by hand. We no longer require the
1962
\c{ui} prefix to access them.
1963
1964
\section2 Reacting to Language Changes
1965
1966
Qt notifies applications if the user interface language changes by sending an
1967
event of the type QEvent::LanguageChange. To call the member function
1968
\c retranslateUi() of the user interface object, we reimplement
1969
\c QWidget::changeEvent() in the form class, as follows:
1970
1971
\code
1972
void CalculatorForm::changeEvent(QEvent *e)
1973
{
1974
QWidget::changeEvent(e);
1975
switch (e->type()) {
1976
case QEvent::LanguageChange:
1977
ui->retranslateUi(this);
1978
break;
1979
default:
1980
break;
1981
}
1982
}
1983
\endcode
1984
1985
\section1 Run Time Form Processing
1986
1987
Alternatively, forms can be processed at run time, producing dynamically-
1988
generated user interfaces. This can be done using the QtUiTools module
1989
that provides the QUiLoader class to handle forms created with \QD.
1990
1991
1992
\section2 The UiTools Approach
1993
1994
A resource file containing a UI file is required to process forms at
1995
run time. Also, the application needs to be configured to use the QtUiTools
1996
module. This is done by including the following declarations in a \c CMake
1997
project file, ensuring that the application is compiled and linked
1998
appropriately.
1999
2000
\snippet ../uitools/textfinder/CMakeLists.txt 0
2001
\snippet ../uitools/textfinder/CMakeLists.txt 1
2002
2003
For \c qmake:
2004
2005
\snippet manual/doc_src_designer-manual.pro 0
2006
2007
The QUiLoader class provides a form loader object to construct the user
2008
interface. This user interface can be retrieved from any QIODevice, e.g.,
2009
a QFile object, to obtain a form stored in a project's resource file. The
2010
QUiLoader::load() function constructs the form widget using the user
2011
interface description contained in the file.
2012
2013
The QtUiTools module classes can be included using the following directive:
2014
2015
\snippet manual/doc_src_designer-manual.cpp 1
2016
2017
The QUiLoader::load() function is invoked as shown in this code from the
2018
\l{Text Finder} example:
2019
2020
\snippet ../uitools/textfinder/textfinder.cpp 4
2021
2022
In a class that uses QtUiTools to build its user interface at run time, we
2023
can locate objects in the form using QObject::findChild(). For example, in the
2024
following code, we locate some components based on their object names and
2025
widget types:
2026
2027
\snippet ../uitools/textfinder/textfinder.cpp 1
2028
2029
Processing forms at run-time gives the developer the freedom to change a
2030
program's user interface, just by changing the UI file. This is useful
2031
when customizing programs to suit various user needs, such as extra large
2032
icons or a different colour scheme for accessibility support.
2033
2034
2035
\section1 Automatic Connections
2036
2037
The signals and slots connections defined for compile time or run time
2038
forms can either be set up manually or automatically, using QMetaObject's
2039
ability to make connections between signals and suitably-named slots.
2040
2041
Generally, in a QDialog, if we want to process the information entered by
2042
the user before accepting it, we need to connect the clicked() signal from
2043
the \gui OK button to a custom slot in our dialog. We will first show an
2044
example of the dialog in which the slot is connected by hand then compare
2045
it with a dialog that uses automatic connection.
2046
2047
2048
\section2 A Dialog Without Auto-Connect
2049
2050
We define the dialog in the same way as before, but now include a slot in
2051
addition to the constructor:
2052
2053
\snippet noautoconnection/imagedialog.h 0
2054
2055
The \c checkValues() slot will be used to validate the values provided by
2056
the user.
2057
2058
In the dialog's constructor we set up the widgets as before, and connect
2059
the \gui Cancel button's \l{QPushButton::clicked()}{clicked()} signal to
2060
the dialog's reject() slot. We also disable the
2061
\l{QPushButton::autoDefault}{autoDefault} property in both buttons to
2062
ensure that the dialog does not interfere with the way that the line edit
2063
handles return key events:
2064
2065
\snippet noautoconnection/imagedialog.cpp 0
2066
\dots
2067
\snippet noautoconnection/imagedialog.cpp 1
2068
2069
We connect the \gui OK button's \l{QPushButton::clicked()}{clicked()}
2070
signal to the dialog's checkValues() slot which we implement as follows:
2071
2072
\snippet noautoconnection/imagedialog.cpp 2
2073
2074
This custom slot does the minimum necessary to ensure that the data
2075
entered by the user is valid - it only accepts the input if a name was
2076
given for the image.
2077
2078
\section2 Widgets and Dialogs with Auto-Connect
2079
2080
Although it is easy to implement a custom slot in the dialog and connect
2081
it in the constructor, we could instead use QMetaObject's auto-connection
2082
facilities to connect the \gui OK button's clicked() signal to a slot in
2083
our subclass. \c{uic} automatically generates code in the dialog's
2084
\c setupUi() function to do this, so we only need to declare and
2085
implement a slot with a name that follows a standard convention:
2086
2087
\snippet manual/doc_src_designer-manual.cpp 2
2088
2089
\note When renaming widgets in the form, the slot names need to be
2090
adapted accordingly, which can become a maintenance problem.
2091
For this reason, we recommend against using this in new code.
2092
2093
Using this convention, we can define and implement a slot that responds to
2094
mouse clicks on the \gui OK button:
2095
2096
\snippet autoconnection/imagedialog.h 0
2097
2098
Another example of automatic signal and slot connection would be the
2099
\l{Text Finder} with its \c{on_findButton_clicked()}
2100
slot.
2101
2102
We use QMetaObject's system to enable signal and slot connections:
2103
2104
\snippet ../uitools/textfinder/textfinder.cpp 2
2105
2106
This enables us to implement the slot, as shown below:
2107
2108
\snippet ../uitools/textfinder/textfinder.cpp 6
2109
\dots
2110
\snippet ../uitools/textfinder/textfinder.cpp 8
2111
2112
Automatic connection of signals and slots provides both a standard naming
2113
convention and an explicit interface for widget designers to work to. By
2114
providing source code that implements a given interface, user interface
2115
designers can check that their designs actually work without having to
2116
write code themselves.
2117
*/
2118
2119
/*!
2120
\page designer-using-a-ui-file-python.html
2121
\previouspage Using a Designer UI File in Your C++ Application
2122
\nextpage Using Custom Widgets with Qt Widgets Designer
2123
2124
\title Using a Designer UI File in Your Qt for Python Application
2125
2126
\section1 Converting the Form to Python Code
2127
2128
To demonstrate, we use the Qt Widgets animation easing example.
2129
2130
The application consists of one source file, \c easing.py, a UI
2131
file \c form.ui, a resource file \c easing.qrc and the project
2132
file, \c{easing.pyproject} file in the YAML format:
2133
2134
\code
2135
{
2136
"files": ["easing.qrc", "ui_form.py", "easing.py", "easing_rc.py",
2137
"form.ui"]
2138
}
2139
\endcode
2140
2141
The UI file is converted to Python code building the form using the
2142
\l{User Interface Compiler (uic)}:
2143
2144
\code
2145
uic -g python form.ui > ui_form.py
2146
\endcode
2147
2148
Since the top level widget is named \c Form, this results in a Python
2149
class named \c Ui_Form being generated. It provides a function
2150
\c setupUi(), taking the widget as parameter, which is called to
2151
create the UI elements:
2152
2153
\code
2154
from ui_form import Ui_Form
2155
...
2156
class Window(QtWidgets.QWidget):
2157
def __init__(self, parent=None):
2158
super(Window, self).__init__(parent)
2159
2160
self.m_ui = Ui_Form()
2161
self.m_ui.setupUi(self)
2162
\endcode
2163
2164
Later on, the widgets can be accessed via the \c Ui_Form class:
2165
2166
\code
2167
self.m_ui.graphicsView.setScene(self.m_scene)
2168
\endcode
2169
2170
Besides \c setupUi(), \c Ui_Form provides another method
2171
\c retranslateUi(), which can be called in reaction to
2172
a QEvent of type QEvent.LanguageChange, which indicates
2173
a change in the application language.
2174
2175
\section2 The UiTools Approach
2176
2177
The QUiLoader class provides a form loader object to construct the user
2178
interface at runtime. This user interface can be retrieved from any
2179
QIODevice, e.g., a QFile object. The QUiLoader::load() function
2180
constructs the form widget using the user interface description
2181
contained in the file.
2182
2183
It is demonstrated by the uiloader example:
2184
2185
\code
2186
from PySide2.QtUiTools import QUiLoader
2187
2188
if __name__ == '__main__':
2189
# Some code to obtain the form file name, ui_file_name
2190
app = QApplication(sys.argv)
2191
ui_file = QFile(ui_file_name)
2192
if not ui_file.open(QIODevice.ReadOnly):
2193
print("Cannot open {}: {}".format(ui_file_name, ui_file.errorString()))
2194
sys.exit(-1)
2195
loader = QUiLoader()
2196
widget = loader.load(ui_file, None)
2197
ui_file.close()
2198
if not widget:
2199
print(loader.errorString())
2200
sys.exit(-1)
2201
widget.show()
2202
sys.exit(app.exec_())
2203
\endcode
2204
2205
\section1 Resource imports
2206
2207
\section2 Single directory usage
2208
2209
When using icons from \l{The Qt Resource System}{resource files}, say
2210
\c resources.qrc, \c uic will generate an import of the form:
2211
2212
\code
2213
import resources_rc
2214
\endcode
2215
2216
This assumes that a file \c resources_rc.py generated by calling the
2217
\l {Resource Compiler (rcc)} tool (passing the \c {-g python}
2218
command line option) exists in the same directory as the form source.
2219
2220
\c uic has a command line option \c --rc-prefix causing the \c rc indicator
2221
to be prepended:
2222
2223
\code
2224
import rc_resources
2225
\endcode
2226
2227
The command line option \c --from-imports causes the imports to be generated
2228
relative to '.':
2229
2230
\code
2231
from . import resources_rc
2232
\endcode
2233
2234
\section2 Directory trees
2235
2236
Some projects have more complicated directory trees, for example:
2237
2238
\badcode
2239
project
2240
resources (resources.qrc)
2241
ui (.ui files)
2242
\endcode
2243
2244
The resource file is then not in the same directory as the form source
2245
and the \c .ui files typically have relative paths to the resource files:
2246
2247
\badcode
2248
<include location="../resources/resources.qrc"/>
2249
\endcode
2250
2251
In this case, the command line option \c --absolute-imports can be used
2252
to generate an absolute import in Python, resulting in:
2253
2254
\code
2255
import resources.resources_rc
2256
\endcode
2257
2258
based on the assumption that \c .. is the root directory of the project
2259
contained in the Python import path list.
2260
2261
For more deeply nested trees, it is possible to use the
2262
command line option \c {--python-paths <path list>} to pass a Python
2263
import path list. \c uic will then try to determine the project root
2264
by matching the form file path against the path components.
2265
2266
If \c {--python-paths} is not given, the environment variable
2267
\c PYTHONPATH is by default checked.
2268
*/
2269
2270
/*!
2271
\page designer-customizing-forms.html
2272
\previouspage Using a Designer UI File in Your Qt for Python Application
2273
\nextpage Using Custom Widgets with Qt Widgets Designer
2274
2275
\title Customizing Qt Widgets Designer Forms
2276
2277
\image designer-form-settings.png
2278
2279
When saving a form in \QD, it is stored as a UI file. Several form
2280
settings, for example the grid settings or the margin and spacing for the
2281
default layout, are stored along with the form's components. These settings
2282
are used when the \l uic generates the form's C++ code. For more
2283
information on how to use forms in your application, see the
2284
\l{Using a Designer UI File in Your C++ Application} section.
2285
2286
2287
\section1 Modifying the Form Settings
2288
2289
To modify the form settings, open the \gui Form menu and select \gui{Form
2290
Settings...}
2291
2292
In the forms settings dialog you can specify the \gui Author of the form.
2293
2294
You can also alter the margin and spacing properties for the form's default
2295
layout (\gui {Layout Default}). These default layout properties will be
2296
replaced by the corresponding \gui {Layout Function}, if the function is
2297
specified, when \c uic generates code for the form. The form settings
2298
dialog lets you specify functions for both the margin and the spacing.
2299
2300
\target LayoutFunction
2301
\table
2302
\row
2303
\li \inlineimage designer-form-layoutfunction.png
2304
\li \b{Layout Function}
2305
2306
The default layout properties will be replaced by the corresponding
2307
\gui{Layout Function}, when \c uic generates code for the form. This is
2308
useful when different environments requires different layouts for the same
2309
form.
2310
2311
To specify layout functions for the form's margin and spacing, check the
2312
\gui{Layout Function} group box to enable the line edits.
2313
\endtable
2314
2315
You can also specify the form's \gui{Include Hints}; i.e., provide a list
2316
of the header files which will then be included in the form window's
2317
associated UI file. Header files may be local, i.e., relative to the
2318
project's directory, \c "mywidget.h", or global, i.e. part of Qt or the
2319
compilers standard libraries: \c <QtWidgets/QWidget>.
2320
2321
Finally, you can specify the function used to load pixmaps into the form
2322
window (the \gui {Pixmap Function}).
2323
*/
2324
2325
2326
/*!
2327
\page designer-using-custom-widgets.html
2328
\previouspage Customizing Qt Widgets Designer Forms
2329
\nextpage Creating Custom Widgets for Qt Widgets Designer
2330
2331
\title Using Custom Widgets with Qt Widgets Designer
2332
2333
\QD can display custom widgets through its extensible plugin mechanism,
2334
allowing the range of designable widgets to be extended by the user and
2335
third parties. Alternatively, it is possible
2336
to use existing widgets as placeholders for widget classes that provide
2337
similar APIs.
2338
2339
2340
\section1 Handling Custom Widgets
2341
2342
Although \QD supports all of the standard Qt widgets, some specialized
2343
widgets may not be available as standard for a number of reasons:
2344
2345
\list
2346
\li Custom widgets may not be available at the time the user interface
2347
is being designed.
2348
\li Custom widgets may be platform-specific, and designers may be
2349
developing the user interface on a different platform to end users.
2350
\li The source code for a custom widget is not available, or the user
2351
interface designers are unable to use the widget for non-technical
2352
reasons.
2353
\endlist
2354
2355
In the above situations, it is still possible to design forms with the aim
2356
of using custom widgets in the application. To achieve this, we can use
2357
the widget promotion feature of \QD.
2358
2359
In all other cases, where the source code to the custom widgets is
2360
available, we can adapt the custom widget for use with \QD.
2361
2362
2363
\section2 Promoting Widgets
2364
2365
\image designer-promoting-widgets.png
2366
2367
If some forms must be designed, but certain custom widgets are unavailble
2368
to the designer, we can substitute similar widgets to represent the missing
2369
widgets. For example, we might represent instances of a custom push button
2370
class, \c MyPushButton, with instances of QPushButton and promote these to
2371
\c MyPushButton so that \l{uic.html}{uic} generates suitable code for this
2372
missing class.
2373
2374
When choosing a widget to use as a placeholder, it is useful to compare the
2375
API of the missing widget with those of standard Qt widgets. For
2376
specialized widgets that subclass standard classes, the obvious choice of
2377
placeholder is the base class of the custom widget; for example, QSlider
2378
might be used for specialized QSlider subclasses.
2379
2380
For specialized widgets that do not share a common API with standard Qt
2381
widgets, it is worth considering adapting a custom widget for use in \QD.
2382
If this is not possible then QWidget is the obvious choice for a
2383
placeholder widget since it is the lowest common denominator for all
2384
widgets.
2385
2386
To add a placeholder, select an object of a suitable base class and choose
2387
\gui{Promote to ...} from the form's context menu. After entering the class
2388
name and header file in the lower part of the dialog, choose \gui{Add}. The
2389
placeholder class will now appear along with the base class in the upper
2390
list. Click the \gui{Promote} button to accept this choice.
2391
2392
Now, when the form's context menu is opened over objects of the base class,
2393
the placeholder class will appear in the \gui{Promote to} submenu, allowing
2394
for convenient promotion of objects to that class.
2395
2396
A promoted widget can be reverted to its base class by choosing
2397
\gui{Demote to} from the form's context menu.
2398
2399
2400
\section2 User Defined Custom Widgets
2401
2402
Custom widgets can be adapted for use with \QD, giving designers the
2403
opportunity to configure the user interface using the actual widgets that
2404
will be used in an application rather than placeholder widgets. The process
2405
of creating a custom widget plugin is described in the
2406
\l{Creating Custom Widgets for Qt Widgets Designer} chapter of this manual.
2407
2408
To use a plugin created in this way, it is necessary to ensure that the
2409
plugin is located on a path that \QD searches for plugins. Generally,
2410
plugins stored in \c{$QTDIR/plugins/designer} will be loaded when \QD
2411
starts. Further information on building and installing plugins can be found
2412
\l{Creating Custom Widgets for Qt Widgets Designer#BuildingandInstallingthePlugin}
2413
{here}. You can also refer to the \l{How to Create Qt Plugins}
2414
{Plugins HOWTO} document for information about creating plugins.
2415
*/
2416
2417
2418
/*!
2419
\page designer-creating-custom-widgets.html
2420
\previouspage Using Custom Widgets with Qt Widgets Designer
2421
\nextpage Creating Custom Widget Extensions
2422
2423
\title Creating Custom Widgets for Qt Widgets Designer
2424
2425
\QD's plugin-based architecture allows user-defined and third party custom
2426
widgets to be edited just like you do with standard Qt widgets. All of the
2427
custom widget's features are made available to \QD, including widget
2428
properties, signals, and slots. Since \QD uses real widgets during the form
2429
design process, custom widgets will appear the same as they do when
2430
previewed.
2431
2432
The \l QtDesigner module provides you with the ability to create custom
2433
widgets in \QD.
2434
2435
2436
\section1 Getting Started
2437
2438
To integrate a custom widget with \QD, you require a suitable description
2439
for the widget and an appropriate project file.
2440
2441
2442
\section2 Providing an Interface Description
2443
2444
To inform \QD about the type of widget you want to provide, create a
2445
subclass of QDesignerCustomWidgetInterface that describes the various
2446
properties your widget exposes. Most of these are supplied by functions
2447
that are pure virtual in the base class, because only the author of the
2448
plugin can provide this information.
2449
2450
\table
2451
\header
2452
\li Function
2453
\li Description of the return value
2454
\row
2455
\li \c name()
2456
\li The name of the class that provides the widget.
2457
\row
2458
\li \c group()
2459
\li The group in \QD's widget box that the widget belongs to.
2460
\row
2461
\li \c toolTip()
2462
\li A short description to help users identify the widget in \QD.
2463
\row
2464
\li \c whatsThis()
2465
\li A longer description of the widget for users of \QD.
2466
\row
2467
\li \c includeFile()
2468
\li The header file that must be included in applications that use
2469
this widget. This information is stored in UI files and will
2470
be used by \c uic to create a suitable \c{#includes} statement
2471
in the code it generates for the form containing the custom
2472
widget.
2473
\row
2474
\li \c icon()
2475
\li An icon that can be used to represent the widget in \QD's
2476
widget box.
2477
\row
2478
\li \c isContainer()
2479
\li True if the widget will be used to hold child widgets;
2480
false otherwise.
2481
\row
2482
\li \c createWidget()
2483
\li A QWidget pointer to an instance of the custom widget,
2484
constructed with the parent supplied.
2485
\note createWidget() is a factory function responsible for
2486
creating the widget only. The custom widget's properties will
2487
not be available until load() returns.
2488
\row
2489
\li \c domXml()
2490
\li A description of the widget's properties, such as its object
2491
name, size hint, and other standard QWidget properties.
2492
\row
2493
\li \c codeTemplate()
2494
\li This function is reserved for future use by \QD.
2495
\endtable
2496
2497
Two other virtual functions can also be reimplemented:
2498
2499
\table
2500
\row
2501
\li \c initialize()
2502
\li Sets up extensions and other features for custom widgets. Custom
2503
container extensions (see QDesignerContainerExtension) and task
2504
menu extensions (see QDesignerTaskMenuExtension) should be set
2505
up in this function.
2506
\row
2507
\li \c isInitialized()
2508
\li Returns true if the widget has been initialized; returns false
2509
otherwise. Reimplementations usually check whether the
2510
\c initialize() function has been called and return the result
2511
of this test.
2512
\endtable
2513
2514
2515
\section2 Notes on the \c{domXml()} Function
2516
2517
The \c{domXml()} function returns a UI file snippet that is used by
2518
\QD's widget factory to create a custom widget and its applicable
2519
properties.
2520
2521
Since Qt 4.4, \QD's widget box allows for a complete UI file to
2522
describe \b one custom widget. The UI file can be loaded using the
2523
\c{<ui>} tag. Specifying the <ui> tag allows for adding the <customwidget>
2524
element that contains additional information for custom widgets. The
2525
\c{<widget>} tag is sufficient if no additional information is required
2526
2527
If the custom widget does not provide a reasonable size hint, it is
2528
necessary to specify a default geometry in the string returned by the
2529
\c domXml() function in your subclass. For example, the
2530
\c AnalogClockPlugin provided by the \l{customwidgetplugin}
2531
{Custom Widget Plugin} example, defines a default widgetgeometry in the
2532
following way:
2533
2534
\dots
2535
\snippet customwidgetplugin/customwidgetplugin.cpp 11
2536
\dots
2537
2538
An additional feature of the \c domXml() function is that, if it returns
2539
an empty string, the widget will not be installed in \QD's widget box.
2540
However, it can still be used by other widgets in the form. This feature
2541
is used to hide widgets that should not be explicitly created by the user,
2542
but are required by other widgets.
2543
2544
A complete custom widget specification looks like:
2545
2546
\code
2547
<ui language="c++"> displayname="MyWidget">
2548
<widget class="widgets::MyWidget" name="mywidget"/>
2549
<customwidgets>
2550
<customwidget>
2551
<class>widgets::MyWidget</class>
2552
<addpagemethod>addPage</addpagemethod>
2553
<propertyspecifications>
2554
<stringpropertyspecification name="fileName" notr="true" type="singleline"/>
2555
<stringpropertyspecification name="text" type="richtext"/>
2556
<tooltip name="text">Explanatory text to be shown in Property Editor</tooltip>
2557
</propertyspecifications>
2558
</customwidget>
2559
</customwidgets>
2560
</ui>
2561
\endcode
2562
2563
Attributes of the \c{<ui>} tag:
2564
\table
2565
\header
2566
\li Attribute
2567
\li Presence
2568
\li Values
2569
\li Comment
2570
\row
2571
\li \c{language}
2572
\li optional
2573
\li "c++", "jambi"
2574
\li This attribute specifies the language the custom widget is intended for.
2575
It is mainly there to prevent C++-plugins from appearing in Qt Jambi.
2576
\row
2577
\li \c{displayname}
2578
\li optional
2579
\li Class name
2580
\li The value of the attribute appears in the Widget box and can be used to
2581
strip away namespaces.
2582
\endtable
2583
2584
The \c{<addpagemethod>} tag tells \QD and \l uic which method should be used to
2585
add pages to a container widget. This applies to container widgets that require
2586
calling a particular method to add a child rather than adding the child by passing
2587
the parent. In particular, this is relevant for containers that are not a
2588
a subclass of the containers provided in \QD, but are based on the notion
2589
of \e{Current Page}. In addition, you need to provide a container extension
2590
for them.
2591
2592
The \c{<propertyspecifications>} element can contain a list of property meta information.
2593
2594
The tag \c{<tooltip>} may be used to specify a tool tip to be shown in Property Editor
2595
when hovering over the property. The property name is given in the attribute \c name and
2596
the element text is the tooltip. This functionality was added in Qt 5.6.
2597
2598
For properties of type string, the \c{<stringpropertyspecification>} tag can be used.
2599
This tag has the following attributes:
2600
2601
\table
2602
\header
2603
\li Attribute
2604
\li Presence
2605
\li Values
2606
\li Comment
2607
\row
2608
\li \c{name}
2609
\li required
2610
\li Name of the property
2611
\row
2612
\li \c{type}
2613
\li required
2614
\li See below table
2615
\li The value of the attribute determines how the property editor will handle them.
2616
\row
2617
\li \c{notr}
2618
\li optional
2619
\li "true", "false"
2620
\li If the attribute is "true", the value is not meant to be translated.
2621
\endtable
2622
2623
Values of the \c{type} attribute of the string property:
2624
2625
\table
2626
\header
2627
\li Value
2628
\li Type
2629
\row
2630
\li \c{"richtext"}
2631
\li Rich text.
2632
\row
2633
\li \c{"multiline"}
2634
\li Multi-line plain text.
2635
\row
2636
\li \c{"singleline"}
2637
\li Single-line plain text.
2638
\row
2639
\li \c{"stylesheet"}
2640
\li A CSS-style sheet.
2641
\row
2642
\li \c{"objectname"}
2643
\li An object name (restricted set of valid characters).
2644
\row
2645
\li \c{"url"}
2646
\li URL, file name.
2647
\endtable
2648
2649
\section1 Plugin Requirements
2650
2651
In order for plugins to work correctly on all platforms, you need to ensure
2652
that they export the symbols needed by \QD.
2653
2654
First of all, the plugin class must be exported in order for the plugin to
2655
be loaded by \QD. Use the Q_PLUGIN_METADATA() macro to do this. Also, the
2656
QDESIGNER_WIDGET_EXPORT macro must be used to define each custom widget class
2657
within a plugin, that \QD will instantiate.
2658
2659
2660
\section1 Creating Well Behaved Widgets
2661
2662
Some custom widgets have special user interface features that may make them
2663
behave differently to many of the standard widgets found in \QD.
2664
Specifically, if a custom widget grabs the keyboard as a result of a call
2665
to QWidget::grabKeyboard(), the operation of \QD will be affected.
2666
2667
To give custom widgets special behavior in \QD, provide an implementation
2668
of the initialize() function to configure the widget construction process
2669
for \QD specific behavior. This function will be called for the first time
2670
before any calls to createWidget() and could perhaps set an internal flag
2671
that can be tested later when \QD calls the plugin's createWidget()
2672
function.
2673
2674
2675
\target BuildingandInstallingthePlugin
2676
\section1 Building and Installing the Plugin
2677
2678
\section2 A Simple Plugin
2679
2680
The \l{Custom Widget Plugin} demonstrates a simple \QD plugin.
2681
2682
The project file for a plugin must specify the headers and sources for
2683
both the custom widget and the plugin interface. Typically, this file only
2684
has to specify that the plugin's project will be built as a library, but
2685
with specific plugin support for \QD. For \c CMake, this is done with
2686
the following declarations:
2687
2688
\snippet customwidgetplugin/CMakeLists.txt 0
2689
\snippet customwidgetplugin/CMakeLists.txt 1
2690
\snippet customwidgetplugin/CMakeLists.txt 2
2691
2692
The link libraries list specifies \c Qt::UiPlugin. This indicates that
2693
the plugin uses the abstract interfaces QDesignerCustomWidgetInterface
2694
and QDesignerCustomWidgetCollectionInterface only and has no linkage
2695
to the \QD libraries. When accessing other interfaces of \QD that have
2696
linkage, \c Designer should be used instead; this ensures that the plugin
2697
dynamically links to the \QD libraries and has a run-time dependency on
2698
them.
2699
2700
It is also necessary to ensure that the plugin is installed together with
2701
other \QD widget plugins:
2702
2703
\snippet customwidgetplugin/CMakeLists.txt 3
2704
\snippet customwidgetplugin/CMakeLists.txt 4
2705
2706
For \c qmake:
2707
2708
\snippet customwidgetplugin/customwidgetplugin.pro 0
2709
\snippet customwidgetplugin/customwidgetplugin.pro 2
2710
2711
The \c QT variable contains the keyword \c uiplugin, which is
2712
the equivalent of the \c Qt::UiPlugin library.
2713
2714
It is also necessary to ensure that the plugin is installed together with
2715
other \QD widget plugins:
2716
2717
\snippet manual/doc_src_designer-manual.pro 4
2718
2719
The \c $[QT_INSTALL_PLUGINS] variable is a placeholder to the location of
2720
the installed Qt plugins. You can configure \QD to look for plugins in
2721
other locations by setting the \c QT_PLUGIN_PATH environment variable
2722
before running the application.
2723
2724
\note \QD will look for a \c designer subdirectory in each path supplied.
2725
2726
See QCoreApplication::libraryPaths() for more information about customizing
2727
paths for libraries and plugins with Qt applications.
2728
2729
If plugins are built in a mode that is incompatible with \QD, they will
2730
not be loaded and installed. For more information about plugins, see the
2731
\l{plugins-howto.html}{Plugins HOWTO} document.
2732
2733
\section2 Splitting up the Plugin
2734
2735
The simple approach explained above introduces a problem particularly
2736
when using the other interfaces of \QD that have linkage:
2737
The application using the custom widget will then depend on
2738
\QD headers and libraries. In a real world scenario, this is not desired.
2739
2740
The following sections describe how to resolve this.
2741
2742
\section3 Linking the Widget into the Application
2743
2744
When using \c qmake, the source and header file of the custom widget
2745
can be shared between the application and \QD by creating a \c{.pri}
2746
file for inclusion:
2747
2748
\code
2749
INCLUDEPATH += $$PWD
2750
HEADERS += $$PWD/analogclock.h
2751
SOURCES += $$PWD/analogclock.cpp
2752
\endcode
2753
2754
This file would then be included by the \c{.pro} file of the plugin and
2755
the application:
2756
2757
\code
2758
include(customwidget.pri)
2759
\endcode
2760
2761
When using \c CMake, the source files of the widget can similarly be
2762
added to the application project.
2763
2764
\section3 Sharing the Widget Using a Library
2765
2766
Another approach is to put the widget into a library that is linked to
2767
the \QD plugin as well as to the application. It is recommended to
2768
use static libraries to avoid problems locating the library at run-time.
2769
2770
For shared libraries, see \l{sharedlibrary.html}{Creating Shared Libraries}.
2771
2772
\section3 Using the Plugin with QUiLoader
2773
2774
The preferred way of adding custom widgets to QUiLoader is to subclass it
2775
reimplementing QUiLoader::createWidget().
2776
2777
However, it is also possible to use \QD custom widget plugins
2778
(see QUiLoader::pluginPaths() and related functions). To avoid having
2779
to deploy the \QD libraries onto the target device, those plugins should
2780
have no linkage to the \QD libraries (\c {QT = uiplugin}, see
2781
\l{Creating Custom Widgets for Qt Widgets Designer#BuildingandInstallingthePlugin}).
2782
2783
\section1 Related Examples
2784
2785
For more information on using custom widgets in \QD, refer to the
2786
\l{customwidgetplugin}{Custom Widget Plugin} and
2787
\l{taskmenuextension}{Task Menu Extension} examples for more
2788
information about using custom widgets in \QD. Also, you can use the
2789
QDesignerCustomWidgetCollectionInterface class to combine several custom
2790
widgets into a single library.
2791
*/
2792
2793
2794
/*!
2795
\page designer-creating-custom-widgets-extensions.html
2796
\previouspage Creating Custom Widgets for Qt Widgets Designer
2797
\nextpage Qt Widgets Designer's UI File Format
2798
2799
\title Creating Custom Widget Extensions
2800
2801
Once you have a custom widget plugin for \QD, you can provide it with the
2802
expected behavior and functionality within \QD's workspace, using custom
2803
widget extensions.
2804
2805
2806
\section1 Extension Types
2807
2808
There are several available types of extensions in \QD. You can use all of
2809
these extensions in the same pattern, only replacing the respective
2810
extension base class.
2811
2812
QDesignerContainerExtension is necessary when implementing a custom
2813
multi-page container.
2814
2815
\table
2816
\row
2817
\li \inlineimage designer-manual-taskmenuextension.png
2818
\li \b{QDesignerTaskMenuExtension}
2819
2820
QDesignerTaskMenuExtension is useful for custom widgets. It provides an
2821
extension that allows you to add custom menu entries to \QD's task
2822
menu.
2823
2824
The \l{taskmenuextension}{Task Menu Extension} example
2825
illustrates how to use this class.
2826
2827
\row
2828
\li \inlineimage designer-manual-containerextension.png
2829
\li \b{QDesignerContainerExtension}
2830
2831
QDesignerContainerExtension is necessary when implementing a custom
2832
multi-page container. It provides an extension that allows you to add
2833
and delete pages for a multi-page container plugin in \QD.
2834
2835
The \l{containerextension}{Container Extension} example
2836
further explains how to use this class.
2837
2838
\note It is not possible to add custom per-page properties for some
2839
widgets (e.g., QTabWidget) due to the way they are implemented.
2840
\endtable
2841
2842
\table
2843
\row
2844
\li \inlineimage designer-manual-membersheetextension.png
2845
\li \b{QDesignerMemberSheetExtension}
2846
2847
The QDesignerMemberSheetExtension class allows you to manipulate a
2848
widget's member functions displayed when connecting signals and slots.
2849
2850
\row
2851
\li \inlineimage designer-manual-propertysheetextension.png
2852
\li \b{QDesignerPropertySheetExtension,
2853
QDesignerDynamicPropertySheetExtension}
2854
2855
These extension classes allow you to control how a widget's properties
2856
are displayed in \QD's property editor.
2857
\endtable
2858
2859
\omit
2860
\row
2861
\li
2862
\li \b {QDesignerScriptExtension}
2863
2864
The QDesignerScriptExtension class allows you to define script
2865
snippets that are executed when a form is loaded. The extension
2866
is primarily intended to be used to set up the internal states
2867
of custom widgets.
2868
\endtable
2869
\endomit
2870
2871
2872
\QD uses the QDesignerPropertySheetExtension and the
2873
QDesignerMemberSheetExtension classes to feed its property and signal and
2874
slot editors. Whenever a widget is selected in its workspace, \QD will
2875
query for the widget's property sheet extension; likewise, whenever a
2876
connection between two widgets is requested, \QD will query for the
2877
widgets' member sheet extensions.
2878
2879
\warning All widgets have default property and member sheets. If you
2880
implement custom property sheet or member sheet extensions, your custom
2881
extensions will override the default sheets.
2882
2883
2884
\section1 Creating an Extension
2885
2886
To create an extension you must inherit both QObject and the appropriate
2887
base class, and reimplement its functions. Since we are implementing an
2888
interface, we must ensure that it is made known to the meta object system
2889
using the Q_INTERFACES() macro in the extension class's definition. For
2890
example:
2891
2892
\snippet manual/doc_src_designer-manual.cpp 7
2893
2894
This enables \QD to use the qobject_cast() function to query for supported
2895
interfaces using a QObject pointer only.
2896
2897
2898
\section1 Exposing an Extension to Qt Widgets Designer
2899
2900
In \QD the extensions are not created until they are required. For this
2901
reason, when implementing extensions, you must subclass QExtensionFactory
2902
to create a class that is able to make instances of your extensions. Also,
2903
you must register your factory with \QD's extension manager; the extension
2904
manager handles the construction of extensions.
2905
2906
When an extension is requested, \QD's extension manager will run through
2907
its registered factories calling QExtensionFactory::createExtension() for
2908
each of them until it finds one that is able to create the requested
2909
extension for the selected widget. This factory will then make an instance
2910
of the extension.
2911
2912
\image qtdesignerextensions.png
2913
2914
2915
\section2 Creating an Extension Factory
2916
2917
The QExtensionFactory class provides a standard extension factory, but it
2918
can also be used as an interface for custom extension factories.
2919
2920
The purpose is to reimplement the QExtensionFactory::createExtension()
2921
function, making it able to create your extension, such as a
2922
\l{containerextension}{MultiPageWidget} container extension.
2923
2924
You can either create a new QExtensionFactory and reimplement the
2925
QExtensionFactory::createExtension() function:
2926
2927
\snippet manual/doc_src_designer-manual.cpp 8
2928
2929
or you can use an existing factory, expanding the
2930
QExtensionFactory::createExtension() function to enable the factory to
2931
create your custom extension as well:
2932
2933
\snippet manual/doc_src_designer-manual.cpp 9
2934
2935
2936
\section2 Accessing Qt Widgets Designer's Extension Manager
2937
2938
When implementing a custom widget plugin, you must subclass the
2939
QDesignerCustomWidgetInterface to expose your plugin to \QD. This is
2940
covered in more detail in the
2941
\l{Creating Custom Widgets for Qt Widgets Designer} section. The registration of
2942
an extension factory is typically made in the
2943
QDesignerCustomWidgetInterface::initialize() function:
2944
2945
\snippet manual/doc_src_designer-manual.cpp 10
2946
2947
The \c formEditor parameter in the
2948
QDesignerCustomWidgetInterface::initialize() function is a pointer to \QD's
2949
current QDesignerFormEditorInterface object. You must use the
2950
QDesignerFormEditorInterface::extensionManager() function to retrieve an
2951
interface to \QD's extension manager. Then you use the
2952
QExtensionManager::registerExtensions() function to register your custom
2953
extension factory.
2954
2955
2956
\section1 Related Examples
2957
2958
For more information on creating custom widget extensions in \QD, refer to
2959
the \l{taskmenuextension}{Task Menu Extension} and
2960
\l{containerextension}{Container Extension} examples.
2961
*/
2962
2963
2964
/*!
2965
\page designer-ui-file-format.html
2966
\previouspage Creating Custom Widget Extensions
2967
2968
\title Qt Widgets Designer's UI File Format
2969
2970
The \c UI file format used by \QD is described by the
2971
\l{http://www.w3.org/XML/Schema}{XML schema} presented below,
2972
which we include for your convenience. Be aware that the format
2973
may change in future Qt releases.
2974
2975
\quotefile ../../../../data/ui4.xsd
2976
*/
qttools
src
designer
src
designer
doc
src
designer-manual.qdoc
Generated on
for Qt by
1.14.0