<?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: Getting to Know Qt Designer</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>Getting to Know Qt Designer</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">
<p class="naviNextPrevious headerNavi">
</p><p/>
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#launching-designer">Launching Designer</a></li>
<li class="level1"><a href="#the-user-interface">The User Interface</a></li>
<li class="level1"><a href="#the-concept-of-layouts-in-qt">The Concept of Layouts in Qt</a></li>
</ul>
</div>
<h1 class="title">Getting to Know Qt Designer</h1>
<span class="subtitle"></span>
<!-- $$$designer-to-know.html-description -->
<div class="descr"> <a name="details"></a>
<p class="centerAlign"><img src="images/designer-screenshot.png" alt="" /></p><a name="launching-designer"></a>
<h2>Launching Designer</h2>
<p>The way that you launch <i>Qt Designer</i> depends on your platform:</p>
<ul>
<li>On Windows, click the Start button, under the <b>Programs</b> submenu, open the <b>Qt 4</b> submenu and click <b>Designer</b>.</li>
<li>On Unix or Linux, you might find a <i>Qt Designer</i> icon on the desktop background or in the desktop start menu under the <b>Programming</b> or <b>Development</b> submenus. You can launch <i>Qt Designer</i> from this icon. Alternatively, you can type <tt>designer</tt> in a terminal window.</li>
<li>On Mac OS X, double click on <i>Qt Designer</i> in <b>Finder</b>.</li>
</ul>
<a name="the-user-interface"></a>
<h2>The User Interface</h2>
<p>When used as a standalone application, <i>Qt Designer</i>'s user interface can be configured to provide either a multi-window user interface (the default mode), or it can be used in docked window mode. When used from within an integrated development environment (IDE) only the multi-window user interface is available. You can switch modes in the <b>Preferences</b> dialog from the <b>Edit</b> menu.</p>
<p>In multi-window mode, you can arrange each of the tool windows to suit your working style. The main window consists of a menu bar, a tool bar, and a widget box that contains the widgets you can use to create your user interface.</p>
<a name="mainwindow"></a><table class="generic">
<tr valign="top" class="odd"><td ><img src="images/designer-main-window.png" alt="" /></td><td ><b>Qt Designer's Main Window</b><p>The menu bar provides all the standard actions for managing forms, using the clipboard, and accessing application-specific help. The current editing mode, the tool windows, and the forms in use can also be accessed via the menu bar.</p>
<p>The tool bar displays common actions that are used when editing a form. These are also available via the main menu.</p>
<p>The widget box provides common widgets and layouts that are used to design components. These are grouped into categories that reflect their uses or features.</p>
</td></tr>
</table>
<p>Most features of <i>Qt Designer</i> are accessible via the menu bar, the tool bar, or the widget box. Some features are also available through context menus that can be opened over the form windows. On most platforms, the right mouse is used to open context menus.</p>
<a name="widgetbox"></a><table class="generic">
<tr valign="top" class="odd"><td ><img src="images/designer-widget-box.png" alt="" /></td><td ><b>Qt Designer's Widget Box</b><p>The widget box provides a selection of standard Qt widgets, layouts, and other objects that can be used to create user interfaces on forms. Each of the categories in the widget box contain widgets with similar uses or related features.</p>
<p><b>Note:</b> Since Qt 4.4, new widgets have been included, e.g., <a href="qplaintextedit.html">QPlainTextEdit</a>, <a href="qcommandlinkbutton.html">QCommandLinkButton</a>, <a href="qscrollarea.html">QScrollArea</a>, <a href="qmdiarea.html">QMdiArea</a>, and <a href="qwebview.html">QWebView</a>.</p>
<p>You can display all of the available objects in a category by clicking on the handle next to the category label. When in <a href="designer-widget-mode.html">Widget Editing Mode</a>, you can add objects to a form by dragging the appropriate items from the widget box onto the form, and dropping them in the required locations.</p>
<p><i>Qt Designer</i> provides a scratch pad feature that allows you to collect frequently used objects in a separate category. The scratch pad category can be filled with any widget currently displayed in a form by dragging them from the form and dropping them onto the widget box. These widgets can be used in the same way as any other widgets, but they can also contain child widgets. Open a context menu over a widget to change its name or remove it from the scratch pad.</p>
</td></tr>
</table>
<a name="the-concept-of-layouts-in-qt"></a>
<h2>The Concept of Layouts in Qt</h2>
<p>A layout is used to arrange and manage the elements that make up a user interface. Qt provides a number of classes to automatically handle layouts -- <a href="qhboxlayout.html">QHBoxLayout</a>, <a href="qvboxlayout.html">QVBoxLayout</a>, <a href="qgridlayout.html">QGridLayout</a>, and <a href="qformlayout.html">QFormLayout</a>. These classes solve the challenge of laying out widgets automatically, providing a user interface that behaves predictably. Fortunately knowledge of the layout classes is not required to arrange widgets with <i>Qt Designer</i>. Instead, select one of the <b>Lay Out Horizontally</b>, <b>Lay Out in a Grid</b>, etc., options from the context menu.</p>
<p>Each Qt widget has a recommended size, known as <a href="qwidget.html#sizeHint-prop">sizeHint()</a>. The layout manager will attempt to resize a widget to meet its size hint. In some cases, there is no need to have a different size. For example, the height of a <a href="qlineedit.html">QLineEdit</a> is always a fixed value, depending on font size and style. In other cases, you may require the size to change, e.g., the width of a <a href="qlineedit.html">QLineEdit</a> or the width and height of item view widgets. This is where the widget size constraints -- <a href="qwidget.html#minimumSize-prop">minimumSize</a> and <a href="qwidget.html#maximumSize-prop">maximumSize</a> constraints come into play. These are properties you can set in the property editor. For example, to override the default <a href="qwidget.html#sizeHint-prop">sizeHint()</a>, simply set <a href="qwidget.html#minimumSize-prop">minimumSize</a> and <a href="qwidget.html#maximumSize-prop">maximumSize</a> to the same value. Alternatively, to use the current size as a size constraint value, choose one of the <b>Size Constraint</b> options from the widget's context menu. The layout will then ensure that those constraints are met. To control the size of your widgets via code, you can reimplement <a href="qwidget.html#sizeHint-prop">sizeHint()</a> in your code.</p>
<p>The screenshot below shows the breakdown of a basic user interface designed using a grid. The coordinates on the screenshot show the position of each widget within the grid.</p>
<p class="centerAlign"><img src="images/addressbook-tutorial-part3-labeled-layout.png" alt="" /></p><p><b>Note:</b> Inside the grid, the <a href="qpushbutton.html">QPushButton</a> objects are actually nested. The buttons on the right are first placed in a <a href="qvboxlayout.html">QVBoxLayout</a>; the buttons at the bottom are first placed in a <a href="qhboxlayout.html">QHBoxLayout</a>. Finally, they are put into coordinates (1,2) and (3,1) of the <a href="qgridlayout.html">QGridLayout</a>.</p>
<p>To visualize, imagine the layout as a box that shrinks as much as possible, attempting to <i>squeeze</i> your widgets in a neat arrangement, and, at the same time, maximize the use of available space.</p>
<p>Qt's layouts help when you:</p>
<ol class="1">
<li>Resize the user face to fit different window sizes.</li>
<li>Resize elements within the user interface to suit different localizations.</li>
<li>Arrange elements to adhere to layout guidelines for different platforms.</li>
</ol>
<p>So, you no longer have to worry about rearranging widgets for different platforms, settings, and languages.</p>
<p>The example below shows how different localizations can affect the user interface. When a localization requires more space for longer text strings the Qt layout automatically scales to accommodate this, while ensuring that the user interface looks presentable and still matches the platform guidelines.</p>
<table class="generic">
<thead><tr class="qt-style"><th >A Dialog in English</th><th >A Dialog in French</th></tr></thead>
<tr valign="top" class="odd"><td ><p class="centerAlign"><img src="images/designer-english-dialog.png" alt="" /></p></td><td ><p class="centerAlign"><img src="images/designer-french-dialog.png" alt="" /></p></td></tr>
</table>
<p>The process of laying out widgets consists of creating the layout hierarchy while setting as few widget size constraints as possible.</p>
<p>For a more technical perspective on Qt's layout classes, refer to the <a href="layout.html">Layout Management</a> documentation.</p>
</div>
<!-- @@@designer-to-know.html -->
<p class="naviNextPrevious footerNavi">
</p>
</div>
</div>
</div>
<div class="ft">
<span></span>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2013 Digia Plc and/or its
subsidiaries. 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>
Digia, Qt and their respective logos are trademarks of Digia Plc
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>
