Tag Archives: qml

Build a device scalable user interface


As previewed some time ago, the ongoing effort of porting the current stock Plasma Desktop widgets to QML isn’t not just recreating them and be done with it, but rather pushing QML a bit beyond of what it can usually do and give a platform to build user interfaces that can adapt to different kinds of situations and devices permitting of:

  • Shipping the user interface, graphic assets and JavaScript code in a simple package with a well defined and familiar filesystem structure: one single package that can adapt to any devices you want
  • For a given device, you must be able to customize and rewrite any part of the interface you want
  • But you should have to rewrite only the parts you need, nothing more, recycling all the rest

In QML plasmoids, we provide some mechanisms (plasmapackage:/ urls, plasmoid.file() function) that will load resources always from within the Plasma package (the single zip file you downloaded from Get hot new stuff, for instance) and always the proper one. What doe it mean?

Any resource you may need, that can be a qml file, a javascript file, an image, a sound… can be something shared between all possible platform targets, or something that is specific for a certain one. Not only this, you coul need as well for instance a file that is shared between a tablet and handheld profile, but not used in the desktop world.

this little video shows the rss news reader QML plasmoid (the usual guinea pig i use for this kind of experiments) loaded on a desktop, looking like an usual harmless desktop widget and as a standalone window, intended to be used on a tablet form factor device.

OGG version

And a blurry live action video here:

OGG version

Towards a declarative Plasma: Containments and tablets


In the KDE Plasma Workspace 4.6 there was for the first time the possibility to write Plasmoids completely with a mix of the QML declarative language and Javascript, part of QtQUICK, this makes development dramatically faster (and with dramatically I mean that in around 2 days, c++ plasmoids developed since 4.0 can been rewritten from scratch)

Now, for 4.7 we are increasing even more the capabilities of the QML script engine, with the target of being able to write any kind of complex user interface with the QML/JavaScript languages in conjunction with the Plasma API.

The last addition is declarative containments:

In the Plasma workspaces, the activities are represented by spaces for the widgets, that can be very different, just think about how different they are the appearances and layouts of the Plasma Desktop shell, the Netbook and the Mobile ones.

3 Plasma form factors

The way in which the Plasma widgets UI components are loaded, shown and managed is quite important for the final user experience of a particular device, and has to be pretty specific and tailored to the particular form factor.

On the desktop shell, everything on the desktop it’s information always with you, wispered in the background, where everything is freely positioned and resized (also due to the large space available)

On the netbook, we have a different use case and a different hardware: a free layout wouldn’t work there because of the screen real estate, and because a desktop would be almost never visible there, so all the information is in a big scrollable page, that can be brought any time in front of all the other windows.

In the mobile/handheld shell, the same concept is brought even further: the widgets can zoom to full screen, having two modes, a non interagible, reduced view, to a zoomed, interactive mode, due to the extreme small size of the screen.

Now what’s missing? lately the tablet form factor is exploding, that means the need for an ui adapt to a 7-8 inches touch screen without keyboard.

On a such form factor, the approach of zooming to full screen followed by the handheld shell wouldn’t be optimal, but we had another idea there.

A first prototype of the idea we developed now was already seen in a prototype based on the netbook shell and newspaper containment in 2009. The tecnique for managing the widget was later chosen as well from the MeeGo tablet UX, even if the approach on the widget themselves is radically different (here there is a fixed set of widget that represents the main kind of media the device can handle, like pixctures, music and video)

This has now been rewritten as a stand alone containment completely in QML (with the code size a fraction of the original)

A video of a preliminar version can be seen here.

OGG version

The goal there is to show to the user a quick glance of all the data the user usually works with in all the activities (yes, that word again;) he does usually with the device, with the possibilities to expand all those little previews in a proper full screen touch friendly application.

In this video you can see as well other new things that I still didn’t write about… that’s for the next time, stay tuned ๐Ÿ˜‰

Separed at birth


Here are two screenshots of Microblog plasmoids. There are two nice novelties that can be noted here (due respectively to KDE Plasma Workpace 4.6 and 4.7) are the support of “reply to message id” in the twitter API, so in Identica conversations will appear correctly threaded (sadly there is still no way to retrieve that threading information from the API) and the support for marking messages as favorites, that will appear in 4.7

Microblog plasmoid

On the right is the usual good old stock Microblog plasmoid, on the left it’s the plasmoid rewritten in QML+JavaScript. It is on early development but is probably going to replace the fomer (there are still some layout differences and details, all of this is going to get polished).

What’s nice is that in two days of development that plasmoid reached about 90% of the features the C++ counterpart gained in well, ages ๐Ÿ˜‰ so I’m quite confident the development speed in Plasma will get a dramatic boost.

All of that code in in KDE svn playground repository, I will give more info when all will move to git together with the rest of KDE software.

Declarative Knowledge Base


As I described in the latest entry, with the KDE Plasma Workspace 4.6 there will be a new feature that will be a key one for the future evolution of the Plasma platform: the ability to write plasmoids with just QML and Javascript.

So, let’s try to see if it’s possible rewrite the average widget in with the declarative scriptengine…

We have a dataengine (using a neat library called Attica) that can query the various functionalities of websites that offer an API compatible with the Open Collaboration Services, such as OpenDesktop.org. One of the features offered by this API is the Knowledge Base: users subscribed to the site can ask any question (in topic with the website) and other users can answer to them. Plasma offers a desktop widget that can query and visualize those question/answers. It’s written in c++ and is about 400-500 lines of code.

How much QML code would take to write a very minimal Declarative Plasmoid that can access the knowledge base entries trough the Plasma dataengine? Here it is

import Qt 4.7
import org.kde.plasma.core 0.1 as PlasmaCore

ListView {
    clip: true
    width: 200
    height: 300

    PlasmaCore.DataSource {
        id: source
        engine: "ocs"
        source: "KnowledgeBaseList\provider:https://api.opendesktop.org/v1/\query:opendesktop\sortMode:new\page:0\pageSize:10"
        interval: 120000

    model: PlasmaCore.DataModel {
        dataSource: source
        key: "KnowledgeBase-[\d]*"

    delegate: Text {
        text: Name

24 lines ๐Ÿ˜‰

What is important to look here is the DataSource{} definition that defines to what engine we’re connecting and to what source. And the DataModel{} that hooks up what has been fetched by the DataSource to a suitable model for the use by the ListView.

Let’s expand from this to something that can be compared to the C++ version in terms of functionality. You can download an early example of the code from here. (all is available from the playground svn repo). It’s still early to include it in the 4.6 release for various reasons, but the path is definitely clear ๐Ÿ™‚

Here you can see a brief screencast of the two plasmoids, the C++ and the declarative one working side by side.

OGG version

Here is a video tutorial that explains the steps taken to write this plasmoid.

It is also a little demo of the Plasmate IDE that while it’s still at early development stages, it’s pretty impressive already: all you have to do is write the code and test it in the preview side panel. zero worries about creating the package structure, desktop files or installing :p

OGG version

A Declaration of Plasma Love


Declarative RSS reader The image on the left is a new (example) plasmoid that marks an important change… this is going to be a quite massive blog post, with pretty technical details about what I think is going to be a feature of an higly important strategic relevance on the road towards Plasma as a mature and powerful platform.

The Plasma declarative bindings have landed into kdebase! This means it will be possible to use the new QML language part on Qt 4.7.

As Aaron noted some days ago, QML in conjunction with now in heavy development technologies like QtComponents (and in the future Qt cene-graph) will play a key role in the creation of user interfaces in the future, and gives us a very important puzzle piece we were still sorta missing.

So we deceided to be (as usual ๐Ÿ˜‰ erly adopters of the technology and with the KDE Plasma workspace 4.6 the first pieces will be in place for the roadmap that will lead us basically to this path:

  • Separate the implementation of the logic from the user interface
  • Avoid C++ (and well, any imperative language) as much as possible for the UI
  • Be flexible, an application should be able to jump between different devices as easily as possible
  • do applications that can chose the proper ui amond different choiced depending on the device used, the screen size, the input methods and what not
  • With QtComponents, use what will be the native set of widgets/components for the given platform: on a MeeGo phone, use its own widgets, theme and UI paradigms, but a different interface somewhere else
  • Performance, perforance, performance, enter Qt scene graph

So, what will have the KDE Plasma platform 4.6 of all of this?

Use QML from C++ Plasma widgets

The first pass (needed to do the following one) is to have a way to easily load a QML file into a normal C++ plasmoid. Now, loading a QML file into a QGraphicsScene (and making it well behave inside the QGraphicsLayout based Plasma widgets) is a quite simple operation, however it is a bit long and repetitive amount of boilerplate code… enter Plasma::DeclarativeWidget.

This is a normal QGraphicsWidget just like the other Plasma widgets, all you have to do is to add it in the QGraphicsLayout of the applet, set the path of a QML file in it et voil

QtQuick, the Plasma way


Those days, working hard on bugfixing and polishing for the 4.5 SC release, however caught by the impatience of testing the new shiny features that will be in Qt 4.7, I gave a try on a weird crossover you’ll hear more and more about in the future: QtQuick+Plasma

Now, in playground there are some Plasma bindings for QML almost since the declarative module was announced, but only lately, as it matures for Qt 4.7 inclusion has been possible to expand them to make possible to have a quite good integration between the two technologies.

Work started in February at Tokamak 4, were thanks to the beginning of this integration was possible tohave a working prototype of Plasma Mobile in a single week, starting from zero.

As a test bed for expanding the bindings where something more was still needed, I did a prototype of a plasmoid with the interface a bit more complex than usual, that could be easily used as a full screen application in a mobile environment. Since there is another set of KDE applications for wich a mobile version is being written (all the KDE pim apps) i decided to just shamelessy copy from it, since is one where the visual design has been already done.

The video below shows a simple prototype of a mail client for a mobile device: the basic interaction works, even tough the data is dummy, being a simple demo.

OGG version

It’s written completely in QML, without a single C++ line of code, and can work both as a fullscreen mobile application as shown there as well as a normal Plasma widget in your desktop

A really important charateristic of this (and of the other future Plasma widgets written it this tecnique) is that exept the item view, it only uses Plasma widgets (widgets as in components like buttons, text fields etc) and animations, this will give some interesting benefits:

  • Consistent look and feel, either across your desktop or in various apps of your mobile device. Even across different kind of devices, like mobile, netbook and desktop, while having a radically different look to fit the different form factors, the applications will bring a certain level of familiarity and “unity”
  • The widgets have an consistent and rich api, that can be accessed from both Javascript and C++ pieces of code (or whatever language bindings), when a “QML only” approach is not enough.
  • The Plasma animations are written in Javascript themselves: they can be “themed” to achieve different feelings on different devices without having to touch code in the applications/plasmoids themselves. In the future will also be possible to do important things like turning them off globally when the battery level is critical or things like that.
  • great separation of data and visualization achieved trough dataenines: is possible to completely change the ui without ever touching the logic of the program or how the data is fetched, and write the visualization completely in a declarative way, while not being limited in any way in how the dataengine plugin is written.

As said before, to recap it will be possile to write plasmoids completely in QML, or include pieces of QML ui in any kind of plasmoid is already possible to write, being C++, Python, Ruby or even our already existing Javascript bindings.

This demo in the video isn’t going to be a real world application, but it is a really good showcase of what Plasma can offer in this regard, and how is easy to write a pretty rich mobile application that can be adapted across a wide range of devices. So in the future there will be many plasmoids that will rougly follow those lines.

Bits and pieces are still missing, some work remains to do, but for KDE SC 4.6 there will be in libplasma something that will be usable by everybody to build some awesome stuff.