<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en_US" lang="en_US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- designer-manual.qdoc -->
<title>Qt 4.8: Qt Designer's Widget Editing Mode</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/functions.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style/superfish.css" />
<link rel="stylesheet" type="text/css" href="style/narrow.css" />
<!--[if IE]>
<meta name="MSSmartTagsPreventParsing" content="true">
<meta http-equiv="imagetoolbar" content="no">
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie6.css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie7.css">
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="style/style_ie8.css">
<![endif]-->
<script src="scripts/superfish.js" type="text/javascript"></script>
<script src="scripts/narrow.js" type="text/javascript"></script>
</head>
<body class="" onload="CheckEmptyAndLoadList();">
<div class="header" id="qtdocheader">
<div class="content">
<div id="nav-logo">
<a href="index.html">Home</a></div>
<a href="index.html" class="qtref"><span>Qt Reference Documentation</span></a>
<div id="narrowsearch"></div>
<div id="nav-topright">
<ul>
<li class="nav-topright-home"><a href="http://qt.digia.com/">Qt HOME</a></li>
<li class="nav-topright-dev"><a href="http://qt-project.org/">DEV</a></li>
<li class="nav-topright-doc nav-topright-doc-active"><a href="http://qt-project.org/doc/">
DOC</a></li>
<li class="nav-topright-blog"><a href="http://blog.qt.digia.com/">BLOG</a></li>
</ul>
</div>
<div id="shortCut">
<ul>
<li class="shortCut-topleft-inactive"><span><a href="index.html">Qt 4.8</a></span></li>
<li class="shortCut-topleft-active"><a href="http://qt-project.org/doc/">ALL VERSIONS </a></li>
</ul>
</div>
<ul class="sf-menu" id="narrowmenu">
<li><a href="#">API Lookup</a>
<ul>
<li><a href="classes.html">Class index</a></li>
<li><a href="functions.html">Function index</a></li>
<li><a href="modules.html">Modules</a></li>
<li><a href="namespaces.html">Namespaces</a></li>
<li><a href="qtglobal.html">Global Declarations</a></li>
<li><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</li>
<li><a href="#">Qt Topics</a>
<ul>
<li><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li><a href="supported-platforms.html">Supported Platforms</a></li>
<li><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</li>
<li><a href="#">Examples</a>
<ul>
<li><a href="all-examples.html">Examples</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
<li><a href="demos.html">Demos</a></li>
<li><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="hd">
<span></span>
</div>
<div class="bd group">
<div class="sidebar">
<div class="searchlabel">
Search index:</div>
<div class="search" id="sidebarsearch">
<form id="qtdocsearch" action="" onsubmit="return false;">
<fieldset>
<input type="text" name="searchstring" id="pageType" value="" />
<div id="resultdialog">
<a href="#" id="resultclose">Close</a>
<p id="resultlinks" class="all"><a href="#" id="showallresults">All</a> | <a href="#" id="showapiresults">API</a> | <a href="#" id="showarticleresults">Articles</a> | <a href="#" id="showexampleresults">Examples</a></p>
<p id="searchcount" class="all"><span id="resultcount"></span><span id="apicount"></span><span id="articlecount"></span><span id="examplecount"></span> results:</p>
<ul id="resultlist" class="all">
</ul>
</div>
</fieldset>
</form>
</div>
<div class="box first bottombar" id="lookup">
<h2 title="API Lookup"><span></span>
API Lookup</h2>
<div id="list001" class="list">
<ul id="ul001" >
<li class="defaultLink"><a href="classes.html">Class index</a></li>
<li class="defaultLink"><a href="functions.html">Function index</a></li>
<li class="defaultLink"><a href="modules.html">Modules</a></li>
<li class="defaultLink"><a href="namespaces.html">Namespaces</a></li>
<li class="defaultLink"><a href="qtglobal.html">Global Declarations</a></li>
<li class="defaultLink"><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</div>
</div>
<div class="box bottombar" id="topics">
<h2 title="Qt Topics"><span></span>
Qt Topics</h2>
<div id="list002" class="list">
<ul id="ul002" >
<li class="defaultLink"><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li class="defaultLink"><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li class="defaultLink"><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li class="defaultLink"><a href="supported-platforms.html">Supported Platforms</a></li>
<li class="defaultLink"><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li class="defaultLink"><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</div>
</div>
<div class="box" id="examples">
<h2 title="Examples"><span></span>
Examples</h2>
<div id="list003" class="list">
<ul id="ul003">
<li class="defaultLink"><a href="all-examples.html">Examples</a></li>
<li class="defaultLink"><a href="tutorials.html">Tutorials</a></li>
<li class="defaultLink"><a href="demos.html">Demos</a></li>
<li class="defaultLink"><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</div>
</div>
</div>
<div class="wrap">
<div class="toolbar">
<div class="breadcrumb toolblock">
<ul>
<li class="first"><a href="index.html">Home</a></li>
<!-- Breadcrumbs go here -->
<li>Qt Designer's Widget Editing Mode</li>
</ul>
</div>
<div class="toolbuttons toolblock">
<ul>
<li id="smallA" class="t_button">A</li>
<li id="medA" class="t_button active">A</li>
<li id="bigA" class="t_button">A</li>
<li id="print" class="t_button"><a href="javascript:this.print();">
<span>Print</span></a></li>
</ul>
</div>
</div>
<div class="content mainContent">
<link rel="prev" href="designer-editing-mode.html" />
<link rel="next" href="designer-connection-mode.html" />
<p class="naviNextPrevious headerNavi">
<a class="prevPage" href="designer-editing-mode.html">Qt Designer's Editing Modes</a>
<a class="nextPage" href="designer-connection-mode.html">Qt Designer's Signals and Slots Editing Mode</a>
</p><p/>
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#editing-a-form">Editing A Form</a></li>
<li class="level2"><a href="#the-property-editor">The Property Editor</a></li>
<li class="level2"><a href="#dynamic-properties">Dynamic Properties</a></li>
<li class="level2"><a href="#the-object-inspector">The Object Inspector</a></li>
</ul>
</div>
<h1 class="title">Qt Designer's Widget Editing Mode</h1>
<span class="subtitle"></span>
<!-- $$$designer-widget-mode.html-description -->
<div class="descr"> <a name="details"></a>
<p class="centerAlign"><img src="images/designer-editing-mode.png" alt="" /></p><p>In the Widget Editing Mode, objects can be dragged from the main window's widget box to a form, edited, resized, dragged around on the form, and even dragged between forms. Object properties can be modified interactively, so that changes can be seen immediately. The editing interface is intuitive for simple operations, yet it still supports Qt's powerful layout facilities.</p>
<p>To create and edit new forms, open the <b>File</b> menu and select <b>New Form...</b> or press <b>Ctrl+N</b>. Existing forms can also be edited by selecting <b>Open Form...</b> from the <b>File</b> menu or pressing <b>Ctrl+O</b>.</p>
<p>At any point, you can save your form by selecting the <b>Save From As...</b> option from the <b>File</b> menu. The UI files saved by <i>Qt Designer</i> contain information about the objects used, and any details of signal and slot connections between them.</p>
<a name="editing-a-form"></a>
<h2>Editing A Form</h2>
<p>By default, new forms are opened in widget editing mode. To switch to Edit mode from another mode, select <b>Edit Widgets</b> from the <b>Edit</b> menu or press the <b>F3</b> key.</p>
<p>Objects are added to the form by dragging them from the main widget box and dropping them in the desired location on the form. Once there, they can be moved around simply by dragging them, or using the cursor keys. Pressing the <b>Ctrl</b> key at the same time moves the selected widget pixel by pixel, while using the cursor keys alone make the selected widget snap to the grid when it is moved. Objects can be selected by clicking on them with the left mouse button. You can also use the <b>Tab</b> key to change the selection.</p>
<p>### Screenshot of widget box, again</p>
<p>The widget box contains objects in a number of different categories, all of which can be placed on the form as required. The only objects that require a little more preparation are the <b>Container</b> widgets. These are described in further detail in the <a href="designer-using-containers.html">Using Containers in Qt Designer</a> chapter.</p>
<a name="selectingobjects"></a><table class="generic">
<tr valign="top" class="odd"><td ><img src="images/designer-selecting-widget.png" alt="" /></td><td ><b>Selecting Objects</b><p>Objects on the form are selected by clicking on them with the left mouse button. When an object is selected, resize handles are shown at each corner and the midpoint of each side, indicating that it can be resized.</p>
<p>To select additional objects, hold down the <b>Shift</b> key and click on them. If more than one object is selected, the current object will be displayed with resize handles of a different color.</p>
<p>To move a widget within a layout, hold down <b>Shift</b> and <b>Control</b> while dragging the widget. This extends the selection to the widget's parent layout.</p>
<p>Alternatively, objects can be selected in the <a href="#the-object-inspector">Object Inspector</a>.</p>
</td></tr>
</table>
<p>When a widget is selected, normal clipboard operations such as cut, copy, and paste can be performed on it. All of these operations can be done and undone, as necessary.</p>
<p>The following shortcuts can be used:</p>
<a name="shortcutsforediting"></a><table class="generic">
<thead><tr class="qt-style"><th >Action</th><th >Shortcut</th><th >Description</th></tr></thead>
<tr valign="top" class="odd"><td >Cut</td><td ><b>Ctrl+X</b></td><td >Cuts the selected objects to the clipboard.</td></tr>
<tr valign="top" class="even"><td >Copy</td><td ><b>Ctrl+C</b></td><td >Copies the selected objects to the clipboard.</td></tr>
<tr valign="top" class="odd"><td >Paste</td><td ><b>Ctrl+V</b></td><td >Pastes the objects in the clipboard onto the form.</td></tr>
<tr valign="top" class="even"><td >Delete</td><td ><b>Delete</b></td><td >Deletes the selected objects.</td></tr>
<tr valign="top" class="odd"><td >Clone object</td><td ><b>Ctrl+drag</b> (leftmouse button)</td><td >Makes a copy of the selected object or group of objects.</td></tr>
<tr valign="top" class="even"><td >Preview</td><td ><b>Ctrl+R</b></td><td >Shows a preview of the form.</td></tr>
</table>
<p>All of the above actions (apart from cloning) can be accessed via both the <b>Edit</b> menu and the form's context menu. These menus also provide funcitons for laying out objects as well as a <b>Select All</b> function to select all the objects on the form.</p>
<p>Widgets are not unique objects; you can make as many copies of them as you need. To quickly duplicate a widget, you can clone it by holding down the <b>Ctrl</b> key and dragging it. This allows widgets to be copied and placed on the form more quickly than with clipboard operations.</p>
<a name="draganddrop"></a><table class="generic">
<tr valign="top" class="odd"><td ><img src="images/designer-dragging-onto-form.png" alt="" /></td><td ><b>Drag and Drop</b><p><i>Qt Designer</i> makes extensive use of the drag and drop facilities provided by Qt. Widgets can be dragged from the widget box and dropped onto the form.</p>
<p>Widgets can also be "cloned" on the form: Holding down <b>Ctrl</b> and dragging the widget creates a copy of the widget that can be dragged to a new position.</p>
<p>It is also possible to drop Widgets onto the <a href="#the-object-inspector">Object Inspector</a> to handle nested layouts easily.</p>
</td></tr>
</table>
<p><i>Qt Designer</i> allows selections of objects to be copied, pasted, and dragged between forms. You can use this feature to create more than one copy of the same form, and experiment with different layouts in each of them.</p>
<a name="the-property-editor"></a>
<h3>The Property Editor</h3>
<p>The Property Editor always displays properties of the currently selected object on the form. The available properties depend on the object being edited, but all of the widgets provided have common properties such as <a href="qobject.html#objectName-prop">objectName</a>, the object's internal name, and <a href="qwidget.html#enabled-prop">enabled</a>, the property that determines whether an object can be interacted with or not.</p>
<a name="editingproperties"></a><table class="generic">
<tr valign="top" class="odd"><td ><img src="images/designer-property-editor.png" alt="" /></td><td ><b>Editing Properties</b><p>The property editor uses standard Qt input widgets to manage the properties of objects on the form. Textual properties are shown in line edits, integer properties are displayed in spinboxes, boolean properties are displayed in check boxes, and compound properties such as colors and sizes are presented in drop-down lists of input widgets.</p>
<p>Modified properties are indicated with bold labels. To reset them, click the arrow button on the right.</p>
<p>Changes in properties are applied to all selected objects that have the same property.</p>
</td></tr>
</table>
<p>Certain properties are treated specially by the property editor:</p>
<ul>
<li>Compound properties -- properties that are made up of more than one value -- are represented as nodes that can be expanded, allowing their values to be edited.</li>
<li>Properties that contain a choice or selection of flags are edited via combo boxes with checkable items.</li>
<li>Properties that allow access to rich data types, such as <a href="qpalette.html">QPalette</a>, are modified using dialogs that open when the properties are edited. <a href="qlabel.html">QLabel</a> and the widgets in the <b>Buttons</b> section of the widget box have a <tt>text</tt> property that can also be edited by double-clicking on the widget or by pressing <b>F2</b>. <i>Qt Designer</i> interprets the backslash (\) character specially, enabling newline (\n) characters to be inserted into the text; the \\ character sequence is used to insert a single backslash into the text. A context menu can also be opened while editing, providing another way to insert special characters and newlines into the text.</li>
</ul>
<a name="dynamic-properties"></a>
<h3>Dynamic Properties</h3>
<p>The property editor can also be used to add new <a href="qobject.html#dynamic-properties">dynamic properties</a> to both standard Qt widgets and to forms themselves. Since Qt 4.4, dynamic properties are added and removed via the property editor's toolbar, shown below.</p>
<p class="centerAlign"><img src="images/designer-property-editor-toolbar.png" alt="" /></p><p>To add a dynamic property, clcik on the <b>Add</b> button <img src="images/designer-property-editor-add-dynamic.png" alt="" /> . To remove it, click on the <b>Remove</b> button <img src="images/designer-property-editor-remove-dynamic.png" alt="" /> instead. You can also sort the properties alphabetically and change the color groups by clickinig on the <b>Configure</b> button <img src="images/designer-property-editor-configure.png" alt="" /> .</p>
<a name="the-object-inspector"></a>
<h3>The Object Inspector</h3>
<table class="generic">
<tr valign="top" class="odd"><td ><img src="images/designer-object-inspector.png" alt="" /></td><td ><b>The Object Inspector</b><p>The <b>Object Inspector</b> displays a hierarchical list of all the objects on the form that is currently being edited. To show the child objects of a container widget or a layout, click the handle next to the object label.</p>
<p>Each object on a form can be selected by clicking on the corresponding item in the <b>Object Inspector</b>. Right-clicking opens the form's context menu. These features can be useful if you have many overlapping objects. To locate an object in the <b>Object Inspector</b>, use <b>Ctrl+F</b>.</p>
<p>Since Qt 4.4, double-clicking on the object's name allows you to change the object's name with the in-place editor.</p>
<p>Since Qt 4.5, the <b>Object Inspector</b> displays the layout state of the containers. The broken layout icon <img src="images/editbreaklayout.png" alt="" /> is displayed if there is something wrong (e.g. layout missing from the container) with the layouts.</p>
</td></tr>
</table>
</div>
<!-- @@@designer-widget-mode.html -->
<p class="naviNextPrevious footerNavi">
<a class="prevPage" href="designer-editing-mode.html">Qt Designer's Editing Modes</a>
<a class="nextPage" href="designer-connection-mode.html">Qt Designer's Signals and Slots Editing Mode</a>
</p>
</div>
</div>
</div>
<div class="ft">
<span></span>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2015 The Qt Company Ltd.
Documentation contributions included herein are the copyrights of
their respective owners.</p>
<br />
<p>
The documentation provided herein is licensed under the terms of the
<a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation
License version 1.3</a> as published by the Free Software Foundation.</p>
<p>
Documentation sources may be obtained from <a href="http://www.qt-project.org">
www.qt-project.org</a>.</p>
<br />
<p>
Qt and respective logos are trademarks of The Qt Company Ltd
in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. <a title="Privacy Policy"
href="http://en.gitorious.org/privacy_policy/">Privacy Policy</a></p>
</div>
<script src="scripts/functions.js" type="text/javascript"></script>
</body>
</html>
