 Hey everybody, it's Brian and welcome to the 47th Qt tutorial with C++ and GUI programming. Today we're going to start down the long and winding road of the Model View Programming architecture. Now, one thing you should note is that this is not unique to Qt. There are other languages that implement this, but Qt implements it very, very well. I was very impressed when I first read about the way they implemented this and just the ease of use of which you can do things. But anyways, I'll quit babbling and we'll just get right to it. What is the Model View architecture? Well, you have data and you put that data or some of it or all of it into a model. That model represents the data. Then you have a view and the view renders the data. Now this view could be like a list view, a combo box, something of that nature. And you have these things called delegates, which can be used for editing or rendering. We'll get into that in other tutorials. What you should focus on this time is that you have data, a model, and a view. Data is obviously your data. Model represents your data and the view renders or displays it. So I know that seems kind of confusing, so let's just jump right on in here and we're going to make a sample application here. We'll call this Mod View Test. I'll throw it in the usual location. And if you have the official Qt programming book, this is going to look very familiar because I have kind of borrowed heavily a bunch of elements out of this tutorial. So let's go list view. Now you notice how there's a list view and a list widget. We've worked with the list widget before and this is what you're used to. This is where you manually add items in. We want the list view. This means it's a view, the Model View framework, or I should say Model View architecture. And you cannot really add directly to that. You have to modify the underlying model. All right, now let's just grab some push buttons. And I know that I've been doing kind of shorter tutorials and, well, that's about to change. I've got a feeling this is going to be a longer one. Let's do a combo box. Let's just drop that down here. Let's grab these and let's just set our layout here. We'll say add, insert, and delete. Now what we're going to do here, let me explain real quick what we're going to do, is we have our list view. And this is where we're going to do the bulk of our work. And we have three buttons, add, insert, and delete, which will respectively add, insert, or delete data to and from the model. When the model updates our list view and our combo box are both going to be sharing the same model. So they're going to update at the same time. It's going to really show you the power of the model view architecture and how you really use things. Now because my time with YouTube videos is pretty limited, I'm going to have to keep this kind of a simple tutorial. Actually, let me open that back up. Let's just get our signals and slots out of the way here. So we'll say add, insert, and one more. Let's go delete. All right. Now let's just flip into dialog.h. We're going to add some includes here just for the sake of time. And let's just go ahead. And in the private section, what we're going to add here is we're going to add a Q stringless model. And it's going to be a pointer called model. Save your work. You can close that. And jump back into your implementation file, the dialog.cpp. And this is where the real work is going to be done here. And what we're going to do is we are going to say model equal new Q string list model. And we're going to set the parent to the dialog. Now we need to actually generate our data. So what we're going to do is say Q string list and let's just fill this with some random data here. So we'll say list. We'll say cats because you know I like cats and dogs and let's say birds. Now we've got our model. We've got our views and we've got our data. Now we've got to tie everything together here. So we're going to say model set string list and we're going to give it the list. And what that does is that fills the model with this data. So that data is going into this model. Now we need to tie the model and the views together. So we'll say UI list view set model and let's say UI combo box set model. And that's it. That's pretty simple. Now one thing we're going to add real quick here is we're going to add the ability to manually go in and modify the list view. So let's say list view set edit triggers and this determines how edit mode is triggered. Like if you want to double click or if you press a key and it'll start editing the item. So we'll say Q abstract help if I could spell abstract and we're looking for Q abstract item view there you are. And we want any key pressed and if this seems a bit confusing just bear with me here and let's just copy and paste this. I promise you this will be much, much clearer at the end of this tutorial and we'll say see any key pressed and double click. So what we're doing here is we're saying UI list view set edit triggers. This is what you know edit mode is triggered by any key pressed or double clicked. So if you press any key or you double click it it's going to go into edit mode. So let's actually scroll over here. Now we've got our signals and slots. Now before we really get into that let's actually compile and run this. Make sure we've got a good working program here and I kind of want to show you the drift of what's going on. Tick tock there it goes. Okay so our model is holding the data and you see we've got two views. The list view here and the combo box here. And we have three items in there. So we're going to implement the add insert and delete. Now our edit mode should already be in there. So say the lizard. And when you update it the underlying model is updated which updates all the views. Pretty neat. So let's implement add insert and delete really really quick here. Okay now what we need to do is we need to get the position where we want to put this so we'll say int row equal model row count because we want to put this at the end. And then we're going to say model insert rows and what this does is allows us to insert one or more rows. So you give it the position, whoops the position and how many you want to insert and that inserts it. I mean that's all there really is to it. But now what we want to do is instantly set it into edit mode. So what we need to do is grab the queue model index. Now the queue model index is the position within that model. Because remember you might not be displaying all the data. So say index equal model index and we want to position of row. And now we need to set edit mode so we'll say UI. This view set current, oops sorry about that. Set current index and we give it the queue model index. What that does is that selects the item that we're looking for. And then UI this view and we want to trigger edit mode. And give it the index again. So just to recap when we click the add button we're going to find the position we want to put it in. And in this case we're going to put it at the end. And then we're going to insert the rows and we're going to put it in that position. Then we're going to find the queue model index or the position in that model where that is. And then we're just going to select it and set edit mode. And we can just copy that and on insert we can just paste that in there. The only real difference between adding and inserting is, well you guessed it, the position where we're putting this. So let's just go UI and what do we want here? List view, current index, and we want the row of the current index. And delete, well delete, remember you don't really modify the view, you modify the model. So we need to go model, remove rows, oops. And we need to tell it what row and how many. So we want UI, list view, current index, because we want the current item, row, and how many. We just want to delete one of them. Save your work, compile and run. Now we should be able to add whatever we want here. So we'll say lizards, spiders, and let's just say we don't like spiders. Let's delete spiders. But we want to put, let's say, kittens, because kittens and cats are two different animals. And you notice how when we update the model, all the views are updated as well. So let's say somebody comes and goes, well, cats and kittens are the same thing. I hate to tell you, so delete kittens. And you see how everything's updated in real time. That, in a nutshell, is the model view architecture and how it functions. Yes, it gets much more complex than this. And this is a very high level tutorial. But we're not there yet. We will be. This is Brian. I hope you found this tutorial educational and entertaining. And thank you for watching.