1 00:00:00,300 --> 00:00:03,990 Previously, we built these Python code and this Kivy code. 2 00:00:04,530 --> 00:00:11,010 So it's Kivy app, which you executed by executing the python code, not the Kivy code. 3 00:00:11,340 --> 00:00:13,460 So here press the run button. 4 00:00:13,560 --> 00:00:15,110 And this is what we have. 5 00:00:16,490 --> 00:00:23,360 Let's admit it, it's a good looking interface, but it's rather cold for now because when we 6 00:00:23,360 --> 00:00:25,820 press these buttons, nothing happens. 7 00:00:26,360 --> 00:00:30,710 So let's go ahead and implement the sign up button. 8 00:00:31,130 --> 00:00:38,690 So what we want to do is when the user presses the sign up button, we want to change the page, the screen 9 00:00:39,410 --> 00:00:43,310 to another screen with another set of widgets. 10 00:00:44,990 --> 00:00:49,820 For that, we need to assign a function call to the sign up button. 11 00:00:50,390 --> 00:00:59,090 So let's go ahead and go to the Kivy code, locate the button sign up, which is in here. 12 00:00:59,870 --> 00:01:07,010 And so the button gets this attribute, the text attribute, but it can also get another attribute 13 00:01:09,200 --> 00:01:12,590 called on_press, on underscore press. 14 00:01:12,890 --> 00:01:17,540 What that attribute does is when the user presses the button, 15 00:01:17,840 --> 00:01:20,930 you are going to call the 16 00:01:21,320 --> 00:01:24,080 root.sign_up 17 00:01:24,290 --> 00:01:25,040 function. 18 00:01:26,250 --> 00:01:28,300 Don't forget the call parenthesis. 19 00:01:28,710 --> 00:01:35,220 So what is the root and what is sign_up? Root is a special name you can use inside a Kivy file. 20 00:01:35,640 --> 00:01:40,560 And root refers to the class of the rule widget. 21 00:01:40,830 --> 00:01:45,600 The rule widget in here where we are is the logging screen. 22 00:01:45,930 --> 00:01:49,620 So the class of LoginScreen, which is LoggingScreen. 23 00:01:50,370 --> 00:01:54,850 So actually Root refers to the LogginScreen class. 24 00:01:56,320 --> 00:02:02,880 And now we are using this dot notation and we're using that method of LoginScreen. 25 00:02:03,210 --> 00:02:06,830 So sign up of LoginScreen where there is no sign up method, 26 00:02:06,960 --> 00:02:11,360 but we can create one. Define sign up. 27 00:02:12,810 --> 00:02:16,740 Use the self parameter for class methods. 28 00:02:17,850 --> 00:02:19,910 And then let's do something simple for now. 29 00:02:20,190 --> 00:02:21,510 Let's just print out: 30 00:02:24,120 --> 00:02:24,600 "Sign up 31 00:02:24,610 --> 00:02:30,300 button press" is just a string, which means it's going to be printed out on the terminal. 32 00:02:30,540 --> 00:02:31,350 Let's try this. 33 00:02:31,830 --> 00:02:38,280 Save the Kivy file and run the Python file and then press sign up. 34 00:02:39,210 --> 00:02:44,080 And as you can see in the terminal the Sign Up button press string is printed out 35 00:02:44,170 --> 00:02:46,460 any time I use the sign up button. 36 00:02:48,330 --> 00:02:49,800 So it is as simple as that. 37 00:02:49,830 --> 00:02:56,050 You use the attribute on press and anytime the button is pressed sign up will be called, this function here. 38 00:02:56,880 --> 00:03:01,950 So now what you want to do for real is to switch the screen. 39 00:03:02,580 --> 00:03:05,430 But first, we need to create a screen. 40 00:03:05,810 --> 00:03:08,880 The way you create screens is in the Kivy file. 41 00:03:10,740 --> 00:03:12,450 So we have the log in screen here. 42 00:03:12,510 --> 00:03:16,080 Now we want to create oh, let's call this "SignUpScreen". 43 00:03:16,500 --> 00:03:20,480 After the rule 44 00:03:20,480 --> 00:03:24,180 you use the column, a Tab to indent. 45 00:03:25,330 --> 00:03:30,430 And here is how this new screen will look like. 46 00:03:30,640 --> 00:03:34,900 So we have a label, we have two text input boxes and we have a button. 47 00:03:37,180 --> 00:03:40,350 And everything is inside a GridLayout. 48 00:03:46,750 --> 00:03:52,190 With one column, this one column will simply have a label. 49 00:03:54,780 --> 00:03:55,760 With text. 50 00:03:57,680 --> 00:04:01,640 "Sign up for a space journey". 51 00:04:01,670 --> 00:04:02,120 Why not? 52 00:04:03,290 --> 00:04:09,100 Feel free to use your imagination, but make sure this is inside quotes. 53 00:04:09,230 --> 00:04:10,450 So it's a string. 54 00:04:12,830 --> 00:04:14,270 Then comes a text input. 55 00:04:18,530 --> 00:04:22,350 Let's use as hint text 56 00:04:25,800 --> 00:04:27,350 the "Username" string. 57 00:04:27,740 --> 00:04:32,240 So what is going to be shown in the textbook as a hint? 58 00:04:35,360 --> 00:04:38,870 Another text input with hint text? 59 00:04:39,950 --> 00:04:42,470 You guessed it. "Password". 60 00:04:43,700 --> 00:04:45,320 And lastly, a button. 61 00:04:48,790 --> 00:04:53,830 With text: "Submit", or you can write sign up, whatever you like. 62 00:04:54,010 --> 00:04:55,620 So these are just strings. 63 00:04:55,690 --> 00:04:57,190 You can use whatever you like. 64 00:04:57,790 --> 00:05:04,300 So the idea is that when the user presses the submit button, these data, so the user name and the password 65 00:05:04,570 --> 00:05:10,900 will be sent to the database where we are saving the usernames and passwords. 66 00:05:12,070 --> 00:05:15,370 So this database will be writable so we can write it. 67 00:05:15,430 --> 00:05:19,720 We can add more user names to this database and it will also be readable. 68 00:05:19,750 --> 00:05:28,390 Which means when a user tries to logging, we are going to read this database to see if the user name 69 00:05:28,390 --> 00:05:34,720 and password are the users is trying to send with the login button are or not 70 00:05:34,840 --> 00:05:36,250 in this database. 71 00:05:38,110 --> 00:05:40,840 And this database is going to be a Json file. 72 00:05:43,180 --> 00:05:47,820 Which is the simple way to handle username and password 73 00:05:47,900 --> 00:05:48,280 data. 74 00:05:55,320 --> 00:05:59,440 Now, if you save this Kivy file and run the Python script 75 00:05:59,770 --> 00:06:05,500 nothing is going to happen because the sign up button is still printing out this symbol string and the 76 00:06:05,500 --> 00:06:11,230 screen we just created is not being sent everywhere to be displayed. 77 00:06:11,560 --> 00:06:16,150 So we are not giving any orders to display the sign up screen. 78 00:06:16,990 --> 00:06:25,480 So the next thing to do is to list the sign up screen among the RootWidget widgets. 79 00:06:25,690 --> 00:06:34,480 So to say. Name: "Sign_up_screen", so screen have to have a name. 80 00:06:34,990 --> 00:06:43,840 The reason for that is because in here now, in the sign up button, what we can do is the magic of doing 81 00:06:43,840 --> 00:06:44,350 self dot 82 00:06:44,710 --> 00:06:47,560 manager dot 83 00:06:48,730 --> 00:06:53,050 current equal to "sign_up_screen". 84 00:06:54,040 --> 00:06:54,880 So 85 00:06:55,480 --> 00:06:58,900 sign_up_screen is this string here that we have just created. 86 00:06:59,560 --> 00:07:04,030 Save the Kivy file and run the Python file to see what is going on. 87 00:07:07,520 --> 00:07:10,220 So you may get this error from time to time. 88 00:07:10,680 --> 00:07:19,040 Kivy.factor.FactoryException unknown class SignUpScreen, which means it's an error that occurred 89 00:07:19,100 --> 00:07:24,170 in your Kivy file, the class SignUpScreen, which is this one here. 90 00:07:24,470 --> 00:07:32,480 It's unknown because there is no class in the Kivy library, such as it is for GridLayout, 91 00:07:32,490 --> 00:07:33,610 Labels. 92 00:07:34,340 --> 00:07:36,800 These are all classes in the Kivy library. 93 00:07:37,010 --> 00:07:42,620 So SignUpScreen is not a class in the Kivy library and it's not a class declared in the Python file. 94 00:07:43,970 --> 00:07:56,570 So what you need to do is just create a SignUpScreen class inheriting from screen and for now just do 95 00:07:56,570 --> 00:08:02,900 pass, execute again and sign up. 96 00:08:03,650 --> 00:08:05,150 And this is our new screen. 97 00:08:05,720 --> 00:08:10,940 So we got the label to text input boxes and one submit button, which doesn't do anything for now 98 00:08:11,450 --> 00:08:13,880 because this sign up screen 99 00:08:14,930 --> 00:08:20,630 is connected to the class we just created, the sign up screen class. 100 00:08:21,110 --> 00:08:28,580 So whatever actions will be taken in this page, in this screen from the user are going to correspond 101 00:08:28,580 --> 00:08:32,450 with some functions that we are going to add to the sign up screen. 102 00:08:32,960 --> 00:08:37,100 And let me explain this line here, self.manager.current. 103 00:08:37,520 --> 00:08:44,390 So self is referring to the instance or this current class of the class where self is. 104 00:08:44,810 --> 00:08:46,610 So log in screen object. 105 00:08:46,940 --> 00:08:53,480 Log in screen is a class and self is the object that has been instantiated from this class, that has 106 00:08:53,480 --> 00:08:54,710 been created from this class. 107 00:08:55,010 --> 00:08:59,800 And then manager, manager is a property of screen. 108 00:09:00,080 --> 00:09:07,700 So since this class is inheriting from screen, so Screen is a parent and LoginScreen is a child, 109 00:09:08,040 --> 00:09:15,650 and the parent is giving the child all its methods, all its properties, all its attributes, including 110 00:09:15,650 --> 00:09:16,460 manager, of course. 111 00:09:16,730 --> 00:09:22,970 So Self is able to access manager and then manager has its own attribute, which is current. 112 00:09:23,690 --> 00:09:27,020 So current of manager and manager of LoginScreen. 113 00:09:27,650 --> 00:09:35,720 And this current attribute will get the name of the screen you want to switch to, which is SignUpScreen, 114 00:09:35,720 --> 00:09:41,720 this sign up screen in here, which is a widget we have created in here. 115 00:09:44,950 --> 00:09:46,780 And that's the idea. 116 00:09:47,470 --> 00:09:50,560 This is how you switch between screens using Kivy. 117 00:09:51,130 --> 00:09:51,670 Thanks.