<?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: A Quick Start to 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>A Quick Start to 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/>
<h1 class="title">A Quick Start to Qt Designer</h1>
<span class="subtitle"></span>
<!-- $$$designer-quick-start.html-description -->
<div class="descr"> <a name="details"></a>
<p>Using <i>Qt Designer</i> involves <b>four</b> basic steps:</p>
<ol class="1">
<li>Choose your form and objects</li>
<li>Lay the objects out on the form</li>
<li>Connect the signals to the slots</li>
<li>Preview the form</li>
</ol>
<p class="centerAlign"><img src="images/rgbController-screenshot.png" alt="" /></p><p>Suppose you would like to design a small widget (see screenshot above) that contains the controls needed to manipulate Red, Green and Blue (RGB) values -- a type of widget that can be seen everywhere in image manipulation programs.</p>
<table class="generic">
<tr valign="top" class="odd"><td ><img src="images/designer-choosing-form.png" alt="" /></td><td ><b>Choosing a Form</b><p>You start by choosing <b>Widget</b> from the <b>New Form</b> dialog.</p>
</td></tr>
</table>
<table class="generic">
<tr valign="top" class="odd"><td ><img src="images/rgbController-arrangement.png" alt="" /></td><td ><b>Placing Widgets on a Form</b><p>Drag three labels, three spin boxes and three vertical sliders on to your form. To change the label's default text, simply double-click on it. You can arrange them according to how you would like them to be laid out.</p>
</td></tr>
</table>
<p>To ensure that they are laid out exactly like this in your program, you need to place these widgets into a layout. We will do this in groups of three. Select the "RED" label. Then, hold down <b>Ctrl</b> while you select its corresponding spin box and slider. In the <b>Form</b> menu, select <b>Lay Out in a Grid</b>.</p>
<table class="generic">
<tr valign="top" class="odd"><td ><img src="images/rgbController-form-gridLayout.png" alt="" /></td><td ><img src="images/rgbController-selectForLayout.png" alt="" /></td></tr>
</table>
<p>Repeat the step for the other two labels along with their corresponding spin boxes and sliders as well.</p>
<p>The next step is to combine all three layouts into one <b>main layout</b>. The main layout is the top level widget's (in this case, the <a href="qwidget.html">QWidget</a>) layout. It is important that your top level widget has a layout; otherwise, the widgets on your window will not resize when your window is resized. To set the layout, <b>Right click</b> anywhere on your form, outside of the three separate layouts, and select <b>Lay Out Horizontally</b>. Alternatively, you could also select <b>Lay Out in a Grid</b> -- you will still see the same arrangement (shown below).</p>
<p class="centerAlign"><img src="images/rgbController-final-layout.png" alt="" /></p><p><b>Note:</b> Main layouts cannot be seen on the form. To check if you have a main layout installed, try resizing your form; your widgets should resize accordingly. Alternatively, you can take a look at <i>Qt Designer</i>'s <b>Object Inspector</b>. If your top level widget does not have a layout, you will see the broken layout icon next to it, <img src="images/rgbController-no-toplevel-layout.png" alt="" /> .</p>
<p>When you click on the slider and drag it to a certain value, you want the spin box to display the slider's position. To accomplish this behavior, you need to connect the slider's <a href="qabstractslider.html#valueChanged">valueChanged()</a> signal to the spin box's <a href="qspinbox.html#value-prop">setValue()</a> slot. You also need to make the reverse connections, e.g., connect the spin box's <a href="qspinbox.html#valueChanged">valueChanged()</a> signal to the slider's <a href="qabstractslider.html#value-prop">setValue()</a> slot.</p>
<p>To do this, you have to switch to <b>Edit Signals/Slots</b> mode, either by pressing <b>F4</b> or selecting <b>Edit Signals/Slots</b> from the <b>Edit</b> menu.</p>
<table class="generic">
<tr valign="top" class="odd"><td ><img src="images/rgbController-signalsAndSlots.png" alt="" /></td><td ><b>Connecting Signals to Slots</b><p>Click on the slider and drag the cursor towards the spin box. The <b>Configure Connection</b> dialog, shown below, will pop up. Select the correct signal and slot and click <b>OK</b>.</p>
</td></tr>
</table>
<p class="centerAlign"><img src="images/rgbController-configure-connection1.png" alt="" /></p><p>Repeat the step (in reverse order), clicking on the spin box and dragging the cursor towards the slider, to connect the spin box's <a href="qspinbox.html#valueChanged">valueChanged()</a> signal to the slider's <a href="qabstractslider.html#value-prop">setValue()</a> slot.</p>
<p>You can use the screenshot below as a guide to selecting the correct signal and slot.</p>
<p class="centerAlign"><img src="images/rgbController-configure-connection2.png" alt="" /></p><p>Now that you have successfully connected the objects for the "RED" component of the RGB Controller, do the same for the "GREEN" and "BLUE" components as well.</p>
<p>Since RGB values range between 0 and 255, we need to limit the spin box and slider to that particular range.</p>
<table class="generic">
<tr valign="top" class="odd"><td ><img src="images/rgbController-property-editing.png" alt="" /></td><td ><b>Setting Widget Properties</b><p>Click on the first spin box. Within the <b>Property Editor</b>, you will see <a href="qspinbox.html">QSpinBox</a>'s properties. Enter "255" for the <a href="qspinbox.html#maximum-prop">maximum</a> property. Then, click on the first vertical slider, you will see <a href="qabstractslider.html">QAbstractSlider</a>'s properties. Enter "255" for the <a href="qabstractslider.html#maximum-prop">maximum</a> property as well. Repeat this process for the remaining spin boxes and sliders.</p>
</td></tr>
</table>
<p>Now, we preview your form to see how it would look in your application - press <b>Ctrl + R</b> or select <b>Preview</b> from the <b>Form</b> menu. Try dragging the slider - the spin box will mirror its value too (and vice versa). Also, you can resize it to see how the layouts that are used to manage the child widgets, respond to different window sizes.</p>
</div>
<!-- @@@designer-quick-start.html -->
<p class="naviNextPrevious footerNavi">
</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>
