1. Developing
Device-Adaptive Apps
Using KDE Plasma Technologies
Sebastian Kügler & Daker Fernandes Pinheiro

2. Overview
● Conceptual Intro
● Qt Quick / QML Introduction
● Extending Qt Quick using C++
● Plasma Quick
● Tools, Tips & Tricks
● Hacking / Discussion / Hands-on / Help
Developing Device-Adaptive Apps – Overview

3. Adapt instead of dumbing down
● Different interfaces for different devices
● UI as thin layer
● Switchable input profiles (part of the platform, “for free”)
● Switchable layouts (per app, usually one file per device)
● Work with different input methods
● Reusable components
Developing Device-Adaptive Apps – General

4. Technologies
● Qt / QML
● KDE libraries
● UI profile switchable by env var
● Reusable components
Developing Device-Adaptive Apps – General

5. Developer Story
● Chad – casual hacker, familiar with web technologies
● Plasmate introduces Chad to Plasma
● Lwing – experienced C++ developer, own codebase
● Lwing ports, develops and packages her applications using the Mer SDK
● Brian – KDE Hacker
● Brian is part of the KDE team and regularly contributes patches
Developing Device-Adaptive Apps – General

6. Qt Quick: Intro
● Declarative UI – not procedural but “object tree”
● JSON + JavaScript
● Interpreted at runtime
● Dynamic types
● Reusable components
• http://qt-project.org/doc/qt-4.8/qdeclarativeintroduction.html
• https://developer.mozilla.org/en/JavaScript/Guide
Developing Device-Adaptive Apps – QtQuick Intro

7. Qt Quick: Concepts
● Property binding vs. value assignment
● Extensible using modules
● Layouting using anchors
● Reusable components
• http://qt-project.org/doc/qt-4.8/qdeclarativeintroduction.html
• https://developer.mozilla.org/en/JavaScript/Guide
Developing Device-Adaptive Apps – QtQuick Intro

8. Qt Quick Example
import QtQuick 1.1
Rectangle {
width: 200
height: 200
color: "blue"
Image {
source: "pics/logo.png"
anchors.centerIn: parent
}
}
Developing Device-Adaptive Apps – QtQuick Intro

9. Qt Quick Anchor Layouts
• Align objects to each other
• Useful for flexible layouts
• Dynamic sizing of objects: Scales well
• Surprisingly painless and logical
• Very powerful
Developing Device-Adaptive Apps – QtQuick Intro

10. QML Lists & Models
import QtQuick 1.1
Item {
width: 200; height: 250
ListModel {
id: myModel
ListElement { type: "Dog"; age: 8 }
ListElement { type: "Cat"; age: 5 }
}
Component {
id: myDelegate
Text { text: type + ", " + age }
}
ListView {
anchors.fill: parent
model: myModel
delegate: myDelegate
}
}
Developing Device-Adaptive Apps – QtQuick Intro

11. QML & C++ Hybrids: Basics
● QML can be extended using C++
● Getting data from C++ to QML:
● setContextProperty()
● qmlRegisterType()
● Creating new imports (careful, public API!)
● QObject as base class
● Q_PROPERTY() for getter, setter, notify
● Q_INVOKABLE() for methods
Developing Device-Adaptive Apps – Advanced QML

12. QML & C++ Hybrids: Models
● QStringList – really basic, “modelData” holds your string
● QList<QObject*> – useful for smallish lists
● QAbstractItemModel – Full power, full control, full pain
• http://qt-project.org/doc/qt-4.8/qdeclarativemodels.html
• http://qt-project.org/doc/qt-4.8/qdeclarativemodels.html#qml-c-models
•
http://steveire.wordpress.com/2010/02/19/qml-with-akonadi-or-how-to-use-your-existing-model-view
• http://sf2011.meego.com/program/sessions/data-models-qml
Developing Device-Adaptive Apps – Advanced QML

13. Plasma Quick: Basics
● QtQuick + Plasma / KDE libraries
● i18n() for translation
● Plasma Components
● PlasmaCore, QtExtras, PlasmaExtras, ...
• http://techbase.kde.org/Development/Tutorials/Plasma/QML/API
• http://api.kde.org/4.x-api/plasma-qml-apidocs/
•
Developing Device-Adaptive Apps – Plasma Quick

14. Plasma Quick: Classes
● PlasmaCore.Theme
● PlasmaCore.{SvgItem,FrameSvg,...}
● PlasmaCore.DataSource to use dataengines
● PlasmaCore.Dialog
● PlasmaCore.SortFilterModel
● QIconItem, QPixmapItem, QImageItem, ...
• http://techbase.kde.org/Development/Tutorials/Plasma/QML/API
Developing Device-Adaptive Apps – Plasma Quick
•

15. Tools
● QtCreator
● qmlviewer
● qmlviewer -I `kde4-config --prefix`/lib/kde4/imports/
● Plasmoidviewer
plasmoidviewer --list
● plasmoidviewer [pluginname]
● Qt Assistant (try searching for QML!)
Developing Device-Adaptive Apps – Tips & Tricks

16. Tips & Tricks
● git clone kde:kdeexamples → plasma/declarative/*
● Use PlasmaComponents.Label instead of Text
● Think about splitting into reusable components
● grep in kde:declarative-plasmoids and kde:plasma-mobile
● Rectangle { color: “orange”; opacity: 0.3; anchors.fill: parent; }
inside your Item helps finding sizing problems
Developing Device-Adaptive Apps – Tips & Tricks

17. Plasmate
Workflow-driven IDE for Plasmoids:
● Create – Hack – Test – Deploy – Publish
● 1.0 end of summer
● Clone from git://anongit.kde.org/plasmate
● Build using cmake (needs kdelibs-devel)
● Start hacking
Developing Device-Adaptive Apps – SDK “light”

18. Mer SDK
Chroot environment with everything pre-setup
● Work in progress: involves a bit of manual setup
● Easy way to cross-compile
● Easy way to build packages for $DEVICE
● Takes complexity away big time
Developing Device-Adaptive Apps – Limitless SDK

19. Help!
• #plasma on Freenode
• plasma-devel@kde.org
Sebastian Kügler

20. Happy hacking!
Interesting blogs:
• http://codecereal.blogspot.com.br/ (Daker)
• http://vizZzion.org (sebas)
• http://notmart.org (Marco Martin)
Sebastian Kügler