Targeting the BlackBerry Q10 with BlackBerry WebWorks

The excitement of last week’s launch of BlackBerry 10 still hasn’t worn off around these parts. We feel it in the air. We are at the brink of something new in the world of mobile computing. As you know, we here at BlackBerry have been working tirelessly to get to this point, the global launch of BlackBerry 10. But the launch of BlackBerry 10 is just the beginning. There is still so much more to do, and the team here is already starting on the next steps. The first of these is adding support for the BlackBerry Q10 and its physical keyboard into our BlackBerry WebWorks SDK and the Ripple Emulator.

Luckily, from a WebWorks perspective, everything you need is already on the BlackBerry 10 operating system. The two major areas where the BlackBerry Q10 and the BlackBerry Z10 are the physical keyboard and the screen size.

For the physical keyboard, the system takes care of handling the input for you and piping it into your app just as if it came from the virtual keyboard on a BlackBerry Z10. However, the traditional BlackBerry user is also very used to having actions be triggerable from the keyboard when not actually performing text input. Think of clicking ‘r’ in the Inbox on a BlackBerry OS device in order to trigger a Reply action. If you wish to provide your user keyboard shortcuts within your application, you can use the standard HTML5 onkeypress event. Set a listener on the appropriate HTML elements, process the key stroke and trigger the action.

In terms of the screen size, HTML5 standard approaches in responsive design are more than adequate to allow you to layout the UI of your application appropriately in different screen resolutions. The major difference we have from a system perspective is related to some key User experience decisions made for the smaller screen size, and that the WebWorks platform handles for you. For example, the context menu on the BlackBerry Z10 automatically triggers an overflow UI if there are more than seven items in the menu. For the BlackBerry Q10 it will do this for four or more items. The BlackBerry Q10, due to its OLED display, also uses true black in some UI elements to be more efficient. These are just some examples, but I want to reiterate that all of this is supported out of the box by the web platform that is part of the latest BlackBerry 10 OS builds, so you will not actually see a BlackBerry WebWorks SDK refresh for BlackBerry Q10 support. There is a BlackBerry WebWorks refresh in the works to add a few new APIs, but we’ll talk about that soon in a different post.

What you will find is a refresh to Ripple to allow you to select the BlackBerry Z10 or the BlackBerry Q10 for emulation when targeting the BlackBerry 10 platform. This will allow you to emulate and test your layout against the different screen sizes of the devices and ensure your design will work for both devices. If you already have Ripple installed, you should see an update come in automatically. If you don’t already have Ripple you can get it here. Enjoy!

About Ken W

Ken is the Senior Product Manager for the WebWorks group at BlackBerry. He is responsible for WebWorks tooling and is heavily involved in the Open Source projects at github.com/blackberry and the Apache Cordova community. Ken has a particular interest in trying to bring the internal and external BlackBerry development communities closer together.

Inside BlackBerry Developers

The views expressed on any corporate or individual's personal website or any Twitter account are not necessarily those of BlackBerry. The user's Twitter account and/or personal website, any corporate website, or any comments contained on any of the foregoing have not been reviewed by BlackBerry and do not constitute an endorsement by BlackBerry.