1 00:00:07,140 --> 00:00:07,830 Welcome back. 2 00:00:08,460 --> 00:00:10,860 In this lecture, we explore. 3 00:00:13,520 --> 00:00:15,530 Elements are the components. 4 00:00:16,490 --> 00:00:27,110 That have to reside in and in the last lecture we have seen some them contains buttons and other contains 5 00:00:27,110 --> 00:00:28,160 an input box. 6 00:00:29,420 --> 00:00:34,280 With a file browser, all of these are cool elements. 7 00:00:35,210 --> 00:00:47,650 So let's start by importing by mildewy as this G and let's explore the parts. 8 00:00:48,560 --> 00:01:00,230 To put an element in a window, we'll have to construct Ali up, Ali Al is a list of list each. 9 00:01:01,000 --> 00:01:06,250 Room in the left is equivalent to a room in the center. 10 00:01:06,910 --> 00:01:09,480 So let's clear out. 11 00:01:10,180 --> 00:01:12,850 This will be a list of lists, so. 12 00:01:13,730 --> 00:01:23,690 Listen, listen, I just buy this little button, I'll give it a name or a tax that will be displayed 13 00:01:23,690 --> 00:01:25,130 on it then. 14 00:01:26,060 --> 00:01:33,390 I can give it a parameter size, which is a double the size is in character. 15 00:01:33,950 --> 00:01:40,730 Let's first display the button and then we will discuss everything this I will create a button. 16 00:01:41,370 --> 00:01:43,730 Then I will need to create a window. 17 00:01:44,720 --> 00:01:52,490 To put the play out inside the window, to create a window, I'll use a studio window. 18 00:01:53,330 --> 00:02:03,850 I can give it a title buttons, for example, and I'll have to pass delegate if I did not pass the layout. 19 00:02:04,760 --> 00:02:14,450 It will create an error when I display the want to display the window, to read the window, the window, 20 00:02:14,450 --> 00:02:17,700 provide event and values. 21 00:02:18,140 --> 00:02:21,830 This can be anything but for convention. 22 00:02:21,830 --> 00:02:23,180 The should be event. 23 00:02:23,360 --> 00:02:27,980 And we will explore all of these details in a minute. 24 00:02:28,310 --> 00:02:28,570 Okay. 25 00:02:28,730 --> 00:02:32,130 Now let's read the window to read the window. 26 00:02:32,150 --> 00:02:36,020 We'll use window dot right now let's exclude this. 27 00:02:36,290 --> 00:02:40,940 And it had displayed an error message because there is no layout. 28 00:02:41,390 --> 00:02:45,110 So I will pass in the layout parameter in here. 29 00:02:45,410 --> 00:02:46,880 Now let's read the window. 30 00:02:47,540 --> 00:02:48,710 And it had. 31 00:02:49,530 --> 00:02:58,860 Create a window with a button in it, if I click close in here, it will exit, but the proper way to 32 00:02:58,860 --> 00:03:02,970 do it is to use window, not close. 33 00:03:03,450 --> 00:03:11,040 And we can plan the event and wait and we will see what are these in a minute. 34 00:03:11,220 --> 00:03:19,890 The important thing here that we have created a window with this and we have both in a layout which 35 00:03:19,890 --> 00:03:23,310 we have created enough that contain one button. 36 00:03:23,640 --> 00:03:30,810 And then after reading the window, it will provide eval and very we will close the window and we will 37 00:03:30,810 --> 00:03:31,170 print. 38 00:03:31,860 --> 00:03:40,170 OK, now let's create another layout and let's explore what is this layout means. 39 00:03:40,710 --> 00:03:42,890 So I'll declare another layout. 40 00:03:43,350 --> 00:03:46,020 I will create a list of list again. 41 00:03:46,440 --> 00:03:50,130 I will use the same expression. 42 00:03:50,910 --> 00:03:56,490 And as you have seen, this had created a window with a single button on it. 43 00:03:56,790 --> 00:04:00,030 So let's create another button. 44 00:04:00,450 --> 00:04:02,520 I will create another list. 45 00:04:02,520 --> 00:04:11,040 Inside the list I use is Gebre Pichon, which is same as typing button. 46 00:04:11,550 --> 00:04:23,920 I will just give it a name BGN and I'll also give it a size again then by three and I'll give it a parameter 47 00:04:23,920 --> 00:04:25,490 button color. 48 00:04:25,690 --> 00:04:29,280 I'll give it blue and green. 49 00:04:29,760 --> 00:04:32,810 OK, now let's execute this. 50 00:04:33,240 --> 00:04:37,520 I'll copy these two cells and placed them in here. 51 00:04:38,040 --> 00:04:40,770 Let's Skewness and execute this. 52 00:04:41,130 --> 00:04:45,330 And this had created another window with two buttons. 53 00:04:45,630 --> 00:04:50,520 The first button which is this one is displayed on top. 54 00:04:50,940 --> 00:04:56,340 This had to be a complete row represented by this list. 55 00:04:56,640 --> 00:05:05,790 And the other button, which is this one again, is taking a complete role in the interface with the 56 00:05:05,790 --> 00:05:13,210 colors blue and green and the size is ten characters by three characters total. 57 00:05:13,560 --> 00:05:22,600 OK, if I click button on each end, it will return this as even when I click on the button, it will 58 00:05:22,600 --> 00:05:26,130 return the name of the button and the values. 59 00:05:26,140 --> 00:05:29,340 There is nothing contained in the values now. 60 00:05:29,510 --> 00:05:33,060 OK, now let's modify this a little bit. 61 00:05:33,330 --> 00:05:35,970 I will copy these three rows. 62 00:05:36,150 --> 00:05:46,770 I'll paste the news and let's put each element in a row by itself so you can see what item in the layout 63 00:05:46,980 --> 00:05:49,040 correspond to what in the interface. 64 00:05:49,260 --> 00:05:59,520 Each list is separated by comma from the other list and each list in here represent a in the interface. 65 00:05:59,820 --> 00:06:03,450 OK, now let's add a couple of buttons. 66 00:06:03,540 --> 00:06:10,110 I'll just create this G the B which is similar to Button Ampligen. 67 00:06:10,380 --> 00:06:20,610 I call this B, I will not give others and I we have also predefined buttons in by simple joy if I use 68 00:06:20,610 --> 00:06:21,890 this detail. 69 00:06:22,050 --> 00:06:30,410 OK, and if I want to add another button in the same room as we will see, there is also a story of 70 00:06:30,420 --> 00:06:30,950 cancer. 71 00:06:31,170 --> 00:06:34,230 We have also yes and no buttons. 72 00:06:34,620 --> 00:06:38,670 OK, now let's execute this and this. 73 00:06:38,940 --> 00:06:41,190 And this is our interface. 74 00:06:41,400 --> 00:06:48,420 We have five letters which correspond to five rows in the interface. 75 00:06:48,690 --> 00:06:58,520 If an element is inside a list by itself, this means that this element will be displayed in a complete 76 00:06:58,530 --> 00:06:59,790 row in the interface. 77 00:07:00,660 --> 00:07:09,480 If I want to display multiple elements in the same room, I'll separate them by Cuma inside the same 78 00:07:09,480 --> 00:07:09,750 list. 79 00:07:10,290 --> 00:07:18,190 For example, that OK and cancel button are inside unless there is and no button are inside left. 80 00:07:18,750 --> 00:07:21,540 OK, but this is true. 81 00:07:21,750 --> 00:07:23,070 And this is true. 82 00:07:23,640 --> 00:07:26,310 This is true and this is true. 83 00:07:26,730 --> 00:07:29,010 This is a list and this is a list. 84 00:07:29,670 --> 00:07:34,590 So each list represents a room in the wind. 85 00:07:35,170 --> 00:07:44,310 OK, I click on is this will close the window and display the button that I have clicked. 86 00:07:44,670 --> 00:07:48,870 The event is what I have interacted. 87 00:07:48,940 --> 00:07:56,940 With the wind, for example, I have like a button, I have changed a value, I have closed the window. 88 00:07:57,190 --> 00:07:59,100 We will see this in details. 89 00:07:59,140 --> 00:08:03,300 But I wanted you to know what is Iran? 90 00:08:03,580 --> 00:08:10,750 OK, so we will explode windows in much greater details in the next lecture. 91 00:08:10,750 --> 00:08:16,060 But right now, I want you to know how to create a bot to create a button. 92 00:08:16,060 --> 00:08:24,670 You can use a button or BGN or be just like the bumper button, have different parameters. 93 00:08:25,060 --> 00:08:28,390 The important ones are the size and scale. 94 00:08:28,780 --> 00:08:34,780 OK, when we click on the button, it will return an event with the button. 95 00:08:35,410 --> 00:08:38,800 OK, now let's check the button menu. 96 00:08:39,370 --> 00:08:41,570 This is a menu. 97 00:08:41,840 --> 00:08:48,880 OK, and if we right click in Jupiter's notebook it will display a menu. 98 00:08:49,210 --> 00:08:52,720 And this is what is meant by a button. 99 00:08:52,900 --> 00:08:53,230 Meaning. 100 00:08:53,710 --> 00:08:57,820 OK, so let's create a menu to create a menu. 101 00:08:58,150 --> 00:09:00,210 This is very simple. 102 00:09:00,220 --> 00:09:02,170 You will create a menu. 103 00:09:02,290 --> 00:09:13,810 For example, the menu have five edit view and the view is having submenu which contain, for example, 104 00:09:14,260 --> 00:09:17,100 less details and full. 105 00:09:17,620 --> 00:09:18,280 OK. 106 00:09:18,640 --> 00:09:21,250 Now let's create a layout. 107 00:09:21,640 --> 00:09:23,830 The layout is a list of list. 108 00:09:24,460 --> 00:09:28,540 This layout will be jadot button button menu. 109 00:09:28,870 --> 00:09:36,160 A button menu will be Aknin and we will have to pass in a parameter called menu. 110 00:09:36,700 --> 00:09:42,070 The menu definition I'll pass in the menu that we have created in it. 111 00:09:42,460 --> 00:09:51,100 Then I'll copy these two cells that we will test along the way to display Dialla. 112 00:09:51,400 --> 00:09:52,420 I'll execute this. 113 00:09:52,420 --> 00:09:53,980 Well then that's one. 114 00:09:54,370 --> 00:09:58,900 And we have created our button, which is called menu. 115 00:09:59,230 --> 00:10:07,720 If we click on it, it will display the menu in his file and you view have a menu which is less detailed 116 00:10:07,720 --> 00:10:08,140 and full. 117 00:10:08,800 --> 00:10:13,390 If I click on any one of them, it will display its value. 118 00:10:13,810 --> 00:10:18,570 Now we have a value that is returned any OK. 119 00:10:19,000 --> 00:10:27,070 Previously when we were exploring buttons, it did not have a value, but now we have.