Weekend Coder: Some 10.3 Action[Bar]

By Brian Scheirer on 21 Jun 2014 12:33 pm EDT
5
loading...
21
loading...
39
loading...

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.

56 comments

aditya8800

Awesome

Posted via CB10

masterful

All the best Brian! Let us know what is coming soon so we can support

 Slicing using my 

dalight13

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

Brian Scheirer

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

spantch101

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

Chavez78

Amazon should just buy Blackberry.

Posted via Q10

shorski

No way!!!

WhiteZ30 OS10.3.0.XXX

Gees97

BlackBerry should just buy Amazon

Posted via CB10

bradpromac

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

AmaZ30ed

BB_Bmore

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

Posted via CrackBerry App

Gees97

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

Brian Scheirer

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...)

mikevocalz

is it possible for the signature actions to be highlighted as if they were tabs?

Brian Scheirer

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

BadGoliath42

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/10.3.0.296

LoganSix

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

Nelson Faria

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!

djmach_7HN

No books, just online data. Three important links:
http://developer.blackberry.com/native/downloads/
http://developer.blackberry.com/native/documentation/cascades/ http://developer.blackberry.com/native/sampleapps/

Have fun :D It's relatively easy to learn how to code, specially Cascades.
If you have any programming knowledge it's way easier. Took me an hour to develop my first app(still Beta) using Cascades.

inawire

Here is a very good book. The eBook version is even free.

http://www.apress.com/9781430261575

LostOnThePianoRoll

Welcome back bro

Posted via CB10 from my Z10STL100-1/10.3.0.442

itzJustMeh

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

ssbtech

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.

Brian Scheirer

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

Posted via CB10

Eitot

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.

sm88

What program software, do you use to run these code? Java eclipse?

Posted via CB10

Brian Scheirer

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

Dave Bourque

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.

Brian Scheirer

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

santhoshknn

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

GSM-S

Looks good so far. I can't wait to get 10.3 on my z10. :D

Posted via CB10

Quattro2

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

batpeace

Wish I could use my z10 to easily listen to articles. Is there an easy way?

Posted via CB10

beubeu67

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

beubeu67

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

MrGlenn

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.

leeboy82

Good job

Posted via WHT Q10

Imran Choudhury

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

miguel89to

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

Adobe illustrator
Momentics
Java

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

Brian Scheirer

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

Eitot

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. :-)

rajdeep.malhi

I hate how its white. I like it black! Hence why its a BlackBerry not a WhiteBerry.

Brian Scheirer

You can still keep it black if you use dark theme

Posted via CB10

revil-0-316

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

AOAJ007

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

Bacon Munchers

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.

kadusch

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

suhaibalawi

Guys.. i need camera sys. Bar file that has the slow motion and panorama for Z10 STL100-1..
Bbpin:2ACCC40C suhaib95@windowslive.com plzzzzz...
Thx advanced..

Posted via CB10 Z10 STL100-1

djmach_7HN

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

christoph77

Awesome stuff

C0038297E Quote of the Day (BBM Channel)

Searchy

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

Carbon Fiber Z10 w/Leather Holster

ddbaloi

Please reduce the size of the bar.

Posted via CB10

Kevin Michaluk

Great article, Brian. Keep that native development going!

CuriousFellow

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