How to access UI controls using C++ in BB 10

Hi 10 Berries 😉 Today we are going to learn, how to access UI controls, which are located in QML files, by using C++ class files. If you can remember my last post, I haven’t used C++ coding for Page navigation and did all functions within QML. But sometimes we need to control QML elements in C++ codes. No more bluffing, lets do this 🙂 

This is a tiny little application functions like this. When you click on the ButtonChange Dot“, the dot image will change to another image. You may see it as only the color of the image is changing. But No, actually I’m using two similar images with two colors. You can understand this when you see following screen shot.

Two states of the app

Two states of the app

The only QML file we are using for this application is main.qml file. Below is the content of that file.

import bb.cascades 1.0

Page {
    Container {
        layout: StackLayout { }

        Label {
            text: qsTr("Access UI Controls")
            textStyle.base: SystemDefaults.TextStyles.BigText
            horizontalAlignment: HorizontalAlignment.Center

        ImageView {
            imageSource: "asset:///images/greenDot.png"
            objectName: "mainDotImageView"

        Button {
            text: "Change Dot"
            objectName: "mainChangeButton"
            onClicked: {
                // The "app" name should be identical with the first
                //parameter of setContextProperty() in class file

One of the main thing that you encounter with above QML file, compare to previous post QML file is, objectName property of ImageView and Button elements. Here we used objectName instead of id property, because we need to call these elements using C++ class file.

The second important thing is changeDot() function with a variable name app. For now, understand it like this. changeDot() is a function written inside C++ class file and app is the connector between these two files. You will get a clear understand on this when you see the C++ class file source code and it’s comments.

#include "applicationui.hpp"

#include <bb/cascades/Application>
#include <bb/cascades/QmlDocument>
#include <bb/cascades/AbstractPane>

#include <QUrl>
#include <QString>

using namespace bb::cascades;

ApplicationUI::ApplicationUI(bb::cascades::Application *app)
: QObject(app)
    // create scene document from main.qml asset
    // set parent to created document to ensure it exists for the whole application lifetime
    QmlDocument *qml = QmlDocument::create("asset:///main.qml").parent(this);

    // create root object for the UI
    AbstractPane *root = qml->createRootObject<AbstractPane>();

    // To expose ApplicationUI to QML, we pass an instance of this class by using setContextProperty()
    qml->setContextProperty("app", this);

    // findChild() is a public function in QObject class.
    // By passing the QML element objectName as parameter, we can refer it
    dotImageView = root->findChild<ImageView*>("mainDotImageView");
    changeButton = root->findChild<Button*>("mainChangeButton");

    // set created root object as a scene

void ApplicationUI::changeDot(){
// This helps to debug using Device Log view
qDebug("*** applicationui ** changeDot");

// The QUrl class provides a convenient interface for working with URLs.
// imageSource() will return the image source of the dotImageView
QUrl imgSrcQurl = dotImageView->imageSource();

// Convert imageSource URL to a string value
QString imgSrcQurlStr = imgSrcQurl.toString();

// Sets the imageSource URL according to the condition
if(imgSrcQurlStr == "asset:///images/greenDot.png"){

I am not going to explain the above code here, because I have already explained the code using comments. So is that it? No… here comes the C++ header file in to the drama. There I have declared the private instance variables and the only function that we have used in the class file, which is changeDot(). This post is not the best place to explain about the C++ header file features. It plays a really big role of a project. One of the main thing you should have understand is the macros. I just gave you a hint and I’ll give you the header file source also.

#ifndef ApplicationUI_HPP_
#define ApplicationUI_HPP_

#include <QObject>
#include <string>

#include <bb/cascades/ImageView>
#include <bb/cascades/Button>

namespace bb { namespace cascades { class Application; }}

class ApplicationUI : public QObject
    ApplicationUI(bb::cascades::Application *app);
    virtual ~ApplicationUI() {}

    Q_INVOKABLE void changeDot();

    bb::cascades::ImageView *dotImageView;
    bb::cascades::Button *changeButton;


#endif /* ApplicationUI_HPP_ */

That’s enough for today. I never thought this post will become lengthy as this. When the post get bigger, you people are lazy to read. I better upload some of the source file to GitHub next time rather than posting it here 🙂 Have a nice day.


About AnujAroshA

Working as a Senior Software Engineer. Specialized in iOS application development. A simple person :)
This entry was posted in BlackBerry 10 and tagged , , . Bookmark the permalink.

One Response to How to access UI controls using C++ in BB 10

  1. KELLY says:

    Hey Anuja, can you please send xml files, or full project of “How to Update and Delete data from SQLite database in Android” project. I along with MANY other individuals are having difficulties with that project. Personally, i implemented your code and created the xml files, however when i add student info, nothing is to be seen in the list view. Please help and dont ignore please! Thank You in advance.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s