<?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" />
<!-- worldtimeclockplugin.qdoc -->
<title>Qt 4.8: World Time Clock Plugin 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>World Time Clock Plugin 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="#worldtimeclock-class">WorldTimeClock Class</a></li>
<li class="level1"><a href="#worldtimeclockplugin-class">WorldTimeClockPlugin Class</a></li>
<li class="level1"><a href="#the-project-file-worldtimeclockplugin-pro">The Project File: worldtimeclockplugin.pro</a></li>
</ul>
</div>
<h1 class="title">World Time Clock Plugin Example</h1>
<span class="subtitle"></span>
<!-- $$$designer/worldtimeclockplugin-description -->
<div class="descr"> <a name="details"></a>
<p>Files:</p>
<ul>
<li><a href="designer-worldtimeclockplugin-worldtimeclock-cpp.html">designer/worldtimeclockplugin/worldtimeclock.cpp</a></li>
<li><a href="designer-worldtimeclockplugin-worldtimeclock-h.html">designer/worldtimeclockplugin/worldtimeclock.h</a></li>
<li><a href="designer-worldtimeclockplugin-worldtimeclockplugin-cpp.html">designer/worldtimeclockplugin/worldtimeclockplugin.cpp</a></li>
<li><a href="designer-worldtimeclockplugin-worldtimeclockplugin-h.html">designer/worldtimeclockplugin/worldtimeclockplugin.h</a></li>
<li><a href="designer-worldtimeclockplugin-worldtimeclockplugin-pro.html">designer/worldtimeclockplugin/worldtimeclockplugin.pro</a></li>
</ul>
<p>The World Time Clock Plugin example shows how to create a custom widget plugin for <i>Qt Designer</i> that uses signals and slots.<p class="centerAlign"><img src="images/worldtimeclockplugin-example.png" alt="" /></p><p>In this example, we simply extend the <a href="designer-customwidgetplugin.html">Custom Widget Plugin</a> example and its custom widget (based on the <a href="widgets-analogclock.html">Analog Clock</a> example), by introducing the concept of signals and slots.</p>
<p>The World Time Clock Plugin example consists of two classes:</p>
<ul>
<li><tt>WorldTimeClock</tt> is a custom clock widget with hour and minute hands that is automatically updated every few seconds.</li>
<li><tt>WorldTimeClockPlugin</tt> exposes the <tt>WorldTimeClock</tt> class to <i>Qt Designer</i>.</li>
</ul>
<p>First we will take a look at the <tt>WorldTimeClock</tt> class which extends the <a href="designer-customwidgetplugin.html">Custom Widget Plugin</a> example's <tt>AnalogClock</tt> class by providing a signal and a slot. Then we will take a quick look at the <tt>WorldTimeClockPlugin</tt> class, but this class is in most parts identical to the <a href="designer-customwidgetplugin.html">Custom Widget Plugin</a> example's implementation.</p>
<p>Finally we take a look at the plugin's project file. The project file for custom widget plugins needs some additional information to ensure that they will work within <i>Qt Designer</i>. This is also covered in the <a href="designer-customwidgetplugin.html">Custom Widget Plugin</a> example, but due to its importance (custom widget plugins rely on components supplied with <i>Qt Designer</i> which must be specified in the project file that we use) we will repeat it here.</p>
<a name="worldtimeclock-class"></a>
<h2>WorldTimeClock Class</h2>
<p>The <tt>WorldTimeClock</tt> class inherits <a href="qwidget.html">QWidget</a>, and is a custom clock widget with hour and minute hands that is automatically updated every few seconds. What makes this example different from the <a href="designer-customwidgetplugin.html">Custom Widget Plugin</a> example, is the introduction of the signal and slot in the custom widget class:</p>
<pre class="cpp"> <span class="keyword">class</span> QDESIGNER_WIDGET_EXPORT WorldTimeClock : <span class="keyword">public</span> <span class="type"><a href="qwidget.html">QWidget</a></span>
{
Q_OBJECT
<span class="keyword">public</span>:
WorldTimeClock(<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">public</span> <span class="keyword">slots</span>:
<span class="type">void</span> setTimeZone(<span class="type">int</span> hourOffset);
<span class="keyword">signals</span>:
<span class="type">void</span> updated(<span class="type"><a href="qtime.html">QTime</a></span> currentTime);
<span class="keyword">protected</span>:
<span class="type">void</span> paintEvent(<span class="type"><a href="qpaintevent.html">QPaintEvent</a></span> <span class="operator">*</span>event);
<span class="keyword">private</span>:
<span class="type">int</span> timeZoneOffset;
};</pre>
<p>Note the use of the <a href="qdesignercustomwidgetinterface.html#QDESIGNER_WIDGET_EXPORT">QDESIGNER_WIDGET_EXPORT</a> macro. This is needed to ensure that <i>Qt Designer</i> can create instances of the widget on some platforms, but it is a good idea to use it on all platforms.</p>
<p>We declare the <tt>setTimeZone()</tt> slot with an associated <tt>timeZoneOffset</tt> variable, and we declare an <tt>updated()</tt> signal which takes the current time as argument and is emitted whenever the widget is repainted.</p>
<p class="centerAlign"><img src="images/worldtimeclock-connection.png" alt="" /></p><p>In <i>Qt Designer</i>'s workspace we can then, for example, connect the <tt>WorldTimeClock</tt> widget's <tt>updated()</tt> signal to a <a href="qtimeedit.html">QTimeEdit</a>'s <a href="qdatetimeedit.html#time-prop">setTime()</a> slot using <i>Qt Designer</i>'s mode for editing signal and slots.</p>
<p class="centerAlign"><img src="images/worldtimeclock-signalandslot.png" alt="" /></p><p>We can also connect a <a href="qspinbox.html">QSpinBox</a>'s <a href="qspinbox.html#valueChanged">valueChanged()</a> signal to the <tt>WorldTimeClock</tt>'s <tt>setTimeZone()</tt> slot.</p>
<a name="worldtimeclockplugin-class"></a>
<h2>WorldTimeClockPlugin Class</h2>
<p>The <tt>WorldTimeClockPlugin</tt> class exposes the <tt>WorldTimeClock</tt> class to <i>Qt Designer</i>. Its definition is equivalent to the <a href="designer-customwidgetplugin.html">Custom Widget Plugin</a> example's plugin class which is explained in detail. The only part of the class definition that is specific to this particular custom widget is the class name:</p>
<pre class="cpp"> <span class="keyword">class</span> WorldTimeClockPlugin : <span class="keyword">public</span> <span class="type"><a href="qobject.html">QObject</a></span><span class="operator">,</span>
<span class="keyword">public</span> <span class="type"><a href="qdesignercustomwidgetinterface.html">QDesignerCustomWidgetInterface</a></span>
{
Q_OBJECT
Q_INTERFACES(<span class="type"><a href="qdesignercustomwidgetinterface.html">QDesignerCustomWidgetInterface</a></span>)
<span class="keyword">public</span>:
WorldTimeClockPlugin(<span class="type"><a href="qobject.html">QObject</a></span> <span class="operator">*</span>parent <span class="operator">=</span> <span class="number">0</span>);
<span class="type">bool</span> isContainer() <span class="keyword">const</span>;
<span class="type">bool</span> isInitialized() <span class="keyword">const</span>;
<span class="type"><a href="qicon.html">QIcon</a></span> icon() <span class="keyword">const</span>;
<span class="type"><a href="qstring.html">QString</a></span> domXml() <span class="keyword">const</span>;
<span class="type"><a href="qstring.html">QString</a></span> group() <span class="keyword">const</span>;
<span class="type"><a href="qstring.html">QString</a></span> includeFile() <span class="keyword">const</span>;
<span class="type"><a href="qstring.html">QString</a></span> name() <span class="keyword">const</span>;
<span class="type"><a href="qstring.html">QString</a></span> toolTip() <span class="keyword">const</span>;
<span class="type"><a href="qstring.html">QString</a></span> whatsThis() <span class="keyword">const</span>;
<span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>createWidget(<span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>parent);
<span class="type">void</span> initialize(<span class="type"><a href="qdesignerformeditorinterface.html">QDesignerFormEditorInterface</a></span> <span class="operator">*</span>core);
<span class="keyword">private</span>:
<span class="type">bool</span> initialized;
};</pre>
<p>The plugin class provides <i>Qt Designer</i> with basic information about our plugin, such as its class name and its include file. Furthermore it knows how to create instances of the <tt>WorldTimeClockPlugin</tt> widget. <tt>WorldTimeClockPlugin</tt> also defines the <a href="qdesignercustomwidgetinterface.html#initialize">initialize()</a> function which is called after the plugin is loaded into <i>Qt Designer</i>. The function's <a href="qdesignerformeditorinterface.html">QDesignerFormEditorInterface</a> parameter provides the plugin with a gateway to all of <i>Qt Designer</i>'s API's.</p>
<p>The <tt>WorldTimeClockPlugin</tt> class inherits from both <a href="qobject.html">QObject</a> and <a href="qdesignercustomwidgetinterface.html">QDesignerCustomWidgetInterface</a>. It is important to remember, when using multiple inheritance, to ensure that all the interfaces (i.e. the classes that doesn't inherit <a href="qobject.html#Q_OBJECT">Q_OBJECT</a>) are made known to the meta object system using the <a href="qobject.html#Q_INTERFACES">Q_INTERFACES</a>() macro. This enables <i>Qt Designer</i> to use <a href="qobject.html#qobject_cast">qobject_cast</a>() to query for supported interfaces using nothing but a <a href="qobject.html">QObject</a> pointer.</p>
<p>The implementation of the <tt>WorldTimeClockPlugin</tt> is also equivalent to the plugin interface implementation in the <a href="designer-customwidgetplugin.html">Custom Widget Plugin</a> example (only the class name and the implementation of <a href="qdesignercustomwidgetinterface.html#domXml">QDesignerCustomWidgetInterface::domXml</a>() differ). The main thing to remember is to use the <a href="qtplugin.html#Q_EXPORT_PLUGIN2">Q_EXPORT_PLUGIN2</a>() macro to export the <tt>WorldTimeClockPlugin</tt> class for use with <i>Qt Designer</i>:</p>
<pre class="cpp"> <a href="qtplugin.html#Q_EXPORT_PLUGIN2">Q_EXPORT_PLUGIN2</a>(worldtimeclockplugin<span class="operator">,</span> WorldTimeClockPlugin)</pre>
<p>Without this macro, there is no way for Qt Designer to use the widget.</p>
<a name="the-project-file-worldtimeclockplugin-pro"></a>
<h2>The Project File: worldtimeclockplugin.pro</h2>
<p>The project file for custom widget plugins needs some additional information to ensure that they will work as expected within <i>Qt Designer</i>:</p>
<pre class="cpp"> CONFIG += designer plugin
TEMPLATE = lib</pre>
<p>The <tt>TEMPLATE</tt> variable's value make <tt>qmake</tt> create the custom widget as a library. The <tt>CONFIG</tt> variable contains two values, <tt>designer</tt> and <tt>plugin</tt>:</p>
<ul>
<li><tt>designer</tt>: Since custom widgets plugins rely on components supplied with <i>Qt Designer</i>, this value ensures that our plugin links against <i>Qt Designer</i>'s library (<tt>libQtDesigner.so</tt>).</li>
<li><tt>plugin</tt>: We also need to ensure that <tt>qmake</tt> considers the custom widget a <i>plugin</i> library.</li>
</ul>
<p>When Qt is configured to build in both debug and release modes, <i>Qt Designer</i> will be built in release mode. When this occurs, it is necessary to ensure that plugins are also built in release mode. For that reason you might have to add a <tt>release</tt> value to your <tt>CONFIG</tt> variable. Otherwise, if a plugin is built in a mode that is incompatible with <i>Qt Designer</i>, it won't be loaded and installed.</p>
<p>The header and source files for the widget are declared in the usual way, and in addition we provide an implementation of the plugin interface so that <i>Qt Designer</i> can use the custom widget.</p>
<pre class="cpp"> HEADERS = worldtimeclock.h \
worldtimeclockplugin.h
SOURCES = worldtimeclock.cpp \
worldtimeclockplugin.cpp</pre>
<p>It is important to ensure that the plugin is installed in a location that is searched by <i>Qt Designer</i>. We do this by specifying a target path for the project and adding it to the list of items to install:</p>
<pre class="cpp"> target.path = $$[QT_INSTALL_PLUGINS]/designer
INSTALLS += target</pre>
<p>The custom widget is created as a library, and will be installed alongside the other <i>Qt Designer</i> plugins when the project is installed (using <tt>make install</tt> or an equivalent installation procedure). Later, we will ensure that it is recognized as a plugin by <i>Qt Designer</i> by using the <a href="qtplugin.html#Q_EXPORT_PLUGIN2">Q_EXPORT_PLUGIN2</a>() macro to export the relevant widget information.</p>
<p>Note that if you want the plugins to appear in a Visual Studio integration, the plugins must be built in release mode and their libraries must be copied into the plugin directory in the install path of the integration (for an example, see <tt>C:/program files/trolltech as/visual studio integration/plugins</tt>).</p>
<p>For more information about plugins, see the <a href="plugins-howto.html">How to Create Qt Plugins</a> document.</p>
</div>
<!-- @@@designer/worldtimeclockplugin -->
</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>
