/usr/share/qt5/doc/qtdesigner/designer-quick-start.html is in qttools5-doc-html 5.2.1-8build1.
This file is owned by root:root, with mode 0o644.
The actual contents of the file can be viewed below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>A Quick Start to Qt Designer | QtDesigner </title>
<link rel="stylesheet" type="text/css" href="style/offline.css" />
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<ul>
<li>Qt 5.2</li>
<li><a href="qtdesigner-manual.html">Qt Designer Manual</a></li>
<li>A Quick Start to Qt Designer</li>
<li id="buildversion">
Qt 5.2.1 Reference Documentation</li>
</ul>
</div>
</div>
<div class="content">
<div class="line">
<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="../qtwidgets/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="../qtwidgets/qabstractslider.html#value-prop">valueChanged()</a> signal to the spin box's <a href="../qtwidgets/qspinbox.html#value-prop">setValue()</a> slot. You also need to make the reverse connections, e.g., connect the spin box's <a href="../qtwidgets/qspinbox.html#value-prop">valueChanged()</a> signal to the slider's <a href="../qtwidgets/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="../qtwidgets/qspinbox.html#value-prop">valueChanged()</a> signal to the slider's <a href="../qtwidgets/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="../qtwidgets/qspinbox.html">QSpinBox</a>'s properties. Enter "255" for the <a href="../qtwidgets/qspinbox.html#maximum-prop">maximum</a> property. Then, click on the first vertical slider, you will see <a href="../qtwidgets/qabstractslider.html">QAbstractSlider</a>'s properties. Enter "255" for the <a href="../qtwidgets/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>
</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.<br> 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.<br> 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. </p>
</div>
</body>
</html>
|