Experience from Porting Kickoff to QML

As mentioned last week I started to port Kickoff to QML as a training project. Now I am happy to announce that Kickoff with QML is functional and can already be used. If you want to give it a try, just checkout the kickoff-qml branch in kde-workspace and rebuild the kickoff applet. It does not overwrite the existing applet, but adds a second one called “kickoff” instead of “Application launcher”.
Kickoff QML Application View

As we can see in the screenshot Kickoff got connected to all the Models, so we can browse all the tabs, the applications and perform search.

The actual idea was to just do some QML training, but it turned out to be more a training on Qt Models. The Kickoff code is let’s call it interesting. All the tabs have an underlying Model, but what was really surpising is that all Models have a tree like structure. For the Applications Model this was to be expected, but why are the Favorites in a tree structure? As QML is still rather limited for Tree Views I changed the favorites and leave model to be a plain list model which makes it easy to use.

The systems model (applications, places and removable devices) turned out to be more challenging. It uses a QProxyModel instead of QStandardItemModels and merges the applications and places into one Model again in a tree structure. Changing this to no longer being a tree structure seemed non-trivial and I did not want to touch the C++ code. So I started to implement a Tree view in QML for the system tab. Finally I had the QML code to play around with to improve my skills.

After I succeeded in rendering a tree view I noticed a new problem: both places and removable devices showed the same entries and too many entries. It took me quite some time to figure out the problem: the Model is buggy. The proxying was not done correctly and the view so far filtered out entries not relevant to the current section – ouch. This I could not copy in QML as the row count of the Model would not match the count of shown entries resulting in wrong height calculations.

So I had to fix the Model and was back doing C++ programming. Now the Model correctly proxies the underlying Model and I can use the standard views in Kickoff as it is also no longer a tree structure. All my work on the tree view in QML was in vain *sigh*.

Last but not least I had to face the recently used Model. Like all the other Models it has a tree structure. After the experience with the Systems Model it was clear to me that I have to rewrite it as well.

After that the last remaining task was to integrate the search and finally a Model which worked exactly the way I expected it to be. Exported the Model to QML, connected the search field and there were search results. Thanks Ivan for the great job of providing a working Model without having to first fix it.

The results of the work look really promising. Kickoff is much faster, all Models are lazy loaded, that is they get only loaded if the tab is selected. So there is no delay any more when clicking the Kickoff button in the panel 🙂

Of course there is still lots of work left for me to train my QML skills. Drag’n’Drop support is missing, context menus are missing. We need some nice animations. But of course there is still lots of time till master opens up.