Keyboard shortcuts are the real reason why hardware keyboard phones still exist! Since I leave the editorial pieces to other writers, I won’t rant about how much I love keyboard shortcuts. Instead I’ll do what I do best and show all you fine people how to add them to your Cascades apps.

Before I get started and before anyone asks, no you can’t open the Z10 keyboard and use keyboard shortcuts, these are just for Q5 and Q10 users. On that same note the Z10 will ignore shortcut so you don’t need to repackage without shortcuts for your app to work on the Z10.

There are two main ways to define shortcuts. The shortcut can either be a “System Shortcut” or a “Custom Shortcut.” System shortcuts a list of shortcuts that the user may be familiar with based on using default apps like the Hub. For instance if you press “S” in the Hub a search bar will appear. So if your app has similar functionality you can call the system shortcut for search and when the user presses “S” you can have your search bar appear. Alternatively you could define a custom shortcut for they key “S” to do the same thing. So you may be asking yourself why use a system shortcut. The reason is system shortcuts are localized. If the user sets their language to Spanish the system shortcut for search is “B”. A full list of system shortcuts with their localized letters can be found here.

Next, I like to think of shortcuts being able to be defined in two main places, on an action and not on an action. I’d like to show you an example of each. I’ll use a mix of system and custom shortcuts to show each of those as well. Let’s first look at a system shortcut on an action, consider the following code:

import bb.cascades 1.0 Page {     //...     actions: [         ActionItem {             id: action1             title: "Search"             onTriggered: {                 //call function to open your search             }             shortcuts: [                 SystemShortcut {                     type: SystemShortcuts.Search                     onTriggered: {                         //call function to open your search                     }                 }             ]         }     ] }

This code will create an action in the overflow menu. That action can be called by opening the overflow menu and then pressing the action called “Search.” Or it can be accessed by pressing the “S” key. One neat feature you get for free when using action in the overflow menu is shortcuts automatically show in the top right corner of the action.

Looking back at the code above, realize you’ll need to put your function(s) in two signals for them both to work. It needs to be in the action itself and in the shortcut. Both of these are onTriggered signals.

Now let’s look at an example of using shortcuts that are not tied to an action. I think a great way to show this is to have a shortcut do the same thing as a Button. So the shortcut isn’t necessarily having the system press the button for you, rather you define a shortcut that does the same thing as a Button. Again let’s look at some code:

import bb.cascades 1.0 Page {     Container {         Button {             text: "Help"             onClicked: {                 mySheet.open();             }         }     }     attachedObjects: [         Sheet {             id: mySheet             //...         }     ]     shortcuts: [         Shortcut {             key: "H"             onTriggered: {                 mySheet.open();             }         }     ] }  

This code above has a Button that opens a Sheet. Also there a custom shortcut defined within main Page that defines the key “H” to open the same sheet. Custom shortcuts are limited to single keys, you can have “Shift+H” or “Alt+H” as well but not “K+H”. Additionally you can have “Enter” as shortcut. Another thing to consider when using custom shortcuts you should let your users know what they are by putting as list of them somewhere in your app. Say for example in your help Sheet:

Sheet {     id: mySheet     Page {         Container {             Label {                 text: "Press the 'H' key to open the Help.\n                 Press the 'Enter' key to close Help."                 multiline: true             }             Button {                 text: "close"                 onClicked: {                     mySheet.close();                 }             }                  }         shortcuts: [             Shortcut {                 key: "Enter"                 onTriggered: {                     mySheet.close();                 }             }         ]     } }

One last thing I’d like to bring up about shortcuts is there are a few built in for you. These are called Control Shortcuts. Much like system shortcuts, control shortcuts perform user expected actions but don’t need to be defined in any way. Say for instance if a ScrollView or ListView is the element in focus, if key “T” is pressed the ScollView/ListView will be returned to the top. Same can be done with “B” for bottom. There are few other instances of these listed in the official docs, as well as you may notice some others when playing around on your own.

Now go have fun adding shortcuts to your own apps to make hardware keyboard BlackBerry phones "better" than their full touch counterparts.

Read more