Sophie

Sophie

distrib > Mageia > 5 > i586 > media > core-release > by-pkgid > 50facae208d4a6f280e44a513b104320 > files > 274

qt-mobility-doc-1.2.0-13.mga5.noarch.rpm

<?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" />
<!-- declarative-sfw-dialer.qdoc -->
  <title>Qt Mobility 1.2: Service Framework using QML Example</title>
  <link rel="stylesheet" type="text/css" href="style/offline.css" />
</head>
<body>
<div class="header" id="qtdocheader">
  <div class="content"> 
    <a href="index.html" class="qtref"><span>QtMobility Reference Documentation</span></a>
  </div>
  <div class="breadcrumb toolblock">
    <ul>
      <li class="first"><a href="index.html">Home</a></li>
      <!--  Breadcrumbs go here -->
<li><a href="http://qt.nokia.com/doc/4.7/all-examples.html">Examples</a></li>
<li>Service Framework using QML Example</li>
    </ul>
  </div>
</div>
<div class="content mainContent">
<h1 class="title">Service Framework using QML Example</h1>
<span class="subtitle"></span>
<!-- $$$declarative-sfw-dialer-description -->
<div class="descr"> <a name="details"></a>
<p>Files:</p>
<ul>
<li><a href="declarative-sfw-dialer-declarative-sfw-dialer-declarative-sfw-dialer-qml.html">declarative-sfw-dialer/declarative-sfw-dialer/declarative-sfw-dialer.qml</a></li>
<li><a href="declarative-sfw-dialer-declarative-sfw-dialer-qmldialer-cpp.html">declarative-sfw-dialer/declarative-sfw-dialer/qmldialer.cpp</a></li>
<li><a href="declarative-sfw-dialer-declarative-sfw-dialer-content-sfw-dialer-dialbutton-qml.html">declarative-sfw-dialer/declarative-sfw-dialer/content-sfw-dialer/DialButton.qml</a></li>
<li><a href="declarative-sfw-dialer-declarative-sfw-dialer-content-sfw-dialer-dialscreen-qml.html">declarative-sfw-dialer/declarative-sfw-dialer/content-sfw-dialer/DialScreen.qml</a></li>
<li><a href="declarative-sfw-dialer-declarative-sfw-dialer-content-sfw-dialer-dialerlist-qml.html">declarative-sfw-dialer/declarative-sfw-dialer/content-sfw-dialer/DialerList.qml</a></li>
<li><a href="declarative-sfw-dialer-landlinedialer-landlinedialer-cpp.html">declarative-sfw-dialer/landlinedialer/landlinedialer.cpp</a></li>
<li><a href="declarative-sfw-dialer-landlinedialer-landlinedialer-h.html">declarative-sfw-dialer/landlinedialer/landlinedialer.h</a></li>
<li><a href="declarative-sfw-dialer-landlinedialer-landlinedialerplugin-cpp.html">declarative-sfw-dialer/landlinedialer/landlinedialerplugin.cpp</a></li>
<li><a href="declarative-sfw-dialer-landlinedialer-landlinedialerplugin-h.html">declarative-sfw-dialer/landlinedialer/landlinedialerplugin.h</a></li>
<li><a href="declarative-sfw-dialer-landlinedialer-landlinedialerservice-xml.html">declarative-sfw-dialer/landlinedialer/landlinedialerservice.xml</a></li>
<li><a href="declarative-sfw-dialer-remotedialer-remotedialer-cpp.html">declarative-sfw-dialer/remotedialer/remotedialer.cpp</a></li>
<li><a href="declarative-sfw-dialer-remotedialer-remotedialer-h.html">declarative-sfw-dialer/remotedialer/remotedialer.h</a></li>
<li><a href="declarative-sfw-dialer-remotedialer-remotedialerservice-xml.html">declarative-sfw-dialer/remotedialer/remotedialerservice.xml</a></li>
<li><a href="declarative-sfw-dialer-voipdialer-voipdialer-cpp.html">declarative-sfw-dialer/voipdialer/voipdialer.cpp</a></li>
<li><a href="declarative-sfw-dialer-voipdialer-voipdialer-h.html">declarative-sfw-dialer/voipdialer/voipdialer.h</a></li>
<li><a href="declarative-sfw-dialer-voipdialer-voipdialerplugin-cpp.html">declarative-sfw-dialer/voipdialer/voipdialerplugin.cpp</a></li>
<li><a href="declarative-sfw-dialer-voipdialer-voipdialerplugin-h.html">declarative-sfw-dialer/voipdialer/voipdialerplugin.h</a></li>
<li><a href="declarative-sfw-dialer-voipdialer-voipdialerservice-xml.html">declarative-sfw-dialer/voipdialer/voipdialerservice.xml</a></li>
<li><a href="declarative-sfw-dialer-remotedialer-main-cpp.html">declarative-sfw-dialer/remotedialer/main.cpp</a></li>
<li><a href="declarative-sfw-dialer-declarative-sfw-dialer-pro.html">declarative-sfw-dialer/declarative-sfw-dialer.pro</a></li>
<li><a href="declarative-sfw-dialer-declarative-sfw-dialer-declarative-sfw-dialer-pro.html">declarative-sfw-dialer/declarative-sfw-dialer/declarative-sfw-dialer.pro</a></li>
<li><a href="declarative-sfw-dialer-declarative-sfw-dialer-declarative-sfw-dialer-qrc.html">declarative-sfw-dialer/declarative-sfw-dialer/declarative-sfw-dialer.qrc</a></li>
<li><a href="declarative-sfw-dialer-declarative-sfw-dialer-content-sfw-dialer-qmldir.html">declarative-sfw-dialer/declarative-sfw-dialer/content-sfw-dialer/qmldir</a></li>
<li><a href="declarative-sfw-dialer-landlinedialer-landlinedialer-pro.html">declarative-sfw-dialer/landlinedialer/landlinedialer.pro</a></li>
<li><a href="declarative-sfw-dialer-remotedialer-remotedialer-pro.html">declarative-sfw-dialer/remotedialer/remotedialer.pro</a></li>
<li><a href="declarative-sfw-dialer-voipdialer-voipdialer-pro.html">declarative-sfw-dialer/voipdialer/voipdialer.pro</a></li>
</ul>
<p><b>Execution</b></p>
<p>This example requires the example dialer services to be pre-registered in order for the application to discover and load the services. This can be done by using the service framework command line tool to add the corresponding service XML file:</p>
<ul>
<li>./servicefw add voipdialerservice.xml</li>
<li>./servicefw add landlinedialerservice.xml</li>
<li>./servicefw add remotedialerservice.xml</li>
<li>./servicefw dbusservice removedialerservice.xml dialer_service</li>
</ul>
<p>These deployment commands will register the two plugin-based services as well as the remote IPC-based service. The last line features the ability to create an autostarting file for D-Bus if the platform supports the <a href="http://qt.nokia.com/doc/4.7/qtdbus.html">QtDBus</a> module, typically available on Linux systems.</p>
<p>There are 2 ways to run the example:</p>
<ul>
<li>./qmldialer (only method for Symbian)</li>
<li>qmldialer declarative-sfw-dialer.qml</li>
</ul>
<p>The XML files for all example services can be found in the QtMobility build directory under install/bin/xmldata.</p>
<p>For Maemo and Linux platforms using D-Bus as the underlying IPC mechanism, the autostart feature can be initialised by running the service framework tool:</p>
<pre class="cpp"> servicefw dbusservice xmldata<span class="operator">/</span>remotedialerservice<span class="operator">.</span>xml dialer_service</pre>
<p><b>Explanation</b></p>
<p>This example should demonstrate how to use the Service Framework to access a list of services in a QML context. A library plugin provides QML with elements that can reference a single service or a list of services, called 'Service' and '<a href="qml-servicelist.html">ServiceList</a>' respectively.</p>
<p>An example that demonstrates how to connect to a single service object to implement a simple note taking application can be found <a href="declarative-sfw-notes.html">here</a>.</p>
<a name="guidesign"></a><p>The GUI looks like following picture:</p>
<p class="centerAlign"><img src="images/DialerServiceGUI.png" alt="&quot;GUI&quot;" /></p><p>The following steps outline how to make a QML based application using the Service Framework technology. It is assumed that QtMobility has been successfully built and environment variables have been set as per <a href="installation.html">Installation Guide</a>.</p>
<p><b>Service Framework in QML:</b></p>
<p>To included the Service Framework QML plugin to our QML file we need to import it as follows:</p>
<pre class="qml"> import QtMobility.serviceframework 1.1</pre>
<p><b>The Services:</b></p>
<p>The services are implemented in a shared library and can be register in the service framework. After the service is registered it can be used in different applications. In our case we'll access the services over an application that is based on QML scripting. We will be able to change between different services and call their properties, receiving their signals and so forth.</p>
<p>In this example we've implemented 2 services called Landdialer and Voipdialer. You can find the projects for those services in:</p>
<p>declarative-sfw-dialer\landlinedialer and declarative-sfw-dialer\voipdialer. Those projects will create a shared library in each case.</p>
<p>If the library needs to be available over the Service Framework, we need to register the library. In our example this will be done manually by using the servicefw tool. Refer to the project README for further details.</p>
<p>As you can see we register the services using a xml file. This xml file basically contains all information to register the shared library in the Service Framework environment. For more information please read more about the Qt Service Framework <a href="service-frameworks.html#adding-and-removing-of-services">XML Format</a></p>
<p>The <a href="qservicemanager.html">QServiceManager</a> creates an instance of a services over a <a href="qserviceplugininterface.html">QServicePluginInterface</a>. For each services we provide a Plugin.</p>
<pre class="cpp"> <span class="keyword">class</span> VoipDialerPlugin : <span class="keyword">public</span> <span class="type"><a href="http://qt.nokia.com/doc/4.7/qobject.html">QObject</a></span><span class="operator">,</span>
                                 <span class="keyword">public</span> <span class="type"><a href="qserviceplugininterface.html">QServicePluginInterface</a></span>
 {
     Q_OBJECT
     Q_INTERFACES(<span class="type">QtMobility</span><span class="operator">::</span><span class="type"><a href="qserviceplugininterface.html">QServicePluginInterface</a></span>)</pre>
<p>The Q_INTERFACES macro tells Qt which interfaces the class implements.</p>
<p>Both seviceplugins needs to implement the <a href="qserviceplugininterface.html">QServicePluginInterface</a>. In our case we only need to overwrite the virtual function createInstance.</p>
<pre class="cpp"> <span class="type"><a href="http://qt.nokia.com/doc/4.7/qobject.html">QObject</a></span><span class="operator">*</span> VoipDialerPlugin<span class="operator">::</span>createInstance(<span class="keyword">const</span> <span class="type"><a href="qserviceinterfacedescriptor.html">QServiceInterfaceDescriptor</a></span><span class="operator">&amp;</span> descriptor<span class="operator">,</span> <span class="type"><a href="qservicecontext.html">QServiceContext</a></span><span class="operator">*</span> context<span class="operator">,</span> <span class="type"><a href="qabstractsecuritysession.html">QAbstractSecuritySession</a></span><span class="operator">*</span> session)
 {
     Q_UNUSED(descriptor);
     Q_UNUSED(context);
     Q_UNUSED(session);
     <span class="keyword">return</span> <span class="keyword">new</span> VoipDialer(<span class="keyword">this</span>);
 }

 <a href="http://qt.nokia.com/doc/4.7/qtplugin.html#Q_EXPORT_PLUGIN2">Q_EXPORT_PLUGIN2</a>(serviceframework_voipdialerservice<span class="operator">,</span> VoipDialerPlugin)</pre>
<p>As you can see the createInstance function create the appropriate dialer object and returns it. The Q_EXPORT_PLUGIN2 macro provides the necessary implementation for a plugin. See <a href="http://qt.nokia.com/doc/4.7/plugins-howto.html">How to Create Qt Plugins</a> for more details.</p>
<p>The last thing we need to provide in our services are the states, properties, signals and slots that we want to access in out QML script later.</p>
<a name="voipdialer-h-0"></a><pre class="cpp"> <span class="keyword">public</span>:
 <span class="keyword">enum</span> ConnectionState {
     Disconnected <span class="operator">=</span> <span class="number">0</span><span class="operator">,</span>
     Connecting<span class="operator">,</span>
     Connected<span class="operator">,</span>
     Engaged
 };
 Q_PROPERTY( ConnectionState state READ state NOTIFY stateChanged)
 ConnectionState state() <span class="keyword">const</span>;

 <span class="keyword">public</span> <span class="keyword">slots</span>:
 <span class="type">void</span> dialNumber(<span class="keyword">const</span> <span class="type"><a href="http://qt.nokia.com/doc/4.7/qstring.html">QString</a></span><span class="operator">&amp;</span> number);
 <span class="type">void</span> hangup();

 <span class="keyword">signals</span>:
 <span class="type">void</span> stateChanged();</pre>
<p><b>Service access on the QML site</b></p>
<p>The QML elements are implemented in 4 different qml scripting files <a href="#guidesign"> see GUI design</a>.</p>
<p>The first step is to use our ServiceWrapperList to specify the interface and minimum version (optional) through QML item context, which will produce a list of ServiceWrapper objects.</p>
<pre class="qml"> <span class="type"><a href="qml-servicelist.html">ServiceList</a></span> {
     <span class="name">id</span>: <span class="name">dialerServiceList</span>
     <span class="name">interfaceName</span>: <span class="string">&quot;com.nokia.qt.examples.Dialer&quot;</span>
     <span class="name">majorVersion</span>: <span class="number">1</span>
     <span class="name">minorVersion</span>: <span class="number">0</span>
 }</pre>
<p>In the DialerList.qml file the services property is assigned to the <a href="http://qt.nokia.com/doc/4.7/qml-listview.html">ListView</a> model property.</p>
<pre class="qml"> <span class="type"><a href="http://qt.nokia.com/doc/4.7/qml-listview.html">ListView</a></span> {
     <span class="name">id</span>: <span class="name">serviceListView</span>
     <span class="name">height</span>: <span class="name">mainPage</span>.<span class="name">height</span> <span class="operator">*</span> <span class="number">4</span><span class="operator">/</span><span class="number">10</span>
     <span class="name">width</span>: <span class="name">mainPage</span>.<span class="name">width</span> <span class="operator">-</span> <span class="name">dialScreen</span>.<span class="name">width</span> <span class="operator">-</span> <span class="number">26</span>
     <span class="name">anchors</span>.topMargin: <span class="number">5</span>
     <span class="name">anchors</span>.leftMargin: <span class="number">5</span>
     <span class="name">anchors</span>.rightMargin: <span class="number">5</span>
     <span class="name">model</span>: <span class="name">dialerServiceList</span>.<span class="name">services</span>
     <span class="name">opacity</span>: <span class="number">1</span>
     <span class="name">delegate</span>: <span class="name">delegate</span>
     <span class="name">currentIndex</span>: -<span class="number">1</span>
     <span class="name">clip</span>: <span class="number">true</span>
 }</pre>
<p>To show the items of the model property we need to create a delegate component and assign it to the <a href="http://qt.nokia.com/doc/4.7/qml-listview.html">ListView</a> Delegate property:</p>
<pre class="qml"> <span class="type"><a href="http://qt.nokia.com/doc/4.7/qml-component.html">Component</a></span> {
     <span class="name">id</span>: <span class="name">delegate</span></pre>
<p>In this component you can define how you want to draw one <a href="http://qt.nokia.com/doc/4.7/qml-listview.html">ListView</a> item. You can access inside of this component the current ListWiew item by using the variable modelData. In our example we are using two text lines. Furthermore we can define whats happening if we click on a <a href="http://qt.nokia.com/doc/4.7/qml-listview.html">ListView</a> item by using the MouseRegion.</p>
<a name="dialerlist-qml-2"></a><pre class="qml"> <span class="type"><a href="http://qt.nokia.com/doc/4.7/qml-mousearea.html">MouseArea</a></span> {
     <span class="name">id</span>: <span class="name">listItemMouseRegion</span>
     <span class="name">anchors</span>.fill: <span class="name">parent</span>
     <span class="name">onClicked</span>: {
         <span class="keyword">if</span>(<span class="name">serviceListControl</span>.<span class="name">allowselction</span>){
             <span class="keyword">if</span>(<span class="name">listFrame</span>.<span class="name">nohighlightlistitem</span>){
                 <span class="name">serviceListView</span>.<span class="name">highlight</span> <span class="operator">=</span> <span class="name">highlight</span>
                 <span class="name">listFrame</span>.<span class="name">nohighlightlistitem</span> <span class="operator">=</span> <span class="number">false</span>;
             }
             <span class="name">serviceListView</span>.<span class="name">currentIndex</span> <span class="operator">=</span> <span class="name">index</span>;
             <span class="name">dialService</span> <span class="operator">=</span> <span class="name">model</span>.<span class="name">modelData</span>;
             <span class="name">signalSelected</span>()
         }
     }
 }

 <span class="type"><a href="http://qt.nokia.com/doc/4.7/qml-text.html">Text</a></span> {
     <span class="name">id</span>: <span class="name">serviceItemInfo</span>
     <span class="name">anchors</span>.top: <span class="name">parent</span>.<span class="name">top</span>
     <span class="name">anchors</span>.left: <span class="name">parent</span>.<span class="name">left</span>
     <span class="name">anchors</span>.topMargin: <span class="number">5</span>
     <span class="name">anchors</span>.leftMargin: <span class="number">3</span>
     <span class="name">text</span>: <span class="string">&quot; &lt;b&gt;Service:&lt;/b&gt; &quot;</span> <span class="operator">+</span> <span class="name">serviceName</span> <span class="operator">+</span> <span class="string">&quot;  (&quot;</span> <span class="operator">+</span>
                                 <span class="name">majorVersion</span> <span class="operator">+</span> <span class="string">&quot;.&quot;</span> <span class="operator">+</span>
                                 <span class="name">minorVersion</span> <span class="operator">+</span> <span class="string">&quot;)&quot;</span>
 }

 <span class="type"><a href="http://qt.nokia.com/doc/4.7/qml-text.html">Text</a></span> {
     <span class="name">id</span>: <span class="name">serviceItemInterfaceName</span>
     <span class="name">anchors</span>.top: <span class="name">serviceItemInfo</span>.<span class="name">bottom</span>
     <span class="name">anchors</span>.left: <span class="name">parent</span>.<span class="name">left</span>
     <span class="name">anchors</span>.topMargin: <span class="number">2</span>
     <span class="name">anchors</span>.leftMargin: <span class="number">3</span>
     <span class="name">text</span>: <span class="string">&quot; &lt;b&gt;Interface:&lt;/b&gt; &quot;</span> <span class="operator">+</span> <span class="name">interfaceName</span>;
 }</pre>
<p>Another component can be created for highliting a list item:</p>
<pre class="qml"> <span class="type"><a href="http://qt.nokia.com/doc/4.7/qml-component.html">Component</a></span> {
     <span class="name">id</span>: <span class="name">highlight</span>

     <span class="type"><a href="http://qt.nokia.com/doc/4.7/qml-rectangle.html">Rectangle</a></span> {
         <span class="name">width</span>: <span class="name">childrenRect</span>.<span class="name">width</span>
         <span class="name">border</span>.color: <span class="string">&quot;black&quot;</span>; <span class="name">border</span>.width: <span class="number">2</span>
         <span class="name">height</span>: <span class="number">30</span>
         <span class="name">color</span> : <span class="string">&quot;lightsteelblue&quot;</span>
         <span class="name">gradient</span>: <span class="name">Gradient</span> {
             <span class="type"><a href="http://qt.nokia.com/doc/4.7/qml-gradientstop.html">GradientStop</a></span> {<span class="name">position</span>: <span class="number">0.0</span>; <span class="name">color</span>: <span class="string">&quot;steelblue&quot;</span>}
             <span class="type"><a href="http://qt.nokia.com/doc/4.7/qml-gradientstop.html">GradientStop</a></span> {<span class="name">position</span>: <span class="number">0.5</span>; <span class="name">color</span>: <span class="string">&quot;lightsteelblue&quot;</span>}
             <span class="type"><a href="http://qt.nokia.com/doc/4.7/qml-gradientstop.html">GradientStop</a></span> {<span class="name">position</span>: <span class="number">1.0</span>; <span class="name">color</span>: <span class="string">&quot;steelblue&quot;</span>}
         }
     }
 }</pre>
<p><b>Service signals and function calls on the QML site</b></p>
<p>In sfw-kinetic-example.qml we define a control named DialScreen and implement the function onDial and onHangup. As you can see in the onDial event we call the service function dialNumber and the onHangup calls hangup. Both function are implemented in the service <a href="#voipdialer-h-0"> (see voipdialer header file).</a></p>
<pre class="qml"> <span class="type">DialScreen</span> {
     <span class="name">id</span>: <span class="name">dialScreen</span>
     property <span class="type">bool</span> <span class="name">activeCall</span> : <span class="number">false</span>
     property <span class="type">variant</span> <span class="name">currentDialer</span>: <span class="number">0</span>;
     <span class="name">anchors</span>.topMargin: <span class="number">5</span>
     <span class="name">anchors</span>.leftMargin: <span class="number">5</span>
     <span class="name">anchors</span>.rightMargin: <span class="number">5</span>
     <span class="name">anchors</span>.right: <span class="name">parent</span>.<span class="name">right</span>
     <span class="name">anchors</span>.top: <span class="name">parent</span>.<span class="name">top</span>
     <span class="name">onDial</span>: {
         <span class="keyword">if</span> (<span class="name">activeCall</span> <span class="operator">===</span> <span class="number">false</span>) {
             <span class="keyword">if</span> (<span class="name">dialerList</span>.<span class="name">dialService</span> <span class="operator">!=</span> <span class="number">0</span>) {
                 <span class="name">dialerList</span>.<span class="name">allowselction</span> <span class="operator">=</span> <span class="number">false</span>;
                 var <span class="name">o</span> = <span class="name">dialerObject</span>;
                 <span class="name">status</span>.<span class="name">text</span> <span class="operator">=</span> <span class="string">&quot;Dialing &quot;</span> <span class="operator">+</span> <span class="name">numberToDial</span> <span class="operator">+</span><span class="string">&quot;...&quot;</span>;
                 <span class="name">dialScreen</span>.<span class="name">currentDialer</span> <span class="operator">=</span> <span class="name">o</span>;
                 <span class="name">o</span>.<span class="name">dialNumber</span>(<span class="name">numberToDial</span>);
                 <span class="name">activeCall</span> <span class="operator">=</span> <span class="number">true</span>;
             }
         }
     }
     <span class="name">onHangup</span>: {
         <span class="keyword">if</span> (<span class="name">activeCall</span> <span class="operator">===</span> <span class="number">true</span>) {
             <span class="keyword">if</span> (<span class="name">dialScreen</span>.<span class="name">currentDialer</span> <span class="operator">!=</span> <span class="number">0</span>) {
                 <span class="name">dialScreen</span>.<span class="name">currentDialer</span>.<span class="name">hangup</span>();
             }
             <span class="name">dialerList</span>.<span class="name">allowselction</span> <span class="operator">=</span> <span class="number">true</span>;
             <span class="name">status</span>.<span class="name">text</span> <span class="operator">=</span> <span class="string">&quot;Hang up&quot;</span>;
         }
     }
 }</pre>
<p>In DialScreen.qml the dial and the hangup signals are defined. The hangup signal will be emitted if the HangUpButton was clicked:</p>
<pre class="qml"> <span class="type">DialButton</span> {
     <span class="name">id</span>: <span class="name">hangUpButton</span>
     <span class="name">height</span>: { (<span class="name">numberPad</span>.<span class="name">height</span> <span class="operator">/</span> <span class="number">2</span>) <span class="operator">-</span> <span class="number">2</span> }
     <span class="name">width</span>: <span class="number">50</span>
     <span class="name">anchors</span>.top: <span class="name">numberPad</span>.<span class="name">top</span>
     <span class="name">anchors</span>.left: <span class="name">numberPad</span>.<span class="name">right</span>
     <span class="name">anchors</span>.leftMargin: <span class="number">5</span>
     <span class="name">hoverColor</span>: <span class="string">&quot;red&quot;</span>
     <span class="name">color</span>: <span class="string">&quot;crimson&quot;</span>
     <span class="name">onClicked</span>: {
         <span class="name">dialString</span> <span class="operator">=</span> <span class="string">&quot;&quot;</span>
         <span class="name">hangup</span>()
     }</pre>
<p>The dial signal will be emitted if the CallButton was clicked:</p>
<pre class="qml"> <span class="type">DialButton</span> {
     <span class="name">id</span>: <span class="name">callButton</span>
     <span class="name">width</span>: <span class="number">50</span>
     <span class="name">height</span>: {(<span class="name">numberPad</span>.<span class="name">height</span><span class="operator">/</span><span class="number">2</span>) <span class="operator">-</span><span class="number">2</span>}
     <span class="name">anchors</span>.top: <span class="name">hangUpButton</span>.<span class="name">bottom</span>
     <span class="name">anchors</span>.left: <span class="name">numberPad</span>.<span class="name">right</span>
     <span class="name">anchors</span>.leftMargin: <span class="number">5</span>
     <span class="name">anchors</span>.topMargin: <span class="number">4</span>
     <span class="name">color</span>: <span class="string">&quot;mediumseagreen&quot;</span>
     <span class="name">hoverColor</span>: <span class="string">&quot;lightgreen&quot;</span>
     <span class="name">onClicked</span>: {
         <span class="keyword">if</span> (<span class="name">dialString</span> <span class="operator">!=</span> <span class="string">&quot;&quot;</span>) {
             <span class="name">dial</span>(<span class="name">dialString</span>)
             <span class="name">dialString</span> <span class="operator">=</span> <span class="string">&quot;&quot;</span>
         }
     }</pre>
<p>Now we need to connect the stateChanged signal form the services with an event handler on the QML site. This is done in our main declarative file:</p>
<pre class="qml"> <span class="type"><a href="http://qt.nokia.com/doc/4.7/qml-connections.html">Connections</a></span> {
     <span class="name">target</span>: <span class="name">dialerObject</span>
     <span class="name">ignoreUnknownSignals</span>: <span class="number">true</span>

     <span class="name">onStateChanged</span>: {
         <span class="keyword">if</span> (<span class="name">dialScreen</span>.<span class="name">currentDialer</span>.<span class="name">state</span> <span class="operator">==</span> <span class="number">1</span>) {
             <span class="name">status</span>.<span class="name">text</span> <span class="operator">+=</span> <span class="string">&quot;\nRinging&quot;</span>;
         }
         else <span class="keyword">if</span> (<span class="name">dialScreen</span>.<span class="name">currentDialer</span>.<span class="name">state</span> <span class="operator">==</span> <span class="number">2</span>) {
             <span class="name">status</span>.<span class="name">text</span> <span class="operator">+=</span> <span class="string">&quot;\nConnected&quot;</span>;
         }
         else <span class="keyword">if</span> (<span class="name">dialScreen</span>.<span class="name">currentDialer</span>.<span class="name">state</span> <span class="operator">==</span> <span class="number">0</span>) {
             <span class="name">status</span>.<span class="name">text</span> <span class="operator">+=</span> <span class="string">&quot;\nConnection terminated&quot;</span>;
             <span class="name">dialScreen</span>.<span class="name">activeCall</span> <span class="operator">=</span> <span class="number">false</span>;
             <span class="name">clearStatusTimer</span>.<span class="name">running</span> <span class="operator">=</span> <span class="number">true</span>;
         }
         else <span class="keyword">if</span> (<span class="name">dialScreen</span>.<span class="name">currentDialer</span>.<span class="name">state</span> <span class="operator">==</span> <span class="number">3</span>) {
             <span class="name">status</span>.<span class="name">text</span> <span class="operator">+=</span> <span class="string">&quot;\nPhone already engaged&quot;</span>;
         }
     }
 }</pre>
<p>The DialScreen.currentDialer is assigned during a <a href="http://qt.nokia.com/doc/4.7/qml-listview.html">ListView</a> item click in the <a href="#dialerlist-qml-2"> ServiceList.qml file</a>.</p>
</div>
<!-- @@@declarative-sfw-dialer -->
  <div class="ft">
    <span></span>
  </div>
</div> 
<div class="footer">
  <p>
     <acronym title="Copyright">&copy;</acronym> 2008-2011 Nokia Corporation and/or its
     subsidiaries. Nokia, Qt and their respective logos are trademarks of Nokia Corporation 
     in Finland and/or other countries worldwide.</p>
  <p>
     All other trademarks are property of their respective owners. <a title="Privacy Policy"
     href="http://qt.nokia.com/about/privacy-policy">Privacy Policy</a></p>
  <br />
  <p>
    Licensees holding valid Qt Commercial licenses may use this document in accordance with the    Qt Commercial License Agreement provided with the Software or, alternatively, in accordance    with the terms contained in a written agreement between you and Nokia.</p>
  <p>
    Alternatively, this document may be used 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>
</div>
</body>
</html>