Weekend Coder – Three types of menus

By Brian Scheirer on 24 Nov 2013 02:56 pm EST
5
loading...
13
loading...
42
loading...

Love it or hate it, BlackBerry 10 devices no longer have the “BlackBerry menu” button we were all familiar with on legacy devices. That is not to say there are no longer menus in BlackBerry apps, in fact developers have three types of menus at their disposal. Let’s take a look at each and discuss the use case for each. Also I encourage non developers to read this one to learn where developers are putting menus in their apps.

Application Menu

The application menu, also known as the top bezel menu, contains up to five actions. This menu is accessed when the user swipes down from the top bezel of the device. It is suggested to use this menu for less commonly used features that apply to the whole app. I typically put things like the settings and help pages in this menu. I have found that many users don't know the application menu exists so be mindful to not put any core app functions in this menu.

Here’s quick code snippet for an application menu:

Menu.definition: MenuDefinition { //Define Actions in the application menu actions: [ ActionItem { title: "Help" imageSource: "asset:///images/ic_help.png" onTriggered: { //Have Help Action do something! } }, ActionItem { title: "Info" imageSource: "asset:///images/ic_info.png" onTriggered: { //Have Info Action do something! } }, ActionItem { title: "Settings" onTriggered: { //Have Settings Action do something! } } ] // end of actions list } // end of MenuDefinition

To create the application menu, define a MenuDefinition within the root of the Page of your main.qml. Within that MenuDefintion create an actions array containing ActionItems separated by commas. In the sample above you see I have defined 3 actions, however you can define up to 5 in the application menu. Each action has an image and a title. If no image is set, the default is a gear/sprocket image. Use the onTriggered signal to set what you'd like the action to perform when the user selects it.

Action Bar/Overflow Menu

The action bar is the black strip on the bottom of the screen that is widely used in many apps. The buttons on the action bar are known as actions and the three dots on the far right open the overflow menu. Developers have a lot of customization when it comes to this menu type. By that I mean, you can control the number of actions shown on the bar, have any number of actions in the overflow, have only the relevant actions on each page of the app, or have no action bar at all on some screens. Also, know that other elements can be on the action bar such as the back button when using NavigationPane and tabs when using TabbedPane.

Let’s take a look at some code:

actions: [ ActionItem { title: "BBM Action" imageSource: "asset:///images/ic_bbm.png" ActionBar.placement: ActionBarPlacement.OnBar onTriggered: { //BBM Actioning } }, ActionItem { title: "Craziness!" onTriggered: { } } ]

Actions that are on the action bar are defined as ActionItems within the actions array (say that 5 times fast). Just like the application menu, action array is defined within the root Page (no MenuDefinition this time). Once again they each have a title and image. Again if no image is set the default is the gear/sprocket image. onTriggered is again used for when the users selects the action. One thing to note for action bar actions is they will appear in the overflow menu by default. Change the action bar placement to "OnBar" to have the action appear on the action bar.

Context Menu

The context menu appears from the right side of the phone when a user presses and holds on a UI element. This menu is best used when there are actions specifically associated with that UI element. For instance, add one to an image to allow the user to save to their device or share via social.

Once again, here’s a code sample:

ImageView { //Define ImageView stuff contextActions: [ ActionSet { title: "Context Menu Title" subtitle: "Cool things this can do" ActionItem { title: "Add Awesomeness" imageSource: "asset:///images/ic_add.png" onTriggered: { //Make Add Awesomeness happen } } ActionItem { title: "Special Sauce" onTriggered: { } } ActionItem { title: "Flux Capacitor" imageSource: "asset:///images/ic_reset.png" onTriggered: { } } } // end of ActionSet ] // end of contextActions list }

Context menus are defined within a specific UI element, in the example above I have it in an ImageView. Inside the ImageView create a contextActions array and define an action set. This set has its own title and subtitle that will appear when the context menu is fully opened. From there define action items like before, but note there are no commas separating each ActionItem.

So as you see above, not only are there still menus in BlackBerry 10 apps but each type has specific use cases. As developers incorporate these menus into their apps, users will be more familiar with them. And soon users will expect all apps to have them. So if you are developer, be sure to add these menus into your apps and if you are just a BlackBerry user maybe you learned a bit about where the menus are in apps.

Reader comments

Weekend Coder – Three types of menus

19 Comments

Even though programming / coding is way beyond me, I find these insights into it enjoyable. Thank you.

Sent from my iPuh-lease-as-IF

Agreed. Always a good learning opportunity. I'd like to write apps if I had the time...

Posted via Z10 on the best touchscreen keyboard.

So what is the menu on the left called, the one that has the Bookmarks and History tabs in the Browser and the content filters on CB10?

Also, not a developer, just curious.

Posted via CB10

That one's the tab overflow menu. Its not really a normal menu, but its what you get if your app has too many tabs to fit along the bottom of the screen.

Can someone make an app that teaches you how to make an app?

Posted via Z10 STL100-3 using CB10. Fido, Toronto.

Really nice post...i'm not a programmer but i enjoy knowing a bit of the technical details behind what i use....great job