1 /****************************************************************************

     2 **

     3 ** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).

     4 ** All rights reserved.

     5 ** Contact: Nokia Corporation (qt-info@nokia.com)

     6 **

     7 ** This file is part of the documentation of the Qt Toolkit.

     8 **

     9 ** $QT_BEGIN_LICENSE:LGPL$

    10 ** No Commercial Usage

    11 ** This file contains pre-release code and may not be distributed.

    12 ** You may use this file in accordance with the terms and conditions

    13 ** contained in the Technology Preview License Agreement accompanying

    14 ** this package.

    15 **

    16 ** GNU Lesser General Public License Usage

    17 ** Alternatively, this file may be used under the terms of the GNU Lesser

    18 ** General Public License version 2.1 as published by the Free Software

    19 ** Foundation and appearing in the file LICENSE.LGPL included in the

    20 ** packaging of this file.  Please review the following information to

    21 ** ensure the GNU Lesser General Public License version 2.1 requirements

    22 ** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.

    23 **

    24 ** In addition, as a special exception, Nokia gives you certain additional

    25 ** rights.  These rights are described in the Nokia Qt LGPL Exception

    26 ** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.

    27 **

    28 ** If you have questions regarding the use of this file, please contact

    29 ** Nokia at qt-info@nokia.com.

    30 **

    31 **

    32 **

    33 **

    34 **

    35 **

    36 **

    37 **

    38 ** $QT_END_LICENSE$

    39 **

    40 ****************************************************************************/

    41 

    42 /*!

    43     \page qt4-designer.html

    44 

    45     \title The New Qt Designer

    46 

    47     \contentspage {What's New in Qt 4}{Home}

    48     \previouspage The Qt 4 Main Window Classes

    49     \nextpage Cross-Platform Accessibility Support in Qt 4

    50 

    51     \QD has been completely re-written based on our experience with

    52     the previous versions of the product for Qt 3. One of the main new

    53     ideas behind this new version is to release the application as a

    54     collection of interchangeable components that include the property

    55     editor, the widget box, and other useful tools for creating

    56     graphical user interfaces with Qt. These components can either be

    57     used together in the \QD application, or independently integrated

    58     into other systems.  As a result, certain features such as the

    59     project editor and code editor have been removed from the version

    60     included with this release.

    61 

    62     The current version of \QD is near feature complete and can be used for

    63     many tasks. However, it is still under continuous development. This

    64     document will explain what is already in place.

    65 

    66     See also the \l{Qt Designer Manual}.

    67 

    68     \tableofcontents

    69 

    70     \section1 The Current State of Qt Designer

    71 

    72     When used as a standalone application, \QD includes a number of

    73     components that work together to provide a flexible GUI design

    74     tool. Widgets and dialog windows can be composed using a

    75     form-based interface that fully supports drag and drop, clipboard

    76     operations, and an undo/redo stack.

    77 

    78     This version of \QD introduces a number of editing modes to make

    79     different types of editing more natural. Each editing mode

    80     displays the form in an appropriate way for that mode, and

    81     provides a specialized user interface for manipulating its

    82     contents. The current editing modes are Widget Editing, Signals

    83     and Slots Editing, Buddy Editing, and Tab Order Editing.

    84 

    85     \section2 User Interface Features

    86 

    87     \table

    88     \row \i \inlineimage designer-main-window.png

    89     \i \bold{Widget Box}

    90 

    91     The Widget Box displays a categorized list of widgets and other

    92     objects that can be placed on a form using drag and drop.

    93 

    94     When \QD is in multi-window mode, the window containing the Widget

    95     Box also holds the main menu and the tool bar. When in workbench

    96     mode, the Widget Box becomes an independent window within the \QD

    97     workspace.

    98 

    99     The contents of the Widget Box are defined in an XML file that

   100     holds a collection of .ui documents for standard Qt widgets. This

   101     file can be extended, making it possible to add custom widgets to

   102     the Widget Box.

   103     \endtable

   104 

   105     \table

   106     \row \i \bold{Property Editor}

   107 

   108     The Property Editor allows designers to edit most properties of

   109     widgets and layout objects. The property names and values are

   110     presented in an editable tree view that shows the properties of

   111     the currently selected object.

   112 

   113     Certain resources, such as icons, can be configured in the

   114     Property Editor.  Resources can be taken from any currently

   115     installed resource files, making it easier to design

   116     self-contained components.

   117 

   118     \i \inlineimage designer-property-editor.png

   119     \endtable

   120 

   121     \section2 Editing Features

   122 

   123     \QD allows form designers to work on different aspects of their forms by

   124     switching between specialized editing modes. Tools for editing widget

   125     properties, resources, and actions provide context-sensitive information

   126     about the forms being edited.

   127 

   128     \table

   129     \row \i \inlineimage designer-choosing-form.png

   130     \i \bold{Form Templates}

   131 

   132     Form templates provide ready-to-use forms for various types of widgets,

   133     such as QWidget, QDialog, and QMainWindow. Custom templates based on

   134     these widgets can also be created.

   135 

   136     Templates can contain child widgets and layouts. Designers can

   137     save time by creating templates for the most common user interface

   138     features for repeated use.

   139     \endtable

   140 

   141     \table

   142     \row

   143     \i \bold{Widget Editing Mode}

   144 

   145     The new \QD allows widgets to be dropped into existing layouts on

   146     the form. Previously, it was necessary to break layouts in order

   147     to add new widgets to them.

   148 

   149     \QD now supports more direct manipulation of widgets:

   150     You can clone a widget by dragging it with the \key CTRL key held down, and

   151     it is even possible to drag widgets between forms.

   152 

   153     In-place widget editors provide specialized editing facilities for

   154     the most-used widget properties.

   155 

   156     \i \inlineimage designer-editing-mode.png

   157     \endtable

   158 

   159     \table

   160     \row

   161     \i \inlineimage designer-connection-mode.png

   162     \i \bold{Signals and Slots Editing Mode}

   163 

   164     \QD now employs a "wired" approach when representing and editing

   165     connections between objects on a form. The Signal and Slots

   166     Editing mode displays all the signal and slot connections on your

   167     form as arrows. These arrows can be manipulated visually, and

   168     provide the user with an overview of the form's connection logic.

   169 

   170     Connections can be made between objects on a form and the form itself.

   171     This is particularly useful when designing dialogs.

   172     \endtable

   173 

   174     \table

   175     \row

   176     \i \bold{Buddy Editing Mode}

   177 

   178     Widgets that cannot accept keyboard input are often given buddy

   179     widgets that will take the keyboard focus on their behalf.

   180 

   181     In Buddy Editing mode, \QD provides a similar approach to that

   182     used in the Signals and Slots Editing mode to show the

   183     relationships between widgets and their buddies.

   184 

   185     \i \inlineimage designer-buddy-mode.png

   186     \endtable

   187 

   188     \table

   189     \row

   190     \i \inlineimage designer-tab-order-mode.png

   191     \i \bold{Tab Order Mode}

   192 

   193     In this mode, users can specify the order in which input widgets accept

   194     the keyboard focus.

   195 

   196     The way that the tab order is defined follows the approach taken

   197     in Qt 3's version of \QD; The default tab order is based on the

   198     order in which widgets are constructed.

   199 

   200     \endtable

   201 

   202     \table

   203     \row

   204     \i \bold{The Resource Editor}

   205 

   206     The new \QD fully supports The Qt Resource System, and provide the

   207     Resource Editor to help designers and developers manage the

   208     resources that are needed by their applications.

   209 

   210     Using the Resource Editor, resources can be associated with a

   211     given form, and also modified and extended throught the editor's

   212     file browser style interface.

   213 

   214     The Resource Editor uses files that are processed by various

   215     components of the \l{The Qt Resource System}{Qt Resource System}

   216     to ensure that all required resources are embedded in the

   217     application.

   218 

   219     \i \inlineimage designer-resources-editing.png

   220     \endtable

   221 

   222     \table

   223     \row

   224     \i \inlineimage designer-action-editor.png

   225     \i \bold{The Action Editor}

   226 

   227     With the release of Qt 4.1, \QD introduces the Action Editor

   228     simplifying the management of actions when creating main window

   229     applications.

   230 

   231     When creating a main window, you can add a menu bar and toolbars

   232     using \QD's context menu. Once you have the menu bar or a toolbar

   233     in place, you can create and add actions using the Action Editor.

   234 

   235     \endtable

   236 

   237     \section2 Plugin Support

   238 

   239     \table

   240     \row

   241     \i \inlineimage worldtimeclockplugin-example.png

   242     \i \bold{Custom Widgets}

   243 

   244     Plugins can be used to add new custom widgets, special editors, and

   245     support for widgets from the Qt 3 support library.

   246 

   247     Support for custom widget plugins allows user interface designers to

   248     use application-specific widgets in their designs as early as possible

   249     in the development process.

   250 

   251     \QD handles custom widgets in the same way as standard Qt widgets,

   252     and allows custom signals and slots to be connected to other objects

   253     from within Signals and Slots Editing mode.

   254     \endtable

   255 

   256     \table

   257     \row

   258     \i \bold{The QtDesigner Module}

   259 

   260     The new modular \QD is designed to be integrated into other environments

   261     and extended with custom components.

   262 

   263     The QtDesigner Module is a library that developers can use to

   264     write extensions and plugins for \QD, and enables \QD components

   265     to be embedded into Integrated Development Environments

   266     (IDEs).

   267 

   268     With the release of Qt 4.1 the QtDesigner Module is fully

   269     documented. The release also provides several new examples using

   270     the QtDesigner API to create task menu extensions and custom

   271     multi-page widgets (i.e. container extensions).

   272 

   273     \i \inlineimage designer-manual-taskmenuextension.png

   274     \endtable

   275 

   276     \section1 Run-Time Support for Forms

   277 

   278     With the Qt 4.1 release, the new QtUiTools module is introduced to

   279     provide classes handling forms created with \QD.

   280 

   281     Currently the module only contains the QUiLoader class.

   282 

   283     QUiLoader can be used by standalone applications to

   284     dynamically create form-based user interfaces at run-time. This

   285     library can be statically linked with applications and

   286     redistributed under the same terms as Qt.

   287 

   288     \table

   289     \row

   290     \i \inlineimage calculatorbuilder-example.png

   291     \i \bold{Dynamic Form Creation}

   292 

   293     The QtUiTools library lets developers dynamically construct user interfaces at

   294     run-time using the same techniques as \QD. Since forms can contain custom

   295     widget plugins, the loading mechanism can be customized to search for

   296     third party or application-specific plugins.

   297     \endtable

   298 */