Any tutorials on Qt Quick Components usage?

Apelsinsaft

Hi,

I have downloaded Qt Quick desktop components from http://qt.gitorious.org/qt-components/desktop and compiled and installed them. However, I don't understand how to make the components appear in the qml designer in Qt Creator, nor what needs to be done in my .pro file. I could give details, but first I want to ask this: are there any tutorials available on how to use the components, not just install them?

Thanks in advance!

markc

I would also be very interested to see any tutorials about how to use these components. However, I also have a concern that this desktop component repo may not be the right one as the last activity shown is from June 18 2012.

Where exactly is the latest Qt5/QtQuick2 version of the desktop components that will work with qmlscene?

shav

Hi,

Did you see this "video":http://www.youtube.com/watch?v=Y1pqL5bXe0A&list=LLo7Tr94Ysqf5IvDtRM4EunA from Qt Developer Days 2012? If not, please watching it, this video is showing how to use QML Desktop components in QML. Also you can find slides from presentation in 'description' section of video or by this "link":http://qtconference.kdab.com/sites/default/files/slides/QML_for_Desktop_Applications_Slides_Publish.pdf.

The QML Desktop components in repos by link: "http://qt.gitorious.org/qt-components/desktop":http://qt.gitorious.org/qt-components/desktop was moved to another repository. It available by link: "https://qt.gitorious.org/qtplayground/qtdesktopcomponents":https://qt.gitorious.org/qtplayground/qtdesktopcomponents For more information please check wiki page by link: "http://qt-project.org/wiki/QtDesktopComponents":http://qt-project.org/wiki/QtDesktopComponents

I would hope that this will help you.

markc

Thanks shav, seems like anything to do with what was "desktop components" is now going under the banner of Qt Quick Components and is very much still a work in progress, or at least the wiki page is...

https://qt-project.org/wiki/Qt_Quick_Components

The qtdesktopcomponents repo looks like it is regularly and recently updated. Goodness knows why it's not called the qtquickcomponents repo unless there is another complimentary qttouchcomponents repo somewhere?

I would guess the answer to the original posters question is that it's too early and there is no end-user tutorials with usable code examples (not videos) for what is the emerging new Qt Quick Components codebase to replace what was desktop components. Does this sound about right?

Jens

You are right. This is very confusing also to me and I am developing on them. :)

Nothing has been released officially yet so obviously it is work in progress and the current wiki page is a mess. I dont know who made the latest update to the QtDesktopComponents wiki page. It is incorrect to say "Superseeded". It could be "complimented by" perhaps. At the moment the only repository relevant to Qt 5.x is the desktop one. I have now removed that line as the Wiki it was pointing to was older than the QtDesktop wiki.

There are also existing Qt 4 touch based components available for Meego and Symbian on gitorious which might explain some of the confusion: http://qt.gitorious.org/qt-components

You are correct in saying there are no examples or tutorials apart from the ones you find inside the repository itself. The video posted by shaw is currently the most up-to-date and relevant tutorial so I have added that to the wiki page.

chrisadams

Jens is doing amazing work with the components. The components are a vital part of the QtQuick developer story, and many hands make light work, so please put up your hand if you're able to help with anything - from writing tutorials / wiki pages, to helping with documentation or examples, through to writing unit tests and filing bugs for issues you find, and actual development. I'm sure Jens and Leo and the guys would appreciate folks helping out where they can.

Cheers,
Chris.

markc

Update: ignore this post, I used the wrong repo. I should have been using -> http://qt.gitorious.org/qtplayground/qtdesktopcomponents

Well for me personally, the whole Qt5 effort is dead on arrival without a working set of viable QML desktop components so I'd like to help, if I can. However, not having touched anything to do with Qt5/QML for most of this year I'm stuck on the ground floor and not sure how to build qt-components with Qt5.0.0 and not my system default Qt 4.8.3 from Kubuntu 13.04beta.

Should I use qt-components/configure or qt-components.pro via qtcreator 2.6.1 from Qt5.0.0?

markc

Update: ignore this post, I used the wrong repo. I should have been using -> http://qt.gitorious.org/qtplayground/qtdesktopcomponents

[Unrelated debug info removed]

shav

Hi,

I want help too! But I use this "repo":https://qt.gitorious.org/qtplayground/qtdesktopcomponents. Is this correct repo for QML Desktop Component? If not, when I can found correct repository?

Jens

markc: You are using the wrong repository. Use the links given by shaw. I started improving the wiki a little bit, but If anyone contributes a good tutorial, I will happily link to it from the wikipage.
shaw: Yes that is the correct repository, unless you also want to push fixes back. (in that case you need to use the codereview/gerrit links)

These are all the basic steps you need to make it work using Qt5:

git clone git://gitorious.org/qtplayground/qtdesktopcomponents.git qtdesktopcomponents
cd qtdesktopcomponents
qmake
make install

After that you should be able to run "qmlscene examples/Gallery.qml"

markc

Thanks Jens, I guess I clicked on the link in your previous post and disappeared down the wrong rabbit hole.

Those 4 sweet lines in your last post finally worked for me, thanks so much again. I would note that my /usr/bin/qmake is symlinked to Qt5.0.0/5.0.0/gcc_64/bin/qmake. I'm not sure if that is important or not but I would think that if not then I'd end up with some kind of Qt 4.8.3 build which might have failed. This caused some confusion when I first tried almost exactly this a few days ago.

A question to anyone though... the default linux theme for me is, uhm... not so good (note the text color in the text field and the Menu font color) and is not my default Oxygen theme in Kubuntu. The only qtconfig I can find is /usr/bin/qtconfig-qt4 (Kubuntu 13.04) and it does not seem to affect this Qt5/qmlscene example so how would I enforce my default desktop Oxygen theme in this case?

http://markconstable.com/lib/jpg/component_gallery.jpg

Jens

markc: I already pushed a few small fixes to improve palette handling on dark themes. Hopefully that makes it more usable for you. They should be merged within an hour or so. Unfortunately you cannot currently use Oxygen style with Qt5 because Oxygen style itself has not been ported from Qt4. Note that this is not really a desktop components issue but applies to widgets as well.

Interestingly there is sort of a workaround. You can try running it with "-style gtk". It might sound odd, but Kubuntu ships with a Gtk style that matches Oxygen.

markc

Jens: yes, thanks, the Menu/Textarea font color changes and the -style gtk hint both seem to work to get a 95% usable Oxygen-like theme. I see what you mean about being a problem for widgets as well as I tried "qtcreator -style gtk" and that made a slight improvement, but it segfaulted as soon as I opened a file requester or dialog.

At least now I can start to explore the desktop components with them looking somewhat like I would expect them to on my system. My first challenge will be to replace the current icons with the Faenza Icons set which work the best on a #3F3F3F background color.

http://markconstable.com/lib/jpg/component_gallery1.jpg

Jens

markc: Certainly a big improvement. I will see if there are some more tweaks we can do, especially with the tiny scroll bar but I dont think this solution can get to 100% simply because there are some flaws in the gtk oxygen theme as well.

The segfault really should not happen. It should automatically use the KDE file dialog but there could be a regression in the platform plugin in Qt5 or a library mismatch. Perhaps you could make a bug report with a stack trace for it?

Apelsinsaft

Great to see that my post spawned a nice long discussion. :-) Jens "4 sweet lines" made qmlscene work for me too (on OS X 10.8.2). I still have to figure out how to use the components myself, but having qmlscene work is a nice step forward.

About helping/contributing: I'd like to start studying Qt library code (parts of it at least), since I'm curious and I think I can learn a lot from it. I've been looking for a guide to the code, some kind of howto for getting acquainted with the code base; I know C++, but jumping straight into some class and reading the code can be a bit overwhelming. If no such guide is available, perhaps slogging through the code and writing such a guide myself could be a useful project. Then again, I've been meaning to do that since Qt 1.3...

markc

Jens: especially with the tiny scroll bar

FWIW this is exactly what it's meant to look like, the font is Ubuntu Light 12.

http://markconstable.com/lib/jpg/system_settings.jpg

Apelsinsaft: I'd like to start studying Qt library code (parts of it at least)

Just a suggestion, and I'll be more than happy to read and help with your guide :-)

ls -l qtdesktopcomponents/src/qtdesktop/*.{cpp,h}

shav

Hi,

I've cloned the repository from link to my Mac. I tried to compile and install it to my qt 5.0. All was Ok and QtCreator is found it But when I try create a new project for test it I have get a error like:
@
Error: No widget style available.

Qt Desktop Components currently depend on the widget module to function.
Use QApplication when creating standalone executables.
@

I was check QT directive inside .pro file of my project and added to it module:
@
QT += qml quick widgets
@

Also I'm changed QGuiApplication to QApplication into main.cpp file. After it I received another error:
@
QQuickView only supports loading of root objects that derive from QQuickItem.

If your example is using QML 2, (such as qmlscene) and the .qml file you
loaded has 'import QtQuick 1.0' or 'import Qt 4.7', this error will occur.

To load files with 'import QtQuick 1.0' or 'import Qt 4.7', use the
QQuickView class in the qtquick1 module.
@

The QML file which I use to test looks like:
@
import QtQuick 2.0
import QtDesktop 1.0

ApplicationWindow {
width: 360
height: 360
}
@

If I remove ApplicationWindow all works fine. I can't use ApplicationWindow for now? Or I do something wrong? Can you explain what I do wrong. Thanks!

P.S. I want to help with samples application for QML Desktop Component project.
P.S.S. My system is: Macbook Pro (with retina display), Mac OS X 10.8.2, QtCreator 2.6.1 and Qt 5.0.0.

Jens

You cannot directly use a Window as the root item of a QQuickView as it is not a QQuickItem which is what the error is complaining about. Any regular items like Splitter and Button work fine.

It should be possible to do it using a QmlEngine instead though. I am in the process of improving the examples now so we obviously need to create an application template for this.

shav

[quote author="Jens" date="1357160786"]You cannot directly use a Window as the root item of a QQuickView as it is not a QQuickItem which is what the error is complaining about. Any regular items like Splitter and Button work fine.

It should be possible to do it using a QmlEngine instead though. I am in the process of improving the examples now so we obviously need to create an application template for this.[/quote]

Thanks for the reply! I was checked Qt Desktop Components on another type of project from QtCreator templates. Before, I'm using "Qt Quick 2 Application (Built-in Elements)" for my test application and received errors which you may see in my last post. But when I tryed created project using "Qt Quick 2 UI" template the QML Desktop Components was compiled fine. So, I think I use incorrect project type in first time. Maybe I must use the second template for my projects if I want to use QML Desktop Components?

P.S. What samples you want to create? Maybe I can help to you with it? But, I want to creating a samples which using the first template of projects from Qt Creator.