 Hey everybody, it's Brian. Welcome to the 146cute tutorial with C++ and GUI programming. Alright, we're going to just dive right in, create a new file, project, and we want a Qt Quick application. And we're going to call this Font Playground. Why not? We're going to be playing around with fonts a little bit today. And I've got the newest version I should actually show you this about Qt Creator. Ah, never mind that. That's my stupid Android tablet. I'm rebooting it right now. Alright, so this is the newest version of Qt. I'm using 5.60. And if you've downloaded it, you've noticed that, hey, there's something new here. When you create a new project, it says Main Form. Well, what they've done is they've actually split it off into a secondary file. Which, yes, if you didn't notice before, you could actually do things the easy way with drag and drop and manipulate your QML files like this. We haven't been doing this simply because I want you to understand the nuts and bolts of how things work before you get into the, what's it called, the whizzy, jiggy, whatever, what you see is what you get at it. So we're going to actually just delete that little file because I don't like it. It's been bad. It hurt my feelings. And then we're going to go in here and we're just going to clean that out. Now we are kind of back the way they previously were. We're going to add some includes here. Maybe if I type, I'm like so excited right now. I'm going to watch Walking Dead here in a little bit. I'm like really ramped up on this season. Now you see, I'm so excited I can't even type. It's ridiculous. So we're going to import, whoops, and we're going to import the Qt Quick Dialogs. And you may have to choose a different number if you get an error when you try to compile with 1.2. All right, so we're just going to, let's do a little bit here. Let's just set it to the trustee 500 by 500. So the premise of this program is we're going to say myself and like probably a few million of you out there are also web designers. So we're going to have like a couple buttons across the top and a little area that we can type in. We're going to have an area that will show us in real time what that font will look like. So let's say you're kind of playing around with a web page and you just want a little simple editor. Because why not? I needed an example and I was having a really hard time coming up with one for this. So we're just going to do this. So we're going to say Color Dialog. And Color Dialog actually messed me up. I just, I tried and tried and tried to wrap my head around this thing and I just could not do it for the longest time until I, you know, Shocker read the documentation. Sometimes, you know, I just like doing things the absolute hardest way possible. Now some of you will notice when you start typing autocompletes not working. I haven't quite figured that out. Maybe somebody out there can help me. But for whatever reason, even importing cute quick dialogues 1.2, autocompletes just not working here. So I'm kind of what's it called flying blind here. So we're going to set the modality of the dialogue and what modality is. It's whether or not you can choose another dialogue. So let's see if we can just do this here. So we're going to set it to modal, meaning that once this dialogue is up, you cannot interact with the main form. We're going to set the title. And we're going to set the initial color. We'll set Color because I kind of like green. I'm in a green mood. Why not? And we're going to say on accepted, see it would be much, much more helpful if, you know, the autocomplete would actually like work. Like I said, I haven't figured out why it's not doing that. So I need somebody smarter than me and the internet's full of smarter than me. So if somebody's smarter than me, please tell me why it's not working. And we're going to say, so all we're going to do is we're going to say when it's accepted, clear that break point. And then when it's rejected, we just want to know what's going on here, right? And if this looks familiar, it's because it's pretty much ripped straight out of the manual for how to work with the color dialog. So if it's accepted, it's going to print out the color. If it's rejected, it's just going to say, hey, rejected. We're going to give this a good build. Why not? Just because. Okay, so it actually ran. That's good. I'm going to copy this. And we're going to say font dialog. Choose a font. Obviously the font dialog does not have a font, so we want to get rid of that. Did I spell modality correctly? M-O-D-A-L-I-T-Y. All right, cool. So when we run this, you notice how we've got them in there. We've got the color dialog and the font dialog, but they don't actually display anywhere in here. That's just something you should be aware of when working with these. You kind of have to include them. You only really need to reference them when you want to manipulate their properties. But you definitely need an instance of it in your application if you're going to work with it. So now we're going to say row. And we are going to just put in some button goodness here because buttons are awesome. My daughter used to always say that all the time, buttons are awesome, Dad. So I bought all these buttons, and then I was stepping on these stupid things. Let's call this BTN color. So this is going to be a color button. Text will be obviously color. And then let me get rid of this. Let's get some more screen real estate here. We want the on clicked. And we want to say color dialog. That open. And I'll kind of explain this as I go. This is what really messed me up about how to work with dialogs. I just for the longest time could not figure this out. And the reason why is I'm used to the C++ or the C sharp or the Java or the visual basic way of doing things where you open the dialog and then you have to reach back and get the color that was chosen. If it was accepted, then you had to do inline air handling and all this other stuff. And it was just very confusing why it wasn't working until I actually figured it out. And we're going to introduce a new item here called the text field. The text field is a... Well, it's a text field if that's descriptive. Now we've worked with the text edit before, but you remember how it didn't have like the border around it. So there was no real way to see the edges of this unless you put it in a rectangle. The text field actually does that for you automatically. And we're just going to say maybe enter some text. And we're just going to say width we're going to say 300. We're going to scroll down here. I'm going to add some spaces here just so I can scroll up. All right, so now that we've got that we've got our row going across the top here and we're just going to give this a good build and run just to make sure everything looks the way it's supposed to. So we'll have color. That should say font, not color. And we're going to have a preview right here in the center. And we obviously don't want color dialog. We want font dialog. That open. And let's make a text ID and we're going to call this something. Now let's call it preview. If I can spell preview. Man. Like cannot type. All right, we're going to say anchors.centerin. I got this new video game and it's called Tom Clancy's The Division and the key bindings are a little bit different. So I'm going to blame that game rather than my own utter incompetence because throughout playing the game I found myself hitting the wrong button all the time. So this is the part that really messed me up. You notice how I'm saying font equal font dialog font and then we're going to say color equal color dialog dot color. When we do that and actually let me finish this real quick while I'm thinking about it or I'll totally mess this up. When you look at this from a C++ point of view you're thinking, okay, these are the initializers. These are the initial variable settings. So when this thing loads that's what it'll be. And sure enough you can see that it's green. It's the font. Wow, I actually misspelled font. I'm going to just redo that and we're all going to pretend that part of the tutorial did not happen. So you can see how it is everything that we've said initially but what happens is as we type it automatically does it. And if we pick a color like let's actually go here and we're just going to pick bright red. Notice how it's red. This is what messed me up about it. I didn't understand that under the hood this is actually creating signals and slots. So when you change the color property of the dialog box anything that's bound to that in Ka anything that's connected via signal and slot will automatically change with it. So you don't have to write some obtusive code like you know font dialog open preview. I mean this is what I literally what I tried preview.font equal font dialog font which you'll get mixed results if you try that. But that's not the way to do it. The way to do it is you simply create an object, bind properties to it by saying you know font equals this font, color equal that font or color, dirt, text equal that text and then make sure that you have your dialogs all set up and ready to go. So let's just build this again and play around with this. So we're going to make the font bigger just so we can see this thing. Yeah, really big. Why not enter some text and we're going to change the color. Now this is modality. See how the dialog is open. If I try clicking the window I don't know if you hear me clicking it won't go because this is modal. Is it modal or modal? We'll call it modal for this tutorial. Meaning basically this has focus and this must close before you can interact with any other part of the program. Notice how I hit cancel and it said rejected but we're going to go color and let's say I really want that a boon to orange so I'm going to go click on my little eye dropper and go up to that orange and voila, there it is. I love doing that. So cool. Anyway, so my favorite color is actually blue so we're going to put it on blue here and we're going to enter some text and we're just going to play around with this and we're going to enter some HTML in here. So like many of the cute controls you can see that we can actually enter some rudimentary HTML and it will in real time render this. Pretty neat. So I will throw this out on my website with the full source code and everything. I encourage you to download it and play around with it. In this tutorial we really covered how to work with system dialogues and we showed the how HTML can be rendered. Now I have to say rudimentary HTML. If you try rendering like a full web page with flash animations and javascript it's just not going to work. I think it'll do like underline bold. I'm not sure if it'll do hyperlinks or not. I swear I read somewhere that it will but I've never played with it that much. It's really not meant to display full blown HTML. It's more or less just meant so that you can very quickly and easily stylize the text. And oh yeah, we introduced the text field component. So that's it. Hope you found this educational and entertaining and I'm trying Dimitri. You're the man. I'm trying to build applications that have some sort of contextual meaning rather than just this is how you build a dialogue and then 15 minutes of that. So if you found this educational and entertaining I would encourage you to go out to my website. It's run 100% by your donations and if you're still watching I'm going to assume that you're not horribly offended by that and I would love it if you would go out and join the Voidrum's Facebook group. Totally free of charge. We're pushing 500 users out there and we're all fluent in multiple programming languages and we just help each other out. There's only one of me and there's thousands of you so by all means join, ask questions, become part of the community. That's it. Thanks for watching.