We may earn a commission for purchases using our links. Learn more.

One of the more overlooked additions to 10.3 in Cascades is the new layout called GridLayout. While it is not that impressive of a feature it is definitely a welcomed addition to Cascades, especially for any developers who have attempted to create a grid layout on their own. Since there isn’t much to show with GridLayout, I have also themed my grid into a World Cup Bingo Card with some JavaScript to make it a bit more interesting.

First, let’s take a look at GridLayout. Much like the other layouts (Stack, Dock, Absolute) you’ll define it as a “layout:” within a Container. Inside the GridLayout the only parameter is columnCount. This parameter does exactly what it sounds like, sets the number of columns. For example:

    Container {
        layout: GridLayout {
            columnCount: 5
        }

    }

For a Bingo card we need 5 columns, so the columnCount is set to 5. From here each defined parent component will represent a “cell” in the grid and will be placed next to each other from left to right until the columnCount is reached and then it will start a new row. So for instance a Label will be considered a component and so will a Container. However any children inside that Container won’t apply to the columnCount of the GridLayout. So consider the following code and QML preview:

Notice how since the two Labels (2 and 3) are inside of a Container they are contained within a single cell within the GridLayout. For my Bingo Card example, to help keep myself organized I find it best to use custom components in conjunction with GridLayout. I created a custom component in BingoTile.qml and each cell will be made up of the component BingoTile. Now my GridLayout would look something like the following:

    Container {
        layout: GridLayout {
            columnCount: 5
        }
            BingoTile {
                id: tileB1
                tileLabel: ""
            }
            BingoTile {
                id: tileB2
                tileLabel: ""
            }
            BingoTile {
                id: tileB3
                tileLabel: ""
            }
            BingoTile {
                id: tileB4
                tileLabel: ""
            }
            BingoTile {
                id: tileB5
                tileLabel: ""
            }
            BingoTile {
                id: tileI1
                tileLabel: ""
            }
           // And so on for tile I2 through O5
    }

That’s about it for GridLayout. No other options available. This is disappointing because I was hoping to have a bit more customization much like a table in HTML where you can set cells to span over multiple columns or rows. Additionally, I was hoping for the ability to have border decoration and cell padding and spacing (again more features from basic HTML tables). If you take a look at the source code you’ll see that in my custom component of BingoTile.qml I mimic borders for this example. So while it is not an easily set parameter it is definitely possible to do in GridLayout.

Now to make this GridLayout sample more interesting and themed to the World Cup, I’ve randomly generated what goes into each BingoTile using a couple JavaScript functions. First I have a switch function that contains all the “soccer” (football for the rest of the world) events I could think of, which was 33 different events. And that function looks like:

function wordSwitch(a) {
    var b;
    switch (a) {
    case 1:
        b = "goal";
        break;
    case 2:
        b = "corner kick";
        break;
    case 3:
        b = "foul";
        break;
//...
    case 32:
        b = "ghost goal";
        break;
    case 33:
        b = "advantage foul";
        break;

    }
    return (b);
}

Next I have a function that creates an array of 24 unique numbers between 1 and 33 because a Bingo card has 25 tiles with 1 free space. And I did not want any two tiles on the Bingo card to be the same. The last part of this function runs each of my 24 unique numbers in the array through the switch function and applies them to each of my BingoTile’s tileLabel. And that looks like:

function makeCard() {
    var arr = [];
    while (arr.length < 24) {
        var randomnumber = Math.ceil(Math.random() * 33);
        var found = false;
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] == randomnumber) {
                found = true;
                break;
            }
        }
        if (!found)
            arr[arr.length] = randomnumber;
    }
    tileB1.tileLabel = wordSwitch(arr[0]);
    tileB2.tileLabel = wordSwitch(arr[1]);
    tileB3.tileLabel = wordSwitch(arr[2]);
    tileB4.tileLabel = wordSwitch(arr[3]);
// etc for B5 through O3
    tileO4.tileLabel = wordSwitch(arr[22]);
    tileO5.tileLabel = wordSwitch(arr[23]);
    console.log(arr); 
//console log just to see the array

}

The makeCard() function runs each time the app is opened, this is done by doing the following:

import bb.cascades 1.3
import "functions.js" as MyFunctions

Page {
//...
    onCreationCompleted: {
        MyFunctions.makeCard();
    }
}

 Additionally I have added an application menu so you can generate a new card by swiping down from the top and triggering the “New Card” action.

If you check out the source code I’ve posted to github below, you’ll see I have added a few other features such a TapHandler on each BingoTile to change the background from white to green when tapped. And there are a few other features thrown in. With a little decoration and a few more features, this could be a "real" app. Feel free to check out the source code and for any non-coders out there I have attached the .bar file too if you want to load up the Bingo card and play along while watching the last two games of the World Cup this weekend.

Read more