[Guide] Code completion on Qt Creator for Ubuntu.Components

lduboeuf

Hi,
Just to share my experience for developping Apps with QtCreator:
( A rewrite from https://gist.github.com/lduboeuf/dcf22607207d5b7abc8ac966d20942ce )

To get Ubuntu.Components recognized by QtCreator:

If you work on Ubuntu (16.04-18.04) :

## Get public Ubports key
wget -qO - https://repo.ubports.com/pubkey.gpg | sudo apt-key add -

##add ubports repository
sudo add-apt-repository "deb https://repo.ubports.com/ [bionic|xenial] main"

##install Ubuntu.components
sudo apt install qml-module-ubuntu-components

##qml components should be installed in "/usr/lib/x86_64-linux-gnu/qt5/qml"
##set the environnement variable to profile
echo "export QML_IMPORT_PATH=/usr/lib/x86_64-linux-gnu/qt5/qml" >> ~/.profile

##reload env or you might need to logout/login
source ~/.profile

A more generic solution using clickable image:

##run container clickable
docker run -i -t --entrypoint /bin/bash clickable/ubuntu-sdk:16.04-amd64

##in an another terminal, get the container id
docker ps

##copy ubuntu components to local folder
docker cp [container id]:/usr/lib/x86_64-linux-gnu/qt5/qml/ /your/local/directory

##set the environnement variable to profile
echo "export QML_IMPORT_PATH=/your/local/directory" >> ~/.profile

##reload env or you might need to logout/login
source ~/.profile

##stop container
docker stop [container id]

Or running QtCreator in a docker container based from clickable image:

example here: https://github.com/lduboeuf/ut-qtcreator , use branch "add module" branch for installing also some UT qml modules

EDIT: Now clickable provide a Qtcreator IDE with clickable ide qtcreator command
https://docs.ubports.com/en/latest/appdev/index.html#code-editor-integrations

AppLee

@lduboeuf Thanks a lot, I was thinking about trying to configure my computer to dev with QtCreator and you just saved me some trouble and probably a lot of time.

Thank you very much.

saveurlinux

if you use ##add ubports repository
you should add gpg key as well:

wget -qO - https://repo.ubports.com/pubkey.gpg | sudo apt-key add -

lduboeuf

Capture d’écran de 2020-01-10 12-12-29.png

Oh, now it should be easier to dig into components . ( here using qtcreator in docker container with installed qml components https://github.com/lduboeuf/ut-qtcreator )

https://youtu.be/LEpMFWy9FVM

Isaac

Hi guys!

Is it possible to get Ubuntu.Components recognized by QtCreator on Windows?

lduboeuf

@Isaac said in [Guide] Code completion on Qt Creator for Ubuntu.Components:

Is it possible to get Ubuntu.Components recognized by QtCreator on Windows?

The copy components from docker solution should work ?

boky

Hello. What to do in this case?

./ut-qtcreator.sh     
access control disabled, clients can connect from any host
QStandardPaths: XDG_RUNTIME_DIR not set, defaulting to '/tmp/runtime-zorg'
libGL error: MESA-LOADER: failed to retrieve device information
libGL error: image driver extension not found
libGL error: failed to load driver: radeon
libGL error: failed to open drm device: No such file or directory
libGL error: failed to load driver: r600
process 1: The last reference on a connection was dropped without closing the connection. This is a bug in an application. See dbus_connection_unref() documentation for details.
Most likely, the application was supposed to call dbus_connection_close(), since this is a private connection.
QXcbConnection: XCB error: 2 (BadValue), sequence: 538, resource id: 1283, major code: 130 (Unknown), minor code: 3
QXcbConnection: XCB error: 2 (BadValue), sequence: 541, resource id: 1283, major code: 130 (Unknown), minor code: 3
QXcbConnection: XCB error: 2 (BadValue), sequence: 548, resource id: 1283, major code: 130 (Unknown), minor code: 3

lduboeuf

@boky are you using the project from the "add module" branch ?. I've noticed an issue with Morph qml dependencies. Try to comment the last line from the Dockerfile

boky

@lduboeuf

FROM clickable/ubuntu-sdk:16.04-amd64

RUN apt-get update && apt-get install -y git qtcreator libxrender1 gdb

#CMD ["/usr/bin/qtcreator"]

./ut-qtcreator.sh
access control disabled, clients can connect from any host

tired of installing. Download every time)))
displayed when unpacking

debconf: delaying package configuration, since apt-utils is not installed

although the package itself is installed

lduboeuf

@boky oh i was wrong, not that line, but the one that try to install Morph.Web ( qmlplugin... )
I've updated the branch so you can rebuild the image
After re-read your post it seems that you're not trying the add_module branch.
So here i've no idea.

What OS are you working on ?.
Is your clickable up to date ?

boky

This post is deleted!

doniks

@lduboeuf said in [Guide] Code completion on Qt Creator for Ubuntu.Components:

A more generic solution using clickable image:

I'm trying this approach. The path variable should include the qml dir

cd ~/docs/devel
mkdir qml-module-ubuntu-components
cd qml-module-ubuntu-components/
docker cp silly_bose:/usr/lib/x86_64-linux-gnu/qt5/qml .
export QML_IMPORT_PATH=~/docs/devel/qml-module-ubuntu-components/ 
qtcreator # -> doesn't work
export QML_IMPORT_PATH=~/docs/devel/qml-module-ubuntu-components/qml
qtcreator # -> this works

So, you should set the variable such that you find this one:

ls -dl $QML_IMPORT_PATH/Ubuntu

doniks

mhm, so while this works now to resolve import Ubuntu.Components 1.3 in a .qml file, but it still does not find #include <QtQml> or #include <QDebug> in a .cpp file. any idea?

lduboeuf

@doniks are you working with a clickable template? I guess QtCreator does not find Qt libs, you should check in settings Qt paths

doniks

@lduboeuf yes. the whatsitcalled qml with c++ plugin template

lduboeuf

have you installed locally QtQuickControl 2 ?
sudo apt install qtquickcontrols2-5-dev

you can see if any issue with paths in kits

lduboeuf

Video showing the WIP of having qtcreator running above clickable image :

full code completion for all UT components and qml modules , and can launch directly the app, you can debug the c++ part also.
The demo covers python and c++ clickable template, and address-book-app

https://youtu.be/Exmgbb0VdC4

Abuabdellah

@lduboeuf

is there a wiki to get code completion on ubuntu 19.10?

lduboeuf

@Abuabdellah i don't know if Ubuntu.Components are installable on 19.10 but you can wait for the clickable ide qtcreator feature or try the 1st post Guide solutions

Abuabdellah

thank you @lduboeuf

I didn't see html5 components on the image! isn't there or it is included in other image?

root@ea8e2a8bedfb:/# ls usr/lib/x86_64-linux-gnu/qt5/
bin  libexec  mkspecs  plugins  qml  qt.conf