Developing

Device-Adaptive Apps

Sebastian Kügler & Daker Fernandes Pinheiro

Using KDE Plasma Technologies

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

● Reusable components

Developing Device-Adaptive Apps – General

Developing Device-Adaptive Apps – General

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 – QtQuick Intro

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

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

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

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

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 – Advanced QML

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-design-with-qml/

• http://sf2011.meego.com/program/sessions/data-models-qml

Developing Device-Adaptive Apps – Plasma Quick

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 – Tips & Tricks

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 – SDK “light”

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 – Limitless SDK

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

Help!

Sebastian Kügler

• #plasma on Freenode

• plasma-devel@kde.org

Happy hacking!

Sebastian Kügler

Interesting blogs:

• http://codecereal.blogspot.com.br/ (Daker)

• http://vizZzion.org (sebas)

• http://notmart.org (Marco Martin)