Deprecated: Non-static method Joomla\CMS\Application\SiteApplication::getMenu() should not be called statically in /home/berryinf/public_html/templates/gk_magazine/lib/framework/helper.layout.php on line 152

Deprecated: Non-static method Joomla\CMS\Application\CMSApplication::getMenu() should not be called statically in /home/berryinf/public_html/libraries/src/Application/SiteApplication.php on line 275

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

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


Leave your comments

Post comment as a guest


People in this conversation

Load Previous Comments
  • Guest (muneer ahmed)

    This Is Great Information For Students. This Article Is Very Helpful I Really Like This Blog Thanks. I Also Have Some Information Relevant For Online Dissertation Help.
    my gmail login

    Like 0 Short URL:
  • Guest (Jacksonjazz)

    If ye continue via foreign regarding craven wrists, hand abstention and carpal tunnel, buy certain concerning this Best Ergonomic Keyboards subsequently prioritize comfort therefore typing.

    Like 0 Short URL:
  • Guest (Johnson)

    I am very glad to read the post,it is very well written.You have done hard work in writing this post and i impressed your work. Thanks a lot
    heavy duty canvas tarpaulin

    Like 0 Short URL:
  • Guest (Fiona)

    I am really happy to see this I just visit your post directly from google and after visiting this post must want to bookmark in my personal blog list.
    rubber roofing services

    Like 0 Short URL:
  • Guest (daisy)

    I really like this. You have explained so much in all the website sections. I was on your website and reading your blog. You have shared very informative blog for everyone. Please keep update from your more blogs.
    garage shelving uk

    Like 0 Short URL:
  • Guest (aftab ali)

    By playing free opening machines, you can figure out how to control factors, which could conceivably lead you to accomplishment in a less demanding condition than customary gambling clubs. Betclic

    Like 0 Short URL:
  • Guest (emen)

    Surely this was the best comment of all time on blogs, I thought it was fantastic.
    lipstick packaging

    Like 0 Short URL:
  • Guest (aftab ali)

    This free clubhouse cash in a type of gambling club reward totally change the house edge for the player. trada casino

    Like 0 Short URL:
  • Guest (aanaa)

    So happy to read your is a great site no doubt.:)
    kseĀ board meetings

    Like 0 Short URL:
  • Guest (asme)

    A very nice and good post this. I really like it very much. Keep this quality of your work on articles going on and please
    invisalign treatment

    Like 0 Short URL:
Subscribe to the official OSBB BBM Channel!



Back to top