Weekend Coder: Some 10.3 Action[Bar]

By Brian Scheirer on 21 Jun 2014 12:33 pm EDT

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 {

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.

Reader comments

Weekend Coder: Some 10.3 Action[Bar]


Thanks for that!! Didn't find much info on it in bbdev site... any idea on when we'll be able to post apps for 10.3 to bbworld?

Posted via CB10

I would imagine it won't be until after the Gold SDK is out. Plus doesn't really matter until the Passport comes out in September since very few devices (leaks) are currently running 10.3

Posted via CB10

Looks pretty sweet, I'm going to try learning cascades as soon as I've got more time on my hands work school and baby on the way means zero computer time for me :(

Via My z10 and CB10

Amazon stock jumped $10 after the announcement of their new phone and then declined $13 dollars by the end of Friday.


That's because after the excitement settled down everyone realized that the fire phone was gonna burn the mighty amazon.

Posted via CrackBerry App

This is all gibberish to me lol. I'm not a developer. But good job to those that dedicate their time for us

Posted via CB10

Am I the only one that thinks the CB logo looks awesome as a signature action? (And no Bla1ze/Kevin didn't pay me to say that... I think it is so cool looking... maybe it is just a nerdy developer thing...)

Nope, at the end of the day they are just like any other action (and not a tab) but with some style. Tabs got their own style update if you set your own primary color in the bar-descriptor.xml

Posted via CB10

It looks just perfect, probably because it's almost the same as the real CB logo. ;)

Too bad it's not the place where it needs to be on the future CB10.3 app.

Posted via CB10 on my Z30STA100-5/

Interesting. Not sure how I will use it my current app. I guess for the settings action.

But, I don't plan on updating to 10.3 until the majority of my users are updated.

Posted from my Z30 using CB10

Hi guys,
I'm interested in learning to program for native BlackBerry mobile phone platform. Does anyone knows of a good book for a new starter?

Posted via my BlackBerry Z10!

I have to try TextInputActionItem! I have been looking at 10.3, but haven't started coding for it because I'm waiting for gold SDK. Please bring more

Can devs choose to not use the oversized signature action button? I still see no reason for it to extend above the top of the bar other than to rip off one of the most annoying aspects of Android: Useless crap floating above my content.

Completely up to the developer, they can choose to only use OnBar or InOverflow (default) for their actions.

Posted via CB10

Nope. If you intend to use the signature action, then you can't do anything about its appearance. Either you stick with default actions or you create your own action bar from scratch.

I code in Momentics (eclipse based IDE) and run on one of my BlackBerry 10 devices (currently only have 10.3 on my Z10)

Posted via CB10

what do you recommend for designing. I'm already familiar with coding but getting a good picture of my app is what I need before coding.

I often mock up my screens in Adobe Illustrator. But also coding directly in QML with the real-time preview is just as easy.

Posted via CB10

If you are thinking about getting a rough idea of how the app would look like, placement of various UI components, etc., I would recommend taking a look at Balsamiq mockups. Pretty easy to get a mockup of the app and there is very little learning curve.

Posted via CB10

I don't know why, but on my z30 I can't read the inserted code samples in these articles... they are just too tiny to read and I can't pinch and zoom them either. it's a shame because these are really interesting articles.

Posted from my awesome Z30 :-D

Thanks for the great articles!

Regarding the Amazon store, a friendly solution for native developers would be to offer a full integration of the Qt5/Quick2 libraries into the Amazon store. This would be good for BlackBerry, good for Android apps and make the transition easy because BlackBerry developers can contine having fun with C++ and QML (and actually target more users than now...). Currently, Qt5 apps must embed the whole Qt libraries which makes the packages a little bit heavy.

Well, if BlackBerry want to stick to their decision while still maintaining a friendly relationship with their developers, that's definitely a solution. If they don't try and don't communicate at all, they will lose developer confidence and that will contaminate the users faster and heavier than they can imagine...

Posted via CB10

This would also make it possible to integrate Cascades-like Quick controls and use custom styles for BlackBerry devices to maintain the look'n feel of native applications.

That would be a huge boost for Qt, for BlackBerry and even for the Amazon store, in my opinion.

Posted via CB10

Good to see the native toolset expanding, maybe that is just the impulse native coders need to continue working on apps instead of just porting over Android apps.

BlackBerry 10 signed.

Looks we we just found out how the new Passport keyboard will work. The three programmable buttons will be alt shift and sym I think

Posted via CB10

So pretty much to code an app u need to buy all these oftware??

Adobe illustrator

I was planning on using windows word to code the app and somehow transfer all that was written to a BlackBerry emulator? I guess this was more expensive than what I thought

Fat Mexican with a Z10 in CB10

Momentics is free. You don't use Java at all. And Illustrator is strictly for making graphics. There are free graphics programs out there that are just as good... Inkscape for vector based art and gimp for pixel based graphics.

Posted via CB10

You pretty much only need Momentics for your coding, which runs on Java. Both can be downloaded for free. You don't even need an external program to write your code, in fact, you won't get the benefits of Momentics – like syntax and error highlighting, autocompletion, previews and debugging tools – if you use another program.

Illustrator is too expensive for amateur purposes, using open-source programs like GIMP or InkScape can be sufficient too. I use the Mac app Sketch for my imagery, which is a lot cheaper than Illustrator but still very powerful.

Just install Momentics and give it a shot. You can see what you need once you started. :-)

Thanks Brian! Can't wait for the 10.3 Gold, so much improvements. Love the design units implementation and colorization.

That's awesome, you make me want to code, which I've never done in my life but will some day soon.

Posted via CB10

Thanks for sharing Brian. One question:

How easy would it be to make the existing phone/search/camera toolbar programmable to allow a user to add up to five instant actions?
Could an app take over this part of the inherent OS or would BlackBerry refuse any such app?

I for one would love to be able to do this. One of the two things I miss about my iPhone (the other thing I miss is having a media app stay headless).

Thanks Brian. If anyone else could answer this, or direct me to the proper forum thread, I'd appreciate it.

Sadly impossible. BlackBerry would need to add here a option for customizations, just like the quicksettings menu.

Like always, nice article.
Btw man, can I email you? I have a problem with Cascades and maybe you can help me out.

I love these tutorials. In addition to the documentation, Cascades is easy to pick up!

Carbon Fiber Z10 w/Leather Holster

Would be great if we could manage the default action bar on our Blackberries, I always hit the camera icon on the bottom right, it's annoying...

Posted via CB10