Case study

Understanding the code

This explanation assumes you have a working knowledge of Qt and QML.

The application code structure was created by the Qt Creator Qt Quick application wizard.

The application contains three QML files and one JavaScript file:

• main.qml contains the UI layout and state sections to define portrait and landscape layouts for different device orientations and states called “idle”, “dialling” and “connecting” to change the colour and text of the Call button.

• Button.qml contains the definition of a keypad button, which can react to touch screen tap events.

• Display.qml contains the definition of the display that shows the telephone number at the top of the screen.

• telephony.js contains the user interface logic to add digits to the display and to call a Qt object to begin and end a phone call:

  // Part of telephony.js
  
  ...
  
  // Call the telephony object to start a phone call and change the call button
  else if (op == "Call") {
     telephony.startCall(display.text);
  }
  // End the phone call
  else if (op == "End Call") {
     telephony.endCall();
  }
  
  ...
  

  The functions startCall() and endCall() are slots on a Qt Telephony interface object defined in telephony.h. This is a Qt interface wrapper class that uses an implementation defined in telephony_symbian.h to call the native Symbian C++ Telephony API to manage a phone call.

The main.cpp file is simple:

#include <QtGui/QApplication>
#include <QtDeclarative/QDeclarativeContext>
#include "qmlapplicationviewer.h"
#include "telephony.h"

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    QmlApplicationViewer viewer;
    viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
    viewer.setMainQmlFile(QLatin1String("qml/Dialpad/main.qml"));

    // Create a Telephony object and add it to the root context
    // This allows QML elements to use the telephony object's signals and slots
    viewer.rootContext()->setContextProperty("telephony", new Telephony);
    viewer.showExpanded();

    return app.exec();
}

QmlApplicationViewer is the class that shows a QML file on the mobile device display.

The setContextProperty() call creates a Qt Telephony interface object and adds it to the context so it can be used from within the QML and JavaScript UI elements. The Connections QML in main.qml connects signals from the telephony object to UI state change events.

    // Receive signals from the telephony object in the page context
    // and change the UI state
    Connections {
        target: telephony
        onCallDialling: main.state = "dialling"
        onCallConnected: main.state = "connected"
        onCallDisconnected: main.state = "idle"
        onError: main.state = "idle"
    }

Note that there is no Symbian C++ code in the UI layer. All access to the native Symbian Telephony API is hidden behind the Qt Telephony interface object.

For more information about how to design and implement code to use the native Symbian APIs in your applications read the documents in the section Creating an application using both Qt and Symbian C++.

Further information about the design and implementation of the Dialpad example can be found in the section documents Mixing Qt and Symbian C++ in your application and Converting Active Objects to Signals and Slots.

Where to next?

Read Introduction to Symbian C++ development if you are new to Symbian C++ and need to learn the essentials before you can use it in your applications.

Read the material in Creating an application using both Qt and Symbian C++ if you already know some Symbian C++ and want guidance on how to use Qt and Symbian C++ together.