(more love for the world. hurrah!) |
(→Anchors) |
||
Line 25: | Line 25: | ||
import Qt 4.7 | import Qt 4.7 | ||
− | |||
import org.kde.plasma.core 0.1 as PlasmaCore | import org.kde.plasma.core 0.1 as PlasmaCore | ||
− | |||
− | + | ||
− | + | Item { | |
+ | width: 200 | ||
+ | heigt: 300 | ||
+ | |||
Text { | Text { |
Writing a plasma applet in QML is very easy, in fact, with KDE 4.6 and Qt 4.7 it just works.
It is recommended that you have read through the Qt QML Tutorials, as there are quite a few and they are explained thoroughly: http://doc.qt.nokia.com/4.7/qtquick.html
Here is a list of the available elements: http://doc.qt.nokia.com/4.7/qdeclarativeelements.html
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.
See the KDE Examples git repository for more KDE-related helpful resources.
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:
import Qt 4.7 import org.kde.plasma.core 0.1 as PlasmaCore Item { width: 200 heigt: 300 Text { id: first text: i18n("1st line") anchors { top: parent.top; left: parent.left; right: parent.right; } } Text { id: second text: i18n("2nd line") anchors { top: first.bottom; left: parent.left; right: parent.right; bottom: parent.bottom; } } }
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
[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
import Qt 4.7
Text {
text: "Hello world!";
}
You can install your plasmoid: plasmapkg --install plasmoid-qml
You can run it in plasmoidviewer as usual: plasmoidviewer plasmoid-qml
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:
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:
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.
It's possible to localize strings with the usual i18n(), i18nc(), i18np() global functions
Some extra types are available from withing JavaScript, namely
To use some Plasma specific features is necessary to use some particular QML imports.
org.kde.plasma.core This is the import that lets you access to the most important Plasma Core features.
Used to connect to a dataengine
Attaches to a DataSource, makes possible to use a dataengine as a model for a QML ListView, GridView, PathView and so on
Loads a Plasma Svg, it's not the visual item
Visual item that paints a Svg
Loads a Plasma FrameSvg, it's not the visual item.
Visual item that displays a Plasma FrameSvg
org.kde.qtextraimports
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. 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 }
}