Swap Function in Containers

Elements/Components Used:

Container, Button, Label

image

 

There are quite a few built in functions in Cascades that come in handy when doing all kinds of apps. One that I recently discovered and found particularly useful is the swap() function. This function executes exactly as you would guess, it will swap the placement of two elements within a Container. The write up won’t be very long but I still felt it was “tutorial” worthy.

Much like most other features of Cascades there is mention of this function in the official documentation which can be found here: http://developer.blackberry.com/cascades/reference/bb__cascades__container.html#function-swap-indexa-indexb but the explanation is a bit light. Plus it is buried and without this write-up, you might have never found it.

As it says in the documentation swap(index A, indexB) will switch the position of indexA with indexB. The index of your elements (Label, Button, ProgressIndicator, etc) within your Container is the order in which they are defined in your Container starting with 0. Consider the following code:

    Container {
        id: myContainer
        Button {
            id: myButton
            text: "Button"
        }
        Label {
            text: qsTr("Hello World")
        }
    }

The Button is index 0 and the Label is index 1. So if we apply swap(0,1) to the onClicked signal within the Button like so:

    Container {
        id: myContainer
        Button {
            id: myButton
            text: "Button"
            onClicked: {
                myContainer.swap(0, 1)
            }
        }
        Label {
            text: qsTr("Hello World")
        }
    }

Then each time the user pressed the Button the Label and Button would swap places.

A good use case would be to randomize multiple elements to “shuffle” them around on the screen. To do so let’s use random values of the two swap indexes. These will be randomly generated with a bit more code to provide our “shuffling” effect. So consider this new set of code:


import bb.cascades 1.0

Page {
    Container {
        id: myContainer
        Button {
            id: myButton
            text: "SWAP!"
            onClicked: {
                for(var i=0;i<9;i++)
                {
                    var a = Math.floor((Math.random() * 2) + 1);
                    var b = Math.floor((Math.random() * 3) + 1);
                    var c = a+b;
                    myContainer.swap(a, c);   
                }
           
            }
        }
        Label {
            text: qsTr("Label 1")
        }
        Label {
            text: qsTr("Label 2")
        }
        Label {
            text: qsTr("Label 3")
        }
        Label {
            text: qsTr("Label 4")
        }
        Label {
            text: qsTr("Label 5")
        }
    }
}

Now each time the Button is pressed the while loop will run and should sufficiently randomize the order of your 5 Labels. This will give a nice "shuffling" effect we were going for. That's it for now, as always feel free to ask questions in the comments below.