Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Training video or doc on advanced UI building
QtWS25 Last Chance

Training video or doc on advanced UI building

Scheduled Pinned Locked Moved Unsolved General and Desktop
10 Posts 3 Posters 477 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • V Offline
    V Offline
    visinet
    wrote on last edited by
    #1

    Does anyone know of any Videos or documents that walks you through how to create an advanced UI using Widgets and the Designer? What I am looking for, and feel would be invaluable for for new users and the rest of the community, is a video that walks you through how to create the basis for a UI that basically copies/replicates the QT Creator application, or say other advanced application UIs such as Visual Studio or VSCode. It doesn't have to actually implement all the back end logic to become functional, just all the UI components, layouts, and structure to get a jump start on how to create an application UI like Creator. Personally I feel that Creator is textbook example of a well designed, structured, and laid out advanced desktop application that uses/implements %99 of the UI functionality most any advanced desktop application would ever need to become a world class application. If something like this existed I believe it could speed up the learning curve for people new to the framework and tool set by a massive amount, resulting in a more positive experience with the product and eventually increasing the user base. I may be mistaken, but I would think that designers of Creator could put together a short 10-20 min video that simply creates a skeleton application that replicates the QT Creator application UI.
    Just a thought.
    Thanks

    Pl45m4P 1 Reply Last reply
    0
    • SGaistS Offline
      SGaistS Offline
      SGaist
      Lifetime Qt Champion
      wrote on last edited by
      #2

      Hi,

      Did you already took a look at the Qt Acamedy courses ? There might already be what you are looking for.

      Interested in AI ? www.idiap.ch
      Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

      1 Reply Last reply
      0
      • V Offline
        V Offline
        visinet
        wrote on last edited by
        #3

        I little but not exhaustive, I will take another look. I have watched a bunch of KDAB videos which are very very good but they all focus usually on a specific principle or widget which would be great as step 2 once I have the basic app layout/design done, but I it would be very helpful, at least to me, to see and example of how to get to that stage first.
        Thanks

        1 Reply Last reply
        0
        • SGaistS Offline
          SGaistS Offline
          SGaist
          Lifetime Qt Champion
          wrote on last edited by
          #4

          If you don't find what you need on the Academy, you should contact them for your suggestion.

          Interested in AI ? www.idiap.ch
          Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

          1 Reply Last reply
          0
          • V Offline
            V Offline
            visinet
            wrote on last edited by
            #5

            WIll do. Thanks again for the info.

            1 Reply Last reply
            0
            • V visinet

              Does anyone know of any Videos or documents that walks you through how to create an advanced UI using Widgets and the Designer? What I am looking for, and feel would be invaluable for for new users and the rest of the community, is a video that walks you through how to create the basis for a UI that basically copies/replicates the QT Creator application, or say other advanced application UIs such as Visual Studio or VSCode. It doesn't have to actually implement all the back end logic to become functional, just all the UI components, layouts, and structure to get a jump start on how to create an application UI like Creator. Personally I feel that Creator is textbook example of a well designed, structured, and laid out advanced desktop application that uses/implements %99 of the UI functionality most any advanced desktop application would ever need to become a world class application. If something like this existed I believe it could speed up the learning curve for people new to the framework and tool set by a massive amount, resulting in a more positive experience with the product and eventually increasing the user base. I may be mistaken, but I would think that designers of Creator could put together a short 10-20 min video that simply creates a skeleton application that replicates the QT Creator application UI.
              Just a thought.
              Thanks

              Pl45m4P Offline
              Pl45m4P Offline
              Pl45m4
              wrote on last edited by Pl45m4
              #6

              @visinet

              What your are looking for is available in the documention. Not as video, but as a detailed step-by-step description with screenshots.
              Sadly, it feels like not everyone is reading it. Doubt, it will change anything if there would be a video.

              • https://doc.qt.io/qtcreator/creator-overview.html

              • https://doc.qt.io/qtcreator/creator-quick-tour.html

              • https://doc.qt.io/qtcreator/creator-project-creating.html

              • https://doc.qt.io/qtcreator/creator-tutorials.html

              Some of the "guides" even include YT Videos from Qt's official channel made by Qt professionals.
              Since you already have some programming knowledge and experience before starting with Qt anyway, I don't think it's really needed to have more stuff... the documentation and the examples are very good and helpful.


              If debugging is the process of removing software bugs, then programming must be the process of putting them in.

              ~E. W. Dijkstra

              1 Reply Last reply
              0
              • V Offline
                V Offline
                visinet
                wrote on last edited by
                #7

                I have been playing with QT off and on for a couple of years now and have created may dozens of applications to learn different aspects of the framework and its various widgets and have gained a good amount of knowledge and proficiency with it. I have gone through a number of the examples included in the installation and followed the documentation for almost all the individual widgets and QT Designer itself, however, when it comes to putting them all together to produce a skeleton application just like Creator I am getting nowhere. I can't figure out how to bring all the individual pieces and skills I have learned together to produce anything close to a QT Creator app. A couple of of the biggest problem areas appears to be getting layouts and style sheets to do what I want, or at lease what I think they should do. I even tried looking at the source for Creator to hopefully just see how the basic application UI is created with respect to what, and how, UI widgets, layouts, and styles are used. Unfortunately this did not help much because I could not make much sense of the source since the application is very very advanced and complex and appears to be designed around a plugin architecture that I could not understand. Had I been able to find basic UI code for the main application windows, like the UI_...h files QT Designer creates for each window I would have probably been more successful. I may be an idiot, but my personal experience with this is that pulling all the individual pieces together to produce even a skeleton application similar to Creator takes alot of experience, knowledge of many tips and tricks, and countless hours spent figuring out the right way to approach the UI design. I found a couple of really good videos that show the building of a specific UI using Creator, such as replicating the Tesla info center UI and one that showed creating a UI with expandable/collapsible menu/tool bars. These videos were invaluable in showing how an experienced developer familiar with the the QT framework achieves specific UI design objectives. I learned a ton from these videos in a short amount of time and was hoping there was something similar that replicated either Creator, VS, or VSCode.

                Pl45m4P 1 Reply Last reply
                0
                • V Offline
                  V Offline
                  visinet
                  wrote on last edited by
                  #8

                  I will give a recent related experience I had trying to figure out how to do something in QT. I am trying to rewrite/port an application I originally created in Borland C++ Builder it QT. In the app I have windows that may have hundreds of buttons that represent physical network and serial port devices in a SCADA like system and button's color represents the alarm state of each button. To compare the performance of this design between QT and C# wrote a simple single window application that had 250 buttons on the page and then used a timer to toggle the color of each buttom between RED and GREEN. It took me all of 20min to create a working Winforms C# app to test this and I have very little C# .NET experience. After maybe 2 days of trying to do this in QT I still did not have a clean solution and after ready many google postings of people asking the same question I came to the initial conclusion that I probably do not want to do it this way and should look for a different way to achieve a similar result. Now please do not get me wrong, I am not saying, or trying to infer that C# is better in any way, just that QT does things a bit different sometimes, and sometimes my initial assumption on how to achieve a specific goal may not be appropriate or the best way to do it in QT. Yes, you can change the background color of a button in QT but when trying to achieve a larger design objecting this may not be the best way to do it QT or may require some tips and tricks that only hours,days, or years of experience can prepare you for. I believe this thought process is similar to having a detailed example of building up a skeleton Creator like app to jump-start the learning process. Just thought it would be helpful to see where my head is at. Thanks again for all the support and ideas.

                  1 Reply Last reply
                  0
                  • V visinet

                    I have been playing with QT off and on for a couple of years now and have created may dozens of applications to learn different aspects of the framework and its various widgets and have gained a good amount of knowledge and proficiency with it. I have gone through a number of the examples included in the installation and followed the documentation for almost all the individual widgets and QT Designer itself, however, when it comes to putting them all together to produce a skeleton application just like Creator I am getting nowhere. I can't figure out how to bring all the individual pieces and skills I have learned together to produce anything close to a QT Creator app. A couple of of the biggest problem areas appears to be getting layouts and style sheets to do what I want, or at lease what I think they should do. I even tried looking at the source for Creator to hopefully just see how the basic application UI is created with respect to what, and how, UI widgets, layouts, and styles are used. Unfortunately this did not help much because I could not make much sense of the source since the application is very very advanced and complex and appears to be designed around a plugin architecture that I could not understand. Had I been able to find basic UI code for the main application windows, like the UI_...h files QT Designer creates for each window I would have probably been more successful. I may be an idiot, but my personal experience with this is that pulling all the individual pieces together to produce even a skeleton application similar to Creator takes alot of experience, knowledge of many tips and tricks, and countless hours spent figuring out the right way to approach the UI design. I found a couple of really good videos that show the building of a specific UI using Creator, such as replicating the Tesla info center UI and one that showed creating a UI with expandable/collapsible menu/tool bars. These videos were invaluable in showing how an experienced developer familiar with the the QT framework achieves specific UI design objectives. I learned a ton from these videos in a short amount of time and was hoping there was something similar that replicated either Creator, VS, or VSCode.

                    Pl45m4P Offline
                    Pl45m4P Offline
                    Pl45m4
                    wrote on last edited by Pl45m4
                    #9

                    @visinet said in Training video or doc on advanced UI building:

                    I can't figure out how to bring all the individual pieces and skills I have learned together to produce anything close to a QT Creator app

                    So you don't want a video on how to work WITH QtCreator? You would like a tutorial on how to create an app like QtCreator yourself?

                    Unfortunately this did not help much because I could not make much sense of the source since the application is very very advanced and complex and appears to be designed around a plugin architecture that I could not understand

                    Yes QtCreator uses plugins and many different components, since it's a fully functional IDE.

                    @visinet said in Training video or doc on advanced UI building:

                    I will give a recent related experience I had trying to figure out how to do something in QT. I am trying to rewrite/port an application I originally created in Borland C++ Builder it QT. In the app I have windows that may have hundreds of buttons that represent physical network and serial port devices in a SCADA like system and button's color represents the alarm state of each button. To compare the performance of this design between QT and C# wrote a simple single window application that had 250 buttons on the page and then used a timer to toggle the color of each buttom between RED and GREEN. It took me all of 20min to create a working Winforms C# app to test this and I have very little C# .NET experience. After maybe 2 days of trying to do this in QT I still did not have a clean solution and after ready many google postings of people asking the same question I came to the initial conclusion that I probably do not want to do it this way and should look for a different way to achieve a similar result.

                    Then you chose the wrong approach.
                    Changing the color / stylesheet of a button, triggered by a timer is possible just from looking at 2-3 pages in the documentation (QTimer, the stylesheet reference and maybe the widget pages ifself)

                    But yeah, your opinion :)

                    I agree that Qt has a steep learning curve even for experienced C++ programmers and it's not even mentioned (because it should be clear) that you should have C++ and OOP knowledge, otherwise you also will have a hard time... after all Qt is a C++ framework...
                    Complete beginners with zero programming experience and knowledge, who want to dive into GUI development should not start with Qt, so they get overwhelmed by MOC, UIC, Signals, Events and soo many things and features that come with Qt.
                    They should learn the basic principles while or before learning Qt first.

                    Maybe one day there will be your video... but this won't reduce the amount of questions asked in the forums or solves problems of beginners struggling how and where to start, when learning Qt...

                    IMHO the documention, the Qt Wiki and the Qt Forum here are great places to visit and to learn new stuff :))

                    Cheers :)


                    If debugging is the process of removing software bugs, then programming must be the process of putting them in.

                    ~E. W. Dijkstra

                    1 Reply Last reply
                    2
                    • V Offline
                      V Offline
                      visinet
                      wrote on last edited by
                      #10

                      Thanks for all the information and feedback.

                      "So you don't want a video on how to work WITH QtCreator? You would like a tutorial on how to create an app like QtCreator yourself?"

                      Yes, exactly, but not it's entire functionality from a product standpoint, just the general UI layout and work flow. Not because I want to create an IDE or a product like Creator, just because I love QT Creator and honestly believe it is a perfect example of a well designed and implement world class desktop application, regardless of whether it is an IDE or a photo editing program. Its general UI design and layout I believe provides a perfect template that could be used as a great starting point for most any application that I would want to create. It utilizes/implements most all the UI functionality I think I would need in most any upcoming projects I have planned, and obviously a tutorial on how to get there quickly would be great. I really enjoy working with QT and learning more about the Framework and how to solve problems with it and will continue doing so. I will press on digging deeper into all the available documentation and example code along with following the various online resources available.

                      Thanks again for all the valuable information and feedback.

                      1 Reply Last reply
                      0

                      • Login

                      • Login or register to search.
                      • First post
                        Last post
                      0
                      • Categories
                      • Recent
                      • Tags
                      • Popular
                      • Users
                      • Groups
                      • Search
                      • Get Qt Extensions
                      • Unsolved