 Hey everybody, it's Brian. Welcome to the 138th Qt tutorial with C++ and GUI programming. Woo, 138 of these things. We've come a long way and so has Qt. If you've been following Qt, you know that it's actually undergone quite a transformation from Qt 4 when we started these tutorials to Qt, what are we on? 5 now. They've added quite a bit and they've changed a lot of the internals. It's actually going aggressively targeting mobile devices being tablets, phones, embedded computers inside of cars, things of that nature. I do actually listen to you guys. I do read my emails. I actually just got to the very last email in my inbox. I've actually gone through them all. So if you have not gotten a response from me, that means your email did not get to me. I know I just asked for like a bajillion emails, but we are going to begin a new journey in Qt. Every one of these tutorials I start with C++ Qt GUI programming, but we've been doing a lot of command line stuff. So that was one of the big feedbacks that I've gotten from you guys is, why aren't we doing GUI programming? Well, there's a reason for that. I didn't know how to do it. That's right. We've done all these tutorials, but I really didn't know the Qt proper way of doing it. Qt 5 has undergone a radical transformation with something called QML or Qt meta language or Qt modeling language or Qt markup language, whatever you want to call it, QML. So what is QML? Well, QML provides a framework for developing applications and libraries and blah, blah, blah, blah, blah. Really what it is, it is an outstandingly amazingly awesome presentation layer for your GUI. And this is kind of the primer or introduction to QML. And the next several dozen hundreds, trillions of tutorials will include QML at some point. Because QML is going to be a major part of your world if you're going to be developing in Qt. And there's a very good reason why. When you want to do something on the presentation layer, you want to do something amazing. You want to do something awesome. Well, you know, it's great to just drag buttons and things on there. But what if you want to do 3D rendering or show an animation or inline movement or, you know, well QML solves all those problems. Now, if you go to do that with C++, bam, you know you're going to be importing libraries. You're going to be interfacing with classes. You're going to have lots of bugs. You're going to have interfacing problems. You're going to have compile time errors. You're going to have runtime errors. You're going to have floating point processing problems. You're going to have, you know, hung pointers and, you know, rogue memory loss and all this other stuff that makes you just want to go screaming back to Java or Python. Well, QML takes care of all of that. Kitty, what the heck? You're making like the weirdest noises. Sorry, this cat's like freaking out. So what is QML? We've talked about it. You've listened to me rant for a few minutes here. QML is, I want to say personally, a radical departure from anything that we've talked about thus far. Even though I think QML has actually been out for about, what is it, five, six years. It's new to me. Let's put it that way. And if you go out and you go to qmlbook.github.io, that's qmlbook.github.io. I did not write this book. Let's see if we can scroll down. The author of this book is Jurgen Brokled Rannell and Johan Thelen. I very much apologize, gentlemen, if I have just bastardized your names. This book is out on the internet free of charge, and I've personally been reading it. It's amazing so far, but it's not finished. So I would advise you go out there and start reading parts of this book. It's free. And you'll find the bulk of this book doesn't cover the things that we've talked about. They cover, if you look, canvas elements, particle simulations, shader effects, multi-media, et cetera, et cetera, JavaScript. Why would they be covering that? Well, let's just dive on in here. Now, a lot of people don't know this, but my favorite button in Qt Creator is this little examples button. And it may change depending on what version of Qt you have. It may change depending on, you know, what build you have, et cetera, et cetera. But that examples button should have examples in there, and you can actually, you know, pick things. Like you want this, you want that, whatever. So I'm just going to pick this. And we're going to give a good example of, well, QML. This is called the Planets Example. This comes built in with Qt Creator. I didn't write a single line of code. Ooh, Ubuntu had a boo boo. We're just going to continue on and ignore that. I've actually not run this in Ubuntu, so this may not work, but I have run this in Mac and it worked beautifully. So let's just kind of look at this. This is a standard structure of a QML application. And you can see it's got this mix. There's C++, there's JavaScript, and there's QML. Now, some of you old school programmers like me are going to be going, what is this unholy mess, this abomination? Well, it's actually very elegant and very well done. I think that I want to personally go to the Qt studios and hug every single developer that has built this because I fought it for a very long time, but once I started learning it, I realized how much time this was going to save me. So when you look at the main or the entry point of the application, you can see it has a Qt Quick Viewer, and then it does a couple of different things here, but then it just says Set Source, QRC, meaning it's a compiled resource file, Planets QML. What? Planets QML? What's this thing? And it says Qt Canvas 3D Examples. So if we go into Planets, there is a bunch of QML code. Now, if you're looking at this, this looks like a merger of some sort of JavaScript slash cascading style sheet. Well, there's a reason for that. What QML is, it's really a markup language that allows you to find items on the presentation layer and let Qt handle all of the rendering, all the animation, all the pain in the butt stuff that just drives programmers batty at the end of the day. Now, I'm on Linux, and let's see if this actually compiles and runs. Tick tock, tick tock. This is a little bit bigger of a project, so it may take a second to compile here. You can just listen to the soothing sounds of my voice while we compile. Now, I should note that the reason why this was created, this being QML, was because they want to work with devices, right? Just make the planets bigger here. So you can see, you get Jupiter spinning and all this other stuff, and let me just shrink the planets down. And let's look at the sun. Well, there's the sun. Let's look at Mercury. Hey, Mercury is kind of boring. Let's look at Venus. Sexy Venus, yeah, baby. And Mother Earth. And you notice how it's actually got some rastering going on here, and it's actually bumped. That's how you get the mountains and stuff. And you've got layers of clouds and the sun's reflecting off of it. And you've got the 3D animation. Yes, ladies and gentlemen, this is what QML is designed for. Very quickly, very simply, very easily creating complex animations. And you can see how the moon's actually orbiting the Earth right now. Hey, let's just kind of click through some of these. I mean, look at that. That's beautiful Mars. I mean, look at that stunning detail. Jupiter, I've never liked Jupiter, that big I thing that it has kind of creeps me out. But Saturn's always kind of awesome, although that's actually not the same color Saturn really is. But whatever. And you can do things like you can change rotation speeds and stuff like that. So what is QML? We've asked this question a couple of times. We can see how you have animations. That is how you actually define animations. You just make a simple little inline class here. And they're inline classes in that sense, but it's very much hidden. So we're going to close this. And we're going to show an easier example, something a little smoother. We'll go back to examples here. And let's look at the calculator demo. And let's actually build and run this bad boy. And you see it follows the standard structure of QML. It's got some other stuff. And there is the JavaScript that it's actually using in the background to act as a calculator. Now you may be asking yourself, why are they using this? Why JavaScript? Why QML? Why this? Why that? Well, C++ is a very heavy language, in the sense that it takes time to do all this. You have to define a variable. You have to make sure that variable type exists. You have to do this. You have to do that. QML intrinsically uses, I think it's OpenGL to do 3D rastering and rendering. So you don't have to mess with any of that. They use all this simply because they want to make the presentation layer nice and easy. Let's close that. Oops, close all this nonsense. So why JavaScript? Well, JavaScript because it's a very expressive, easy to use language. It was maroon and trouble. I've never even seen this. What is this? It's like a little video game it looks like. So as you can tell, you can do complex, and that cat is making like this howling noise. Must be like a full moon or something. And you can see, oh, this has got audio and everything in it. You can see how kitty I'm recording. I don't know if you guys can hear that. If so, I apologize. He's like driving me nuts. You can see how you can define the objects and images and things like that. And you can define custom classes. Oh my goodness, what are you doing? I bet it's because my girlfriend's not here. She probably misses her. She'll be back, buddy, chill. I've actually never seen this. We're going to play this game for a minute here. Maroon and Trouble, a new game. All right, three, two, oh, I have no idea what to do here. I'm going to die and everybody's going to laugh at me. I have no idea what to do. It probably helped if I read the directions. I'm sure I could move this little guy around the screen somehow. Uh-oh. Well, as you can tell, I am horrible at video games. Where am I? Hmm, this actually looks like it could be addictive. Or not. Let's put a crab in here. Why not? This is actually kind of funny. But as you can see, you can do all sorts of things with this. It's a very expressive language. And I say language because it is actually a language. It's not an extension of Qt. It's a full-fledged language on its own. Now, what are some of the benefits of this? As you can see, because we're using C++ and we're using JavaScript and all these things, you can actually merge all these languages together. So let's say you're building a game such as this little maroon in trouble. Well, you could have your grumpy old C++ programmer, you know, somebody like me in the background do the hard C++ coding. But you could have, you know, your students straight out of high school or college doing the JavaScript. And you can have your graphic designers doing their content. So you can really separate all this stuff and get production ready very quickly. Now, part of the reason why QML was created was because Qt itself had to fundamentally change. Qt has always tried to be platform independent, if you will, where it can go from Windows to Mac to, you know, Linux. And it can do so very smoothly. I personally have written programs that run on every platform and I love it. When you introduce cell phones, tablets and things like that, you're talking about while they are quote-unquote miniature computers, they are radically different. They have much less RAM. They have low power requirements. Some of them don't even have storage. So you need something different. And on top of that, each one of these devices has a totally radically different way of doing things under the hood. iOS and Android are two totally different animals. And then you throw in things like Windows Phone, an abomination that is Windows Phone. That's totally different as well. So now you have three different languages. You have, what is it, Objective-C, which I think they're moving to something called Swift. And then, you know, Android has, you know, the Android Studio, which isn't really Java, but it's Java. It was Java enough that they got sued by Oracle. And then you have Windows, which I think uses Silverlight and C-Sharp. So now you've got all these different technologies you have to learn. It all kind of, you know, really beautifully just merges all this into one. So you don't have to learn all that garbage. You can just take what we've already learned and we can just start building programs. So we're going to say New. And Qt Quick Application. Oh my God, Cat, Chill. Call this Quick Cat. Why not? Because my cat's driving me insane. And you notice how it says Android has not been configured. We'll get into that in future tutorials, but you'll have to configure what's called a kit. And we're just going to look at the bare-bones structure of a QML application here. Now, you can see how we've got our project implementation file. We've got our project file. There's really not a whole lot going on here. It just says, you know, different target paths and, you know, installs and things like that. Now, notice how if Unix not Android. Interesting. And then we've got our main. And we're just loading our compiled resource file, main QML. And ta-da, this is our Qt Quick in a nutshell. So we have what's called nestling, where this window, anything in brackets you see here, start bracket in bracket, anything in those brackets is considered a sub-object or a child of. So this window is the parent. And you can see how it's visible. And in that, we have a mouse area and a text area. So let's run this and see what this does. I'm sure if you're watching this video, you've probably already looked at this thing and said, okay, so you've got a mouse area, which anchors fill. Anchors just define endpoints, which we'll cover in future tutorials. Fill parent. Well, the parent is the window. So it's going to be this entire window. It doesn't matter where you click in here. The on click will be called and it says Qt Quit, meaning when you click that, shocker, it closes. So we'll just run that again. And we have our text Qstring Hello World Anchor Center in parent. So it's centered. So it doesn't matter really what we do, how we resize this. It's going to stay centered in that parent. Very quick, very easy, very expressive. And we can actually play around. So we can say color, whoops. Say red. It's been one of those red days. And ta-da. So that's all for this tutorial. We're going to be really deep diving into QML because it's a big fundamental change in the way that Qt has done things in the past. And it can get your code onto devices that you thought were previously unreachable, such as Android phones, Windows phones, iPhones, and even like built-in dashboards inside of cars and things of that nature. So some resource material, qmlbook.github.io. I would very much love it if everybody would go out and like read this book and, you know, praise the authors. And when it comes out, I have no way affiliated with these guys. But if you like it by the book, you know, support their work. Also, I would recommend reading up on the Qt official documentation because things may have changed. And whoops. Visit my website voidrealms.com. I will have the source code for this and all the other out there under tutorials. And I'm not going to make a separate one for QML. I'm just going to leave everything right under Qt. So it'll be Qt and then all the way, way, way, way, way at the end. Wow, maybe I should separate this off. That's it. Oh, no, actually, no, that's not it. If you're watching this, I'm going to assume that you are a federally intelligent individual and you are looking for other fairly intelligent individuals. Well, have no fear, we're all very non-intelligent in our group. But be sure to join the Voidrealms Facebook group. We've got like 400 programmers in there and there are a lot of people, a lot of very smart people in there. They answer a lot of my questions. I actually go in there and fire questions and people will just, they're very eager to help is what I'm getting at. I'm really trying to shift away from people emailing me directly and joining the group and asking the group because there's only one of me and I'm not always available and it takes me three to six months to get through my inbox. So if you're so inclined, feel free to donate. My website's run purely off donations. You can go in here and we'll look at my little channel. Whoops. Yep, I've got like 6.4 million views. Wow, I have 36,000 subscribers. That's crazy. And I have $0 estimated revenue because I don't put ads in these. I don't like ads. I think they suck. So I feel like if you think this is worth it, donate if not, don't. But either way, please join the Voidrealms Facebook group. It's free. There's 400 plus programmers in there and we're all willing to help each other. I do, however, look forward to your thoughts, your questions, your feedback with Qt and QML because this is going to be my focus for the future.