1 00:00:05,420 --> 00:00:10,600 in the previous video we first started talking about taking tkinter and we learn 2 00:00:10,600 --> 00:00:15,200 the basics and we showed the basic window on the screen and I ended 3 00:00:15,200 --> 00:00:18,760 the video talking about geometry managers and how we needed to find out a bit more 4 00:00:18,760 --> 00:00:22,570 about those so once you got a window the applications widgets the things 5 00:00:22,570 --> 00:00:27,190 that you wanna appear on that window or in that window can be placed on that window 6 00:00:27,190 --> 00:00:30,900 using one of three different geometry managers the most useful ones probably 7 00:00:30,900 --> 00:00:34,770 the grid manager but we're going to start with the pack manager which is 8 00:00:34,770 --> 00:00:38,580 most commonly used and the reason for that is the first and probably the 9 00:00:38,580 --> 00:00:42,070 easiest to become familiar with so one thing to note here is that everything 10 00:00:42,070 --> 00:00:47,330 in tk is a window and objects are placed in a hierarchy so in our example 11 00:00:47,330 --> 00:00:52,280 on the screen main window is the root window so everything else must be placed within it 12 00:00:52,280 --> 00:00:56,230 or within one of the child windows now not every window can have children but 13 00:00:56,230 --> 00:01:01,010 every window except the route one must have a master window so to see the effects 14 00:01:01,010 --> 00:01:04,610 of positioning widgets we are going to be using pack as I mentioned and we are going to be using a 15 00:01:04,610 --> 00:01:09,700 canvas widget now this is intended generally the canvas widget for displaying graphics 16 00:01:09,700 --> 00:01:13,970 but we are gonna use it because by changing to have raised appearance and 17 00:01:13,970 --> 00:01:17,850 giving it a border it becomes really easy to see where it is on the screen 18 00:01:17,850 --> 00:01:21,250 and that's important as we gonna be re positioning it now more obvious choice 19 00:01:21,250 --> 00:01:24,860 here maybe to use a button because they're already raised and have a border but 20 00:01:24,860 --> 00:01:30,040 thjs would worked fine on Windows and Linux but on a Mac interestingly enough the button 21 00:01:30,040 --> 00:01:33,420 widget is the native MAC button and consequently its height 22 00:01:33,420 --> 00:01:37,670 cannot be changed anyway so we won't be able to demonstrate something because of 23 00:01:37,670 --> 00:01:41,280 that so one of the things you really want to demonstrate here is how to stretch a widget 24 00:01:41,280 --> 00:01:46,140 horizontally and vertically and button widget is not gonna be suitable for OSX and that's why 25 00:01:46,140 --> 00:01:50,780 again we've gone for the canvas so lets type some code in first and run it and then we'll go 26 00:01:50,780 --> 00:01:55,780 through that code so what we going to do is delete a bit of stuff first I'm going to delete on line 6 27 00:01:55,780 --> 00:02:00,060 and 7 those two references to print out the versions the tk version and 28 00:02:00,060 --> 00:02:02,540 TCL version we don't need that anymore 29 00:02:02,540 --> 00:02:08,240 and what we are gonna do is leave the code on line 10 which is now push down to line 12 as the last 30 00:02:08,240 --> 00:02:11,640 entry because of course that we need to run that as the last entry so that it actually 31 00:02:11,640 --> 00:02:15,760 kicks up the process and shows that window and we are gonna add firstly a label 32 00:02:15,760 --> 00:02:17,600 that by typing.... 33 00:02:17,600 --> 00:02:25,270 ..... 34 00:02:25,270 --> 00:02:32,590 ....and then what we need to do is 35 00:02:32,590 --> 00:02:39,140 add it using geometry manager...... 36 00:02:39,140 --> 00:02:48,570 ...now we add the canvas that I talk about.... 37 00:02:48,570 --> 00:02:54,250 ..... 38 00:02:54,250 --> 00:03:04,260 ...... 39 00:03:04,260 --> 00:03:09,540 .... 40 00:03:09,540 --> 00:03:14,400 .....and as I mentioned 41 00:03:14,400 --> 00:03:19,530 on line 17 the last line is going to be left like so it will 42 00:03:19,530 --> 00:03:27,300 invoke the code and run it so now if we run this and if I tab over we can actually see Python in here and there 43 00:03:27,300 --> 00:03:31,200 is our first example you can see the screen and by looking at that you should 44 00:03:31,200 --> 00:03:35,610 really see what the code is doing line 11 creates the label widget with the 45 00:03:35,610 --> 00:03:39,130 text hello world and you can see that now at the top of the screen just below 46 00:03:39,130 --> 00:03:42,770 the title its the code on line 8 is producing that title which 47 00:03:42,770 --> 00:03:47,260 can see the gray background that the label is actually below that which 48 00:03:47,260 --> 00:03:52,000 was created on line 11 then and also added on line 12 again using the pack 49 00:03:52,000 --> 00:03:56,740 method and the canvases I've created in a similar way on line 14 but this time because 50 00:03:56,740 --> 00:04:00,650 we specified side='left' its appeared on the left hand side of the 51 00:04:00,650 --> 00:04:04,570 window obviously this is a very simple layout but it is useful to look at some 52 00:04:04,570 --> 00:04:09,330 of the options available when placing widgets on the window using pack so 53 00:04:09,330 --> 00:04:13,950 what we can do is we can make the canvas fill the height or width of the window technically its 54 00:04:13,950 --> 00:04:19,190 master using the field parameters which can be set to X Y or both 55 00:04:19,190 --> 00:04:24,790 so what we can do is come back to the canvas.pack line on line 15 we could 56 00:04:24,790 --> 00:04:29,580 do something like...... 57 00:04:29,580 --> 00:04:37,590 so if we do that uppercase Y keep that in mind and run that you can see now that we've actually got a 58 00:04:37,590 --> 00:04:41,750 feeling vertically so its filled the height of the main window from the bottom of 59 00:04:41,750 --> 00:04:44,870 the label down to the bottom of the window and the space at the top of the screen 60 00:04:44,870 --> 00:04:48,120 where the label is being placed is automatically reserved as well as so its 61 00:04:48,120 --> 00:04:52,150 not using that space because the label was already allocated that space prior to 62 00:04:52,150 --> 00:04:59,300 canvas command being added now changing Y to X may be expected to extend the canvas across 63 00:04:59,300 --> 00:05:04,250 the entire width of the screen but if you do so which I will show you now you'll find it doesn't actually work 64 00:05:04,250 --> 00:05:15,050 so if we change this to X and run that you can see basically 65 00:05:15,050 --> 00:05:18,690 it hasn't worked to get that to work there is actually another option 66 00:05:18,690 --> 00:05:23,270 what you need to do is add another name to parameter and what's called 67 00:05:23,270 --> 00:05:30,500 expand and you need to set that to true so lets add that parameter come back into line 68 00:05:30,500 --> 00:05:34,960 15 leave the Tkinter.x but also add the extra 69 00:05:34,960 --> 00:05:45,680 name parameter....and run that and you can see it now it has been expanded horizontally 70 00:05:45,680 --> 00:05:51,300 across the left to right so why the expand parameter is not required for 71 00:05:51,300 --> 00:05:55,110 canvas to fill vertically may appear to be one of life's mysteries but there 72 00:05:55,110 --> 00:06:00,020 actually is a reason for it and to see it in action what we gonna do is close this down 73 00:06:00,020 --> 00:06:03,310 and if you change the option here 74 00:06:03,310 --> 00:06:11,380 side='left' to side='top' and actually remove the expand=true and 75 00:06:11,380 --> 00:06:15,460 run again 76 00:06:15,460 --> 00:06:22,120 you can see that it does expand horizontally without the addition to expand parameter 77 00:06:22,120 --> 00:06:33,550 but then if you change this to tkinter.Y and check that out now the vertical expansion no longer 78 00:06:33,550 --> 00:06:39,000 works which is quite frustrating but if we change that to expand..... 79 00:06:39,000 --> 00:06:48,970 ...and run again you could see it does now work if you try to use both so if we go 80 00:06:48,970 --> 00:06:54,990 back and delete the expand and set that to both which is an option to expand vertically and 81 00:06:54,990 --> 00:07:03,190 horizontally if we run that you can see it does actually expand horizontally but 82 00:07:03,190 --> 00:07:15,240 not vertically but we can add the expand.....run that again and now it's being expanded both 83 00:07:15,240 --> 00:07:19,220 horizontally and vertically so a little bit frustrating but that's just the way 84 00:07:19,220 --> 00:07:24,610 things actually work with Tkinter keep that in mind that you need to use expand in certain 85 00:07:24,610 --> 00:07:28,280 circumstances to get it to expand appropriately so lets change things back to 86 00:07:28,280 --> 00:07:35,030 left again I'm gonna get rid of the field and get rid of the expand so we just got to basic 87 00:07:35,030 --> 00:07:40,330 command their we are gonna add some buttons so lets now add some widgets just to see how things 88 00:07:40,330 --> 00:07:44,110 line up next to each other so I'm going to create three buttons here so... 89 00:07:44,110 --> 00:08:17,930 ...... 90 00:08:17,930 --> 00:08:22,500 .....and if we run this 91 00:08:22,500 --> 00:08:29,670 ...you can see that when widgets share the same side they are placed adjacent to each other in the order that they're 92 00:08:29,670 --> 00:08:34,610 actually packed in this case the buttons are actually now centered against the 93 00:08:34,610 --> 00:08:38,320 canvas which is to left of it which is not always you'd probably want so we can 94 00:08:38,320 --> 00:08:41,840 change this by setting the anchor option which takes values corresponding to the 95 00:08:41,840 --> 00:08:46,530 four main points of the compass for the center which is the default so what we 96 00:08:46,530 --> 00:08:54,360 can do here is come back here to the pack line for each one we could say..... 97 00:08:54,360 --> 00:09:09,800 ...and run that, and oops I made a typo and obviously Python told me that I made a typo so will fix that and run 98 00:09:09,800 --> 00:09:16,110 it again have a look so you can see now we've got something completely different we've got 99 00:09:16,110 --> 00:09:22,130 button 1 we specified an anchor of n its at the top of the screen we specified button 2 100 00:09:22,130 --> 00:09:26,330 have an anchor of s which is the bottom of the screen and obviously button 101 00:09:26,330 --> 00:09:30,750 3 still side of left for 3 but the anchor is East which is 102 00:09:30,750 --> 00:09:35,320 obviously to the right hand side so you might think all three are actually doing something 103 00:09:35,320 --> 00:09:42,600 here but what's probably not obviously its only n and s are actually doing anything here because the buttons have been 104 00:09:42,600 --> 00:09:46,790 packed to the vertical side of the window anchor can only be therefore affect vertical 105 00:09:46,790 --> 00:09:51,620 positioning horizontally the buttons place to the left of where the previous 106 00:09:51,620 --> 00:09:56,750 button ends similarly if we packed them to the top or bottom edges and anchors are only 107 00:09:56,750 --> 00:10:01,960 going to affect their horizontal position makes sense so seeing that in operation I'm going to close this down 108 00:10:01,960 --> 00:10:08,890 and let's go ahead and change the code change the canvas pack to top again and we are 109 00:10:08,890 --> 00:10:17,680 also going to change the side to be equal to top for all three buttons 110 00:10:17,680 --> 00:10:22,140 we should find the anchor is now only affecting the horizontal position so if we 111 00:10:22,140 --> 00:10:29,830 run that again you can see what's happened their ok so the documentation states 112 00:10:29,830 --> 00:10:34,670 that you can also specify the for intermediate compass points such as NW for 113 00:10:34,670 --> 00:10:38,360 north west for example but this will actually not make any difference to the behavior 114 00:10:38,360 --> 00:10:43,490 we've just observed widgets packed with vertical edge that's left or right 115 00:10:43,490 --> 00:10:49,100 can only have a vertical position altered by anchor the ones packed horizontal edge top 116 00:10:49,100 --> 00:10:54,450 and bottom can only have their horizontal positions change now although we can place widgets inside a frame to 117 00:10:54,450 --> 00:10:59,980 both group them together and position them a little bit better pack is really only 118 00:10:59,980 --> 00:11:04,450 suitable for very simple layouts so of the 3 geometry managers that are part of 119 00:11:04,450 --> 00:11:08,730 Python part of Tkinter pack is really the most basic pf the 3 and the 120 00:11:08,730 --> 00:11:12,390 options are still a little bit limited as a result let's go ahead and add some 121 00:11:12,390 --> 00:11:17,320 code to add a frame so you can see what I mean by that so put... 122 00:11:17,320 --> 00:11:20,790 ..... 123 00:11:20,790 --> 00:11:38,200 ...... 124 00:11:38,200 --> 00:11:49,920 ....and canvas what we are going to do is instead 125 00:11:49,920 --> 00:11:53,810 of specifying main window we just create a frame so were going to use that instead 126 00:11:53,810 --> 00:11:58,170 so we are going to type leftFrame so its using that we're gonna leave relief 127 00:11:58,170 --> 00:12:02,440 equals raised and borther width to 1 canvas.pack we are going to put that to the left hand 128 00:12:02,440 --> 00:12:12,050 side and we are also gonna add an anchor of n north next we are gonna add a right frame and put the 129 00:12:12,050 --> 00:12:16,990 buttons in that right frame so I'm gonna type... 130 00:12:16,990 --> 00:12:31,640 ..... 131 00:12:31,640 --> 00:12:35,730 ...... 132 00:12:35,730 --> 00:12:49,760 ...and three buttons we are going to change those so they are not using main window they are going to be using right frame and 133 00:12:49,760 --> 00:12:52,250 we are going to remove the anchor from 134 00:12:52,250 --> 00:12:57,580 each of those buttons because they're actually inside the frame the right frame that we've added them to 135 00:12:57,580 --> 00:13:06,380 I should say.....and if we run that 136 00:13:06,380 --> 00:13:11,220 we managed to achieve what we were trying to set out their we got a frame on the left hand 137 00:13:11,220 --> 00:13:15,150 side that contains the canvas and a frame on the right hand side that contains our 138 00:13:15,150 --> 00:13:20,310 three buttons but as I mentioned pack is really only suitable for very simple 139 00:13:20,310 --> 00:13:24,880 layouts and its the most basic of the 3 geometry managers included 140 00:13:24,880 --> 00:13:30,590 with Tkinter I'm going to finish this video now in the next video what we gonna do 141 00:13:30,590 --> 00:13:34,820 is gonna move on and start looking at the place geometry manager which is even 142 00:13:34,820 --> 00:13:39,910 simpler than pack but it can also be really useful in specific situations so see you in 143 00:13:39,910 --> 00:13:40,320 the next video