Plasmaquick Workshop - FISL 13

Developing
Device-Adaptive Apps
Using KDE Plasma Technologies

Sebastian Kügler & Daker Fernandes Pinheiro

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

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

Technologies

● Qt / QML
● KDE libraries
● UI profile switchable by env var


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


Qt Quick: Intro

● Declarative UI – not procedural but “object tree”
● JSON + JavaScript
● Interpreted at runtime
● Dynamic types
• http://qt-project.org/doc/qt-4.8/qdeclarativeintroduction.html
• https://developer.mozilla.org/en/JavaScript/Guide

Developing Device-Adaptive Apps – QtQuick Intro

Qt Quick: Concepts

● Property binding vs. value assignment
● Extensible using modules
● Layouting using anchors

• http://qt-project.org/doc/qt-4.8/qdeclarativeintroduction.html
• https://developer.mozilla.org/en/JavaScript/Guide


Qt Quick Example
import QtQuick 1.1

Rectangle {
width: 200
height: 200
color: "blue"

Image {
source: "pics/logo.png"
anchors.centerIn: parent
}
}


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


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
}
}


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

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

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

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
•

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

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

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”

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

Help!

• #plasma on Freenode
• plasma-devel@kde.org

Sebastian Kügler

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

Sebastian Kügler

Plasmaquick Workshop - FISL 13

More Related Content

What's hot (19)

Similar to Plasmaquick Workshop - FISL 13 (20)

More from Daker Fernandes (8)

Recently uploaded (20)

Plasmaquick Workshop - FISL 13