new Plasma Quick module: PlasmaExtras

Plasma Quick is KDE Plasma’s user interface toolkit which brings system and data integration, theming and artwork and tools to build workspace and mobile applications to the world of QtQuick. Plasma Quick provides everything needed to build high-quality apps. PlasmaExtras provides an extended set of Plasma QtQuick components.Active Microblog using Plasma Components and Plasma Extras

In Plasma 4.8, we released a set of QtQuick (QML) components that are providing an implementation of Qt Quick’s standard component API. While QtQuick itself only provides very basic components for texts, for example, Plasma Component’s Text Input adds an integrated look & feel to them. Often, you will find that in your app, you’ll also need a few higher level widgets, ui elements with a higher degree of intgration. PlasmaExtras has now been added to our git master tree, so it will be released with KDE SC 4.9 in July.

So, what does PlasmaExtras contain right now? One very important thing is that it adds an image loader, which allows the runtime to resolve theme-internal URLs, such as image://appbackgrounds/contextarea, giving you themed application backgrounds.

ResourceInstance adds support for Share Like Connect. Basically, ResourceInstance exports the currently viewed or active document (or “Thing” really), identified by a url and a name. Share Like Connect provides a standardised mechanism to share and “like” information. It also gives you the tools to connect a document to an Activity, which makes collecting information on a certain topic easy. Adding share like connect support to your application becomes as easy as:

// Example in an imaginary webbrowser
import org.kde.plasma.extras 0.1 as PlasmaExtras
[...]
    PlasmaExtras.ResourceInstance {
        uri: webbrowser.currentUrl
        name: webbrowser.pageTitle
    }

A default set of animations allows the developer to streamline app-internal animations with the rest of the ui. It also allows us to provide a set of high-quality and fast animations, app developers can just reuse them in their ui:

Button {
    [...]
    onClicked: PlasmaExtras.AppearAnimation { targetItem: infoPopup }
}

If you want to do some work in the background while the animation is playing, you can do it like this:

onClicked: ParallelAnimation {
    ScriptAction { script: thisFunctionMayTakeAWhile() }
    AppearAnimation { targetItem: infoPopup }
} 

The ParallelAnimation, which we compose when our button is clicked will start all its children at once. A ScriptAction is not an animation per se, but runs a bit of inlined javascript (usually, you can just call another function here which does the real work). Both are run in parallel, so this pattern can be used to hide computational tasks in an elegant way. This way, you can of course also combine animations, or run them in sequence (using SequentialAnimation { … }).

We’ve also added a few Label subclasses, Title, Heading and Paragraph, which theme the standard Plasma Components Label to provide more consistent layout of static texts.

import org.kde.plasma.extras 0.1 as PlasmaExtras
[...]
Column{
    PlasmaExtras.Title { text: "Fruit sweetness on the rise" }
    PlasmaExtras.Heading { text: "Apples in the sunlight"; level: 2 }
    PlasmaExtras.Paragraph { text: "Long text about fruit and apples [...]" }
    [...]
}

PlasmaExtras QtQuick components

There is also an experimental App class in PlasmaExtras. The goal of this component is a container for apps that is adaptive to the device. It provides a basic workflow pattern around different parts of your app and navigation between them. This is achieved by providing separate areas, such as toolbars, navigation and content. Since we’re still experimenting a bit with this stuff, this one needs a bit more work.

More examples can be found in the gallery app, which is also shown in the screenshot, it’s in the kde-runtime git module under kde-runtime/plasma/declarativeimports/test/. The API documentation gives you an overview about available classes, properties and signals, and also contains code examples. Over time, I expect PlasmaExtras to grow a bit and provide more useful things for developers.

Most of these components have already been in use for some time in Plasma Active. they’ve now “moved up” in the hierarchy being made available on more systems. They are a nice example how work is shared across formfactors in Plasma, and how the Desktop UI benefits from development on mobile systems.

Happy hacking!

2 Responses to “new Plasma Quick module: PlasmaExtras”

  1. Felix Michel says:

    Wow, that’s just beautiful. I really like the ui of the microblogging client! One thing, could you vertically aline the text input field? Thanks for your great and beautiful work.

    • sebas says:

      Thanks! :)

      As to the posting widget, I’m not overly happy with it right now, either. It takes up precious vertical space, while it’s only temporarily used. (It does expand when focused, but that’s not enough to save space, IMO. I might try moving this into the sidebar on the right.