Your SlideShare is downloading. ×
Plasmaquick Workshop - FISL 13
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Plasmaquick Workshop - FISL 13

3,635
views

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,635
On Slideshare
0
From Embeds
0
Number of Embeds
45
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Developing Device-Adaptive Apps Using KDE Plasma TechnologiesSebastian 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 / HelpDeveloping 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 componentsDeveloping Device-Adaptive Apps – General
  • 4. Technologies ● Qt / QML ● KDE libraries ● UI profile switchable by env var ● Reusable componentsDeveloping 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 patchesDeveloping 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/GuideDeveloping 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/GuideDeveloping 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 powerfulDeveloping 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 methodsDeveloping 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-qmlDeveloping 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/APIDeveloping 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 hackingDeveloping 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 timeDeveloping Device-Adaptive Apps – Limitless SDK
  • 19. Help! • #plasma on Freenode • plasma-devel@kde.orgSebastian 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

×