Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Plasmaquick Workshop - FISL 13

4,982 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Plasmaquick Workshop - FISL 13

  1. 1. Developing Device-Adaptive Apps Using KDE Plasma TechnologiesSebastian Kügler & Daker Fernandes Pinheiro
  2. 2. Overview ● Conceptual Intro ● Qt Quick / QML Introduction ● Extending Qt Quick using C++ ● Plasma Quick ● Tools, Tips & Tricks ● Hacking / Discussion / Hands-on / HelpDeveloping Device-Adaptive Apps – Overview
  3. 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 componentsDeveloping Device-Adaptive Apps – General
  4. 4. Technologies ● Qt / QML ● KDE libraries ● UI profile switchable by env var ● Reusable componentsDeveloping Device-Adaptive Apps – General
  5. 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 patchesDeveloping Device-Adaptive Apps – General
  6. 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/GuideDeveloping Device-Adaptive Apps – QtQuick Intro
  7. 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/GuideDeveloping Device-Adaptive Apps – QtQuick Intro
  8. 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. 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 powerfulDeveloping Device-Adaptive Apps – QtQuick Intro
  10. 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. 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 methodsDeveloping Device-Adaptive Apps – Advanced QML
  12. 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-qmlDeveloping Device-Adaptive Apps – Advanced QML
  13. 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. 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/APIDeveloping Device-Adaptive Apps – Plasma Quick •
  15. 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. 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. 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 hackingDeveloping Device-Adaptive Apps – SDK “light”
  18. 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 timeDeveloping Device-Adaptive Apps – Limitless SDK
  19. 19. Help! • #plasma on Freenode • plasma-devel@kde.orgSebastian Kügler
  20. 20. Happy hacking! Interesting blogs: • http://codecereal.blogspot.com.br/ (Daker) • http://vizZzion.org (sebas) • http://notmart.org (Marco Martin)Sebastian Kügler

×