Qt wiki will be updated on October 12th 2023 starting at 11:30 AM (EEST) and the maintenance will last around 2-3 hours. During the maintenance the site will be unavailable.

Utilizing-Qt-Quick-Colibri-in-PySide: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
 
No edit summary
Line 1: Line 1:
=Utilizing Qt Quick Colibri in PySide=
[[Category:LanguageBindings::PySide]]<br />[[Category:snippets]]<br />[[Category:Developing_with_Qt::Qt Quick]]<br />[[Category:Developing_with_Qt::Qt Quick::QML]]<br />[[Category:Developing_with_Qt::Qt Quick::Tutorial]]


This [[PySide]] tutorial takes an existing PySide <span class="caps">QML</span> application that uses a totally custom UI, and shows how such an UI can be transformed to use a pre-made component library. In the future, it will be useful to use [[Qt-Quick-Components|Qt Quick Components]], but as it’s not ready yet, we are using the open source [https://projects.developer.nokia.com/colibri/ Qt Quick Colibri] ''[projects.developer.nokia.com]'' library. The existing application that we are modifying for this is the '''WorkingOnIt.py''' app from the [[Updating-QML-content-from-Python-threads|Updating <span class="caps">QML</span> content from Python threads]] tutorial.
= Utilizing Qt Quick Colibri in PySide =


==Instructions==
This [[PySide]] tutorial takes an existing PySide QML application that uses a totally custom UI, and shows how such an UI can be transformed to use a pre-made component library. In the future, it will be useful to use [[Qt Quick Components]], but as it's not ready yet, we are using the open source &quot;Qt Quick Colibri&amp;quot;:https://projects.developer.nokia.com/colibri/ library. The existing application that we are modifying for this is the '''WorkingOnIt.py''' app from the [[Updating QML content from Python threads]] tutorial.


You need to follow the [[Updating-QML-content-from-Python-threads|Updating <span class="caps">QML</span> content from Python threads]] tutorial up to the point where you create the <span class="caps">QML</span> file. As our Python code does not know anything about the <span class="caps">QML</span> internals (it just provides properties and slots for the <span class="caps">QML</span> UI to hook into), we do not need to touch the Python code at all (apart from maybe changing the filename of the <span class="caps">QML</span> file to load in '''setSource''').
== Instructions ==


===Getting the Colibri library===
You need to follow the [[Updating QML content from Python threads]] tutorial up to the point where you create the QML file. As our Python code does not know anything about the QML internals (it just provides properties and slots for the QML UI to hook into), we do not need to touch the Python code at all (apart from maybe changing the filename of the QML file to load in '''setSource''').


You can download the Colibri library from its [https://projects.developer.nokia.com/colibri Nokia Developer project page] ''[projects.developer.nokia.com]''
=== Getting the Colibri library ===


Place the folder “colibri” from the sources into the same folder where your '''WorkingOnIt.py''' and '''WorkingOnIt.qml''' files are.
You can download the Colibri library from its &quot;Nokia Developer project page&amp;quot;:https://projects.developer.nokia.com/colibri


===Referencing the library in the <span class="caps">QML</span> file===
Place the folder &quot;colibri&amp;quot; from the sources into the same folder where your '''WorkingOnIt.py''' and '''WorkingOnIt.qml''' files are.


This is pretty straightforward. Add below the “import Qt 4.7” line the following statement:
=== Referencing the library in the QML file ===


===Reading up on the Colibri documentation===
This is pretty straightforward. Add below the &quot;import Qt 4.7&amp;quot; line the following statement:


Colibri provides [https://projects.developer.nokia.com/colibri/wiki several useful components] ''[projects.developer.nokia.com]'' to work with. In this example, we are using the following components:
<code>import &quot;colibri&amp;quot;<code>


* [https://projects.developer.nokia.com/colibri/wiki/CLButton <span class="caps">CLB</span>utton] ''[projects.developer.nokia.com]''
=== Reading up on the Colibri documentation ===
* [https://projects.developer.nokia.com/colibri/wiki/CLProgressBar CLProgressBar] ''[projects.developer.nokia.com]''


===Using the components in our <span class="caps">QML</span> file===
Colibri provides &quot;several useful components&amp;quot;:https://projects.developer.nokia.com/colibri/wiki to work with. In this example, we are using the following components:


Instead of having the custom progress bar rectangle, we use '''CLProgressBar''' there. It has a “value” property that accepts a value from 0 to 100. Our backend gives us the progress from 0 to 1 as a float, so we simply multiply it by 100 in our UI code.
* &quot;CLButton&amp;quot;:https://projects.developer.nokia.com/colibri/wiki/CLButton
* &quot;CLProgressBar&amp;quot;:https://projects.developer.nokia.com/colibri/wiki/CLProgressBar


Instead of the custom button, we use '''<span class="caps">CLB</span>utton'''. We can take over the “text” property from the old file, and the “onClicked” handler that starts the download can also be copied verbatim from the old example.
=== Using the components in our QML file ===


As you can see, this allows for a very short <span class="caps">QML</span> file that still looks better than the original, custom UI. You can also replace components part for part, and you can combine widgets from different component libraries.
Instead of having the custom progress bar rectangle, we use '''CLProgressBar''' there. It has a &quot;value&amp;quot; property that accepts a value from 0 to 100. Our backend gives us the progress from 0 to 1 as a float, so we simply multiply it by 100 in our UI code.


==Without Qt Quick Colibri==
Instead of the custom button, we use '''CLButton'''. We can take over the &quot;text&amp;quot; property from the old file, and the &quot;onClicked&amp;quot; handler that starts the download can also be copied verbatim from the old example.


[[Image:5226958058_6b5b91d1a3.jpg|Without using Colibri]]
As you can see, this allows for a very short QML file that still looks better than the original, custom UI. You can also replace components part for part, and you can combine widgets from different component libraries.


==With Qt Quick Colibri==
== Without Qt Quick Colibri ==


[[Image:5229084500_da49bab19f.jpg|With using Colibri]]
[[Image:http://farm6.static.flickr.com/5043/5226958058_6b5b91d1a3.jpg|Without using Colibri]]


==The updated <span class="caps">QML</span> file, utilizing Colibri==
== With Qt Quick Colibri ==


===Categories:===
[[Image:http://farm6.static.flickr.com/5287/5229084500_da49bab19f.jpg|With using Colibri]]


* [[:Category:Developing with Qt|Developing_with_Qt]]
== The updated QML file, utilizing Colibri ==
** [[:Category:Developing with Qt::Qt-Quick|Qt Quick]]
* [[:Category:Developing with Qt::Qt-Quick::QML|QML]]


* [[:Category:Developing with Qt::Qt-Quick::Tutorial|Tutorial]]
</code><br />import Qt 4.7<br />import &quot;colibri&amp;quot;


* [[:Category:LanguageBindings|LanguageBindings]]
Rectangle {<br /> width: 200; height: 160
** [[:Category:LanguageBindings::PySide|PySide]]
 
* [[:Category:snippets|snippets]]
Text {<br /> x: progressBar.x; y: 20<br /> width: progressBar.width<br /> font.pixelSize: 8<br /> text: downloader.filename<br /> elide: Text.ElideRight<br /> }
 
CLProgressBar {<br /> id: progressBar<br /> x: 20; y: 60<br /> width: parent.width-40
 
value: downloader.progress*100<br /> }
 
CLButton {<br /> anchors.left: progressBar.left<br /> anchors.right: progressBar.right
 
y: progressBar.y + progressBar.height + 20
 
text: downloader.running?&quot;Please wait…&quot;:&quot;Start download&amp;quot;<br /> onClicked: { downloader.start_download() }<br /> }<br />}

Revision as of 09:30, 24 February 2015





Utilizing Qt Quick Colibri in PySide

This PySide tutorial takes an existing PySide QML application that uses a totally custom UI, and shows how such an UI can be transformed to use a pre-made component library. In the future, it will be useful to use Qt Quick Components, but as it's not ready yet, we are using the open source "Qt Quick Colibri&quot;:https://projects.developer.nokia.com/colibri/ library. The existing application that we are modifying for this is the WorkingOnIt.py app from the Updating QML content from Python threads tutorial.

Instructions

You need to follow the Updating QML content from Python threads tutorial up to the point where you create the QML file. As our Python code does not know anything about the QML internals (it just provides properties and slots for the QML UI to hook into), we do not need to touch the Python code at all (apart from maybe changing the filename of the QML file to load in setSource).

Getting the Colibri library

You can download the Colibri library from its "Nokia Developer project page&quot;:https://projects.developer.nokia.com/colibri

Place the folder "colibri&quot; from the sources into the same folder where your WorkingOnIt.py and WorkingOnIt.qml files are.

Referencing the library in the QML file

This is pretty straightforward. Add below the "import Qt 4.7&quot; line the following statement:

import &quot;colibri&amp;quot;<code>

=== Reading up on the Colibri documentation ===

Colibri provides &quot;several useful components&amp;quot;:https://projects.developer.nokia.com/colibri/wiki to work with. In this example, we are using the following components:

* &quot;CLButton&amp;quot;:https://projects.developer.nokia.com/colibri/wiki/CLButton
* &quot;CLProgressBar&amp;quot;:https://projects.developer.nokia.com/colibri/wiki/CLProgressBar

=== Using the components in our QML file ===

Instead of having the custom progress bar rectangle, we use '''CLProgressBar''' there. It has a &quot;value&amp;quot; property that accepts a value from 0 to 100. Our backend gives us the progress from 0 to 1 as a float, so we simply multiply it by 100 in our UI code.

Instead of the custom button, we use '''CLButton'''. We can take over the &quot;text&amp;quot; property from the old file, and the &quot;onClicked&amp;quot; handler that starts the download can also be copied verbatim from the old example.

As you can see, this allows for a very short QML file that still looks better than the original, custom UI. You can also replace components part for part, and you can combine widgets from different component libraries.

== Without Qt Quick Colibri ==

[[Image:http://farm6.static.flickr.com/5043/5226958058_6b5b91d1a3.jpg|Without using Colibri]]

== With Qt Quick Colibri ==

[[Image:http://farm6.static.flickr.com/5287/5229084500_da49bab19f.jpg|With using Colibri]]

== The updated QML file, utilizing Colibri ==


import Qt 4.7
import "colibri&quot;

Rectangle {
width: 200; height: 160

Text {
x: progressBar.x; y: 20
width: progressBar.width
font.pixelSize: 8
text: downloader.filename
elide: Text.ElideRight
}

CLProgressBar {
id: progressBar
x: 20; y: 60
width: parent.width-40

value: downloader.progress*100
}

CLButton {
anchors.left: progressBar.left
anchors.right: progressBar.right

y: progressBar.y + progressBar.height + 20

text: downloader.running?"Please wait…":"Start download&quot;
onClicked: { downloader.start_download() }
}
}