Kivy Tutorial #9 - Navigation Between Multiple Screens

Key Takeaways

hey guys and welcome back from the kV tutorial so in today's video we're gonna be going through how to change screens so essentially having multiple windows and then doing some kind of transition between them based on like an event occurs so the exact example that I'm gonna be using is we're gonna have a login form and if you type in the password correctly it'll move you to the next page if not then obviously it won't move you there so this is actually quite a few steps so make sure you guys follow along closely and as always all the code will be up on tech with Tim net ok so what we're actually gonna start by doing is something different that we haven't done yet so notice that I change the name of my main app I've just deleted essentially everything there's nothing in my KB file to my main app instead of just my app so now this Cavey file won't actually load incorrectly if we remember the naming conventions from before so what I want to do is only use something called a builder which will allow us to load in the KB file no matter what the name of it is so let's just start by importing it so I leave us from K V dot Lang we're gonna import builder and then what we're gonna do is just type right above our class we'll say K V equals builder if I could type load underscore file believe that's the name and then what we'll do is put the name of our file so my dot K V and what we're gonna do now is we're just gonna return K V from this my main app so essentially what this is gonna do is this she's gonna load up this file it doesn't matter what the name of this file is now and we're gonna return this file when we're building the app so like let's just do an example here if I say button and I say text and we'll just go like Tim and to see if this works just to test and there we go we see we get a button Tim and again because we're loading up this KB fall it's the way this builder thing works just you don't have to name your K V file like the same thing as the class ok so that's it for Builder so what we're gonna do now is since we're setting up screens we actually have to use something from Kibby which is well screens and screen managers what we're gonna do is going to say from Kivi dot UI x dot screen manager import screen manager and import screen so we're gonna set up three classes and they're not gonna have anything inside of them but they're just gonna dictate our different screens and then our screen manager so our first class will be our first window so I'm just gonna say this main window okay and this is just gonna inherit from screen and then all we have to do in here is just pass now I'll actually copy this and paste this and instead of having main window we'll do second window and then we'll paste this one more time and against the main window we're gonna do what is it window manager the names of these don't really matter as long as you remember what they are and that instead of screen we're gonna do screen manager okay screen manager so essentially what this is gonna do now is this is gonna represent our main window which is our login form this will represent the page we go to next and this window manager will just represent like the transitions and stuff between the windows okay so what we're gonna do now is what we will I think we may be done actually for the Python file so let's move over to the kV file and start setting some stuff up so the first thing we need to do is we're just gonna grab this window manager and we're gonna set what type of screens are what screens are going to be inside of this so the two screens we have our main window okay and then we also have a second window right so we'll put those in here like that and just leave these as you need a colon here and we're not gonna type anything else but you just need the colon because there is possible options you could put so this right now is just saying we're gonna have two windows main window in second window if you wanted to add a third window you do something like third window here if I could type this and yeah then that's how you do that but you'd also have to make sure that you have a third window class here and I think you guys probably get the point so what I'm gonna do now is I'm just gonna start creating the kind of forms for our different windows now this is really similar to what we've done before except we just need to add a few other things to it so essentially what we're gonna do is gonna go May in the window like this and then in here what we'll put is uh first need to give it a name now the name is gonna be how we what do you call it call it in terms of moving between screens so the name of this one we'll just call this main now we'll even just we'll just the second window right now so we don't forget so second window and it's for the name here we'll just do second okay now again these names can be whatever you want just make sure you remember them because we are gonna have to use them so name main names second now all I'm gonna do in the second window notice - it's already here is just create a button and on my button all I'm gonna do is just have some text and that Texas is gonna say go back right because if we make it to this screen then we just want to be able to navigate back to the other screen so that's what we need for second window now for main window I want to set up this login form that essentially all it does is is just gonna have like a label a text input box and then a button so we're gonna do this similar to what we've done before with multiple grid layouts so in case you forget we're gonna do a grid layout and then for the first grid layout we're gonna have calls is one okay and then what should we put inside here we need to put another grid layout so the other grid layout will be calls too and then inside here we're gonna have a label and Wow okay I don't know what I just clicked to do that that was interesting and we'll say text and for this we'll just say is password okay colon and then we'll put a text input box and we're gonna need to give this an ID so the ID for this I'll just say is passed W okay and then in here what we'll do is we'll say for text input multi-line equals false okay so that's all we need for here now we actually know we need to add a button sorry give me on that one so add a button and this button is just gonna have a text that says submit and we're gonna have an on press event which were actually on release event which we'll do in just a second and we're gonna have a non release event here so let's just do that so we don't forget let's do a quick summary of what we've done so essentially this is all like this is probably a review except for this part here of what we've done before so we just created a very basic form all we're going to do is we have what do you call it the text input which is going to just ask you for a password you can type and password and then we're just gonna check here if the password is a certain value and if it is then we're going to transition to the other window so the way that we transition to the other windows is we you this we do app JA root dot current okay and then we set it equal to the window we want to go to so in this case if we hit submit we want to go to the second window that that is this right now the name of that window is second like we named it here so that's all we're gonna do we're gonna say app dot root current equals second now we can actually copy this and we can paste it right here as well and here though if we want to go back we won't want to do the name main so that's what we'll do and actually let's just tab this in here underneath on release and this should be working fine so let's run this quickly and assuming I didn't make any mistakes which I probably did we should be working invalid property property name multi-line I can't do equals false I have to do : false believe that's the issue yes there we go okay so we have a little login window make it a bit smaller you can see it resizes so I'd type something in here hit submit and you can see it brings me over to my other page and then if I hit go back it brings me back now notice though that these transitions are probably not ideal moving like left right or just keep moving to the left but we want to go left and then to the right so how do we do that well luckily there is a way that we can do that so on the release here what we're actually gonna type in type root dot manager dot transition assuming I spell this correctly so root dot manager dot transition dot direction and then this is gonna be equal to what direction I wanted ghost in this case we're gonna go left okay and then if we copy this and we paste it here we can go right so now let's check this out and see if I did this correctly okay so if I hit submit you can see removing to the left now watch this if I hit go back we move to the right so you can see that it's kind of going back and forth and that's awesome okay so the last thing I want to do for this video is I want to make it so it only lets us go to the next page if we type this password correctly right so how can we do that well we just need to do a little bit of logic inside of here so the reason we gave this an idea so that we can check the value so on on release here let's go in here and let's do a bit of logic let's just say if or we'll say second if and I will say Pass W dot txt equals equals and let's just make the password Tim in this case we'll say else we're just gonna stay on this main page so we'll go to second if the password is Tim otherwise we'll go we'll just stay on the main page okay so let's try this if I hit submit I'm not typing a password it's not working if I type T I doesn't work if I type Tim you can see we go to the next page and that is essentially oh we should probably actually would want to clear this as well so we could do that too you know what let's not worry about that right now how am I do in the next video but essentially that's how that works this is how we can go between multiple windows if you want to create another window create another class inherit from screen same thing here and then you can kind of lay out the navigation for yourself so if you guys enjoyed the video please make sure you leave a like and subscribe and I will see you again in another one [Music]