Weekend Coder: Some 10.3 Action[Bar]

It’s been a few weeks since I’ve posted in the Weekend Coder series, and what a few weeks they’ve been when it comes to BlackBerry apps and development. Specifically, what does the Amazon partnership mean for native development? Obviously no one knows for sure but regardless of what the future holds, it won’t affect my passion for coding for BlackBerry 10. I plan to keep developing, in Cascades, because I enjoy it. And today I am going to share some of the new features 10.3 brings to the ActionBar.

The most obvious change to the ActionBar is the introduction of the signature action. Defining which action you’d like to be your signature action is as simple as defining the placement parameter.

ActionItem {
  ActionBar.placement: ActionBarPlacement.Signature
}

Once defined, as a developer you have the ability to stylize your signature action by colorizing the action. You can use any color you want, defined in either hex, rgb, or the default color names. Otherwise it will default to your primary color and by default the primary color is Sky Blue (#0092CC). Defining the color looks something like:

ActionItem {
  title: "CrackBerry"
  imageSource: "asset:///images/icon1.png"
  ActionBar.placement: ActionBarPlacement.Signature
  backgroundColor: Color.create("#FF3D05")
}

That code will produce a look similar to the main picture of this blog using hex to define the CrackBerry orange. Or using rgb, I create any color as well…

ActionItem {
  title:"Letters"
  imageSource:"asset:///images/icon1.png"
  ActionBar.placement:ActionBarPlacement.Signature
  backgroundColor:Color.create(0.96,0.37,0.06)
}

This definitely gives your BlackBerry 10 app a nice pop of color, and gives an opportunity to extend your brand/theme color scheme into the ActionBar.

Another drastic change to the ActionBar is the ability to have a text input area using TextInputActionItem. This action has many of the same properties as a TextField such as hintText, submitKey, and obviously text. So an example of TextInputActionItem with a blank field, keyboard set to numbers, submit key will say “Send”, and when “submitted” the text will replace a Label called label5 and change the text field back to blank:

TextInputActionItem {
  id: inputAction
  text: ""
  input.keyLayout: KeyLayout.Number
  input {
    submitKey: SubmitKey.Send
    onSubmitted: {
      label5.text = inputAction.text;
      inputAction.text = "";
    }
  }
}

This will produce something that looks like:

Also notice in the screenshot I left my “CB” signature action item in the code. It is not possible to have a signature action and a text input action at the same time. So the code will ignore the signature property and replace it as if it was defined “onBar”.

I’m not sure of the exact use case developers would use this new text input for, possibly for a chat client? Or possibly for a search bar? Either way, I am glad to see expanded functionality to the Cascades toolset.

The ActionBar has always been a main component of almost every native BlackBerry 10 app and with these new additions in 10.3 we are moving towards refinements of tools rather than getting features that are absolutely necessary to code. This is a great sign of the platform beginning to mature.  And in the coming weeks I plan to explore the many other maturing features of 10.3.