<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- designer-manual.qdoc -->
<head>
<title>Qt 4.6: Qt Designer's Widget Editing Mode</title>
<link rel="prev" href="designer-editing-mode.html" />
<link rel="contents" href="designer-manual.html" />
<link rel="next" href="designer-connection-mode.html" />
<link href="classic.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" valign="top" width="32"><a href="http://qt.nokia.com/"><img src="images/qt-logo.png" align="left" border="0" /></a></td>
<td width="1"> </td><td class="postheader" valign="center"><a href="index.html"><font color="#004faf">Home</font></a> · <a href="classes.html"><font color="#004faf">All Classes</font></a> · <a href="functions.html"><font color="#004faf">All Functions</font></a> · <a href="overviews.html"><font color="#004faf">Overviews</font></a></td></tr></table><p>
[Previous: <a href="designer-editing-mode.html">Qt Designer's Editing Modes</a>]
[<a href="designer-manual.html">Contents</a>]
[Next: <a href="designer-connection-mode.html">Qt Designer's Signals and Slots Editing Mode</a>]
</p>
<h1 class="title">Qt Designer's Widget Editing Mode<br /><span class="subtitle"></span>
</h1>
<p align="center"><img src="images/designer-editing-mode.png" /></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>
<ul><li><a href="#editing-a-form">Editing A Form</a></li>
<ul><li><a href="#the-property-editor">The Property Editor</a></li>
<li><a href="#dynamic-properties">Dynamic Properties</a></li>
<li><a href="#the-object-inspector">The Object Inspector</a></li>
</ul>
</ul>
<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><p><table class="generic" align="center" cellpadding="2" cellspacing="1" border="0">
<tr valign="top" class="odd"><td><img src="images/designer-selecting-widget.png" /></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>
<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><p><table class="generic" align="center" cellpadding="2" cellspacing="1" border="0">
<thead><tr valign="top" 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>
<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><p><table class="generic" align="center" cellpadding="2" cellspacing="1" border="0">
<tr valign="top" class="odd"><td><img src="images/designer-dragging-onto-form.png" /></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>
<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><p><table class="generic" align="center" cellpadding="2" cellspacing="1" border="0">
<tr valign="top" class="odd"><td><img src="images/designer-property-editor.png" /></td><td><b>Editing Properties</b><p>The property editor uses standard Qt input widgets to manage the properties of jbects 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>
<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 align="center"><img src="images/designer-property-editor-toolbar.png" /></p><p>To add a dynamic property, clcik on the <b>Add</b> button <img src="images/designer-property-editor-add-dynamic.png" /> . To remove it, click on the <b>Remove</b> button <img src="images/designer-property-editor-remove-dynamic.png" /> 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" /> .</p>
<a name="the-object-inspector"></a>
<h3>The Object Inspector</h3>
<p><table class="generic" align="center" cellpadding="2" cellspacing="1" border="0">
<tr valign="top" class="odd"><td><img src="images/designer-object-inspector.png" /></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 ###ICON is displayed if there is something wrong with the layouts.</p>
</td></tr>
</table></p>
<p>
[Previous: <a href="designer-editing-mode.html">Qt Designer's Editing Modes</a>]
[<a href="designer-manual.html">Contents</a>]
[Next: <a href="designer-connection-mode.html">Qt Designer's Signals and Slots Editing Mode</a>]
</p>
<p /><address><hr /><div align="center">
<table width="100%" cellspacing="0" border="0"><tr class="address">
<td width="40%" align="left">Copyright © 2010 Nokia Corporation and/or its subsidiary(-ies)</td>
<td width="20%" align="center"><a href="trademarks.html">Trademarks</a></td>
<td width="40%" align="right"><div align="right">Qt 4.6.3</div></td>
</tr></table></div></address></body>
</html>
distrib
>
Mandriva
>
current
>
i586
>
media
>
main-updates
>
by-pkgid
>
8e6051afcdb111a0317a58fb64c2abf5
>
files
>
591
