Weekend Coder: World Cup Bingo with GridLayout

By Brian Scheirer on 12 Jul 2014 03:30 pm EDT
2
loading...
0
loading...
38
loading...

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.

More information / Download World Cup Bingo Sample code from Github

Download World Cup Bingo .bar file (10.3 required)

Reader comments

Weekend Coder: World Cup Bingo with GridLayout

22 Comments

Joomla 3.0 was a big leap in mobile CMS. I can't wait for the Passport to really speed things up.

Carbon Fiber Z10 w/Leather Holster

Not a programmer, just wanted to read and see what I could learn. Funny hearing that from an app developer.

Frosty white Q10/10.2.1.3247

Touché lol.
That brought flashbacks of what developers were saying when they started abandoning BlackBerry.

Frosty white Q10/10.2.1.3247

We'll see.

Argentina lost 1990, 2006, 2010.
The most recent loss was the most devastating, 0:4.

They better come prepared.

Pasted via CB chen

This code looks just like Javascript. I will have to look more into developing on BB10. This is one of my goals anyway.

Posted via CB10

@Brian scheirer is it possible to have all your tutorials in a sort of repository for consultation

Posted via CB10

The bbcascades website is immensely helpful and definitely worth bookmarking

Posted via CB from my LE

Thanks for making this available, Brian, and for making it "publicly visible". Some might be inspired to put something together.

Pasted via CB chen

Apparently there is an official manual for creating BlackBerry software that is now free but the publishers mistakenly priced it, i expect most of you saw it the last couple of days.

Tapping and flicking on my Zed 10

Update the article is under apps in berryflow. Free Native BlackBerry 10 App Developer eBook For Download. If you swipe right in berryflow then tap all categories /apps. Then scroll down to article there is a download link. Hope it might be helpful to someone

Tapping and flicking on my Zed 10