Changes in bbUI.js, getting your Context Menus to work

Hello everyone, I’d like to share some recent changes that affect the way we work with bbUI.js.

I found out about it the hard way :) To be honest, I always download the Samples App from GitHub to show devs how amazing bbUI.js is in terms of performance for mobile. Lists fly, transitions are great, in some cases you can’t tell the app was built using HTML5. The biggest difference is that every time a screen pops out, it gets destroyed. When it needs to be displayed, bbUI.js creates it from scratch. Some people don’t like it, I’m ok with that, specially because it has methods to jump vertically to a specific place in a window (when you show a list for example).

So my plan was:
1) let’s download bbUI.js as usual
2) create an app using the /samples folder
3) and boom, right?
Nope! Wrong assumption, it was not working, then I got very upset:

Well, then I start researching, reading the forums and finally ask Tim Neil. He tells me: “read the change log.“. And it was right there! Turns out that the Samples App uses the famous BlackBerry 10 context menu (BlackBerry 10 allows for a press and hold context menu that is very similar to the action bar overflow menu), and it now has a different (more native) implementation after the latest bbUI.js release (0.9.6):

Learn how to implement context menus in your BlackBerry 10 application with bbUI.js.

And to get the Samples App (and Context Menus) to work properly, you have to:

1) Add <feature id="blackberry.ui.contextmenu" /> to your config.xml

2) Manually copy a folder to your WebWorks SDK location:

When using Context Menus for BlackBerry 10 you will need to include the WebWorks extension contained in the bbui folder (you can download here).

NOTE: This is only for BlackBerry 10 devices, and it is not needed for PlayBook BlackBerry 10 styling.

Installing the bbUI.js extension in your WebWorks installation is quite simple. You first locate your WebWorks installation folder. On Windows the default path is typically C:\Program Files\Research In Motion\BlackBerry 10 WebWorks SDK a.b.c.d. On a Mac the default path is typically \Macintosh HD\Developer\SDKs\Research In Motion\BlackBerry 10 WebWorks SDK a.b.c.d.

In this folder you will find a /Framework/ext folder. Simply copy and paste the /bbui folder into the SDK /ext folder (more details here). It will end up looking like the following:

That is all you gotta do.

After that, I redid the plan:

1) let’s download bbUI.js as usual
2) create an app using the /samples folder
3) and boom, nailed it.

Your Samples App and any other app using bbUI.js (including context menus) will work just fine.

Good luck everyone.

Wow. It's Quiet Here...

Be the first to start the conversation!

Leave a Reply:

Gravatar Image