Mobile application development with QML & PySide

Martin Kolman% &ac"lty o' (n'ormatics% Masary) *niversity

slides: http://www.modrana.org/om20 2 e!ample program: https://gith"b.com/M#rtin$/e!pyside

+hat is PySide

a pro,ect that provides Python bindings 'or Qt

basically a L-PL alternative to the older PyQt pro,ect PySide recently became part o' the Qt Pro,ect

o''icially available 'or &remantle ./0001 and 2armattan ./01

there is an "no''icial port 'or 3ndroid and o' co"rse it also wor)s on des)top :1

3dvantages

Python is easy to "se :1 no need to .cross41compile code can be easily twea)ed on the go in combination with 5sync ma)es 'or very rapid change-test cycles big standard library and boatloads o' third4party mod"les

6isadvantages

bindings don7t cover all available libraries no Qt 8reator s"pport no Qt 9 s"pport yet

Setting "p the environment

on a P8

install PySide :1 install Qt 8omponents 'rom the &or"m /o)ia PP3 /000% /090 and /0 are s"pported by PySide out of the box ,"st install the python-pyside metapac)age and yo" are ready to go :1 on the /000 yo" might need the qt-components-10 pac)age

on a mobile device

:asic application harness

Python code
;</"sr/bin/env python ; 3 simple PySide e!ample import sys import os 'rom PySide.Qt-"i import * 'rom PySide.Qt6eclarative import * +(/6=+>?(?L@ = APySide @!ampleA ; enable r"nning this program 'rom absol"te path os.chdir.os.path.dirname.os.path.abspath.>>'ile>>111 if >>name>> == 7>>main>>7: app = Q3pplication.sys.argv1 # create the application view = Q6eclarativeBiew.1 # create the declarative view view.setSo"rce.Amain.CmlA1 view.set+indow?itle.+(/6=+>?(?L@1 view.resiDe.E9#%#E01 view.show.1 app.e!ec>.1

:asic application harness

QML code
import QtQuick 1.1 5ectangle F anchors.'ill : parent ?e!t F te!t: A2ello +orldA anchors.center(n: parent G G

@!porting Python properties to QML

to e!port python '"nctions to QML: . create a class that instantiates Q=b,ect

2. add '"nctions yo" want to e!port to this class H. annotate them #. instantiate the class an set it as a conte!t property o' the declarative view

the property name ins e!ported to the global QML namespace% so watch o"t 'or collisions

@!porting Python properties to QML

Python property code
class Property@!ample.Q=b,ect1: def __init__.sel'1: Q=b,ect.__init__.sel'1 sel'.root=b,ect = /one #NOTE the root ob!ect is needed only by "ython properties # that call Q#$ code directly IQt8ore.Slot.res"lt=str1 def get6ate.sel'1: %%% return current date & time %%% return str.datetime.datetime.now.11 IQt8ore.Slot.str1 def noti'y.sel'% te!t1: %%% trigger a notification using the Qt Quick 'omponents (nfo)anner %%% #NOTE Q#$ uses *br+ instead of ,n for linebreaks sel'.root=b,ect.noti'y.te!t1

@!porting Python properties to QML

property e!port code

# add the example property property = Property@!ample.1 rc.set8onte!tProperty.Ae!ampleA% property1

@!porting Python properties to QML

QML code
-ext . te!t: e!ample.get6ate.1 anchors.horiDontal8enter: parent.horiDontal8enter G :"tton F anchors.horiDontal8enter: parent.horiDontal8enter width : 00 id : start:"tton te!t : Anoti'icationA on8lic)ed : F e!ample.noti'y.Aentry 'iled content:JbrKA L entry&ield.te!t1 G G

Manip"lating QML 'rom Python

instantiated QML @lements can be directly manip"lated 'rom Python the easiest way is probably thro"gh the root ob,ect

the root ob,ect is created 'rom the 'ile that was set as the declarative view so"rce at start"p% in o"r e!ample this is the main.qml 'ile

b"t be care'"l M this ties Python very closely to the ."s"ally ever4changing1 QML code

Manip"lating QML 'rom Python

Python code

def noti'y.sel'% te!t1: %%% trigger a notification using the Qt Quick 'omponents (nfo)anner %%% root=b,ect = view.root=b,ect.1 root=b,ect.noti'y.te!t1

Manip"lating QML 'rom Python

QML code
(n'o:anner F id: noti'ication timerShow?ime : 9000 height : root+indow.height/9.0 G function noti'y.te!t1 F noti'ication.te!t N te!tO noti'ication.show.1 G

/oti'ications

noti'ications can be easily implemented "sing the QML InfoBanner element the InfoBanner element is instantiated in the main.qml 'ile there is also a notify(text) '"nction this '"nction can be called both 'rom QML and 'rom Python code /0 handling more notifications at once

Loading images

QML s"pports loading images 'rom 'iles or networ) b"t what i' we want to load an image 'rom raw data in memory or do c"stom image processing P Q6eclarative(mageProvider

provides an inter'ace 'or loading images to QML ret"rns Q(mage or QPi!map does not "pdate the (mage.progress property

reloading an might be a bit problematic d"e to how image caching wor)s

Loading images
image provider e!ample
class (mages&romPython.Q6eclarative(mageProvider1: def __init__.sel'1: # this image provider supports Q(mage1 # as specified by the (mage-ype Qdeclarative(mageProvider.__init__.sel'% Qdeclarative(mageProvider.(mage?ype.(mage1 def reC"est(mage.sel'% path(d% siDe% reC"estedSiDe1: # we draw the text provided from Q#$ on the image te!t = path(d # for an example image1 "y2ide logo in 234 is used image = Q(mage.Apyside.svgA1 image.scaled.reC"estedSiDe.width.1%reC"estedSiDe.height.11 painter = Qt-"i.QPainter.image1 painter.setPen.AwhiteA1 painter.draw?e!t.20% 20% te!t1 return image

Loading images
registering the image provider

provider = (mages&romPython.1 view.engine.1.add(mageProvider.A'rom>pythonA% provider1 # NOTE view.engine56.add(mage"rovider5%from7python%1 # (mages8rom"ython566 # doesn9t work for some reason

Loading images
"sing the image provider 'rom QML
(mage . anchors.horiDontal8enter: parent.horiDontal8enter width : 200 height : 200 smooth : true :: NOTE the image provider name in the (mage.source :: ;<$ is automatically lower-cased == so"rce : Aimage://'rom>python/A L entry&ield.te!t G

Persistent con'ig"ration

can be easily achieved on the Python side ,"st e!port a property with properly annotated get/set methods on the Python side% it can be as simple as dictionary that is loaded 'rom 'ile with Marshal on start"p and saved bac) on sh"tdown or other Qbac)endsR li)e con'igparser% con'ig=b,% csv% sClite% etc. can be "sed

Simple rapid prototyping

Python has a big advantage 4 yo" don7t have to compile the so"rce code the same so"rce can be "sed to r"n an application both on yo"r des)top comp"ter or yo"r mobile device this can be "sed 'or a very rapid on4device testing develo any!"ere <

the only thing yo" need is (P connectivity between yo"r des)top/laptop and yo"r mobile device

basically any wireless 3P will do also wor)s with the b"ilt4in mobile hotspot < :1

Simple rapid prototyping

reC"irements

rsync on yo"r mobile device scp might be "sed as a less4e''ective alternative SS24P$S a"thentication .so that yo" don7t have to enter the password on every sync1 the (P address o' yo"r comp"ter and yo"r mobile device

?he rsync script

app>rsync.sh
;</bin/bash (PNT # NOTE this deletes any on-device changes to the # application source files on every sync # also1 the .git folder is not synced 5if present6 rsync 4avDsh 44delete 44progress 4e 7ssh7 my>"sernameIT F(PG:/home/my>"sername/coding/app /home/"ser/coding 44e!cl"de 7.git7

?he start"p script

app>start.sh
;</bin/bash cd so'tware/coding/app python main.py

?he sync & r"n script

r"n>app.sh
;</bin/sh ; optional a"tomatic (P address detection ;so"rce>ipNUsh get>so"rce.shU ; place dependent (P addresses so"rce>ipN 02. VE. .2 ;so"rce>ipN 02. VE.0.H ;so"rce>ipN 02. VE. .# ;so"rce>ipN 02. VE. .9 s" app>rsync.sh Tso"rce>ip ;sh temp>rsync.sh Tso"rce>ip s" app>start.sh

(nstallation & "sage

installation

place the scripts to a convenient 'older on yo"r mobile device log4in to yo"r mobile device set yo"r P8 (P in the main script .optional1 r"n the the scripts as appropriate

"sage

+hy H scripts P

better readability 'le!ibility M the individ"al scripts can be "sed separately:

sync & start the application ,"st sync ,"st start the application

Pac)aging

is not really needed d"ring development

"nless yo" are developing 'or 2armattan and need 3egis to)ens

programs "sing PySide can be accepted to the /o)ia store .'ormerly >vi 2tore1

Python applications already in the store:

Mier" -Podder 5ePho .P1 and others

2ow to create pac)ages 'or 2armattan & &remantle

with PySide assistant

"tt #$$!i%i&mee'o&com$(yt"on$ yside)assistant "tt #$$!!!&%"ertan&net$soft!ares$*dist_Maemo$

with $hertan7s sdist>maemo mod"le

with my pac)aging script that "ses modi'ied sdist>maemo and =:S to create /o)ia Store4 compatible pac)ages

"tt #$$!!!&modrana&or'$misc$mieru_+uild_exam le&,i

"sing merlin 00 7s bdist>hdeb mod"le

"tt #$$forum&mee'o&com$s"o!t"read& " -t=../0

PySide applications

Mier"% 5ePho% mod5ana

https://gith"b.com/M#rtin$ https://gith"b.com/gpodder https://gith"b.com/)elvan/gotoBienna https://gith"b.com/webhamster/advancedcaching

-podder

gotoBienna

3-?L

?han) yo" <

Q"estions P :1

1ant to contact me - #) Martin Kolman email# martin&%olman2'mail&com ,abber# m3rtin%24a++im&c, gith"b# "tt s#$$'it"u+&com$M3rtinK