 This video we are going to use the file system model to show the file system in two different views And we're going to show how to synchronize those views. So let's jump in here And we're going to say tree. This is going to be very similar to what we've already done That way it's easier to understand So we've got a tree in a list and we're going to slap those in together bang Now we're going to click on this list here and we're going to say view mode now by default It's in the list now. There's really only two you could actually Create a custom view mode, but that's way more advanced than what the series is going to cover We're going to flip this to icon mode Then we're going to click here Set that to layout Let's give this a good build and Let's go ahead and jump in here and we're going to add our includes. I'm going to say include qder We want the q file system model Don't really need them, but I'm going to include them The q list view and the q tree view Then we're going to go down here Make our net function We want to hold a current directory in memory. So we're going to put that right there as a private variable And we want a file system model. Let's go ahead right click and let's add that Let's go into our interface right click that tree view and We want activated and we're going to go in here right click that list view And we're going to go to activate it on that as well Pretty simple to understand really what we want to do is we want to initialize this program and Then as the user plays around in the tree view in the list view we want them to update back and forth So let's go in here I'm going to say model set root path dir current path Now we want to tie those two views into the same model. So we're going to say UI Tree view we're going to set model on that and then UI list view And we're going to set the model on that to the exact same model from there. We can say UI And actually let's back up. I want to demonstrate that later So now we're going to get rid of those extra columns in our tree view And we're going to say I is less than the model column count and we're going to say UI tree view Hide column now in case you skip the previous video. We're going to actually show you what this does. So I'm going to comment that out first and foremost Save and run All right, so in our tree view you see how we have these different columns. We're going to get rid of those That's what this hide column is going to do. We're going to basically get rid of everything except for the name You notice how these have small icons and this has a larger icon Like I said, really this only has two modes icon or list view can make a custom one, but it's very very advanced so We're going to go in and we're going to show you how in the tree view when the user activates something We're going to set the list view set root item I'm sorry set root index And we're just going to give it the same index and then if they're playing around the list view. We want a UI this view And we want to set root index But we also want to update that tree view as well. So we're going to say UI Tree view Set current index Notice there's a distinct difference between root and current root is mean you can't go any higher where current means you're in a sub item somewhere And then we're going to say UI Tree view and Then we want to expand just that index not the whole thing And let's save and run and let's see what this looks like Now as we expand this out. Let's go into home Go in here. I think I have some pictures on this little virtual machine. There we do. Yeah You can see we have these really ugly icons and because of the name it kind of acts weird and looks weird and Doesn't really scale well and just kind of acts a little nuts So I'm not a fan of the icon view and I'm going to show you how to change that And that's why I think by default it actually has the list view or list mode. So we're going to say UI list view set view mode And then we'll say queue list And we want the actually queue this view And what the view mode if we go in here, there's really only two icon and list We've got a whole bunch of classes, but they don't really do anything for us. So we're going to just select that the list mode save run and Demonstrate the same thing now. Let's go in here. I think we're in pictures. Yeah Much more organized looking Let's just collapse that and if I double click this wallpaper over here in the list, you see how it expands it goes right to it So that's a really good example of how you can take one model across multiple views and synchronize them back and forth I hope you enjoyed this video. It's part of a larger project out of you to me called cute widgets for beginners with c++ This is a large course with 73 lectures and 17 hours of video footage This course covers everything from what is a widget all the way down to complete example applications Using the skills you've learned in this course Sorry, there's no qml in this course. This is strictly cute widgets I will make a qml course later on but this just focus on widgets from a beginner's perspective Even those as a beginner's course, you do need to have some fundamental information available You need to know c++ and the cute core libs I do have some courses available out on you to me cute core beginners intermediate advance It's not necessary. You take these courses, but it is highly recommended And as always i'm available out on the void realms facebook group along with 3 000 other programmers. See you there