<?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" />
<!-- calculatorbuilder.qdoc -->
<title>Qt 4.8: Calculator Builder Example</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 href="all-examples.html">Examples</a></li>
<li>Calculator Builder Example</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">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#preparation">Preparation</a></li>
<li class="level1"><a href="#calculatorform-class-definition">CalculatorForm Class Definition</a></li>
<li class="level1"><a href="#calculatorform-class-implementation">CalculatorForm Class Implementation</a></li>
</ul>
</div>
<h1 class="title">Calculator Builder Example</h1>
<span class="subtitle"></span>
<!-- $$$designer/calculatorbuilder-description -->
<div class="descr"> <a name="details"></a>
<p>Files:</p>
<ul>
<li><a href="designer-calculatorbuilder-calculatorform-cpp.html">designer/calculatorbuilder/calculatorform.cpp</a></li>
<li><a href="designer-calculatorbuilder-calculatorform-h.html">designer/calculatorbuilder/calculatorform.h</a></li>
<li><a href="designer-calculatorbuilder-calculatorform-ui.html">designer/calculatorbuilder/calculatorform.ui</a></li>
<li><a href="designer-calculatorbuilder-main-cpp.html">designer/calculatorbuilder/main.cpp</a></li>
<li><a href="designer-calculatorbuilder-calculatorbuilder-pro.html">designer/calculatorbuilder/calculatorbuilder.pro</a></li>
<li><a href="designer-calculatorbuilder-calculatorbuilder-qrc.html">designer/calculatorbuilder/calculatorbuilder.qrc</a></li>
</ul>
<p>The Calculator Builder example shows how to create a user interface from a <i>Qt Designer</i> form at run-time, using the <a href="quiloader.html">QUiLoader</a> class.<p class="centerAlign"><img src="images/calculatorbuilder-example.png" alt="" /></p><p>We use the form created in the <a href="designer-calculatorform.html">Calculator Form</a> example to show that the same user interface can be generated when the application is executed or defined when the application is built.</p>
<a name="preparation"></a>
<h2>Preparation</h2>
<p>The <a href="designer-calculatorform.html">Calculator Form</a> example defines a user interface that we can use without modification. In this example, we use a <a href="resources.html">resource file</a> to contain the <tt>calculatorform.ui</tt> file created in the previous example, but it could be stored on disk instead.</p>
<p>To generate a form at run time, we need to link the example against the <tt>QtUiTools</tt> module library. The project file we use contains all the necessary information to do this:</p>
<pre class="cpp"> CONFIG += uitools
HEADERS = calculatorform.h
RESOURCES = calculatorbuilder.qrc
SOURCES = calculatorform.cpp \
main.cpp</pre>
<p>All the other necessary files are declared as usual.</p>
<a name="calculatorform-class-definition"></a>
<h2>CalculatorForm Class Definition</h2>
<p>The <tt>CalculatorForm</tt> class defines the widget used to host the form's user interface:</p>
<pre class="cpp"> <span class="keyword">class</span> CalculatorForm : <span class="keyword">public</span> <span class="type"><a href="qwidget.html">QWidget</a></span>
{
Q_OBJECT
<span class="keyword">public</span>:
CalculatorForm(<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="keyword">slots</span>:
<span class="type">void</span> on_inputSpinBox1_valueChanged(<span class="type">int</span> value);
<span class="type">void</span> on_inputSpinBox2_valueChanged(<span class="type">int</span> value);
<span class="keyword">private</span>:
<span class="type"><a href="qspinbox.html">QSpinBox</a></span> <span class="operator">*</span>ui_inputSpinBox1;
<span class="type"><a href="qspinbox.html">QSpinBox</a></span> <span class="operator">*</span>ui_inputSpinBox2;
<span class="type"><a href="qlabel.html">QLabel</a></span> <span class="operator">*</span>ui_outputWidget;
};</pre>
<p>Note that we do not need to include a header file to describe the user interface. We only define two public slots, using the auto-connection naming convention required by <tt>uic</tt>, and declare private variables that we will use to access widgets provided by the form after they are constructed.</p>
<a name="calculatorform-class-implementation"></a>
<h2>CalculatorForm Class Implementation</h2>
<p>We will need to use the <a href="quiloader.html">QUiLoader</a> class that is provided by the <tt>libQtUiTools</tt> library, so we first ensure that we include the header file for the module:</p>
<pre class="cpp"> <span class="preprocessor">#include <QtUiTools></span></pre>
<p>The constructor uses a form loader object to construct the user interface that we retrieve, via a <a href="qfile.html">QFile</a> object, from the example's resources:</p>
<pre class="cpp"> CalculatorForm<span class="operator">::</span>CalculatorForm(<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="quiloader.html">QUiLoader</a></span> loader;
<span class="type"><a href="qfile.html">QFile</a></span> file(<span class="string">":/forms/calculatorform.ui"</span>);
file<span class="operator">.</span>open(<span class="type"><a href="qfile.html">QFile</a></span><span class="operator">::</span>ReadOnly);
<span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>formWidget <span class="operator">=</span> loader<span class="operator">.</span>load(<span class="operator">&</span>file<span class="operator">,</span> <span class="keyword">this</span>);
file<span class="operator">.</span>close();</pre>
<p>By including the user interface in the example's resources, we ensure that it will be present when the example is run. The <tt>loader.load()</tt> function takes the user interface description contained in the file and constructs the form widget as a child widget of the <tt>CalculatorForm</tt>.</p>
<p>We are interested in three widgets in the generated user interface: two spin boxes and a label. For convenience, we retrieve pointers to these widgets from the widget that was constructed by the <tt>FormBuilder</tt>, and we record them for later use. The <tt>qFindChild()</tt> template function allows us to query widgets in order to find named child widgets.</p>
<pre class="cpp"> ui_inputSpinBox1 <span class="operator">=</span> findChild<span class="operator"><</span><span class="type"><a href="qspinbox.html">QSpinBox</a></span><span class="operator">*</span><span class="operator">></span>(<span class="string">"inputSpinBox1"</span>);
ui_inputSpinBox2 <span class="operator">=</span> findChild<span class="operator"><</span><span class="type"><a href="qspinbox.html">QSpinBox</a></span><span class="operator">*</span><span class="operator">></span>(<span class="string">"inputSpinBox2"</span>);
ui_outputWidget <span class="operator">=</span> findChild<span class="operator"><</span><span class="type"><a href="qlabel.html">QLabel</a></span><span class="operator">*</span><span class="operator">></span>(<span class="string">"outputWidget"</span>);</pre>
<p>The widgets created by the form loader need to be connected to the specially-named slots in the <tt>CalculatorForm</tt> object. We use Qt's meta-object system to enable these connections:</p>
<pre class="cpp"> <span class="type"><a href="qmetaobject.html">QMetaObject</a></span><span class="operator">::</span>connectSlotsByName(<span class="keyword">this</span>);</pre>
<p>The form widget is added to a layout, and the window title is set:</p>
<pre class="cpp"> <span class="type"><a href="qvboxlayout.html">QVBoxLayout</a></span> <span class="operator">*</span>layout <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qvboxlayout.html">QVBoxLayout</a></span>;
layout<span class="operator">-</span><span class="operator">></span>addWidget(formWidget);
setLayout(layout);
setWindowTitle(tr(<span class="string">"Calculator Builder"</span>));
}</pre>
<p>The two slots that modify widgets provided by the form are defined in a similar way to those in the <a href="designer-calculatorform.html">Calculator Form</a> example, except that we read the values from the spin boxes and write the result to the output widget via the pointers we recorded in the constructor:</p>
<pre class="cpp"> <span class="type">void</span> CalculatorForm<span class="operator">::</span>on_inputSpinBox1_valueChanged(<span class="type">int</span> value)
{
ui_outputWidget<span class="operator">-</span><span class="operator">></span>setText(<span class="type"><a href="qstring.html">QString</a></span><span class="operator">::</span>number(value <span class="operator">+</span> ui_inputSpinBox2<span class="operator">-</span><span class="operator">></span>value()));
}
<span class="type">void</span> CalculatorForm<span class="operator">::</span>on_inputSpinBox2_valueChanged(<span class="type">int</span> value)
{
ui_outputWidget<span class="operator">-</span><span class="operator">></span>setText(<span class="type"><a href="qstring.html">QString</a></span><span class="operator">::</span>number(value <span class="operator">+</span> ui_inputSpinBox1<span class="operator">-</span><span class="operator">></span>value()));
}</pre>
<p>The advantage of this approach is that we can replace the form when the application is run, but we can still manipulate the widgets it contains as long as they are given appropriate names.</p>
</div>
<!-- @@@designer/calculatorbuilder -->
</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>
