0
Developing                   Device-Adaptive Apps                              Using KDE Plasma TechnologiesSebastian Kügl...
Overview          ●   Conceptual Intro          ●   Qt Quick / QML Introduction          ●   Extending Qt Quick using C++ ...
Adapt instead of dumbing down      ●   Different interfaces for different devices          ●   UI as thin layer          ●...
Technologies          ●   Qt / QML          ●   KDE libraries          ●   UI profile switchable by env var          ●   R...
Developer Story          ●   Chad – casual hacker, familiar with web technologies              ●   Plasmate introduces Cha...
Qt Quick: Intro   ●    Declarative UI – not procedural but “object tree”   ●    JSON + JavaScript   ●    Interpreted at ru...
Qt Quick: Concepts   ●    Property binding vs. value assignment   ●    Extensible using modules   ●    Layouting using anc...
Qt Quick Example           import QtQuick 1.1           Rectangle {                width: 200                height: 200  ...
Qt Quick Anchor Layouts          •   Align objects to each other          •   Useful for flexible layouts          •   Dyn...
QML Lists & Models           import QtQuick 1.1           Item {               width: 200; height: 250               ListM...
QML & C++ Hybrids: Basics   ●   QML can be extended using C++   ●   Getting data from C++ to QML:       ●   setContextProp...
QML & C++ Hybrids: Models   ●    QStringList – really basic, “modelData” holds your string   ●    QList<QObject*> – useful...
Plasma Quick: Basics   ●    QtQuick + Plasma / KDE libraries   ●    i18n() for translation   ●    Plasma Components   ●   ...
Plasma Quick: Classes   ●    PlasmaCore.Theme   ●    PlasmaCore.{SvgItem,FrameSvg,...}   ●    PlasmaCore.DataSource to use...
Tools   ●   QtCreator   ●   qmlviewer       ●   qmlviewer -I `kde4-config --prefix`/lib/kde4/imports/   ●   Plasmoidviewer...
Tips & Tricks●   git clone kde:kdeexamples → plasma/declarative/*●   Use PlasmaComponents.Label instead of Text●   Think a...
Plasmate              Workflow-driven IDE for Plasmoids:          ●   Create – Hack – Test – Deploy – Publish          ●  ...
Mer SDK          Chroot environment with everything pre-setup          ●   Work in progress: involves a bit of manual setu...
Help!   •   #plasma on Freenode   •   plasma-devel@kde.orgSebastian Kügler
Happy hacking!   Interesting blogs:   •   http://codecereal.blogspot.com.br/ (Daker)   •   http://vizZzion.org (sebas)   •...
Upcoming SlideShare
Loading in...5
×

Plasmaquick Workshop - FISL 13

3,799

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,799
On Slideshare
0
From Embeds
0
Number of Embeds
45
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×