Revision as of 15:53, 11 May 2011 by somnathbanik (Talk | contribs)

Showing QML elements based on platform

From Nokia Developer Wiki
Jump to: navigation, search

This article mainly shows how to determine the platform on which our program is running and decide in run time what elements to be shown in 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.top: parent.top
anchors.topMargin: 30
Text {
anchors.centerIn: parent
style: Text.Outline
styleColor: "red"
text:" "
116 page views in the last 30 days.