Planning Poker for BB10

Check out my new app, Planning Poker for BlackBerry 10. It's created using Qt and Cascades/QML. The source code, which is released under the Apache License v2.0, is available from the project page on Bitbucket.

The application features a clean, simple and Ad-free user interface for your agile planning sessions. Simply swipe between cards or pinch to pick one fast. Double tap to hide/unhide. Supports light and dark card theme.

Informative list views in Cascades (BB10)

This post gives an example how you can present the user some informative text or controls when a list view is empty.

Typical scenarios where this may be desirable are:

• When populating a list view with data from a network service.
  • Show a Fetch data button if the list view is empty.
  • Present any error that might occur while downloading/processing the data
• Showing search result in a list view.
• Present a No items found text to the user if the list view is empty.

In the example application I'm using an ArrayDataModel, but it should work for QListDataModel and GroupDataModel too. Unfortunately, it will not work with XmlDataModel because the class doesn't expose any function to query if the model is empty (at least not easily).

All of the data models mentioned above provides an isEmpty() function which can be used to check if the data model contain any items or not.

The example should speaks for itself, so without any further ado, here's the code:

import bb.cascades 1.0
Page {

    Container {
        layout: DockLayout {}

        ListView {
            dataModel: ArrayDataModel {
                id: model

                // Bindable property which tells if the
                // model is empty or not
                property bool empty: true

                // Populates model with dummy data
                function populate() {
                    for (var i = 0; i < 10; i++) {
                        append({'title' : 'Item #' + i})
                    }
                }

                // The following signal handlers updates
                // the empty property to correct state
                onItemAdded: empty = isEmpty()
                onItemRemoved: empty = isEmpty()
                onItemUpdated: empty = isEmpty()

                // You might see an 'unknown signal' error
                // in the QML-editor, guess it's a SDK bug.
                onItemsChanged: empty = isEmpty()
            }
        }

        // Only visible when data model is empty.
        // This should be declared after the ListView
        // to prevent the ListView from consuming touch input etc
        // Setting ListView's visible property to !model.empty will
        // also work.
        Label {
            visible: model.empty //model.isEmpty() will not work
            horizontalAlignment: HorizontalAlignment.Fill
            verticalAlignment: VerticalAlignment.Center

            text: qsTr("No entries yet\n\nPlease populate data model")
            textStyle.base: SystemDefaults.TextStyles.BigText
            textStyle.textAlign: TextAlign.Center
            multiline: true
        }

    }

    actions: [
        // Action to populate/clear data model depending on state.
        // Same here, model.isEmpty() will not behave as expected.
        ActionItem {
            title: model.empty ? qsTr("Populate") : qsTr("Clear")
            onTriggered: model.empty ? model.populate() : model.clear()
            ActionBar.placement: ActionBarPlacement.OnBar
        }
    ]
}

Screenshots from the example application

A work-around is required because isEmpty() is only an invokable function in QML, and not a bindable property. The example will not behave as expected if model.isEmpty() is set as a value for the Label's visible property. The isEmpty() function is only called once when the Label is created and will never be re-evaluated again since it's not a bindable property (hint to Cascades API developers).

Please feel free to add other ways to accomplish this in the comments section.

More guest posts at devblog.blackberry.com

Forgot to mention that I've posted two more posts at BlackBerry DevBlog a while ago.

• QML/Cascades tip of the day – Namespaces
  Cover the topic of using namespaces to avoid name clashes etc in QML.
• QML/Cascades tip of the day – Property Aliases
  Covers the topic about property alias in QML.

The target audience are new comers to QML.

Python and Qt on BlackBerry [PlayBook]

I've just bought a BlackBerry PlayBook. After been spending some time with a borrowed PlayBook I decided to buy one myself. Many of you might wonder why the hell I did that but I really think it's a great device. The three top things that made me buy the PlayBook are:

• Cheap! Good value for the money, the 32 Gb version for only €249
• Awesome user experience. Really love those swipe gestures which only requires one finger so you can pretty much operate the device with only one finger :). It also gets addictive!
• It runs Qt and Python!

You might argue that there are very little apps for the PlayBook but admittedly I mostly use the browser so that isn't such a big deal for me. The native PIM-apps integrates well with Google services, such as mail, calendar and contacts. The only thing that I'm missing is an official twitter client. There're a bunch of them on AppWorld but I haven't had time to checked them out yet. RIM do also claim that the PlayBook will be upgradeable to BlackBerry 10 so that should give some confidence of the PlayBook having an upgrade path :)

The PlayBook is powered by QNX which is a real-time micro kernel and supports a lot of POSIX APIs. This basically means that many open source apps/libs for Linux can be ported with little or no effort. What I think is rather cool is that Python 3.2 is pre-installed on the PlayBook which you can use to run Python application.

BlackBerry-Py is a project which goal is to build an environment to support application development in Python for the PlayBook and the upcoming BlackBerry 10 OS. BB-Py uses PySide (Python bindings for Qt) for the UI and the project is also working on support for Cascades. It's very easy to get started so I'll just point you to the "Hello World" example which describes every step you need to take to deploy an app to the device. And no, I didn't find it that hard to get the debug token which you need to install your app on the device :).

Currently the PlayBook OS doesn't include the Qt libraries so they, and PySide, need to be bundled with your app. BB10 is using Qt to a great extent (Cascades is built on top of Qt) and the libraries will be available on the filesystem, only PySide needs to be bundled.

Oh, you also need to download an SDK, for example the Native SDK, to get the required tools for packaging and deploying.

QML tip over at BlackBerry DevBlog

I've just got a guest post published over at BlackBerry DevBlog.

The post is about adding properties to existing components (Cascades example) to make the code more declarative if you want to track values that are only emitted in signal handlers.

You can read the post here

Open links from Text-elements in QtQuick

I just finished yet another blog post on my companies blog site. It's about opening external application when clicking on links in QML Text-element.

Read about it here

tvmatchen for Nokia N9

I just released a video of my port of tvmatchen for Nokia devices (Symbian^3 and now N9). Tvmatchen is a tv-guide application for live sports and is only available in Swedish.

NokiaGadgets actually wrote a couple of lines about the application, even though the app is in Swedish. The review was very positive and the author wants to see more apps looking like this one. It does feel good in a coders heart when someone writes something positive about your app :)

Link to the article.

And of course the video

QtQuick - From Bling Bling To Blink Blink

Probably most of you already know that QtQuick is used to create amazing blingalicous UIs without too much effort. The declarative QML language makes it very easy to create object instances and setup property bindings, animation, states etc. Lately I’ve been tinkering with my Velleman K8055 USB experiment board and wanted to create a nice UI to control the board. It didn’t take too long until I was thinking a little bit out side of the box and started experimenting with controlling the board with QtQuick but without a UI. I created a couple of QML components on the C++ side to control the input/outputs of the board and quickly realized the possibilities QML provides even for non-UI applications.

Basically what I did was to create a declarative engine and not a declarative view. By doing this you can have a QML file interpreted and access to the object instances created by the engine from within your C++ code. I see a lot of potential and possibilities, one thing that comes to my mind straight away is to utilize QML as a Dependency Injection container :)

QDeclarativeEngine *engine = new QDeclarativeEngine;
QDeclarativeComponent component(engine, QUrl("qrc:/example1.qml"));
Board *board = qobject_cast<board *>(component.create());

Example code to interpret a QML file

The source code is available at k8055tinker

Check out the video below which demonstrates my code:

I've also tagged this post with Python because it can be of interest for the planet python readers since this can also be accomplished with PySide.

I wish that I had Jessie's girl...

Rick Springfield had a great hit with a song called Jessie's Girl and the same track is now used for the Nokia N9 teaser ad which popped up a couple of days ago.

I really hope this is a MeeGo device, or to be honest, I just hope it's a Linux + Qt/QtQuick enabled device with some MeeGo compliance.

I've had quite a lot of fun with QtQuick lately (both for desktop and my N8) and I really enjoy using it. It just open so much possibilities and lets you be creative.

Another thing that would be awesome is if Nokia actually puts PySide, the Nokia sponsored Qt-bindings for Python, on the handset. Having Python as a rapid back-end language combined with QtQuick for the view is just too sweet :)

Grr... I hate not knowing, but I just have to wait and see.

I won the "Travelling salesman" competition!

Nokia held a mobile app competition at its Nordic blog which I won!

For more info, look here

PySide and QML

It has been out there for a while but I haven't had time to try it out, PySide 1.0 with QML support!

This really gives you a über rapid app development environment. The power of Python combined with the awesomeness of the declarative language QML from the Qt framework.

Take a look and feel free to play with the example below:

from PySide import QtCore
from PySide import QtGui
from PySide import QtDeclarative

class Message(QtDeclarative.QDeclarativeItem):

    messageChanged = QtCore.Signal()

    def __init__(self, parent = None):
        QtDeclarative.QDeclarativeItem.__init__(self, parent)
        self._msg = u''

    def getMessage(self):
        return self._msg

    def setMessage(self, value):
        if self._msg != value:
            print "Setting message property to", value
            self._msg = value
            self.messageChanged.emit()
        else:
            print "Message property already set to", value

    message = QtCore.Property(unicode, getMessage, setMessage, notify=messageChanged)


def main():
    app = QtGui.QApplication([])

    QtDeclarative.qmlRegisterType(Message, "utils", 1, 0, "Message")

    win = QtDeclarative.QDeclarativeView()
    win.setSource("main.qml")
    win.setWindowTitle("Hello World")
    win.setResizeMode(QtDeclarative.QDeclarativeView.SizeRootObjectToView)

    win.show()
    app.exec_()

if __name__ == "__main__":
    main()

import Qt 4.7 // or QtQuick 1.0 if applicable

import utils 1.0

Rectangle {
    id: main

    signal clicked

    color: "black"
    width: 360; height: 360

    Message {
        id: msg

        message: "Click Me!"
        onMessageChanged: label.font.pixelSize = 40
    }

    Text {
        id: label

        anchors.centerIn: parent

        text: msg.message
        color: "white"
        font.pixelSize: 25

 Behavior on font.pixelSize {
            NumberAnimation { duration: 800; easing.type: Easing.OutBounce }
        }

        MouseArea {
            anchors.fill: parent
            onClicked: msg.message = "Hello World"
        }
    }

}

For more information point your browser to http://www.pyside.org and download the package for your OS.

You'll also find useful information at http://developer.qt.nokia.com/wiki/Category:LanguageBindings::PySide

Happy hacking!