It is recommended that you have read through the [http://doc.qt.nokia.com/4.7/qtquick.html Qt QML Tutorials], as there are quite a few and they are explained thoroughly. There is also a list of all [http://doc.qt.nokia.com/4.7/qdeclarativeelements.html standard QML elements].

+

It is recommended that you have read through the [http://qt-project.org/doc/qt-4.8/qtquick.html Qt QML Tutorials], as there are quite a few and they are explained thoroughly. There is also a list of all [http://qt-project.org/doc/qt-4.8/qdeclarativeelements.html standard QML elements].

Essentially, most of the content is the same. The exceptions to be noted are how data is gathered...since we use Data Engines, it is a bit different. Text color and font should be made to use PlasmaCore.Theme.

Essentially, most of the content is the same. The exceptions to be noted are how data is gathered...since we use Data Engines, it is a bit different. Text color and font should be made to use PlasmaCore.Theme.

Line 35:

Line 35:

id: first

id: first

text: i18n("1st line")

text: i18n("1st line")

−

anchors { top: parent.top;

+

anchors {

−

left: parent.left;

+

top: parent.top;

−

right: parent.right;

+

left: parent.left;

+

right: parent.right;

}

}

}

}

Line 43:

Line 44:

id: second

id: second

text: i18n("2nd line")

text: i18n("2nd line")

−

anchors { top: first.bottom;

+

anchors {

−

left: parent.left;

+

top: first.bottom;

−

right: parent.right;

+

left: parent.left;

−

bottom: parent.bottom;

+

right: parent.right;

+

bottom: parent.bottom;

}

}

}

}

Line 59:

Line 61:

== Package Structure ==

== Package Structure ==

−

You create a .desktop file and the .qml file. They have to be in the usual plasma 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/metadata.desktop

−

plasmoid-qml/contents/ui/main.qml

+

* plasmoid-qml/contents/ui/main.qml

=== <tt>metadata.desktop</tt> ===

=== <tt>metadata.desktop</tt> ===

Line 87:

Line 89:

X-KDE-ServiceTypes=Plasma/Applet

X-KDE-ServiceTypes=Plasma/Applet

Type=Service

Type=Service

+

</syntaxhighlight>

+

+

The line below indicates the default size of the plasmoid. The applet's starting size will be this, when added to a scene:

+

+

<syntaxhighlight lang="ini">

+

X-Plasma-DefaultSize=200,100

</syntaxhighlight>

</syntaxhighlight>

Line 100:

Line 108:

== Installing ==

== Installing ==

You can install your plasmoid, though obviously this is just temporary. CMake, below, is recommended:

You can install your plasmoid, though obviously this is just temporary. CMake, below, is recommended:

It is possible to localize strings with the usual i18n(), i18nc(), i18np() global functions.

== Extra types ==

== Extra types ==

Line 195:

Line 215:

To use standard plasma widgets (e.g. Plasma::LineEdit, etc.), you simply add an import line for them.

To use standard plasma widgets (e.g. Plasma::LineEdit, etc.), you simply add an import line for them.

All properties, signals and slots from ordinary Plasma widgets are available there.

All properties, signals and slots from ordinary Plasma widgets are available there.

−

'''These widgets are provided as a transition tool, intended to be replaced by the Plasma version of QtComponents''', which is currently in development by a gsoc.

+

'''These widgets are provided as a transition tool, intended to be replaced by the Plasma version of QtComponents''', which is currently in development by a gsoc. (note that the Plasma QtComponents have nothing to do with the QtExtraComponents module described above)

QML Basics

Essentially, most of the content is the same. The exceptions to be noted are how data is gathered...since we use Data Engines, it is a bit different. Text color and font should be made to use PlasmaCore.Theme.

Root Item

The root item can be anything that inherits QGraphicsItem. For example, in this case it is QGraphicsWidget which is a plasmoid. It can also simply be an Item. I also noticed that PathView does not respond to mouse inputs automatically (so flicking doesn't work). Probably because events are being intercepted. So take note, it'll have to be e.g. an Item, for that case.

Layouts

Row and Column

Anchors

Anchor layouts offer a nice way of grouping UI elements nicely together. The idea is that you connect edges or corners of one element to the edge or corner of another widget.
Some examples:

qmlviewer

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, like the following:

localization with i18n()

access to the global plasmoid object

device specific qml files imported with plasmapackage:// urls

bindings for qicons, KJobs, services and KConfig

retrieving data from a DataEngine

Therefore, it is recommended to simply use plasmoidviewer

Features only available in Plasma widgets

In order to have a better integration with the KDE platform and to reach an higher degree of expressivity, the stock features of QML have been expanded with the following features, that strictly follow the Plasmoid JavaScript API:

Minimum size

if the root object of the plasmoid has the properties minimumWidth and minimumHeight, they will be used as the minimum size for the plasmoid. If they will change during the plasmoid execution, the plasmoid minimum size will be updated accordingly.

In the above example, the minimum size is bound to the paintedWidth/paintedHeight properties of the Text element, ensuring there will always be enough room for the whole text to be displayed.

Plasmoid object

Every QML plasmoid will have an object called plasmoid, that will give access to the configuration, the formfactor, immutability and so on. It offers the same api as the object with the same name in the Javascript API.

Localization

It is possible to localize strings with the usual i18n(), i18nc(), i18np() global functions.

Extra types

Some extra types are available from withing JavaScript, namely

KConfigGroup: it's an object with its config keys readable and writable as properties

QIcon: can be constructed with QIcon("fdo name") such as QIcon("konqueror")

KJob

Plasma Service api

Plasma specific imports

To use some Plasma specific features and to take advantage of them in order for your applet to become a true Plasma applet, it is necessary to use some particular QML imports. See Plasma QML API.

Extra Qt features

org.kde.qtextraimports
To use, do:

import org.kde.qtextracomponents0.1as QtExtraComponents

QPixmapItem

QImageItem

QIconItem

Plasma Widgets in QML

To use standard plasma widgets (e.g. Plasma::LineEdit, etc.), you simply add an import line for them.
All properties, signals and slots from ordinary Plasma widgets are available there.
These widgets are provided as a transition tool, intended to be replaced by the Plasma version of QtComponents, which is currently in development by a gsoc. (note that the Plasma QtComponents have nothing to do with the QtExtraComponents module described above)