C++ Qt 47 - Intro to model view programming

everybody's bright and welcome to the 47th cute 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 cute there are other languages that implement this but cute 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 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 represent 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 call this mod view test I'll throw it in the usual location and if you have the official cute 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 ListView now you notice how there's ListView 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 ListView 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 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 I'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 so 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 it 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 say add insert and one more let's go delete all right now let's just flip into dialogue 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 queue stringless model and it's going to be a pointer called model save your work go ahead close that and jump back into your implementation file they dialog dot 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 dialogue now we need to actually generate our data so what we're going to do is say q string list list and let's just let's just fill this with some random data here so we'll say list 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 ListView set model hey 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 ListView so say ListView 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 cue abstract help if I could spell abstract and we're looking for a cue abstract item view there 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 ListView set edit triggers this is what you know edit mode is triggered by any key pressed or double-click 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 ListView here and the combo box here and we have three items in there so we're going to implement the ad in certain delete now our edit mode should already be in there so say lizard and when you update it the underlying model is updated which updates all the views pretty neat so let's implement ad and certain 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 intro 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 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 say index equal model index and we want to position of row and now we need to set it at mode so we'll say UI this view set current whoops sorry about the 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 just copy that and on insert we 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 this 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 whoops and we need to tell it what row and how many so we want UI this 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 so let's delete spiders but we want to put let's say mmm 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 in 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 a tional entertaining and thank you for watching

Channel: VoidRealms

Views: 122,048

Keywords: Qt, 47, Intro, to, model, view, programming

Id: uDC9L4T59bM

Length: 11min 16sec (676 seconds)

Published: Tue Feb 08 2011