1 00:00:00,000 --> 00:00:02,730 Previously, we build these Python codes 2 00:00:02,760 --> 00:00:06,150 and this Kivy code. So it's a Kivy app, 3 00:00:06,210 --> 00:00:08,400 which you execute by executing the 4 00:00:08,428 --> 00:00:11,488 Python code, not the Kivy code. So 5 00:00:11,490 --> 00:00:14,220 here, press the Run button and this is 6 00:00:14,220 --> 00:00:17,550 what we have. Let's admit it. It's a 7 00:00:17,550 --> 00:00:20,670 good looking interface. But it's rather 8 00:00:20,670 --> 00:00:23,910 cold for now, because when we press 9 00:00:23,910 --> 00:00:26,790 these buttons, nothing happens. So let's 10 00:00:26,790 --> 00:00:29,910 go ahead and implement the Sign Up 11 00:00:29,940 --> 00:00:33,090 button. So what we want to do is, when 12 00:00:33,090 --> 00:00:35,730 the user presses the Sign Up button, we 13 00:00:35,730 --> 00:00:39,750 want to change the page the screen to 14 00:00:39,780 --> 00:00:42,840 another screen with another set of 15 00:00:42,840 --> 00:00:46,710 widgets. For that, we need to assign a 16 00:00:46,710 --> 00:00:50,550 function call to the Sign Up button. So 17 00:00:50,550 --> 00:00:54,930 let's go ahead and go to the Kivy code, 18 00:00:55,500 --> 00:00:58,830 locate the button Sign Up, which is in 19 00:00:58,830 --> 00:01:02,010 here. And so the button gets these 20 00:01:02,010 --> 00:01:04,680 attributes the text attributes, but it 21 00:01:04,680 --> 00:01:07,050 can also get another attributes 22 00:01:07,051 --> 00:01:09,173 [No audio] 23 00:01:09,175 --> 00:01:13,380 called on press, on_press. What that 24 00:01:13,380 --> 00:01:16,980 attribute does is when the user presses 25 00:01:16,980 --> 00:01:20,360 a button, you are going to call the 26 00:01:20,361 --> 00:01:27,030 root.sign_up function. Don't forget the 27 00:01:27,030 --> 00:01:29,940 call parenthesis. So what is the root and 28 00:01:29,940 --> 00:01:33,090 what is signup? Root is a special name 29 00:01:33,120 --> 00:01:36,390 you can use inside a Kivy file. And root 30 00:01:36,390 --> 00:01:40,620 refers to the class of the RootWidget. 31 00:01:40,800 --> 00:01:44,250 The RootWidget in here where we are a 32 00:01:44,250 --> 00:01:47,130 is the LoginScreen. So the class of 33 00:01:47,130 --> 00:01:50,550 LoginScreen which is a LoginScreen. So 34 00:01:50,550 --> 00:01:54,218 actually roots refers to the LoginScreen 35 00:01:54,219 --> 00:01:57,300 class. And now we're using this 36 00:01:57,300 --> 00:02:01,350 dot notation. And we're using the method 37 00:02:01,380 --> 00:02:05,001 of LoginScreen. So sign_up of LoginScreen 38 00:02:05,003 --> 00:02:06,870 where there is no sign_up methods. 39 00:02:06,870 --> 00:02:11,276 but, we can create one, define sign_up, 40 00:02:12,682 --> 00:02:16,230 use the self parameter for class 41 00:02:16,230 --> 00:02:19,170 methods. And then let's do something 42 00:02:19,170 --> 00:02:21,570 simple for now. Let's just print out. 43 00:02:21,571 --> 00:02:24,028 [No audio] 44 00:02:24,045 --> 00:02:26,805 Sign up button pressed is just a string, 45 00:02:27,030 --> 00:02:29,040 which means it's going to be printed out 46 00:02:29,340 --> 00:02:32,220 on the terminal. Let's try this, save 47 00:02:32,220 --> 00:02:36,780 the Kivy file and run the Python file and 48 00:02:36,780 --> 00:02:40,500 then press Sign Up. And as you can see 49 00:02:40,530 --> 00:02:42,870 in the terminal Sign Up button press 50 00:02:42,870 --> 00:02:45,600 string is bringing out anytime I use the 51 00:02:45,600 --> 00:02:49,560 Sign Up button. So it is as simple as 52 00:02:49,560 --> 00:02:52,140 that you use attribute on press at 53 00:02:52,140 --> 00:02:54,060 anytime the button is pressed sign_up 54 00:02:54,060 --> 00:02:57,300 will be called this function. So now 55 00:02:57,300 --> 00:03:00,960 what we want to do for real is to switch 56 00:03:00,990 --> 00:03:04,650 the screen. But first we need to create 57 00:03:04,650 --> 00:03:07,770 a screen. The way you create screens is 58 00:03:07,860 --> 00:03:12,129 in the Kivy file. So we have the LoginScreen 59 00:03:12,131 --> 00:03:14,460 here. Now we want to create, now 60 00:03:14,460 --> 00:03:20,040 let's call this SignUpScreen. After 61 00:03:20,040 --> 00:03:23,580 the root, you use the column, a tab to 62 00:03:23,610 --> 00:03:29,730 indent. And here is how this new screen 63 00:03:29,730 --> 00:03:31,590 will look like. So we have a label, we 64 00:03:31,590 --> 00:03:34,870 have two text input boxes, and we have a button. 65 00:03:34,871 --> 00:03:37,113 [No audio] 66 00:03:37,115 --> 00:03:40,440 And everything is inside a GridLayout 67 00:03:40,441 --> 00:03:46,768 [Author typing] 68 00:03:46,770 --> 00:03:52,175 with one column, this one column will simply have a Label 69 00:03:52,176 --> 00:03:54,896 [No audio] 70 00:03:54,898 --> 00:03:59,397 with text Sign up for a space 71 00:04:01,183 --> 00:04:05,132 journey. Why not? Feel free to use your imagination. 72 00:04:05,133 --> 00:04:10,472 But make sure this is inside quotes. So it's a string. 73 00:04:10,473 --> 00:04:12,732 [Author typing] 74 00:04:12,734 --> 00:04:14,310 Then comes a TextInput. 75 00:04:14,312 --> 00:04:19,378 [No audio] 76 00:04:19,380 --> 00:04:22,316 Let's use as hint_text. 77 00:04:22,317 --> 00:04:25,790 [No audio] 78 00:04:25,792 --> 00:04:28,672 The Username string. So what is going to 79 00:04:28,673 --> 00:04:32,260 be shown in the textbox as a hint. 80 00:04:32,261 --> 00:04:35,195 [No audio] 81 00:04:35,197 --> 00:04:40,593 Another TextInput with hint_text, you guessed it, 82 00:04:41,839 --> 00:04:45,329 Password, and lastly a Button 83 00:04:45,330 --> 00:04:48,743 [No audio] 84 00:04:48,744 --> 00:04:53,400 with text Submit or you can write Sign Up whatever 85 00:04:53,400 --> 00:04:55,740 you like. So these are just strings you 86 00:04:55,740 --> 00:04:58,320 can use whatever you like. So the idea 87 00:04:58,320 --> 00:05:00,540 is that when the user presses the Submit 88 00:05:00,540 --> 00:05:03,540 button, this data, so the username and 89 00:05:03,540 --> 00:05:06,480 the password will be sent to the 90 00:05:06,480 --> 00:05:09,150 database where we are saving the 91 00:05:09,150 --> 00:05:12,480 usernames and passwords. So this 92 00:05:12,510 --> 00:05:14,820 database will be readable. So we can 93 00:05:14,820 --> 00:05:17,160 write it, we can add more usernames to 94 00:05:17,160 --> 00:05:19,170 this database. And it will also be 95 00:05:19,170 --> 00:05:22,110 readable, which means when a user tries 96 00:05:22,110 --> 00:05:25,170 to login, we are going to read this 97 00:05:25,170 --> 00:05:28,530 database to see if the username and 98 00:05:28,530 --> 00:05:31,440 password that the users trying to send 99 00:05:31,860 --> 00:05:35,370 with a Login button, are or not in this 100 00:05:35,400 --> 00:05:39,390 database. And this database is going to 101 00:05:39,390 --> 00:05:44,790 be a JSON file. Which is a simple way to 102 00:05:45,390 --> 00:05:48,330 handle Username and Password data. 103 00:05:48,331 --> 00:05:51,788 [No audio] 104 00:05:51,790 --> 00:05:52,790 Right. 105 00:05:52,791 --> 00:05:55,287 [No audio] 106 00:05:55,289 --> 00:05:57,982 Now, if you save this Kivy file 107 00:05:57,990 --> 00:06:00,420 and run the Python script, nothing is 108 00:06:00,420 --> 00:06:02,370 going to happen because the Sign Up 109 00:06:02,370 --> 00:06:04,320 button is still printing out this simple 110 00:06:04,320 --> 00:06:06,810 string. And the screen we just created 111 00:06:07,350 --> 00:06:10,440 is not being sent everywhere to be 112 00:06:10,440 --> 00:06:12,570 displayed. So we are not giving any 113 00:06:12,570 --> 00:06:17,280 orders to display the SignUpScreen. So 114 00:06:17,370 --> 00:06:20,054 the next thing to do is to list the 115 00:06:20,056 --> 00:06:25,530 SignUpScreen among the RootWidget widgets. 116 00:06:25,620 --> 00:06:32,340 So to say the name sign_up_screen. 117 00:06:32,460 --> 00:06:35,460 So screens have to have a name. The reason 118 00:06:35,460 --> 00:06:38,640 for that is because in here now, in the 119 00:06:38,640 --> 00:06:42,510 Sign Up button, what we can do is the 120 00:06:42,510 --> 00:06:49,365 magic of doing self.manager.current 121 00:06:50,482 --> 00:06:54,843 equal to sign_up_screen. 122 00:06:55,396 --> 00:06:57,868 So sign_up_screen is this string here that we 123 00:06:57,870 --> 00:07:01,410 have just created. Save a Kivy file and 124 00:07:01,410 --> 00:07:04,047 run the Python file to see what's going on. 125 00:07:04,048 --> 00:07:07,425 [No audio] 126 00:07:07,426 --> 00:07:09,840 So you may get this error from time 127 00:07:09,840 --> 00:07:13,027 to time kivy.factory.FactoryException, 128 00:07:13,261 --> 00:07:17,220 Unknown class SignUpScreen, which means 129 00:07:17,248 --> 00:07:19,738 it's an error that occurred in your Kivy 130 00:07:19,740 --> 00:07:23,490 file. And the class SignUpScreen which is 131 00:07:23,490 --> 00:07:25,830 this one here it's unknown because there 132 00:07:25,830 --> 00:07:28,860 is no class in the Kivy file in the Kivy 133 00:07:28,860 --> 00:07:33,000 library as such as it is for GridLayout, 134 00:07:33,000 --> 00:07:36,180 Labels, these are all classes in the 135 00:07:36,180 --> 00:07:38,250 Kivy library. So SignUpScreen is not a 136 00:07:38,250 --> 00:07:40,410 class in the Kivy library and it's not a 137 00:07:40,410 --> 00:07:44,160 class declared in the Python file. So 138 00:07:44,160 --> 00:07:48,030 what you need to do is, just create a 139 00:07:48,030 --> 00:07:54,120 SignUpScreen class inheriting from 140 00:07:54,120 --> 00:07:58,462 Screen. And for now just to pass. Execute again 141 00:07:59,762 --> 00:08:05,220 and Sign Up and this our new screen. 142 00:08:05,640 --> 00:08:08,010 So we got the Label, two TextInput boxes 143 00:08:08,010 --> 00:08:10,050 and one Submit Button which doesn't do 144 00:08:10,050 --> 00:08:13,883 anything for now, because this SignUpScreen 145 00:08:14,801 --> 00:08:18,420 is connected to the class we just 146 00:08:18,420 --> 00:08:21,300 created the SignUpScreen class. So, 147 00:08:21,300 --> 00:08:24,300 whatever actions will be taken in this 148 00:08:24,720 --> 00:08:27,330 page in this screen from the user are 149 00:08:27,330 --> 00:08:29,730 going to correspond with some functions 150 00:08:29,940 --> 00:08:32,543 that we are going to add to the SignUpScreen. 151 00:08:32,544 --> 00:08:34,890 And let me explain this line 152 00:08:34,890 --> 00:08:37,680 here self.manager.current. So 153 00:08:37,680 --> 00:08:40,710 self is referring to the instance of 154 00:08:40,710 --> 00:08:43,500 this current class or the class where 155 00:08:43,530 --> 00:08:46,637 self is. So LoginScreen object 156 00:08:46,864 --> 00:08:49,380 LoginScreen is the class and self is the 157 00:08:49,380 --> 00:08:52,380 object that has been instantiated from 158 00:08:52,380 --> 00:08:54,270 this class that has been created from 159 00:08:54,270 --> 00:08:56,790 this class. And then manager, manager is 160 00:08:57,150 --> 00:09:01,140 a property of screen. So since this 161 00:09:01,230 --> 00:09:03,900 class is inheriting from screen to 162 00:09:03,900 --> 00:09:07,230 Screen is a parent and LoginScreen is a 163 00:09:07,230 --> 00:09:10,800 child and the parent is giving the child 164 00:09:10,830 --> 00:09:13,950 all its methods, all its properties, all 165 00:09:13,950 --> 00:09:16,170 its attributes, including manager of 166 00:09:16,170 --> 00:09:18,780 course, so self is able to access 167 00:09:18,780 --> 00:09:21,300 manager and then manager has its own 168 00:09:21,330 --> 00:09:24,270 attribute which is current. So current 169 00:09:24,300 --> 00:09:27,023 of manager and manager of LoginScreen. 170 00:09:27,577 --> 00:09:30,030 And this current attributes will 171 00:09:30,030 --> 00:09:33,570 get the name of the screen you want to 172 00:09:33,570 --> 00:09:36,750 switch to which is SignUpScreen, this 173 00:09:36,750 --> 00:09:39,600 SignUpScreen in here, which is a widget 174 00:09:39,630 --> 00:09:41,741 we have created in here. 175 00:09:41,742 --> 00:09:44,714 [No audio] 176 00:09:44,716 --> 00:09:48,695 And that's the idea. This is how you switch 177 00:09:48,696 --> 00:09:52,192 between screens using Kivy. Thanks.