Most practical way to write the UI (Hand, QML, Designer, ...)

Max13

Hi,

I'm not really new to Qt, I write all my desktop apps using Qt, but none of them (yet) were stable enough to be distributed.

So mostly, I use them myself (Chat, Encryption app, clock ticking, serial port sharing over IP, etc...) for my own needs.

Now, I know that the question is about "preferences", but I'm still trying to ask: I'm usually writing my UIs by hand, widgets by widgets, view by view, etc... I've read about QML and I always tried using the designer, but as I'm not familiar at all with them, I end up writing by hand again and struggling most of the time with "which widget is currently grabbing the keyboard", or "QFormLayout or QVBoxLayout in QHBoxLayout in ...", and of course, the ugly classic UI of each system...

What would be the most efficient and "easy" way to write the UI part? Is it by hand, when you control every part of it? Is it using QML and its apparently easy syntax? or is it using the designer, and its visual way to place widgets?

If possible, can someone point me to a well written tutorial to begin with (if it's QML or the Designer) please?

JKSH

@Max13 said in Most practical way to write the UI (Hand, QML, Designer, ...):

What would be the most efficient and "easy" way to write the UI part? Is it by hand, when you control every part of it?

Qt Designer lets you create widget-based GUIs faster than you can code by hand. I'm not sure what you mean by "control every part of it" by hand though, because when you use Qt Designer you still have full control over your widgets.

There is a tutorial at https://doc.qt.io/qt-5/qtwidgets-tutorials-notepad-example.html

Is it using QML and its apparently easy syntax? or is it using the designer, and its visual way to place widgets?

If possible, can someone point me to a well written tutorial to begin with (if it's QML or the Designer) please?

Qt Widgets is an older framework which you use by writing C++ code.
Qt Quick is a newer framework which you use by writing QML code.
There are 2 different Designers:
- Qt Deisgner is for Qt Widgets.
- Qt Quick Designer is for Qt Quick

Qt Widgets and Qt Quick have different pros and cons. Use this table to help you decide which one to use: http://doc.qt.io/qt-5/topics-ui.html#comparison

dheerendra

You have already answered your question. It all depends... We were grappling with what do use.

In general, we use the Qt Designer for following type of work.

any reusable UI component
customising the existing widgets e.g applying stylesheets
Specifying some generic property values to existing widgets which can be used everywhere

After all this we need to assemble all these components and objects make the complex UI. While making this we create the object dynamically and use it appropriately.

Many times I see people are using designer to design the entire UI. When they launch the app, whole complex UI is created. E.g I have 5 screens. Each screen has internally another 10 screens. Each screen internally has 20 object. Whole 51020 UI done using the designer. This is huge problem for designing.

In summary we use Designer for Component creation. Finally assembly is of components is done manually ie. on demand.

R_Irudezu

I suppose most of the efficient and big UI applications written with full Hand (with code editor).
Because there is to much data and components to handle and i think Designer is a little bit headache at that point. I think like that but i went here to see some more professional replies :3

jsulm

@R_Irudezu I disagree. If you divide your UI in smaller pieces I don't see why Designer should have any problems. In my opinion it is simply personal preference whether to use Designer or write the code manually - at the end the code is there, whether it is written by hand or generated doesn't really matter.

R_Irudezu

@jsulm So what do you think about using them together, i mean designer and by code. Is it verdantly or not?

jsulm

@R_Irudezu I would not use both for the same class as this would be a mess. Either you design a UI class completely in Designer or by hand.

Max13

@JKSH said in Most practical way to write the UI (Hand, QML, Designer, ...):

I'm not sure what you mean by "control every part of it" by hand though, because when you use Qt Designer you still have full control over your widgets.

I thought the designer would generate "internal binary" code and not real code. By that, for me, it meant a little bit less control (as you can't see the output code). But I understand it's not a problem.

Qt Widgets is an older framework which you use by writing C++ code.

Qt Quick is a newer framework which you use by writing QML code.

There are 2 different Designers:

Qt Deisgner is for Qt Widgets.

Qt Quick Designer is for Qt Quick

I think I will jump in the Qt Quick Designer to be used to the designer AND the newer framework.

You wrote about a Qt Designer tutorial, is there any about the
Qt Quick Designer?

Thanks for your reply and links

@dheerendra said in Most practical way to write the UI (Hand, QML, Designer, ...):

In general, we use the Qt Designer for following type of work.

any reusable UI component

customising the existing widgets e.g applying stylesheets

Specifying some generic property values to existing widgets which can be used everywhere

[...]

In summary we use Designer for Component creation. Finally assembly is of components is done manually ie. on demand.

@dheerendra Thanks for your insight. Of course, its about preferences, but your opinion is to use it for smaller pieces and then assemble all instead of doing everything with or without. It may be the best of both worlds ;)

jsulm

@Max13 said in Most practical way to write the UI (Hand, QML, Designer, ...):

I thought the designer would generate "internal binary" code and not real code

Generating binary code is what a compiler is doing. Designer is there to design UI which then is stored in a *.ui file. This *.ui file is then translated into C++ code which is then compiled as any other C++ code using C++ compiler.

dheerendra

In addition to what @jsulm, *.ui is XML format.
If somebody is really crazy:) we can generate the XML also. But not required at all.