Visual Connection (also, dynamic bbUI coding).

A few weeks ago, early on a quiet Sunday morning, I felt the familiar buzz in my pocket that means someone had posted a comment in one of my BBM groups. With an ease born of inestimable hours of experience, I whipped out my BlackBerry to mock the person who was wasting their weekend morning by being awake.

The mocking never actually happened; as I read the BBM group post from Brian, I decided that the idea was quite good, and worth discussion (Brian also lives 2 time zones over for me, so mocking him for being awake wouldn't have made much sense).

"Hey, my wife got this really cool game on her phone where you guess a word based on pictures. There isn't anything like that for BlackBerry, why don't we make one?"

We decided to make the BB10 version in Cascades (which is what Brian uses, because it's absolutely amazing for BlackBerry), and the PlayBook version in WebWorks (which is what I use, because it's not quite as amazing for BlackBerry as Cascades yet (but close), but is amazing in general). After over a week of intensive coding, development, and testing, Visual Connection was born.

//End fancy sentimental backstory.

I could go on about how cool Visual Connection is (because it is. It's awesome. To quote Trogdor, "Ohh... this is the best game I've ever played"), but that's really not that beneficial to anyone unless you haven't tried the game, in which case, you should head over to BlackBerry World and get it (Hypnotoad wants you to buy Visual Connection). So instead, I decided to briefly show how you can use bbUI to keep your code small, by creating a template and loading elements with JavaScript. This is the method used in Visual Connection to stop the app from being huge - if there was a seperate .html document for each level, that would be 300 pages, soon to be 400. If you want to follow along, I've included a very simple sample at the end of this post that you can download and test in Ripple.

1. First, get slightly familiar with bbUI. If you've never heard of bbUI, check out https://github.com/blackberry/bbUI.js.

2. Next, create your template. In the example, the template is called screen.html. You'll use bb.pushScreen('page',''id') to load it.

3. Write the JavaScript functions that will load different things based on the bb.pushScreen ID. In the example, this is what it looks like:

if (id == 'page1') element.getElementById('pagetext').innerHTML = "You loaded screen.html with a page ID of 'page1'. Yay!"
if (id == 'page2') element.getElementById('pagetext').innerHTML = "This time, you loaded screen.html with a page ID of 'page2'. See how it's different?"

(because we're using onscreenready, we use element instead of document).

4. Insert the javascript code into the onscreenready function of the bbUI index.html.

5. Run your app!

As you can see, it's a fairly simple process that can be used to help keep the size of your app more manageable.

Download the dynamic-bbUI sample

Check out Visual Connection in App World

If you want to read about the Cascades version of Visual Connection, check out Brian's BBCascades blog post.

Shane Cridlebaugh

Co-founder and legal nay-sayer of OSBB. Owner of SCrApps Application Development, WebWorks aficionado, Open Source contributor. SCrid2000 on most blogs. I build awesome BlackBerry apps when I'm not doing legal work or spending time with my wife and two boys.


Follow me on Twitter - @GShaneC

Check out my apps in BlackBerry World

Website: SCrApps.org

Leave your comments

Post comment as a guest

0
  • No comments found
Subscribe to the official OSBB BBM Channel!

osbbchannelQR

C00013E89

Back to top