Akademy2013: Akademy 2013 Program

"What's Interesting..." is a new feature that is going to go into KStars with an aim to make KStars more friendly to beginner astronomers. A QML interface has been used for this feature and in my talk I would try to use examples from my project to show how QML can be used with C++ in any KDE project.

"What's Interesting..." in KStars being a feature that intended to attract beginner astronomers to KStars, I decided that I would go for an attractive QML interface for it. With everything a QML interface can offer, a QML based interface can be made very attractive to users. But again, to beginner programmers who like to depend on Qt often find it difficult to use QML for user interfaces. In this talk, I shall use examples from my project to show how we can use QML in KDE applications.

So user interfaces designed using QML can be implemented using C++. This can be done by using QDeclarativeView. As an example I would like to provide a few lines of code from my project:
m_BaseView = new QDeclarativeView();
m_BaseView->setSource(KStandardDirs::locate("appdata","tools/whatsinteresting/qml/wiview.qml"));

In the first line a new QDeclarativeView object "m_BaseView" is created. In the next line we associate the QML file "wiview.qml" to this QDeclarativeView object.

Okay next, how to access QML components and is there any way to change their properties? This is possible as it is possible to access QML components as QObjects. Suppose in my QML source file we have the following QML component:
Text {
id: slewButton
objectName: "slewButtonObj"
text: qsTr("Slew map to object")

// More code here

signal slewButtonClicked()

MouseArea {
id: slewObjMouseArea
anchors.fill: parent
//More code here
onClicked: slewButton.slewButtonClicked()
}
}
We can access this QML component as a pointer to a QObject like this in the C++ file:
m_SlewButtonObj = m_BaseObj->findChild("slewButtonObj");
The objectName property in the QML component which is of type string is used to access the correct component in the C++ code.

The QML component also declares a signal. When the MouseArea is clicked, the signal slewButtonClicked() is emitted. This signal is caught in a C++ slot function. The signal-slot connection is made in the usual manner:
connect(m_SlewButtonObj, SIGNAL(slewButtonClicked()), this, SLOT(onSlewButtonClicked()));

Properties of QML components can be changed using the setProperty() function for the QObjects as illustrated here:
QObject *nextTextObj = m_NextObj->findChild("nextTextObj");
nextTextObj->setProperty("text", nextItem->getName());

As before we have a QML Text component in the QML source file "wiview.qml" with objectName property set to "nextTextObj". This component is accessed in the C++ code as a a pointer to a QObject object nextTextObj. Different properties related to this Text component can be changed or set by using the setProperty method on the QObject pointer. Here we see how the "text" property of the QML Text component is being set in the C++ code.

In my talk I shall also provide a demo on how to use C++ models in QML views.