BlackBerry WebWorks 2.2 Released!

HTML5

1

Since the release of BlackBerry WebWorks SDK version 2.1, we’ve been working hard on bringing support for the upcoming BlackBerry Classic to our web development community. Let’s take a look at the new features we’re adding in WebWorks 2.2.

Classic Trackpad

The biggest thing the BlackBerry device software version 10.3.1 brings is support for the trackpad and menu belt of keys that are coming with the Classic device. The trackpad allows a user to navigate through the application and click on active elements. By default, your WebWorks application will present a cursor for user navigation, similar to a mouse pointer.

If your application has a well-defined structure with clear focusable elements, you can consider updating your application to take advantage of spatial navigation. This is a more intuitive mode that will highlight focused items, and navigate automatically between focusable items based on trackpad movements.

You can even manually define the navigation flow of your application if you want complete control. Using CSS properties, you can define which element is NEXT to receive focus in a given navigation direction. Please see our documentation for more on spatial navigation.

Navigation Keys

In terms of the navigation keys, you cannot as a developer override the behavior of the Send and End keys. However, you can work with the Menu and Back key. The Menu key, by default, will not do anything in your WebWorks application, so you can customize it as needed. However, it is strongly recommended to leverage it in a way the user will expect – i.e., triggering a menu component of some kind.

By default, the Back button will minimize your application to the active tile homescreen. If you override the button, it is recommended that you use it to reverse a logical “navigation” in your application, like moving back in a screen stack.

In order to work with the navigation keys, you’ll need to include the com.blackberry.app plugin in your application. Then all you need to do is add event listeners for the onMenuButton or onBackButton events, and you’re good to go. As always, ensure that you wait for the deviceready event before attempting to add these listeners. See our documentation for more.

document.addEventListener("deviceready", function () {
    document.addEventListener('menubutton', onMenuButton);
    document.addEventListener('backbutton', onBackButton);
});

Passport Touch-Enabled Keyboard

A while back, we posted a plugin that allows you to take advantage of the events generated from the BlackBerry Passport touch-enabled keyboard. We have since updated this plugin to provide a greater amount of functionality and support for multiple touchpoints.

If you wish to take advantage of the specific capabilities of the touch-enabled keyboard, you must include the com.blackberry.input plugin. Then you can add an event listener for the touchenabledkeyboard event. When the event fires, you’ll receive an array of all touchpoints along with their positions. For more information, please see our docs.

Of course, to test all of this, you’ll want to download the latest simulator build to get started. In our docs you will find details on how to mimic all the navigation actions with the simulator. Also, keep your eyes on the GitHub Samples repository for a sample application coming soon.

So now it’s time to prepare for the pending launch of the BlackBerry Classic and add navigation and trackpad support to your apps. You can get started right now by downloading the new SDK here. We’d love to hear feedback on the new features in the forums or on Twitter at @BlackBerryDev!


Please note it may take over 24 hours for the Autoloaders to appear and function

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.

Join the conversation

Show comments Hide comments
+ -
blog comments powered by Disqus