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