×
Namespaces

Variants
Actions

Showing QML elements based on platform

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

Contents

Overview

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

#ifndef OSDETAILS_H
#define OSDETAILS_H
 
#include <QObject>
 
class OSDetails : public QObject
{
Q_OBJECT
 
public:
 
enum OSTYPE {
MAEMO5 = 1,
MAEMO6 = 2,
SYMBIAN = 3,
UNKNOWN = 4
};
 
OSDetails();
 
/*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>
 
OSDetails::OSDetails()
{
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;
#endif
 
#ifdef Q_OS_SYMBIAN
osName = SYMBIAN;
#endif
 
#ifdef Q_WS_MAEMO_5
osName = MAEMO5;
#endif
 
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;
viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
 
/*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*/

 
viewer.rootContext()->setContextProperty("OSdetails",&osdetails);
viewer.setMainQmlFile(QLatin1String("qml/ostype/main.qml"));
viewer.showExpanded();
 
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.

main.qml

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"
}
else
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 {
id:name
anchors.centerIn: parent
style: Text.Outline
styleColor: "red"
text:" "
}
}
}
This page was last modified on 11 October 2012, at 04:18.
118 page views in the last 30 days.
×