General gui design workflow for newbie

[foobuntu]

My question on Stackoverflow was blocked/closed/whatever because it was to unspecific but as a newbie I feel the need to ask for the bigger picture rather than for a specific task or problem.

I have a webdevelopment background and therefor when it comes to designing a userinterface I have a specific mindset. I can just place inputs anywhere in my markup whose behaviour is handled by the browser or I can layout divs add interactive functionality with eventlisteners in javascript and style everything rather easily with css.

So with that background, how is gui design approached in c++? I know that there are libraries but I can't wrap my head around how that's working.
How do I make use of a specific lib?
How do I place ui element ABC (checkbox for example) at ui position XYZ.
How are these elements styled like background-color, border-width, border-radius and so on....
Can ui design only be made with a specific wysiwyg application?

I want to modify and expand open source software projects to my likings, learn as I go and maybe even contribute to these projects at some point.
Ideally I would stay away from using an IDE for couple of reasons.
a) I'm comfortable with my editor
b) I wanna learn the mechanics myself in depth and not have some software do the work for me, so that I understand the topic independently of some hocus pocus IDE magic.

Can you guys share knowledge or point to resources that teach ui programming for my specific background and intentions?

[E0p9LyTq]

The C++ standard doesn't support GUIs, you need a third party library for that.

Are you wanting to develop for a specific platform? Or cross-development that would compile for multiple platforms?

I suggest you do some internet searching for GUI frameworks and look at the documentation.

[foobuntu]

As a first step I want to stick with Linux exclusively.

FurryGuy wrote:

I suggest you do some internet searching for GUI frameworks and look at the documentation.

But what if we take the case of an open source project, a software that already has a gui. I assume that I need to use the same framework that is already been used, or not?
How do I figure out which one was used?
And once I know that, is it possible to just open the source code in my editor, make changes to the ui, compile and run or do I have to use a specific editor for framework xyz? Somewhere I read that the Qt lib comes with its own editor and is wysiwyg only, so you can't just make changes prgramatically. Would one go about programming the softwares logic in <favourite editor/ide>, program the gui in a separat wysiwyg editor and then somwhow merry them. Or is a gui application developed in the wysiwyg editor entirely because the ui and the logic are naturally entangled, so to speak.
That's all a very confusing topic for me.

[E0p9LyTq]

If a framework has already been chosen then looking for one is already taken care of. Now you need to learn how to use it.

Decent libraries have examples. Lots of them.

[TheIdeasMan]

As a first step I want to stick with Linux exclusively.

Hooray ! Good choice, I like it :+)

foobuntu wrote:

Somewhere I read that the Qt lib comes with its own editor and is wysiwyg only, so you can't just make changes prgramatically.

Not true.

With Qt one can do both. Hell, one can can program everything with code from scratch, just that it's a lot easier to do it visually.

Qt does come with it's own IDE (QtCreator) which is easier because there is direct access to the resources such as forms. But Qt can be integrated into other IDE's.


Here is a list of libraries, GUI is the third category listed.

http://en.cppreference.com/w/cpp/links/libs

The cppreference site is a really good technical, standard compliant reference. C++ programmers everywhere are always looking at it :+)

Good Luck !!

[foobuntu]

TheIdeasMan wrote:

With Qt one can do both. Hell, one can can program everything with code from scratch, just that it's a lot easier to do it visually.

As a webdeveloper I'm used to working non-visual so maybe I'll pull it off. ;)

Ok, so far i figured out that the software seems to use Qt because there are some preprocessor directives like

...
#include <QtCore/QDebug>
#include <QtCore/QSettings>
...

But I can't figure out which version of Qt.
Does the version matter much, or is it fine to always have the latest?

There is a directive
#include <QtConcurrentRun> // QtCore on Qt4, QtConcurrent on Qt5
Which I don't know what that means.

[MikeyBoy]

If this is production software, then the build dependencies and environment should be well-defined. Are there Makefiles? Is there documentation?

[foobuntu]

MikeyBoy wrote:

Are there Makefiles? Is there documentation?

find . -iname '*make*'

only gives me a bunch of CMakeLists.txt
and two files
/libs/hoedown/Makefile.orig
/libs/hoedown/Makefile.win.orig

There is documentation folder but I think that's rather a doc for the user, not a doc of the source code.
https://github.com/MrKepzie/Natron

[MikeyBoy]

only gives me a bunch of CMakeLists.txt

Result! If the CMake files are well-written, they should specify the dependencies required to build the software.

https://github.com/MrKepzie/Natron

The project README gives information on how to contact the developers, so I'd suggest that might be the best way to get any information you need to start working on the code.

[foobuntu]

MikeyBoy wrote:

The project README gives information on how to contact the developers

Where exactly in the README do you see that information? I can only find the link to homepage but there it is explicitly stated that their contact is only for user concerns, not for development.

But I will check out the CMakeLists.txt files and see what I can find there.

[jonnin]

Qt is really easy to use and it works on windows also. Highly recommended for a starting point.

Comes down to what you want to support, what you need it to look like, how complex it will be... a single window gui can be done straight up with minor work (don't even need a custom class at all) while a rich complex one will have classes upon classes developed to support the various windows and interactions.

Start small, do common things... add a menu, add a button bar, read and write to a text box, figure out the on-change event handling. I would just grab the tools and start playing, write hello world in a text box when a button is mashed, see if you can do that...

[MikeyBoy]

Where exactly in the README do you see that information?

In the Contributions section, I found a link to:

https://natron.fr/easy-task-list/

which contains an email address and a link to their forum. That forum has a "Developers Help" category, which would seem relevant.

[foobuntu]

jonnin wrote:

...while a rich complex one will have classes upon classes developed...

And that's probably the abstraction layer where I will start struggling.
I'm not so scared of hello world projects, where you have a window with a button that opens a popup with hello world, or so. But when it comes to custom classes/widgets, it's hard for me to imagine how that workflow should be. And there are a lot less tutorials about custom classes than for hello world projects.

MikeyBoy wrote:

That forum has a "Developers Help" category, which would seem relevant.

Ah, I missed that section in the forum, thanks.

[jonnin]

Its more of an experience thing, its hard to give a tutorial on a big project. Custom toys aside, just getting one window to update when something in another window changed or the mouse moved or whatever... the interactions and data sharing and all can be tricky. Your design has to allow for everything to be able to talk to each other where necessary yet organized and encapsulated etc so that it is clean and easy to work with. I have only made smallish guis; one was a little complicated but nothing industrial grade. I did the big one by having one master class that contained everything in the whole gui that did nothing except manage the communications across windows, where each window had its own class. Most of what I wrote had no UI at all, it started, it ran, it did its thing without humans needing to see in or touch anything, so I am as usual not the best person to ask.

writing your own widget isnt that bad. It should be self contained, and the gui stuff would just use it like a built in one. It can be complex, but at the gui design level, it should be a non-thing because the hard work is already done.