How to show Toast in BB 10

Hello BB 10 pals🙂 This is the third post of mine related to BlackBerry 10 development. Today we are implementing another very simple task, which is, showing a Toast message. To get it little more complicated, the Toast will display what will user type in a given TextField and also I’m using an attractive UI design too ;-) 

Let’s see the final out put before we move in to coding. Then you will get a good idea of what you are going to do.

Image 1 (Screen 1 & 2)

Image 1 (Screen 1 & 2)

Sorry for the poor quality of images. I’m a poor developer who is still not wealthy enough to buy a BB Z10 device, so doing my implementation using a simulator🙂 Above picture contains two screens. First screen on the left side is the UI that we are going to implement. Today I’m not going to provide the source code of creating UI in this blog post :O Don’t worry. Instead I’m giving you my GitHub link where you can download it😉 Here is the link to view or download the main.qml file related to today’s application.

Image 2 (Screen 3 & 4)

Image 2 (Screen 3 & 4)

Above image will show you all the UI changes we get during this application. Let’s jump directly to header file where we have declared variables and methods.

#ifndef ApplicationUI_HPP_
#define ApplicationUI_HPP_

#include <QObject>
#include <bb/cascades/TextField>
#include <bb/cascades/Button>
#include <bb/cascades/Label>

namespace bb { namespace cascades { class Application; }}

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

    Q_INVOKABLE void showToast();

    bb::cascades::TextField *msgTextField;
    bb::cascades::Button *showButton;
    bb::cascades::Label *greetLabel;


#endif /* ApplicationUI_HPP_ */

Now you are familier with above code. There is nothing new if you have followed my previous posts related to BB 10 development.  Next we will see the source file related to above header file.

#include "applicationui.hpp"

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

#include <bb/system/SystemToast>
#include <bb/system/SystemUiPosition>
#include <QString>

using namespace bb::cascades;
using namespace bb::system;

QString userInputTxt;

ApplicationUI::ApplicationUI(bb::cascades::Application *app) : QObject(app)

    QmlDocument *qml = QmlDocument::create("asset:///main.qml").parent(this);

    AbstractPane *root = qml->createRootObject<AbstractPane>();

    qml->setContextProperty("app", this);

    msgTextField = root->findChild<TextField*>("mainMsgTxtFieldObj");
    showButton = root->findChild<Button*>("mainToastBtnObj");
    greetLabel = root->findChild<Label*>("mainGreetLableObj");


void ApplicationUI::showToast(){

userInputTxt = msgTextField->text();

SystemToast *toast = new SystemToast(this);

As I mentioned you earlier, most of the above code is also can understand because we have already used those in our previous posts. Therefore concentrate inside showToast() function body. The new thing we have used here is SystemToast class. As mentioned in the BB documentation, to use this class, we need to add LIBS += -lbbsystem in our project .pro file.

That’s it, now you can build and run the project. See how easy it is🙂 Meet you again with another simple implementation with BlackBerry 10. Bye…


About AnujAroshA

An undergraduate in the stream of ICT (Information & Communication Technology). A simple person :)
This entry was posted in BlackBerry 10 and tagged , , , . Bookmark the permalink.

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