source: trunk/doc/src/designer-manual.qdoc@ 342

Last change on this file since 342 was 2, checked in by Dmitry A. Kuminov, 16 years ago

Initially imported qt-all-opensource-src-4.5.1 from Trolltech.

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