A Toast to the ImageToggleButton

Elements/Components Used:

Toast, ImageToggleButton, ImageView

image

At the time of this writing the ToggleButton only exists as an on/off switch, however I get the feeling that will change soon. To be able to have a yes/no switch I created 4 images to be used as a custom ImageToggleButton and used the following code:

ImageToggleButton {
                    id: beerTog
                    imageSourceChecked: "asset:///images/Yes_Tog.png"
                    imageSourceDefault: "asset:///images/No_Tog.png"
                    imageSourcePressedChecked: "asset:///images/Yes_TogTouch.png"
                    imageSourcePressedUnchecked: "asset:///images/No_TogTouch.png"
                    onCheckedChanged: {
 
                    }
 
                }

Yes_Tog.png:

image

No_Tog.png:

image

Yes_TogTouch.png:

image

No_TogTouch.png:

image

This will kind of mimic the native ToggleButton on/off switch, only without the fancy sliding animation. However, you don't have to mimic the Native look like I did, so you can create a switch that matches the style of your app or game. The ImageToggleButton feature allows you to create you toggle switches with any 4 image states for things such as on/off, yes/no, high/low, up/down, etc.

Next I want my ImageToggleButton to control an Toast. A toast in a temporary dialog box that shows for a few seconds. These are typically used to show brief pieces of info.  Here I have two toasts to pop up based off the user's answer to the toggle switch. There are a few steps to setup the Toast:

First in the .pro file:

LIBS += -lbbsystem

Add the following to the ccp file where your UI is created:

using namespace bb::system;

And in register a custom class in your UI function. So for instance my UI function looks like the following:

ApplicationUI::ApplicationUI(bb::cascades::Application *app)
: QObject(app)
{
    qmlRegisterType<SystemToast>("my.systemToasts",1,0,"SystemToast");
    // 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);
    qml->setContextProperty("mycontextprop", this);
 
    // create root object for the UI
    AbstractPane *root = qml->createRootObject();
    // set created root object as a scene
    app->setScene(root);
}

Where qmlRegisterType<SystemToast>("my.systemToasts",1,0,"SystemToast"); defines my custom class for the Toast.

Next in the header file be sure to include the SystemToast:

#include <bb/system/SystemToast>

Now in the QML I want to use the Toast I declare import my.systemToasts 1.0 at the top under import bb.cascades 1.0. So I can now have SystemToast as an attachedObject:

    attachedObjects: [
 
        SystemToast {
            id: youngToast
            body: "You are too young to drink!"
 
        },
        SystemToast {
            id: cheersToast
            body: "Cheers!"
 
        }
    ]

Then to call these toasts we call them through some JavaScript inside of the onCheckedChanged signal in the ImageToggleButton:

 onCheckedChanged: {
                        if (beerTog.checked == true) {
                            beerImg.imageSource = "asset:///images/Yes_Beer.png";
                            cheersToast.show();
                        } else {
                            beerImg.imageSource = "asset:///images/No_Beer.png";
                            youngToast.show();
                        }
 
                    }

Your app should now behave as screenshot in top of this blog. Just for good measure I have included the full main.qml, applicationui.cpp and applicationui.hpp (applicationui files are auto generated in projects by Cascades 10.1 Beta 1, previous editions of Cascades created similar files called the app name .cpp and .hpp) at the end of this post.

-Brian

P.S. If any one is interested I will send you the .ai files of the images for the toggles, I think I did a pretty good job tracing the ToggleButton images and match the gradients of the gray and blue.

main.qml:

import bb.cascades 1.0
import my.systemToasts 1.0
 
Page {
 
    Container {
        layout: DockLayout {
 
        }
        ImageView {
            imageSource: "asset:///images/background-img.png"
 
        }
        Container {
            verticalAlignment: VerticalAlignment.Center
            horizontalAlignment: HorizontalAlignment.Center
            ImageView {
                id: beerImg
                imageSource: "asset:///images/No_Beer.png"
                verticalAlignment: VerticalAlignment.Center
                horizontalAlignment: HorizontalAlignment.Center
 
            }
            Container {
                layout: StackLayout {
                    orientation: LayoutOrientation.LeftToRight
 
                }
                Label {
                    text: "Over 21? "
                    verticalAlignment: VerticalAlignment.Center
                }
                ImageToggleButton {
                    id: beerTog
                    imageSourceChecked: "asset:///images/Yes_Tog.png"
                    imageSourceDefault: "asset:///images/No_Tog.png"
                    imageSourcePressedChecked: "asset:///images/Yes_TogTouch.png"
                    imageSourcePressedUnchecked: "asset:///images/No_TogTouch.png"
                    onCheckedChanged: {
                        if (beerTog.checked == true) {
                            beerImg.imageSource = "asset:///images/Yes_Beer.png";
                            cheersToast.show();
                        } else {
                            beerImg.imageSource = "asset:///images/No_Beer.png";
                            youngToast.show();
                        }
 
                    }
 
                }
            }
        }
 
    }
    attachedObjects: [
 
        SystemToast {
            id: youngToast
            body: "You are too young to drink!"
 
        },
        SystemToast {
            id: cheersToast
            body: "Cheers!"
 
        }
    ]
}
 
 

applicationui.cpp

#include "applicationui.hpp"
 
#include <bb/cascades/Application>
#include <bb/cascades/QmlDocument>
#include <bb/cascades/AbstractPane>
 
using namespace bb::cascades;
using namespace bb::system;
 
ApplicationUI::ApplicationUI(bb::cascades::Application *app)
: QObject(app)
{
    qmlRegisterType<SystemToast>("my.systemToasts",1,0,"SystemToast");
    // 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);
    qml->setContextProperty("mycontextprop", this);
 
    // create root object for the UI
    AbstractPane *root = qml->createRootObject();
    // set created root object as a scene
    app->setScene(root);
}
 
 

applicationui.hpp

#ifndef ApplicationUI_HPP_
#define ApplicationUI_HPP_
 
#include 
#include <bb/system/SystemToast>
 
namespace bb { namespace cascades { class Application; }}
 
/*!
 * @brief Application pane object
 *
 *Use this object to create and init app UI, to create context objects, to register the new meta types etc.
 */
class ApplicationUI : public QObject
{
    Q_OBJECT
public:
    ApplicationUI(bb::cascades::Application *app);
    virtual ~ApplicationUI() {}
 
};
 
 
#endif /* ApplicationUI_HPP_ */