One Button/Multiple Outputs and One Output/Multiple Buttons

Elements/Components Used:

TextField, Label, Button

BlackBerry 10 Cascades Signals Slots

This post will only contain QML elements and JavaScript functions (no C++ required).

Items such as Labels, Dropdown, textField, Button, etc. in QML follow a philosophy called "Signal/Slots." A signal (ex. onClicked inside of a Button) can change the parameters of slot (ex. text of a label). This example will show some basic features of one button controlling multiple things and multiple buttons controlling the same thing... with this philosophy the possibilities of Signal/Slots are endless.

To illustrate this I will use a simple UI:

import bb.cascades 1.0
Page {
    content: Container {
        Label {
            text: qsTr("Enter the number of items purchased: ")
        }
        TextField {
            id: in1
            objectName: "in1"
        }
        Label {
            text: qsTr("Enter the price per item ($):")
        }
        TextField {
            id: in2
            objectName: "in2"
        }
        Button {
            id: button
            objectName: "button"
            text: "Compute"
            onClicked: {
            }
        }
        Label {
            id: total
            objectName: "total"
            text: "Final bill, including 5% tax, is $____"
        }
    }
}

Now I will use inline JavaScript in the onClicked: {} of the Button

onClicked: {total.text = "Final bill, including 5% tax, is $" + (in1.text*in2.text+(in1.text*in2.text*0.05));}

Where here I have the onClicked of the button tell the Label with with id "total" to now be everything between the = and ;.  So this is one signal changing the attribute of one slot.  It is possible to have one signal change many slots or a single slot be changed by many signals. Or similarly, many buttons all tied to one output.

One Button/Multiple Outputs

Say we wanted to add two new features to the items/price example. Feature 1: keep a running list of the previous 3 calculations.  Feature 2: if the result of the computation is larger than 100, make the text bold.  Building on my previous code again, let's add more JavaScript to the onClicked {} of the Button.

onClicked: {
                previous3.text = previous2.text;
                previous2.text = previous1.text;
                previous1.text = total.text;
                var pretotal = in1.text * in2.text + in1.text * in2.text * 0.07;
                if (pretotal > 100) {
                    total.textStyle.fontWeight = FontWeight.Bold;
                    total.text = "Final bill, including 5% tax, is $"
+ (in1.text * in2.text + (in1.text * in2.text * 0.05));
                } else {
                    total.textStyle.fontWeight = FontWeight.Normal;
                    total.text = "Final bill, including 5% tax, is $"
+ (in1.text * in2.text + (in1.text * in2.text * 0.05)); }

Feature 1: The "previousX" are new labels added to the bottom of the QML. What the three lines of code are say is make previous3 what was in previous2, then make previous2 what was in previous1 and finally make previous1 what was in total.

Feature 2: This is accomplished by adding an if/else.  First we create a variable (var) called "subtotal" that computes the total.  The condition then tests whether or not "subtotal" is above 100.  If it is it tells the textStyle to be Bold.  But if its under 100 the textStyle should be Normal.

Also I included the total.text output in the if/else statement to show that multiple things can be outputted from the if/else.  However they can both be removed and have text.total =... after the if/else (just once).

One Output/Multiple Buttons

Say we changed our button from having text as "Compute" to "Compute 5%" and created another button (button2) with text as "Compute 7%".  We can tie both of these buttons to the same "total" label.  To do so, the first button onClicked remains the same and the second button will change for the correct wording/computation:

onClicked: {total.text = "Final bill, including 7% tax, is $" + (in1.text*in2.text+(in1.text*in2.text*0.07));}

Now if you click the the first button the program will compute the total with 5% tax and the second will compute it with 7% tax.

And of course you can tie both of the examples together to get one button controlling many things and many things controlled by a single click of a button.

Enjoy.

-Brian

Full Code:

import bb.cascades 1.0

Page {
    content: Container {
        Label {
            text: qsTr("Enter the number of items purchased: ")
        }
        TextField {
            id: in1
            objectName: "in1"
        }
        Label {
            text: qsTr("Enter the price per item ($):")
        }
        TextField {
            id: in2
            objectName: "in2"
        }
        Button {
            id: button
            objectName: "button"
            text: "Compute 5%"
            onClicked: {
                previous3.text = previous2.text;
                previous2.text = previous1.text;
                previous1.text = total.text;
                var pretotal = (in1.text * in2.text + (in1.text * in2.text * 0.05));
                if (pretotal > 100) {
                   total.textStyle.fontWeight = FontWeight.Bold;
                    total.text = "Final bill, including 5% tax, is $"
+ (in1.text * in2.text + in1.text * (in2.text * 0.05));
                } else {
                    total.textStyle.fontWeight = FontWeight.Normal;
                    total.text = "Final bill, including 5% tax, is $"
+ (in1.text * in2.text + in1.text * (in2.text * 0.05));
                }
            }
        }
        Button {
            id: button2
            objectName: "button2"
            text: "Compute 7%"
            onClicked: {
                previous3.text = previous2.text;
                previous2.text = previous1.text;
                previous1.text = total.text;
                var pretotal = in1.text * in2.text + in1.text * in2.text * 0.07;
                if (pretotal > 100) {
                    total.textStyle.fontWeight = FontWeight.Bold;
                    total.text = "Final bill, including 7% tax, is $"
+ (in1.text * in2.text + (in1.text * in2.text * 0.07));
                } else {
                    total.textStyle.fontWeight = FontWeight.Normal;
                    total.text = "Final bill, including 7% tax, is $"
+ (in1.text * in2.text + (in1.text * in2.text * 0.07));
                }
            }
        }
        Label {
            id: total
            objectName: "total"
            text: ""
           
        }
        Label {
            id: previous1
            objectName: "previous1"
            text: ""

        }
        Label {
            id: previous2
            objectName: "previous2"
            text: ""
        }
        Label {
            id: previous3
            objectName: "previous3"
            text: ""
        }
    }
}