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.
- More information / Download World Cup Bingo Sample code from Github
- Download World Cup Bingo .bar file (10.3 required)
Read more
BlackBerry 10 device simulators updated to 10.3.1.2072
A little something for BlackBerry developers. If you head over to the BlackBerry developer site, you'll find a new batch of device simulators available for download. The last release shows them as running v10.3.1.2072 which should help with testing out any apps you're working on. As always, they're available for Window, Mac and Linux via VMWare images. There is no notable changes or...
BlackBerry OS 10.3.1.1949 device simulator now available
Just a little bit of a heads up for any developers (and those who just like to play around) who might not have spotted the update as of yet. You can now download the latest device simulator from the BlackBerry website, which sits at OS 10.3.1.1949. Keep in mind, if you plan on giving it a look you will need some VMWare tools in order to run it all but you can find the full details on...
Watch the application infrastructure for BES12 webcast
If you missed out on the application infrastructure for BES12 webcast on December 4th, you can now catch the replay of the event on your own time. We'll review the mobile app infrastructure built into BES 12 including how corporate systems can minimize risk when opening access to apps outside their firewall, and ensure data is secure through its journey from inside the corporate...
Application Infrastructure for BES 12 webcast
Creating apps for Enterprise customers can keep a developer busy but when doing so corporate data and systems need to be carefully managed. If you're building apps for BES12 customers, BlackBerry is hosting an application infrastructure for BES12 webcast on December 4, 2014, at 2 pm – 3 pm EST to help educate corporate app developers about best practices. We'll review the mobile...