0 1 00:00:05,170 --> 00:00:06,610 In this lecture we are going to learn 1 2 00:00:06,610 --> 00:00:09,870 how we can use text widgets for our applications. 2 3 00:00:09,870 --> 00:00:10,980 What is text widget? 3 4 00:00:10,980 --> 00:00:13,420 Actually, it's a text editor, and it allows us 4 5 00:00:13,420 --> 00:00:16,800 to create multi-line texts for our applications. 5 6 00:00:16,800 --> 00:00:19,330 Let's get started, how we can create a text editor 6 7 00:00:19,330 --> 00:00:20,340 for our application. 7 8 00:00:20,340 --> 00:00:21,200 Here, I will create a variable, 8 9 00:00:21,200 --> 00:00:25,090 and I will name it textEditor, it's equal to here. 9 10 00:00:25,090 --> 00:00:27,480 You need to use text constructor method, 10 11 00:00:27,480 --> 00:00:30,490 but I want to point out something here 11 12 00:00:30,490 --> 00:00:32,738 about text constructor method. 12 13 00:00:32,738 --> 00:00:36,350 This method only available in tkinter, 13 14 00:00:36,350 --> 00:00:38,260 it's not available in ttk module, 14 15 00:00:38,260 --> 00:00:39,520 so don't forget that, okay. 15 16 00:00:39,520 --> 00:00:41,632 And after here, between parentheses 16 17 00:00:41,632 --> 00:00:44,420 I will pass in my first parameter, 17 18 00:00:44,420 --> 00:00:47,430 it is root, and after that here, 18 19 00:00:47,430 --> 00:00:50,137 also, I will use textEditor.grid, 19 20 00:00:52,210 --> 00:00:54,930 geometry manager for grid geometry manager, 20 21 00:00:54,930 --> 00:00:58,150 I will say, row is equal to zero, 21 22 00:00:58,150 --> 00:01:01,890 and column is equal to zero. 22 23 00:01:01,890 --> 00:01:04,683 Now, if I run my application, 23 24 00:01:07,250 --> 00:01:12,110 as you see this our text editor is here, and we can fill it, 24 25 00:01:12,110 --> 00:01:12,943 you see? 25 26 00:01:12,943 --> 00:01:16,410 But by default our text editor it fits our window, 26 27 00:01:16,410 --> 00:01:19,490 you see, and of course we can use height 27 28 00:01:19,490 --> 00:01:22,830 and width properties for our text editor. 28 29 00:01:22,830 --> 00:01:26,710 Let's also use it, and here what I will say, 29 30 00:01:26,710 --> 00:01:28,640 I will come to here and say width 30 31 00:01:31,920 --> 00:01:34,150 is equal to 30. 31 32 00:01:34,150 --> 00:01:36,083 And for height I will say, 32 33 00:01:37,570 --> 00:01:39,840 height is equal to 10. 33 34 00:01:39,840 --> 00:01:42,573 Now if I run my application again, 34 35 00:01:43,990 --> 00:01:46,150 as you see now our text editor is smaller, 35 36 00:01:46,150 --> 00:01:48,010 and is more reasonable. 36 37 00:01:48,010 --> 00:01:52,240 And also what we need to do, we can use here pad for y-value 37 38 00:01:52,240 --> 00:01:55,070 and pad for x-value, let's also do that. 38 39 00:01:55,070 --> 00:01:55,903 Here what I am to do? 39 40 00:01:55,903 --> 00:01:58,480 I need to come here and say 40 41 00:01:59,730 --> 00:02:04,730 pad y is equal to let's say 20, 41 42 00:02:04,770 --> 00:02:09,770 and for x-value, I will say pad x is equal to 40. 42 43 00:02:10,710 --> 00:02:13,483 I think this now is better, let's check it. 43 44 00:02:13,483 --> 00:02:15,170 This is better now. 44 45 00:02:15,170 --> 00:02:16,070 So what I need to do? 45 46 00:02:16,070 --> 00:02:17,770 Also, I want to create a button here 46 47 00:02:17,770 --> 00:02:20,653 under my text editor, how can I do that? 47 48 00:02:20,653 --> 00:02:22,780 I need to create a button and I will say 48 49 00:02:22,780 --> 00:02:26,920 button is equal to button constructor method, right, 49 50 00:02:26,920 --> 00:02:29,760 and first parameter is again root. 50 51 00:02:29,760 --> 00:02:33,600 Second one, I will use text property for my button, 51 52 00:02:33,600 --> 00:02:35,153 text is equal to Save. 52 53 00:02:37,330 --> 00:02:40,740 And other one, also we can create a callback function 53 54 00:02:40,740 --> 00:02:44,380 for our button, but we can do it later, okay. 54 55 00:02:44,380 --> 00:02:46,370 And here what I need to do? 55 56 00:02:46,370 --> 00:02:51,150 I also need to use grid geometry manager. 56 57 00:02:51,150 --> 00:02:55,460 And here I will say, row is equal to three, 57 58 00:02:55,460 --> 00:02:59,710 and column is equal to 0. 58 59 00:02:59,710 --> 00:03:01,970 Why row is not one and its three? 59 60 00:03:01,970 --> 00:03:05,520 Because our text editor is really large enough. 60 61 00:03:05,520 --> 00:03:07,690 That's why we need to use row three. 61 62 00:03:07,690 --> 00:03:09,340 Okay, don't forget that. 62 63 00:03:09,340 --> 00:03:11,700 And so what's next now? 63 64 00:03:11,700 --> 00:03:14,293 Let me run our application and check it. 64 65 00:03:15,950 --> 00:03:18,750 As you see now, is our button is here, 65 66 00:03:18,750 --> 00:03:21,180 but it's little bit small so we can also use 66 67 00:03:21,180 --> 00:03:24,620 this width and height properties for our button. 67 68 00:03:24,620 --> 00:03:25,453 How can I do that? 68 69 00:03:25,453 --> 00:03:26,870 Let's copy this guys 69 70 00:03:28,390 --> 00:03:30,413 and paste them here. 70 71 00:03:32,760 --> 00:03:35,020 But width must be here. 71 72 00:03:35,020 --> 00:03:39,130 Something like 10 and height must be one. 72 73 00:03:39,130 --> 00:03:40,653 Okay, if I run again, 73 74 00:03:42,700 --> 00:03:45,413 as you see now, our button is better now, it's bigger. 74 75 00:03:46,400 --> 00:03:50,590 So what is next, I want to show you two different functions 75 76 00:03:50,590 --> 00:03:52,500 for our text editor. 76 77 00:03:52,500 --> 00:03:55,580 First one is insert and other one is config method. 77 78 00:03:55,580 --> 00:03:59,850 So, here let's learn how we can use insert. 78 79 00:03:59,850 --> 00:04:02,870 I will say, textEditor.insert 79 80 00:04:02,870 --> 00:04:04,050 and here what I need to say? 80 81 00:04:04,050 --> 00:04:06,440 I need to say, first parameter will be INSERT 81 82 00:04:06,440 --> 00:04:09,311 and second one is my text, okay? 82 83 00:04:09,311 --> 00:04:11,207 And here for text, I will say 83 84 00:04:11,207 --> 00:04:16,207 "Hello i am a tkinter widget" 84 85 00:04:18,340 --> 00:04:19,240 Okay? 85 86 00:04:19,240 --> 00:04:21,283 And now if I run my application, 86 87 00:04:23,660 --> 00:04:27,680 you see here, it says "Hello I am a tkinter widget." 87 88 00:04:27,680 --> 00:04:31,730 Of course we can edit it or delete all the entire text. 88 89 00:04:31,730 --> 00:04:35,340 And if you want, we can also disable this editor. 89 90 00:04:35,340 --> 00:04:36,280 How we can do that? 90 91 00:04:36,280 --> 00:04:38,580 To do that we need to use config method here. 91 92 00:04:38,580 --> 00:04:42,163 I will say, textEditor.config 92 93 00:04:46,380 --> 00:04:50,873 and I need to use state is equal to disabled. 93 94 00:04:53,740 --> 00:04:58,600 And if I run it again now, 94 95 00:04:58,600 --> 00:05:01,920 now we cannot edit our text editor. 95 96 00:05:01,920 --> 00:05:03,840 How can I make it normal? 96 97 00:05:03,840 --> 00:05:06,520 Here we need, to say simply, CONTROL+D, 97 98 00:05:06,520 --> 00:05:07,890 I will press CONTROL+D 98 99 00:05:07,890 --> 00:05:11,643 and state, instead of disabled I will say normal. 99 100 00:05:12,730 --> 00:05:13,563 Okay? 100 101 00:05:13,563 --> 00:05:15,740 And now, if I run it again 101 102 00:05:17,350 --> 00:05:20,060 now I can edit my text editor, okay? 102 103 00:05:20,060 --> 00:05:22,820 And also, I want to show you how you can change 103 104 00:05:22,820 --> 00:05:27,060 our font property and also font size property. 104 105 00:05:27,060 --> 00:05:28,510 To do that we need to come here 105 106 00:05:29,380 --> 00:05:31,440 and say font is 106 107 00:05:32,340 --> 00:05:35,130 equal to parenthesis, okay? 107 108 00:05:35,130 --> 00:05:38,460 And the first parameter will be my font family name, 108 109 00:05:38,460 --> 00:05:40,880 it's Times, I use Times by the way. 109 110 00:05:40,880 --> 00:05:44,103 You can use something else, and for font size I will say 15. 110 111 00:05:45,045 --> 00:05:45,878 Okay? 111 112 00:05:45,878 --> 00:05:48,620 And if I run my application, as you see now 112 113 00:05:48,620 --> 00:05:53,620 my font family name and font size is different. 113 114 00:05:53,630 --> 00:05:54,610 And what is next? 114 115 00:05:54,610 --> 00:05:57,930 Also, I want to show you something interesting here. 115 116 00:05:57,930 --> 00:06:01,580 For example, here it says, "Hello i am a tkinter widget." 116 117 00:06:01,580 --> 00:06:05,647 And I want to say something different here, 117 118 00:06:05,647 --> 00:06:08,107 "very reasonable". 118 119 00:06:10,340 --> 00:06:12,690 As you see now, "reasonable" is entire word, 119 120 00:06:12,690 --> 00:06:13,890 but it's not together, right? 120 121 00:06:13,890 --> 00:06:16,510 The first one, the some letters are here. 121 122 00:06:16,510 --> 00:06:19,180 The other one is in line two. 122 123 00:06:19,180 --> 00:06:21,900 So, we need to solve this problem, how can I do that? 123 124 00:06:21,900 --> 00:06:25,690 To do that we need to come here and use wrap 124 125 00:06:27,910 --> 00:06:32,440 is equal to, here we can use quotes and after that, word. 125 126 00:06:32,440 --> 00:06:35,080 Or you can say simply, 126 127 00:06:35,080 --> 00:06:38,350 all letters can be capital and you can say, WORD. 127 128 00:06:38,350 --> 00:06:39,240 Okay? 128 129 00:06:39,240 --> 00:06:41,030 And now, if I run it again 129 130 00:06:43,020 --> 00:06:47,970 and here I will say "very reason--", something like that. 130 131 00:06:47,970 --> 00:06:51,800 I try to write a long word. 131 132 00:06:51,800 --> 00:06:53,970 You see now is entire word is here, 132 133 00:06:53,970 --> 00:06:56,520 they are together, not separated. 133 134 00:06:56,520 --> 00:06:58,110 And what is next now? 134 135 00:06:58,110 --> 00:07:01,940 Also, we need to get this value 135 136 00:07:01,940 --> 00:07:06,003 of text editor whenever we click this button. 136 137 00:07:06,003 --> 00:07:10,280 This is maybe most important part for this widget. 137 138 00:07:10,280 --> 00:07:11,458 How can I do that? 138 139 00:07:11,458 --> 00:07:13,930 To do that, I need to create here a command 139 140 00:07:15,090 --> 00:07:16,733 is equal to callback. 140 141 00:07:17,890 --> 00:07:20,080 Okay, so what I need to do? 141 142 00:07:20,080 --> 00:07:23,360 I need to create my definition, def, callback, 142 143 00:07:23,360 --> 00:07:24,958 you say here. 143 144 00:07:24,958 --> 00:07:26,668 After that here, 144 145 00:07:26,668 --> 00:07:27,540 what I need to do? 145 146 00:07:27,540 --> 00:07:30,600 I need to create a result variable. 146 147 00:07:30,600 --> 00:07:31,930 Result is equal to I will say, 147 148 00:07:31,930 --> 00:07:36,053 textEditor.get method, 148 149 00:07:37,330 --> 00:07:41,740 and here between parenthesis I need to say 1.0. 149 150 00:07:41,740 --> 00:07:42,580 Okay? 150 151 00:07:42,580 --> 00:07:44,873 And after that I will say here, END. 151 152 00:07:45,950 --> 00:07:48,890 What I mean here, 1.0 and END. 152 153 00:07:48,890 --> 00:07:52,360 1.0 means from the first word 153 154 00:07:52,360 --> 00:07:54,200 and to END, okay? 154 155 00:07:54,200 --> 00:07:58,490 That means entire content, we will get entire content 155 156 00:07:58,490 --> 00:08:02,600 with this 1.0 and END, okay? 156 157 00:08:02,600 --> 00:08:05,290 And after that, what I need to do here I will say simply, 157 158 00:08:05,290 --> 00:08:07,040 print result. 158 159 00:08:07,040 --> 00:08:11,933 And I will print out my result and let's run it again now. 159 160 00:08:13,300 --> 00:08:16,963 And here, let's make this bigger. 160 161 00:08:17,989 --> 00:08:19,600 Run again, 161 162 00:08:19,600 --> 00:08:20,433 now 162 163 00:08:22,330 --> 00:08:24,220 here, check our console, 163 164 00:08:24,220 --> 00:08:25,610 if i click save. 164 165 00:08:25,610 --> 00:08:26,810 As you see now our 165 166 00:08:28,910 --> 00:08:30,520 text is here, 166 167 00:08:30,520 --> 00:08:34,943 and of course we can add something more like that, okay? 167 168 00:08:35,794 --> 00:08:37,780 And after, if I hit again save button 168 169 00:08:37,780 --> 00:08:39,840 as you see now our text is here 169 170 00:08:39,840 --> 00:08:42,773 and we can get value of our widget. 170 171 00:08:43,850 --> 00:08:44,930 For now that's all. 171 172 00:08:44,930 --> 00:08:46,647 See you in the next.