 Hey everyone, this is Brian, welcome back. In this video we're going to cover the differences between widgets and QML. If you don't know what widgets or QML is, well it's the graphic user interface built into Q. You have two choices, widgets or QML, and it's a hard choice. I want to really solidify this graphic in your mind before we move forward. You have Qt, you have your logic, and you have your interface. These are three distinctly different things. Notice I didn't say QML or widgets, they're interchangeable as long as you follow this software design. This is software development 101, keep your logic, and your user interface separate. These orange arrows signify signals and slots, so you talk to your interface and your logic via signals and slots, you talk from your logic to Qt via signals and slots. This is what we've been really beating up over the last 20 some odd videos. Once you understand this, you can make the core of your application and keep your user interface separate and switch it out as you need to. It's actually really powerful. Because I hate clickbait, you're probably wondering, well if there's two of these, which one should I choose? I'm going to give you the answer right now. It depends on what you're trying to do. Widgets is really, really strong for desktop and native looking applications where QML runs virtually anywhere. It can be running on your cell phone, your desktop, the international space station, wherever you want it to run, it will run there. It's actually really cool. Now, before we continue, I want to make a special note. I do have some courses out there for QML for beginners and widgets for beginners, but you'll notice it's Qt 5 and Qt 5. If you're following this software design of keeping your logic and your user interface separate, you understand now that your changes to your applications are minimal, meaning I am going to do a complete re-record of both QML for beginners and widgets for beginners in Qt 6, but these courses will fundamentally just run in Qt 6 now even though they're Qt 5. So if you're hesitant, just go ahead and dive in. If you sign up for these courses, I'm going to give you a free coupon when I get around to re-recording them anyways. Also note, there is an additional one out here just in case you get stuck. It's migrating to Qt 6, where I took literally all of the code I have ever written in Qt and ran it through automated testing, and then did some manual checks to see what changed between 5 and 6, really, really powerful course if you get stuck. So back to the initial question, widgets versus QML, which one should you choose and why? Let's dive in and take a look. Let's start off simple. What is Qt Widgets? Well, if you go to Google and simply typing Qt Widgets, you'll see there's a whole ton of documentation. It doesn't really matter if you pull it up for 5 or 6 or whatever the version of Qt is. You'll see that you're very underwhelmed. We're talking about user interfaces, but they don't really give you a whole lot of information other than this, and it's a little bit confusing. So before you dive into any of this, we're going to show you some examples of widgets applications. And the Qt Widgets is really designed for a classic desktop style user interface, meaning desktop applications. These will be fit client installs. Think of things like Microsoft Office, or, well, let's just take a look. Qt Creator, for example, is built with Qt Widgets. You've been using this all along and not even known it. It's really that powerful. If you want something that has a really strong native look and feel, this is the way to go. Okay, if you're still fairly new to Qt and QML and all this other stuff, you're going to be confused here, but I'm going to try and make this super simple. Widgets has been around for a long, long time where QML is the new kid on the block. People often think that because QML is newer, it is better, and it is the replacement for widgets, but that's absolutely not true. Maybe someday in the future, QML will be able to fully replace widgets, but right now, no, it really doesn't, in my opinion. So what is QML and then why would you use it? Remember, widgets is for like a desktop native look and feel. Let's look at QML. You go to Google, you see all these pictures of shiny buttons and knobs and graphics. QML is a programming language. It is a user interface markup language, meaning it's another language you're going to have to learn, and that's what I mean by prepared to be confused because, yes, now you have to learn yet another language. Don't worry, it's super simple. So also from here, QtQuick, what's the difference between QML and QtQuick? Well, QML is a programming language and QtQuick, it also says programming language, but QtQuick is the free software application framework, meaning this is the actual framework, the controls, the buttons, the menus, those kind of things. That's QtQuick, where QML is the language you use to work with QtQuick. Man, that gets confusing. Basically, whenever we talk about QML, we're talking about QML in combination with QtQuick, and yes, some people are going to get them flipped around and some people are going to use them interchangeably. This is one of the things about giving multiple names to a new technology. So if widgets is desktop and QML runs just about anywhere, let's just take a look. I don't know if you're aware, but if you're in QtCreator, which by the way is built on QtWidgets, you get a welcome and you go to examples, and then type in QML, you get a ton. And I mean a ton free example code out there, even full video games. So I'm constantly getting people going, can you give me a calculator example? Well, it's already baked right in. Can you give me some sort of animation example or drag and drop? Guys, it's already baked right in. Go to welcome examples, type in QML. And by the way, you also have all of the same stuff for widgets. It's just there, but anyways, QML and then you get every example you could probably ever want. This is just absolutely amazing. So I've got this QtQuick particle examples and effectors already loaded up. I'm going to go to edit. This is what I mean by it's different. You notice we have a main CPP, but we have all these different QML files. This is an example of QtQuick and QML together. Let's go ahead and run this. And let's just look at, say, I don't know, falling leaves. This is an example of QtQuick. It's actually really, really cool. Let's try, I don't know, age. Very neat, huh? Let's just go down and find something a little bit different here. Let's say like turbulence. You simply can't do this with a widgets application. QML is designed to be dynamic, fluid, and have high performance animations. They're simply designed to do two different functions. So let's take a look at a widgets example. We're going to, because I want everybody to be able to do this. We're going to go to the welcome tab, go to examples, and then just type in calc, short for calculator. You can see there's numerous calculator examples out there. So let's just take the calculator example. And I don't know if you caught it, but in the background, it flipped over to the actual configuration, meaning it's loaded the source code for you. And it gives us some documentation on the example. Feel free to read it at your leisure. But you notice right off the bat, this is C++. This is what I mean by widgets really is native. Select whatever kit you want to use, hit configure. And yes, there is our main function. So this is very much a C++ application. You can see our headers and our classes. Go ahead and run this, see what this looks like. We have a full blown application that is a calculator. This is extremely cool, three times three equal nine. Now you may be going, wait a minute, I don't understand. Isn't there supposed to be like a what you see is what you get editor and why is design grayed out? Well, absolutely. That's the beauty of this is you can do it multiple ways. So you see you have a calculator and this calculator, we are making buttons dynamically. You can also do a what you see is what you get editor, something like we can go add new and let's go into cute. And we're going to go to a designer form class. And I want to do say dialogue without buttons. Here we go. Next, and we're just going to call this dialogue next and finish. We're not going to get too deep into this, but here's the what you see is what you get editor. So what I'm trying to impress on you is you can do it two different ways. You can either do it dynamically in code or you can drag and drop. And then you can do things like do layouts, very, very cool technology. And it's very simple to work with. It also integrates directly in with C++. So you can say like right click on a button and go to slot and then go to the click slot. And then boom, you're in C++ land. Now, remember you should always separate your user interface from your application logic. So let's give an example of QML. I'm just going to go to welcome examples and then I've already got QML in here, but I wanted to highlight something. If I just go back to the calc, you're only going to get the widget examples. But if you just go CAL, it's going to expand it out a little bit further. You notice here is our cute quick demo. If you wanted to, you could start with QML and then CAL. That's just a little quick tip if you start hunting and packing through the examples and can't find what you're looking for here. We're going to open this up and you can see right off the bat, we have this beautiful user interface. It has like this torn paper edge and this nice little keypad. This is what I mean by QML is meant to be graphically beautiful and can run just about anywhere. This looks like it could run on a cell phone and actually it could. That's why you would design in QML and cute quick. All right, let's go ahead and build. I've already got my kit set up and everything. This is something I wanted to highlight. A lot of people think that, oh, QML must be better. Now actually a QML application is a C++ application. You're just using a cute quick view and loading a QML file. When it says QRC colon slash whatever, that means it's just simply in a resource. You can see here's our resource and then here's all the files. Here's the actual file in question. We open that up. This is QML and it looks kind of intense and it is really, but it's also very easy to follow. You can see we're talking about a rectangle and then it has this very nice syntax. Okay, so this rectangle has functions inside of it. This is one of the things I really don't care about for QML is that it's so stinking easy to put your logic in with your interface and that's where a lot of people will shoot themselves in the foot. We'll touch on that later when I talk about the pros and cons, but understand that, well, this is really meant to be a beautiful application. However, I say like three times three, you know, so this is undefined. This is what I mean by QML being newer doesn't necessarily mean it better. It's, you know, even in the example, we're getting some weird errors, but we still get the right answer. These are minor little gotchas and things that you'll just have to figure out, unfortunately, but most of the examples will work just fine. But notice this is a full blown application that will run anywhere and we've done almost no configuration. And because I'm not a fan of the calculator example for QML, I'm gonna just expand this out and we're gonna go to QML. Again, we're in welcome examples and then QML and we have a bunch of them in here. So we're just going to pick one at random and may the odds forever be in our favor. Let's just say drag and drop or do you want clocks? Let's go with drag and drop. So drag and drop is a fairly complex user interface task, but they have a full blown example that makes this easy. We're gonna configure our project and then let's go ahead and run this. And let's say I wanna do a grid view. Pretty cool, huh? You can go to tiles, pretty neat. Now, the thing I want to really impress here is that you gotta play around with these a little bit to really get a feel for how they work. Because sometimes, I'll admit it, I don't actually read the documentation, I just let up the code and see what happens. But imagine trying to do this with like a widgets application. You're gonna be there all day trying to figure that out. And it makes it nice and fluid and beautiful and it really does compete head to head with a lot of the other popular frameworks out there. One of the major takeaways though is that QML is newer and can have kind of a slightly unpolished feel to it. So if you were to, let's just open one of these up and live dangerously here, let's click on design. Because a lot of people think that because I'm showing the code, there's no designer, but that's not true. There is a designer and you can work with it directly. It just looks drastically different than the widget designer and I've had some instability problems with it myself because I do run on Linux, but on Windows and Mac it's been completely flawless. The unfortunate thing is because this is new, it does seem to change a little bit. Like over here, there used to be like an ad and now it's just gone. So things like that, just keep in mind. So let's go over the pros and cons of QWidgets. Let's start with the pros. It's fast. I mean, really fast, it's C++. What did you expect? It has a very native look and feel. Now that's not always 1000% true. You may find odd things like when Windows comes out with some new feature, Qt is kind of slow to adopt that but it's the nature of Qt, it runs anywhere so it's gonna have kind of a slow pace to it. It has very easy C++ integration. You could see right when we were doing the example it was right in C++ land. The interface itself is just almost seamless with C++ and it uses signals and slots. So everything just in our mind works. It takes very little brain power to wrap your head around how widgets actually functions. For the cons, well, it feels a little dated. I mean, widgets has been around for a long, long time and everybody knows what a desktop application looks like. It's not always perfect. Like I mentioned, if you know, say Windows or Mac comes out with some new user interface feature you might have to do some creative Googling to figure out how to do that feature in QWidgets. And it's hard to animate. It's not really designed to do that. This is meant for thick applications and it's really only for desktops and what I mean by that is Mac, Windows and Linux. Yes, you can probably get it running on some other things but you're not gonna have a good time. This is really meant to simulate a desktop application. Now let's take a look at QML and Qt Quick in terms of pros and cons. Well, it's fast. Really, really fast. I mean, graphics-wise it's ballistering fast. It's easy to animate and I mean, ridiculously easy to animate. You have a bunch of examples built right into Qt Creator at your fingertips. It has dynamic content as you saw. We've, you know, in this short little video demonstrated things like drag and drop, particle systems, you name it, it's there. And it runs anywhere, meaning your QML and Quick app will run on your desktop, on your cell phone, on an in-dash display and like a Tesla car or something like that. I mean, this is pretty powerful stuff. Now it's not perfect though, so there are some cons. It's newer and as you've seen, it's not fully polished. I have to highlight that, not fully polished. I'm not trying to deter you from it. I'm just saying you're going to notice little inconsistencies and it has a steeper learning curve because guess what? You have to stop and now learn QML on top of what you already know. It can be, as you saw, a little bit unpredictable, a special in examples. And what I mean by the unpredictability, I mean, not so much that your application will crash, it's just you'll find that, hey, they've made some small change between versions and things don't work as expected. And it can be a bit of a memory hog, but look what it can do if you're running like massive particle systems and a 3D animation on a cell phone. Yeah, it's going to chew up some memory. Just bear that in mind. Now, the paid for version of Qt does have a lot of tools that help you, especially if you get into the embedded space, that will help you really identify some of those memory issues and bottlenecks and really help you zero in on the code you need to modify to make it better. Because let's face it, the difference between, say, your full blown gaming desktop and a Raspberry Pi is massive in terms of computing power. Now, if you're like me, you don't like making decisions because you're worried that you're going to make the wrong decision and later on you're going to pay some penalty for it. So let's go back to the Qt Quick demo of the calculator here. And you're really like, I love QML and Qt Quick and I want to use it more. Well, I want to really highlight something. We're in a C++ application and we're using something called a Qt Quick View to set a source and display a QML file. Okay, burn that into memory. We're using a C++ component to display the QML file. So let's go to a new project and we're going to make a widgets application. Now you may get distracted and go, well, what about all this really cool QML stuff? You can make Qt Quick applications and there's a bunch of templates. But we're going to make a widgets app and we're just going to leave the name default next, next. And I'm going to set this to a dialogue so it's not super confusing. It's just a blank canvas. I wanted to go slow through that so you can see I'm not like trying to fool you on anything. And we're going to open up this dialogue here and I already have it Qt, I'm ready to go. There is something called a Qt Quick Widget which you can literally just drag and drop in case you're wondering how I got that. There's all these components from a delete him and say quick, boom, you just drag and drop. And guess what? This is designed to display Qt Quick. If I F1 on that brings up the help system it says the Qt Quick Widget class provides a widget for displaying a Qt Quick user interface. Meaning yes, it is that simple. You can just use a Qt Quick Widget and set it to whatever QML file you want to load and right inside of your widgets application you can display a Qt Quick scene. It's really beautiful. So you really don't have to choose between one or the other. I don't want you walking away from this video thinking you have to make that choice. You can mix and match them if you want. I hope you enjoyed this video. You can find the source code out on github.com. If you need additional help, myself and thousands of other developers are hanging out in the Voidrom's Facebook group. This is a large group with lots of developers and we talk about everything technology related and not just the technology that you just watched. And if you want official training, I do develop courses out on udemy.com. This is official classroom style training. If you go out there and the course you're looking for is just simply not there, drop me a note. I'm either working on it or I will actually develop it. I will put a link down below for all three of those. And as always, help me help you. Smash that like and subscribe button. The more popular these videos become, the more I'll create and publish out on YouTube. Thank you for watching.