Bojan Komljenovic

A place of mostly software, sometimes even hardware and evil beavers...

Apr 30, 2013

Objective

Nokia N9 powered by Harmattan is a Qt enabled phone. Development of an app is quite rapid and toolchain is very tolerant and forgiving.

A few months ago, I tried BlackBerry10 NDK. At the time, development was everything but rapid and smooth.

Today with OS release 10.1. I wanted to give it another chance.

Intro

Evil tongues will say I'm biased. Those who know me also know that my loyalty remains with Qt. No matter what manufacturer or governance is in charge.

I do have one advantage. I started to learn Qt with 4.6.1 release. There was no QML at the time. With that said, I'm not affraid of C++ nor is it strange for me to work with Qt Core.

I'll try to keep that in control and whatever you don't understand the topic at hand, ask in comments below.

Dev enviroment

BlackBerry10 NDK provides QNX Momentics as an IDE. Face the truth, it's Eclipse. Perspectives and windows were added to fit BlackBerry10 development but I still hate it as much as I hate vanilla Eclipse. Why give me 100 buttons if I'm going to need only 5 and console output?! My first attempt a few months ago resulted in using Qt Creator and BB10 Kit setup. In theory it works, but I really don't recommend doing this with Qt Creator, version less than 2.7. Autocomplete doesn't work and syntax highlighting is a bit flaky. QNX Momentics it is then!

Project setup

Without going into details how to create a new project, I can say that on both platforms this is really straight forward. Click, click, click and you're done, you got a Hello World template. BlackBerry10 does require 1 special moment of attention and it's name is bar-descriptor.xml.

Default bar-descriptor.xml autogenerated by Momentics is a good basic layout for you to improve. You can use the recommended way of doing this, following UI and tabs on editor window, or you can edit the source of the file itself.

Often overlooked, splashscreen is an important part of your app. After the icon, it is the first part your users will see. BlackBerry Z10 has support for both portrait and landscape splashscreen. BlackBerry Q10 uses just 1 rectangle shaped image. It is possible to support both at once. Use the UI for editing and upload those 3 images. You must obey the resolution for orientations and NDK will take care of the rest. Splash images will deploy and show up properly on both devices. You need to make PNG images in resolution 720x720, 1280x768, 768x1280. Put those in your projects root directory and load them in bar-descriptor.xml. It will result in code like this:

<splashScreens>
   <image>spashQ10.png</image>
   <image>splashZ10Landscape.png</image>
   <image>splashZ10Portrait.png</image>
</splashScreens>

Another thing I was looking for is how to switch from white to black theme. I find the black theme more elegant and eye soothing any time. Honestly, every blog post I looked at had the old XML nodes and those changed:

<env var="CASCADES_THEME" value="dark"></env>

Please notice that values are dark (black) and bright (white) for themes. I do expect BlackBerry to provide a way for developers to make apps that can change the theme while the app is running. We do have that on Harmattan.

The code

Looking at the project tree you can see quite a lot can be reused. Just remember that BlackBerry10 insists on some subfolders and hierarchy while Harmattan is more freeform. Depending how tidy you are, these 2 can be mergerd quite easily.

Harmattan BlackBerry10
alt text alt text

In short, your Headers and Sources from Qt Creator go into src subfolder and your QML reflects into assets when looking from Harmattan into BlackBerry10 in Momentics structure.

Moving along, next stop is main.cpp. This is the point where we fork a little. Harmattan has a declarative engine while BlackBerry10 has a graphics engine and their own respected views. It is a crude comparison and very much so simplified but details about this can be the topic of another post. It boils down to this: on Harmattan you use QmlApplicationViewer while on BlackBerry10 you use QmlDocument. Potatoes, patatas, if you don't demand something very exotic in your code.

BlackBerry10 default template also comes a little bit better prepared, including translations and some debugging options. You had to type those in manually on Harmattan.

Now for the sweet stuff. QML code. Take a look at these 2 screenshots below.

Harmattan BlackBerry10

Going from top to bottom on both pictures and comparing, you can see the layout has been preserved.
Both use Page as the root component.
Both have a TitleBar. Custom made component on Harmattan, comes out of the box with BlackBerry10.
Here comes the creepy part. While on Harmattan you had Flickable and Column design, on BlackBerry10 for the same effect you can use ScrollView, Container and StackLayout. It looks clumsy on BlackBerry but it actually isn't. This very combination and layout of Page will produce code that works well both on Z10 and Q10.
Inside our, now flickable page is a component called GroupSeparator or Header. It follows each OS UX and again, custom made on Harmattan, comes with BlackBerry10.
If you look at the component just under Type header you'll think at the first glance these are just 2 buttons. Well, they are on Harmattan, nested in ButtonRow. However on BlackBerry10, this is called a Segmented control. Name is rather self explanatory. Use it to change states, enums or properties. Logic behind it is pretty much the same.
Next up is a datepicker. A picker of date and/or time. A nightmare to sync up no matter what you do. Both platforms provide solid standard use case solution but this point goes to Harmattan due to flexibility. On BlackBerry10 I was not able to merge together all time and date data in one component. There are 3 modes you can use but none of them provides a full date format with a year included on Blackberry10. How weird is that?
Below yet another header component there are 2 most common text input components. Nothing much to add to those, they both work very good. There are some distinct small differences. For example placeholderText on Harmattan is hintText on BlackBerry10. Another cool feature BlackBerry has implemented is automatic parsing of Twitter usernames if you put this in your TextArea:

inputMode: TextAreaInputMode.Chat

Added value like that really saves a lot of work for developers like me.
You can also compare and see a Label and a Button components used here. Same old, same old, no differences. Except one! You cannot change a Button height on BlackBerry10 using Cascades. Don't ask me why, I have my theories and none of them should be valid. I'd expect this to change at some point in far future.
Something that is not shown on these screenshots but it is used is a way to communicate with the user while the app is in use. We all abused InfoBanner on Harmattan for this but on BlackBerry10 it is called a Toast. In order to use such a communication way on Harmattan, you had to import com.meego.extras 1.0. A similar but a wee bit low level way has been implemented in BlackBerry10. Add this to your .pro file and read some docs and you are good to go with Toast.

LIBS += -lbbsystem 

I wouldn't be myself if I hadn't found a way to break the interpreter. There is a thing that confuses Momentics a lot at this stage. These things are called expressions. Harmattan was designed to optimize and work with expressions quite fast. Some beautiful one-liner code can be written using expressions. BlackBerry10 does work with them. Your project will build and deploy but your Momentics IDE will throw out error of strange unexpected code. If you throw in some in depth nested expressions too, it just gets worse. I cannot stress out enough that this needs to be fixed.

Conclusion

Developing for Harmattan is always a joy. You have open source components and community themselves try to improve them and build new ones upon them. You have a freedom that has not been seen before to produce applications quickly and creatively.
There is a dark side of freedom.
Developer alone has to build a slightly more complex components and reuse them all the time. Once those are built, it is a developers responsibility that they run properly. Code optimization, no memory leaks and no heavy Javascript functions which will block the UI thread. For senior Qt developers this will not be a problem, but for beginners too much freedom might lead into a resource heavy application for no real reason whatsoever.

BlackBerry10 Cascades are provided as they are. There are plenty of them and they all work excellent. Some of them I'd even like to see backported in one way or the other to other Qt enabled platforms. They are that good but they do limit you and protect you of doing funky, stupid stuff. I wouldn't call that taking away the freedom I, myself personally exploit on Harmattan. You just have to work around them because there are always ways to do so. Even when you do make some funky code, it will not shoot you in the foot, wave and jump out of the window with Kernel-Exec thread error 0x003. Like on Symbian, but that's yet another comparison for another post.
Point is, BlackBerry is using highest version of Qt currently available on devices sold, Qt 4.8.4. If that means they are leading ahead with Cascades, so be it. I expect great improvements with each update available and so far I was not disappointed.

Apr 26, 2013

What is it?

FakeSMS is an application that can create text messages without sending them or recieving them. Text messages can be incoming or outgoing type. You can set the time of message as well. If no time is explicitly set, current time is used. A single text message is made out of 2 fields. A number and a body. Number, or name, is the recipient or sender, body is whatever text you want to input and reproduce.

How does it work?

After launching application, you may optionally change the timestamp of the message, you must enter a number or name and message text. If you do not provide 1 out of these 3 paramteres, Create button is disabled. Once Create button is enabled, press it and a text message is created instantly.

Fake SMS does not send actual messages. Just plants them in Messaging application.

You need more info?

Further information and interaction can be obtained by contacting author on Twitter or simply sending an email or leave a comment below.

Screenshots

Apr 25, 2013

Nokia N9 update

Just in time, Soundwave for Harmattan has passed Quality Assurance and is available for you to update!

I really hope this stops bad reviews about black screen on newly bought, updated but never flashed Nokia N9 devices.

Still going strong with 5 star reviews and one of the most popular and often featured apps on Nokia Store.

Please leave reviews, they make me very happy. Even the bad ones. There is always room to improve.

Click on the banner!

Apr 21, 2013

Soundwave 0.1.19

A few days ago, I've finished a new build of Soundwave. Amongst some bugs fixed there are also new features to be found like Spotify integration, custom share text placeholders and 3 levels of listening quality. Let's run through the changelog and clarify details.

  • Spotify and LastFM integration

    This includes Spotify settings implemented for stream quality and the rest of their API provided in a library v12. Last.fm scrobbler is enabled for Spotify only at this point.

  • Pie has been optimized

    Orange animated circle is much more responsive now and opacity changes depending of sound pressure level.

  • Added 3 quality ranges to listening mode

    Intervals of 5, 11 and 18 seconds provide different recorded sample sizes. Naturally, longer and bigger sample provides more precision in music recognition. In future, users shouldn't be bothered with this and sample size should be automated.

  • Fixed Facebook login due to API change

    Fairly self-explanatory.

  • License changed

    After a friendly warning I inspected all my projects and concluded that autogenerated license in Qt Creator was not fitting.

  • About has links in Settings

    Clicking on About items in Settings tab now opens pages of the chosen service or people.

  • Custom share text has placeholders for common properties

    A lot of users asked for this feature and it was easy to implement. As an experiment half a dozen placeholders were built in. Syntax is explained below the input field, for example {{#Soundwave}} adds the word Soundwave.

  • Removed com.meego.extras and made custom Infobanner

    Due to some irregular updates on Nokia N9, Qt Components were not updated resulting in a black screen. Since I only use 1 element out of the group that caused problems, I made it independent and removed the dependancy.

Conclusion

All this by all means is not everything and project is not yet finished. There are features to implement and there are also some to polish out. Of course, a Symbian build will follow shortly with the same changelog, but without Spotify integrations. Reasons for that are simple. Spotify does not provide a library for Symbian and library itself is not open source thus making it impossible for me to build inside Soundwave. I hope this will change in near future so all features can be available on all platforms.

What about next update?

Version 0.1.20 of Soundwave should focus mostly on translations. I hope users, friends and community chip in and translate to as many languages as possible. I wasn't really satisfied with restarting the application upon language change. After some advice and digging around I used a hack to force translating UI in realtime. There are still caveats with assigned strings and dynamically created components. After those are sorted out and translation engine is fully operational, I'll open up all the English based strings to public eyes.

I want the latest build!

Update has been submited to Nokia Store QA today. It should take 3-5 days to become available to your devices.

If your device doesn't automagically notify you about this update to 0.1.19, I surely will here.

Jan 18, 2013

What is it?

Soundwave is an application for music recognition. It uses Midomi servers to identify and search for patterns. Upon success, you will be presented with various data about track, album and artist that you are currently listening to.

How does it work?

Just click on the icon, watch a nice rotating animated pie and standby. Once powerful servers have found a match, you will be presented with the result. If no match is found, you will be told too.

You need more info?

Further information and interaction can be obtained over Soundwave on Facebook or contacting author on Twitter or simply sending an email

Screenshots