Development/Tutorials/Plasma4/QML/GettingStarted

Abstract

Writing a plasma applet in QML is very easy, in fact, with KDE 4.6 and Qt 4.7 it just works.

Package Structure

You create a .desktop file and the .qml file. They have to be in the usual plasma package structure.

plasmoid-qml/metadata.desktop plasmoid-qml/contents/ui/main.qml

metadata.desktop

[Desktop Entry] Name=Hello QML Comment=A hello world widget in QML Icon=chronometer

X-Plasma-API=declarativeappletscript X-Plasma-MainScript=ui/main.qml X-Plasma-DefaultSize=200,100

X-KDE-PluginInfo-Author=Frederik Gladhorn X-KDE-PluginInfo-Email=gladhorn@kde.org X-KDE-PluginInfo-Website=http://plasma.kde.org/ X-KDE-PluginInfo-Category=Examples X-KDE-PluginInfo-Name=org.kde.hello-qml X-KDE-PluginInfo-Version=0.0

X-KDE-PluginInfo-Depends= X-KDE-PluginInfo-License=GPL X-KDE-PluginInfo-EnabledByDefault=true X-KDE-ServiceTypes=Plasma/Applet Type=Service

main.qml

import Qt 4.7

Text {

   text: "Hello world!";

}

Installing

You can install your plasmoid: plasmapkg --install plasmoid-qml

plasmoidviewer

You can run it in plasmoidviewer as usual: plasmoidviewer plasmoid-qml

qmlviewer

It's possible to use Plasma specific imports in qml files loaded by qmlviewer:

qmlviewer -I /usr/lib/kde4/imports/ plasmoid-qml/contents/qml/main.qml

Where the -I is the path to the plasma plugin for qml. Try to look for the path of /usr/lib/kde4/imports/org/kde/plasma/graphicswidgets/libgraphicswidgetsbindingsplugin.so and use everything up to org of that path.

Hovewer it's strongly discouraged to use qmlviewer to develop plasmoids, because some features won't be available there:

• localization with i18n()
• access to the global plasmoid object
• device specific qml files imported with plasmapackage:// urls
• bindings for qicons, KJobs and KConfig

Plasma specific imports

Plasma Core

org.kde.plasma.core This is the import that lets you access to the most important Plasma Core features.

DataSource

Used to connect to a dataengine

DataModel

Attaches to a DataSource, makes possible to use a dataengine as a model for a QML ListView, GridView, PathView and so on

Svg

Loads a Plasma Svg, it's not the visual item

SvgItem

Visual item that paints a Svg

FrameSvg

Loads a Plasma FrameSvg, it's not the visual item.

FrameSvgItem

Visual item that displays a Plasma FrameSvg

Extra Qt features

org.kde.qtextraimports

• QPixmapItem
• QImageItem
• QIconItem

Plasma Widgets in QML

To use plasma widgets, you simply add an import line for them. All properties, signals and slots from ordinary Plasma widgets are available there. Those widgets are provided as a transition tool, intended to be replaced by the Plasma version of QtComponents.

import Qt 4.7 import org.kde.plasma.graphicswidgets 0.1 as PlasmaWidgets

Item {

   width: 64
   height: 64
   PlasmaWidgets.IconWidget {
       id: icon
       Component.onCompleted: setIcon("flag-red")
       anchors.centerIn: parent
   }

}