Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Showing QML elements based on platform

From Wiki
Jump to: navigation, search
Article Metadata
Created: suri.nandita (06 May 2011)
Last edited: hamishwillee (11 Oct 2012)
Featured Article
15 May



This article shows how to determine the platform on which an application is running and decide at run time what elements are to be shown in the QML file.

Example addresses three platforms : Symbian , Maemo5 and Maemo6

OSDetails is a QObject class having invokable function which determines the platform. For calling a C++ function from QML, the function must be either a Qt Slot or it should be marked with Q_INVOKABLE macro. With this macro, we register the function with meta-object system enabling it to be invoked using QMetaObject::invokeMethod()

OSDetails Class Definition

#include <QObject>
class OSDetails : public QObject
enum OSTYPE {
MAEMO5 = 1,
MAEMO6 = 2,
/*For calling a C++ function from QML,
i. the function must be a qt slot
ii. or a function marked with the Q_INVOKABLE macro */

/* Q_INVOKABLE,registering the function with meta-object system
and enabling it to be invoked using QMetaObject::invokeMethod() */

Q_INVOKABLE unsigned int getOSName();
#endif // OSDETAILS_H

OSDetails Class Implementation

#include "osdetails.h"
#include <QDebug>
qDebug() << "\n In Default Constructor";
/* Function to get the OS detail based on which
qml components can be shown*/

unsigned int OSDetails::getOSName()
int osName = UNKNOWN;
#ifdef Q_WS_MAEMO_6
osName = MAEMO6;
osName = SYMBIAN;
#ifdef Q_WS_MAEMO_5
osName = MAEMO5;
return osName;

Set the context property that can hold QObject* and QVariant values. This C++ object can be modified and read directly in qml. Here, we are setting the OSDetails object as the context property which can be read in our qml file. setContextProperty() sets the name and value of the property. The object can be accessed through the name ("OSdetails") of the property given in this function. Make sure that the context property is set before the qml file is loaded.

#include <QtGui/QApplication>
#include "qmlapplicationviewer.h"
#include "osdetails.h"
#include <QDeclarativeContext>
int main(int argc, char *argv[])
QApplication app(argc, argv);
QmlApplicationViewer viewer;
OSDetails osdetails;
/*Context property can hold QObject* and QVariant values. This C++ object
can be modified and read directly in qml */

/*Sets the name and value of the property. This name can be used to
call different members and functions of the passed value/object*/

return app.exec();

Based on the platform which can be determined using getOSName() function of OSDetails class, the elements can be appropriately shown. Text and images are appropriately shown.


import QtQuick 1.0
Rectangle {
width: 500
height : 500
Image {
id: background
anchors.fill: parent
Component.onCompleted: {
/* Getting the OS name details from C++ function
and setting appropriate visibility and text values.*/
/* Calling the function using the context property name
set in main.cpp */
if(OSdetails.getOSName() == 2){
name.text = "maemo6"
background.source = "maemo_org_logo.png"
else if(OSdetails.getOSName() == 1) {
background.source = "maemo_org_logo.png"
name.text = "maemo5"
else if(OSdetails.getOSName() == 3) {
name.text = "Symbian"
background.source = "symbian_os_logo.jpg"
name.text = "UnKnown"
Rectangle {
id: osname
width :70
height : 30
anchors.right: parent.right
anchors.rightMargin: 30
anchors.topMargin: 30
Text {
anchors.centerIn: parent
style: Text.Outline
styleColor: "red"
text:" "
This page was last modified on 11 October 2012, at 01:18.
171 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.