<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- addressbook-tutorial.qdoc -->
<title>Part 1 - Designing the User Interface | Qt Widgets 5.9</title>
<link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
<script type="text/javascript">
document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
// loading style sheet breaks anchors that were jumped to before
// so force jumping to anchor again
setTimeout(function() {
var anchor = location.hash;
// need to jump to different anchor first (e.g. none)
location.hash = "#";
setTimeout(function() {
location.hash = anchor;
}, 0);
}, 0);
</script>
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<table><tr>
<td >Qt 5.9</td><td ><a href="qtwidgets-index.html">Qt Widgets</a></td><td >Part 1 - Designing the User Interface</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right">Qt 5.9.4 Reference Documentation</td>
</tr></table>
</div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#qt-programming-subclassing">Qt Programming - Subclassing</a></li>
<li class="level1"><a href="#defining-the-addressbook-class">Defining the AddressBook Class</a></li>
<li class="level1"><a href="#implementing-the-addressbook-class">Implementing the AddressBook Class</a></li>
<li class="level1"><a href="#running-the-application">Running the Application</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Part 1 - Designing the User Interface</h1>
<span class="subtitle"></span>
<!-- $$$tutorials/addressbook/part1-description -->
<div class="descr"> <a name="details"></a>
<p>This first part covers the design of the basic graphical user interface (GUI) for our address book application.</p>
<p>The first step in creating a GUI program is to design the user interface. Here the our goal is to set up the labels and input fields to implement a basic address book. The figure below is a screenshot of the expected output.</p>
<p class="centerAlign"><img src="images/addressbook-tutorial-part1-screenshot.png" alt="" /></p><p>We require two <a href="qlabel.html">QLabel</a> objects, <code>nameLabel</code> and <code>addressLabel</code>, as well as two input fields, a <a href="qlineedit.html">QLineEdit</a> object, <code>nameLine</code>, and a <a href="qtextedit.html">QTextEdit</a> object, <code>addressText</code>, to enable the user to enter a contact's name and address. The widgets used and their positions are shown in the figure below.</p>
<p class="centerAlign"><img src="images/addressbook-tutorial-part1-labeled-screenshot.png" alt="" /></p><p>There are three files used to implement this address book:</p>
<ul>
<li><code>addressbook.h</code> - the definition file for the <code>AddressBook</code> class,</li>
<li><code>addressbook.cpp</code> - the implementation file for the <code>AddressBook</code> class, and</li>
<li><code>main.cpp</code> - the file containing a <code>main()</code> function, with an instance of <code>AddressBook</code>.</li>
</ul>
<a name="qt-programming-subclassing"></a>
<h2 id="qt-programming-subclassing">Qt Programming - Subclassing</h2>
<p>When writing Qt programs, we usually subclass Qt objects to add functionality. This is one of the essential concepts behind creating custom widgets or collections of standard widgets. Subclassing to extend or change the behavior of a widget has the following advantages:</p>
<ul>
<li>We can write implementations of virtual or pure virtual functions to obtain exactly what we need, falling back on the base class's implementation when necessary.</li>
<li>It allows us to encapsulate parts of the user interface within a class, so that the other parts of the application don't need to know about the individual widgets in the user interface.</li>
<li>The subclass can be used to create multiple custom widgets in the same application or library, and the code for the subclass can be reused in other projects.</li>
</ul>
<p>Since Qt does not provide a specific address book widget, we subclass a standard Qt widget class and add features to it. The <code>AddressBook</code> class we create in this tutorial can be reused in situations where a basic address book widget is needed.</p>
<a name="defining-the-addressbook-class"></a>
<h2 id="defining-the-addressbook-class">Defining the AddressBook Class</h2>
<p>The <a href="qtwidgets-tutorials-addressbook-part1-addressbook-h.html"><code>addressbook.h</code></a> file is used to define the <code>AddressBook</code> class.</p>
<p>We start by defining <code>AddressBook</code> as a <a href="qwidget.html">QWidget</a> subclass and declaring a constructor. We also use the <a href="../qtcore/qobject.html#Q_OBJECT">Q_OBJECT</a> macro to indicate that the class uses internationalization and Qt's signals and slots features, even if we do not use all of these features at this stage.</p>
<pre class="cpp">
<span class="keyword">class</span> AddressBook : <span class="keyword">public</span> <span class="type"><a href="qwidget.html">QWidget</a></span>
{
Q_OBJECT
<span class="keyword">public</span>:
AddressBook(<span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>parent <span class="operator">=</span> <span class="number">0</span>);
<span class="keyword">private</span>:
<span class="type"><a href="qlineedit.html">QLineEdit</a></span> <span class="operator">*</span>nameLine;
<span class="type"><a href="qtextedit.html">QTextEdit</a></span> <span class="operator">*</span>addressText;
};
</pre>
<p>The class holds declarations of <code>nameLine</code> and <code>addressText</code>, the private instances of <a href="qlineedit.html">QLineEdit</a> and <a href="qtextedit.html">QTextEdit</a> mentioned earlier. The data stored in <code>nameLine</code> and <code>addressText</code> will be needed for many of the address book functions.</p>
<p>We don't include declarations of the <a href="qlabel.html">QLabel</a> objects we will use because we will not need to reference them once they have been created. The way Qt tracks the ownership of objects is explained in the next section.</p>
<p>The <a href="../qtcore/qobject.html#Q_OBJECT">Q_OBJECT</a> macro itself implements some of the more advanced features of Qt. For now, it is useful to think of the <a href="../qtcore/qobject.html#Q_OBJECT">Q_OBJECT</a> macro as a shortcut which allows us to use the <a href="../qtcore/qobject.html#tr">tr()</a> and <a href="../qtcore/qobject.html#connect-4">connect()</a> functions.</p>
<p>We have now completed the <code>addressbook.h</code> file and we move on to implement the corresponding <code>addressbook.cpp</code> file.</p>
<a name="implementing-the-addressbook-class"></a>
<h2 id="implementing-the-addressbook-class">Implementing the AddressBook Class</h2>
<p>The constructor of <code>AddressBook</code> accepts a <a href="qwidget.html">QWidget</a> parameter, <i>parent</i>. By convention, we pass this parameter to the base class's constructor. This concept of ownership, where a parent can have one or more children, is useful for grouping widgets in Qt. For example, if you delete a parent, all of its children will be deleted as well.</p>
<pre class="cpp">
AddressBook<span class="operator">::</span>AddressBook(<span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>parent)
: <span class="type"><a href="qwidget.html">QWidget</a></span>(parent)
{
<span class="type"><a href="qlabel.html">QLabel</a></span> <span class="operator">*</span>nameLabel <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qlabel.html">QLabel</a></span>(tr(<span class="string">"Name:"</span>));
nameLine <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qlineedit.html">QLineEdit</a></span>;
<span class="type"><a href="qlabel.html">QLabel</a></span> <span class="operator">*</span>addressLabel <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qlabel.html">QLabel</a></span>(tr(<span class="string">"Address:"</span>));
addressText <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qtextedit.html">QTextEdit</a></span>;
</pre>
<p>In this constructor, the <a href="qlabel.html">QLabel</a> objects <code>nameLabel</code> and <code>addressLabel</code> are instantiated, as well as <code>nameLine</code> and <code>addressText</code>. The <a href="../qtcore/qobject.html#tr">tr()</a> function returns a translated version of the string, if there is one available. Otherwise it returns the string itself. This function marks its <a href="../qtcore/qstring.html">QString</a> parameter as one that should be translated into other languages. It should be used wherever a translatable string appears.</p>
<p>When programming with Qt, it is useful to know how layouts work. Qt provides three main layout classes: <a href="qhboxlayout.html">QHBoxLayout</a>, <a href="qvboxlayout.html">QVBoxLayout</a> and <a href="qgridlayout.html">QGridLayout</a> to handle the positioning of widgets.</p>
<p class="centerAlign"><img src="images/addressbook-tutorial-part1-labeled-layout.png" alt="" /></p><p>We use a <a href="qgridlayout.html">QGridLayout</a> to position our labels and input fields in a structured manner. <a href="qgridlayout.html">QGridLayout</a> divides the available space into a grid and places widgets in the cells we specify with row and column numbers. The diagram above shows the layout cells and the position of our widgets, and we specify this arrangement using the following code:</p>
<pre class="cpp">
<span class="type"><a href="qgridlayout.html">QGridLayout</a></span> <span class="operator">*</span>mainLayout <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qgridlayout.html">QGridLayout</a></span>;
mainLayout<span class="operator">-</span><span class="operator">></span>addWidget(nameLabel<span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">0</span>);
mainLayout<span class="operator">-</span><span class="operator">></span>addWidget(nameLine<span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">1</span>);
mainLayout<span class="operator">-</span><span class="operator">></span>addWidget(addressLabel<span class="operator">,</span> <span class="number">1</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="type"><a href="../qtcore/qt.html">Qt</a></span><span class="operator">::</span>AlignTop);
mainLayout<span class="operator">-</span><span class="operator">></span>addWidget(addressText<span class="operator">,</span> <span class="number">1</span><span class="operator">,</span> <span class="number">1</span>);
</pre>
<p>Notice that <code>addressLabel</code> is positioned using <a href="../qtcore/qt.html#AlignmentFlag-enum">Qt::AlignTop</a> as an additional argument. This is to make sure it is not vertically centered in cell (1,0). For a basic overview on Qt Layouts, refer to the <a href="layout.html">Layout Management</a> documentation.</p>
<p>In order to install the layout object onto the widget, we have to invoke the widget's <a href="qwidget.html#setLayout">setLayout()</a> function:</p>
<pre class="cpp">
setLayout(mainLayout);
setWindowTitle(tr(<span class="string">"Simple Address Book"</span>));
}
</pre>
<p>Lastly, we set the widget's title to "Simple Address Book".</p>
<a name="running-the-application"></a>
<h2 id="running-the-application">Running the Application</h2>
<p>A separate file, <code>main.cpp</code>, is used for the <code>main()</code> function. Within this function, we instantiate a <a href="qapplication.html">QApplication</a> object, <code>app</code>. <a href="qapplication.html">QApplication</a> is responsible for various application-wide resources, such as the default font and cursor, and for running an event loop. Hence, there is always one <a href="qapplication.html">QApplication</a> object in every GUI application using Qt.</p>
<pre class="cpp">
<span class="type">int</span> main(<span class="type">int</span> argc<span class="operator">,</span> <span class="type">char</span> <span class="operator">*</span>argv<span class="operator">[</span><span class="operator">]</span>)
{
<span class="type"><a href="qapplication.html">QApplication</a></span> app(argc<span class="operator">,</span> argv);
AddressBook addressBook;
addressBook<span class="operator">.</span>show();
<span class="keyword">return</span> app<span class="operator">.</span>exec();
}
</pre>
<p>We construct a new <code>AddressBook</code> widget on the stack and invoke its <a href="qwidget.html#show">show()</a> function to display it. However, the widget will not be shown until the application's event loop is started. We start the event loop by calling the application's <a href="qapplication.html#exec">exec()</a> function; the result returned by this function is used as the return value from the <code>main()</code> function. At this point, it becomes apparent why we instanciated <code>AddressBook</code> on the stack: It will now go out of scope. Therefore, <code>AddressBook</code> and all its child widgets will be deleted, thus preventing memory leaks.</p>
<p>Files:</p>
<ul>
<li><a href="qtwidgets-tutorials-addressbook-part1-addressbook-cpp.html">tutorials/addressbook/part1/addressbook.cpp</a></li>
<li><a href="qtwidgets-tutorials-addressbook-part1-addressbook-h.html">tutorials/addressbook/part1/addressbook.h</a></li>
<li><a href="qtwidgets-tutorials-addressbook-part1-main-cpp.html">tutorials/addressbook/part1/main.cpp</a></li>
<li><a href="qtwidgets-tutorials-addressbook-part1-part1-pro.html">tutorials/addressbook/part1/part1.pro</a></li>
</ul>
</div>
<!-- @@@tutorials/addressbook/part1 -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2017 The Qt Company Ltd.
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> 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. </p>
</div>
</body>
</html>
distrib
>
Mageia
>
6
>
armv5tl
>
media
>
core-updates
>
by-pkgid
>
768f7d9f703884aa2562bf0a651086df
>
files
>
4400
