DEVELOPERS BLOG

The Improved ActionBar in 10.3

The ActionBar has seen many upgrades in the most recent 10.3 gold release of the BlackBerry 10 native SDK. Here’s a list of all the improvements brought to you with the gold release of the ActionBar.

Light-Themed ActionBar

Previously, the ActionBar always displayed a dark theme (white images and text on a dark background) regardless of the global theme settings of your application in the Application tab of the bar-descriptor.xml file. Now in the 10.3 release, the ActionBar will follow your global application theme setting, i.e. for a bright-themed application the ActionBar will now have a white background with dark images and text.

Action Bar 1

Text Label Support for All Form Factors

Prior to the 10.3 release, for screen space optimization on a BlackBerry Q10, you could only specify an image for ActionItems on the ActionBar with no text labels. In other words, the platform would simply ignore the “title” property of the ActionItem (if specified) based the form factor. This is no longer the case with the 10.3 release. Now, you are given the control on whether or not to display a label on your ActionItems.

Persistent ActionBar with VKB

We have now added a new API for all touch devices, the ActionBarFollowKeyboardPolicy that allows you to choose either to keep showing or to hide the ActionBar when the virtual keyboard (VKB) is displayed for user input. Prior to this release, the VKB covered the ActionBar and the user had to finish inputting text before they could take any further actions on the current page. Now, with the newly added API, the control is given to you. You can either tell the ActionBar to hide, to keep showing (right on top of the VKB) or to only show in portrait mode when the VKB is called for user input. If not specified, the default is for the ActionBar to follow the VKB when it appears.
QML code:

Page {        
            id: page
            actionBarFollowKeyboardPolicy: ActionBarFollowKeyboardPolicy.Portrait
            …
 }  

Action Bar 2

TextInputActionItem</h2
In the 10.3 Gold release, we have also added a new subclass to the AbstractActionItem, the TextInputActionItem. This action item is a text input action item that you can use to collect input from the user input prior to performing an action. The most common use case for this class is for e.g. performing a user search.

Action Bar 3

Compact ActionBar

The ActionBar ChromeVisiblity API now offers you the option to display a compact version of your ActionBar through the new enum value “Compact”. If set to Compact, the ActionBar is reduced to show only the following items if on the ActionBar: 1) the tab menu icon, 2) the overflow action menu icon and 3) the signature action item.

Here’s the QML code that shows how to set the chrome visibility of the action bar on a given page:

        Page {        
            id: page
            actionBarVisibility:ChromeVisibility.Compact
            …
 } 

Action Bar 4

Signature ActionItems and ActionItem Colorization

Finally, we have added the new backgroundColor property to the AbstractActionItem API (and hence all ActionItems that inherit from it). This attribute works together with the also newly added Signature attribute of the ActionBarPlacement API. Together, the two attributes allow you to place emphasis on ActionItems that are most important to your user on a given screen.
Here’s how the ActionItem looks like, if you set the ActionBarPlacement to Signature (which also places it on the ActionBar) and give it a “Red” background color:

And here is the QML implementation:

   actions: [
        ActionItem {
            ActionBar.placement: ActionBarPlacement.Signature
            backgroundColor:Color.Red
        },
 …
    ]

Action Bar 5

I hope you will find the above newly added features of the ActionBar as useful and as easy to use as I do. Let me know if you have any questions in the comments’ section below. I’ll be happy to answer those…
@SamarAbdelsayed

About sabdelsayed