1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
|
/****************************************************************************
**
** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
** All rights reserved.
** Contact: Nokia Corporation (qt-info@nokia.com)
**
** This file is part of the documentation of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:FDL$
** No Commercial Usage
** This file contains pre-release code and may not be distributed.
** You may use this file in accordance with the terms and conditions
** contained in the Technology Preview License Agreement accompanying
** this package.
**
** GNU Free Documentation License
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
** Foundation and appearing in the file included in the packaging of this
** file.
**
** If you have questions regarding the use of this file, please contact
** Nokia at qt-info@nokia.com.
** $QT_END_LICENSE$
**
****************************************************************************/
/*!
\page qt4-designer.html
\title The New Qt Designer
\contentspage {What's New in Qt 4}{Home}
\previouspage The Qt 4 Main Window Classes
\nextpage Cross-Platform Accessibility Support in Qt 4
\QD has been completely re-written based on our experience with
the previous versions of the product for Qt 3. One of the main new
ideas is to release the application as a
collection of interchangeable components that include the property
editor, the widget box, and other useful tools for creating
graphical user interfaces with Qt. These components can either be
used together in the \QD application, or independently integrated
into other systems. As a result, certain features such as the
project editor and code editor have been removed from the version
included with release 4.
See also the \l{Qt Designer Manual}.
\tableofcontents
\section1 The Current State of Qt Designer
When used as a standalone application, \QD includes a number of
components that work together to provide a flexible GUI design
tool. Widgets and dialog windows can be composed using a
form-based interface that fully supports drag and drop, clipboard
operations, and an undo/redo stack.
This version of \QD introduces a number of editing modes to make
different types of editing more natural. Each editing mode
displays the form in an appropriate way for that mode, and
provides a specialized user interface for manipulating its
contents. The current editing modes are Widget Editing, Signals
and Slots Editing, Buddy Editing, and Tab Order Editing.
\section2 User Interface Features
\table
\row \i \inlineimage designer-main-window.png
\i \bold{Widget Box}
The Widget Box displays a categorized list of widgets and other
objects that can be placed on a form using drag and drop.
When \QD is in multi-window mode, the window containing the Widget
Box also holds the main menu and the tool bar. When in workbench
mode, the Widget Box becomes an independent window within the \QD
workspace.
The contents of the Widget Box are defined in an XML file that
holds a collection of .ui documents for standard Qt widgets. This
file can be extended, making it possible to add custom widgets to
the Widget Box.
\endtable
\table
\row \i \bold{Property Editor}
The Property Editor allows designers to edit most properties of
widgets and layout objects. The property names and values are
presented in an editable tree view that shows the properties of
the currently selected object.
Certain resources, such as icons, can be configured in the
Property Editor. Resources can be taken from any currently
installed resource files, making it easier to design
self-contained components.
\i \inlineimage designer-property-editor.png
\endtable
\section2 Editing Features
\QD allows form designers to work on different aspects of their forms by
switching between specialized editing modes. Tools for editing widget
properties, resources, and actions provide context-sensitive information
about the forms being edited.
\table
\row \i \inlineimage designer-choosing-form.png
\i \bold{Form Templates}
Form templates provide ready-to-use forms for various types of widgets,
such as QWidget, QDialog, and QMainWindow. Custom templates based on
these widgets can also be created.
Templates can contain child widgets and layouts. Designers can
save time by creating templates for the most common user interface
features for repeated use.
\endtable
\table
\row
\i \bold{Widget Editing Mode}
\QD now allows widgets to be dropped into existing layouts on
the form. Previously, it was necessary to break layouts in order
to add new widgets to them.
\QD now supports more direct manipulation of widgets:
You can clone a widget by dragging it with the \key CTRL key held down, and
it is even possible to drag widgets between forms.
In-place widget editors provide specialized editing facilities for
the most-used widget properties.
\i \inlineimage designer-editing-mode.png
\endtable
\table
\row
\i \inlineimage designer-connection-mode.png
\i \bold{Signals and Slots Editing Mode}
\QD now employs a "wired" approach when representing and editing
connections between objects on a form. The Signal and Slots
Editing mode displays all the signal and slot connections on your
form as arrows. These arrows can be manipulated visually, and
provide the user with an overview of the form's connection logic.
Connections can be made between objects on a form and the form itself.
This is particularly useful when designing dialogs.
\endtable
\table
\row
\i \bold{Buddy Editing Mode}
Widgets that cannot accept keyboard input are often given buddy
widgets that will take the keyboard focus on their behalf.
In Buddy Editing mode, \QD provides a similar approach to that
used in the Signals and Slots Editing mode to show the
relationships between widgets and their buddies.
\i \inlineimage designer-buddy-mode.png
\endtable
\table
\row
\i \inlineimage designer-tab-order-mode.png
\i \bold{Tab Order Mode}
In this mode, users can specify the order in which input widgets accept
the keyboard focus.
The way that the tab order is defined follows the approach taken
in Qt 3's version of \QD; The default tab order is based on the
order in which widgets are constructed.
\endtable
\table
\row
\i \bold{The Resource Editor}
\QD now fully supports The Qt Resource System, and provides the
Resource Editor to help designers and developers manage the
resources that are needed by their applications.
Using the Resource Editor, resources can be associated with a
given form, and also modified and extended throught the editor's
file browser style interface.
The Resource Editor uses files that are processed by various
components of the \l{The Qt Resource System}{Qt Resource System}
to ensure that all required resources are embedded in the
application.
\i \inlineimage designer-resources-editing.png
\endtable
\table
\row
\i \inlineimage designer-action-editor.png
\i \bold{The Action Editor}
With the release of Qt 4.1, \QD the Action Editor was introduced
to simplify the management of actions when creating main window
applications.
When creating a main window, you can add a menu bar and toolbars
using \QD's context menu. Once you have the menu bar or a toolbar
in place, you can create and add actions using the Action Editor.
\endtable
\section2 Plugin Support
\table
\row
\i \inlineimage worldtimeclockplugin-example.png
\i \bold{Custom Widgets}
Plugins can be used to add new custom widgets, special editors, and
support for widgets from the Qt 3 support library.
Support for custom widget plugins allows user interface designers to
use application-specific widgets in their designs as early as possible
in the development process.
\QD handles custom widgets in the same way as standard Qt widgets,
and allows custom signals and slots to be connected to other objects
from within Signals and Slots Editing mode.
\endtable
\table
\row
\i \bold{The QtDesigner Module}
The new modular \QD is designed to be integrated into other environments
and extended with custom components.
The QtDesigner Module is a library that developers can use to
write extensions and plugins for \QD, and enables \QD components
to be embedded into Integrated Development Environments
(IDEs).
With the release of Qt 4.1 the QtDesigner Module is fully
documented. The release also provides several new examples using
the QtDesigner API to create task menu extensions and custom
multi-page widgets (i.e. container extensions).
\i \inlineimage designer-manual-taskmenuextension.png
\endtable
\section1 Run-Time Support for Forms
With the Qt 4.1 release, the new QtUiTools module was introduced to
provide classes handling forms created with \QD.
Currently the module only contains the QUiLoader class.
QUiLoader can be used by standalone applications to
dynamically create form-based user interfaces at run-time. This
library can be statically linked with applications and
redistributed under the same terms as Qt.
\table
\row
\i \inlineimage calculatorbuilder-example.png
\i \bold{Dynamic Form Creation}
The QtUiTools library lets developers dynamically construct user interfaces at
run-time using the same techniques as \QD. Since forms can contain custom
widget plugins, the loading mechanism can be customized to search for
third party or application-specific plugins.
\endtable
*/
|
