Sunday, May 5, 2013

BB10 Signal's and slot's.

Signal and Slot mechanism replace listener concept in Android or Java development.
Yes they serve the same purpose!!

To know what Signal means, let us consider a button, and if a click event occurs on it, it is specified as Signal. So, it is a clicked() Signal.

Coming to Slot, considering the above button, if we are interested in writing some functionality on emitting a signal. Here comes Slot i.e to catch a signal we use slot, technically slot is a method which is called upon emission of signal. So, on emission of clicked() signal our slot method will be called.

Ok, I'll show you some sample out for a clear understanding.Check the output images below.




The first screenshot shows a button and label. When button is clicked I'm changing the text of label using signal and slot mechanism's.Code snippets are explained below.

Below is the QML file.

import bb.cascades 1.0

Page {
    Container {
        background: Color.White
        Button {
            objectName: "button"
            verticalAlignment: VerticalAlignment.Center
            horizontalAlignment: HorizontalAlignment.Left
            text: "Emit signal"
        } // end button
        
        Label {
            objectName: "label"
            text : "I'm a label"
            textStyle{
                color: Color.Black
            }
            horizontalAlignment: HorizontalAlignment.Right
        } // end label
    } // end container
}  // end page


Let us look into .hpp file

#include <QObject>
#include <bb/cascades/AbstractPane>
#include <bb/cascades/Application>
#include <bb/cascades/QmlDocument>
#include <bb/cascades/Page>
#include <bb/cascades/Button>
#include <bb/cascades/Label>

using namespace bb::cascades;

class SampleSig : public QObject {
    Q_OBJECT
public:
    SampleSig();
    virtual ~SampleSig();
    Button *btn;
    Label *label;

public slots:
    void buttonClickedSlot();
};

Here slots are separately declared under "public slots" and thus they gain a special identity. The methods which are defined under slots have a special affinity to register for a signal emission.

Now, let us see how we are connecting the signal's and slots. Below is .cpp file.

/*
 * SampleSig.cpp
 *
 *  Created on: 05-May-2013
 *      Author: Sree Harsha
 */

#include "SampleSig.h"

SampleSig::SampleSig(): QObject(Application::instance()){
    // 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:///signal.qml").parent(this);

    // create root object for the UI
    AbstractPane *root= qml->createRootObject<AbstractPane>();
    // set created root object as a scene
    Application *application = Application::instance();
    application->setScene(root);

    btn = root->findChild<Button*>("button");
    label = root->findChild<Label*>("label");

    //  connect button clicked to this objects buttonClcikedSlot
    connect(btn, SIGNAL(clicked()), this, SLOT(buttonClickedSlot()));
}

SampleSig::~SampleSig() {

}

void SampleSig::buttonClickedSlot() {
    label->setText("My slot is called !!");
}



In the last line of constructor, we can see the connect method is used to register the Slot method's with signal's.


connect(btn, SIGNAL(clicked()), this, SLOT(buttonClickedSlot()));


Zooming into the above line, it contain's 4 param's. 
  1. 1st Param, from which object signal is raised, in our case button.
  2. 2nd param, Signal method, here it is button clicked().
  3. 3rd param, which object's slot need to be connected.
  4. 4th param, which slot need to be raised on signal emission.
Totally, on click signal of button we are calling buttonClickedSlot() method of the class object.

Finally, in the slot I just changed the text  of the label.

We can register n number of slot's to a single signal.

Happy learning's :)

No comments:

Post a Comment