1 00:00:01,600 --> 00:00:03,720 In this videos, I'll show you the inspector 2 00:00:03,887 --> 00:00:04,750 and how to use it. 3 00:00:05,230 --> 00:00:06,280 What is the Inspector? 4 00:00:07,000 --> 00:00:09,840 It's a tool that enables to interact with 5 00:00:10,007 --> 00:00:10,920 any object of the system. 6 00:00:11,900 --> 00:00:15,210 As in Pharo everything is written based on objects, 7 00:00:15,377 --> 00:00:18,160 you can inspect all the objects composing Pharo. 8 00:00:18,810 --> 00:00:21,780 The closest metaphor about what is the inspector: 9 00:00:21,947 --> 00:00:26,630 the inspector is a microscope, but a microscope which 10 00:00:26,797 --> 00:00:29,810 has capabilities to interact with the objects 11 00:00:30,000 --> 00:00:32,300 it is observing. It is as if you were 12 00:00:32,467 --> 00:00:36,820 a biologist studying cells or bacterias, 13 00:00:37,030 --> 00:00:39,080 and all of a sudden you are able to, thanks to 14 00:00:39,247 --> 00:00:42,780 a needle, interact with these living bacterias. 15 00:00:42,960 --> 00:00:45,290 I have prepared a little expression. 16 00:00:47,080 --> 00:00:49,040 In real life it would be very rare to put 17 00:00:49,207 --> 00:00:52,040 a date, a time and a "Morph" mixed in a dictionary. 18 00:00:52,350 --> 00:00:54,190 but for the purpose of this exercise it's ok. 19 00:00:54,630 --> 00:00:56,620 Let's see this. The first thing to do once 20 00:00:56,787 --> 00:01:01,450 you typed the expression, is to call upon 21 00:01:01,617 --> 00:01:04,120 the inspector. So, we get the inspector. 22 00:01:05,240 --> 00:01:08,650 You'll see it is a polymorphic object. 23 00:01:08,817 --> 00:01:10,810 What does the inspector shows? 24 00:01:11,080 --> 00:01:15,840 Here, it shows that I have several elements in my 25 00:01:16,007 --> 00:01:18,260 collection. Each time I click on one element, 26 00:01:18,427 --> 00:01:22,390 I will get another inspector opening 27 00:01:22,557 --> 00:01:23,800 on the selected element. 28 00:01:24,230 --> 00:01:28,060 You have to notice that the GT inspector 29 00:01:28,227 --> 00:01:32,800 is the new version of the inspector in Pharo, 30 00:01:33,000 --> 00:01:35,840 it is developed by the GT Team at Bern University. 31 00:01:36,007 --> 00:01:36,640 What does it offer? 32 00:01:36,807 --> 00:01:40,510 It offers the possibility to define different views 33 00:01:40,677 --> 00:01:43,890 adapted to each particular object. 34 00:01:44,057 --> 00:01:46,840 You may not inspect a dictionary 35 00:01:47,007 --> 00:01:50,440 the same way you manipulate a graphical element. 36 00:01:51,360 --> 00:01:54,440 The interesting point is that each one of these elements 37 00:01:54,607 --> 00:01:56,640 can offer a different view to the user. 38 00:01:57,880 --> 00:01:59,760 The basic view that you have is the Raw view. 39 00:02:00,850 --> 00:02:03,800 This is the view showing the implementation. 40 00:02:04,020 --> 00:02:07,350 For instance, I open the class 41 00:02:07,517 --> 00:02:12,400 corresponding to OrderedDictionary, this class has 42 00:02:12,567 --> 00:02:16,060 2 instance variables, dictionary and orderedKeys. 43 00:02:16,227 --> 00:02:19,780 Here, the inspector will show me raw values 44 00:02:19,947 --> 00:02:21,770 contained in these instance variables. 45 00:02:22,000 --> 00:02:25,640 If I click on dictionary, I see it is a dictionary. 46 00:02:25,807 --> 00:02:29,360 If I had clicked on it, I see here, it is a dictionary. 47 00:02:30,550 --> 00:02:34,000 And there, I see once more the raw view of this object. 48 00:02:34,760 --> 00:02:37,500 It has orderedKeys which is apparently an array. 49 00:02:38,760 --> 00:02:41,080 I have an array with Time, Date and Morph. 50 00:02:44,270 --> 00:02:47,170 When I am in Items mode - the Items mode is 51 00:02:48,860 --> 00:02:53,220 that this OrderedDictionary element offers me to see 52 00:02:53,387 --> 00:02:56,590 its keys and values in a better way. 53 00:02:56,757 --> 00:02:59,100 If you look here, you have to go inside and 54 00:02:59,267 --> 00:03:01,950 it gets a little touchy. 55 00:03:02,117 --> 00:03:03,870 Here we don't know... "Which one is it? 56 00:03:04,037 --> 00:03:07,040 Ah,it is this one, may be at 6 it means that 57 00:03:07,450 --> 00:03:11,430 I have an association in which there is Time, I have the key and the value, etc." 58 00:03:11,597 --> 00:03:16,080 So, you see that the inspector browses. 59 00:03:16,410 --> 00:03:17,930 There is this little browsing bar. 60 00:03:18,220 --> 00:03:22,260 When I put the cursor on these little circles, I see 61 00:03:22,427 --> 00:03:24,270 a preview of the screen I will go to if I click on it. 62 00:03:25,130 --> 00:03:28,060 I can also reduce or change 63 00:03:28,510 --> 00:03:31,510 the windows' size and the focus I want. 64 00:03:31,720 --> 00:03:35,220 I can select the three for instance. Here I choose a large size 65 00:03:35,387 --> 00:03:36,590 for you to see better. 66 00:03:37,680 --> 00:03:42,460 When I am in Items mode, 67 00:03:42,627 --> 00:03:44,300 it is better because I can interact. 68 00:03:44,467 --> 00:03:47,570 Here I see a date, the key and the value. For instance, 69 00:03:47,737 --> 00:03:52,330 when I select, I see date, date in the raw format 70 00:03:52,620 --> 00:03:54,550 of instance variables. 71 00:03:54,820 --> 00:03:58,260 If I do self browse, you can imagine what we'll see. 72 00:03:58,427 --> 00:04:03,220 We'll see exactly a date, Timespan, 73 00:04:03,690 --> 00:04:05,000 so I have start and duration. 74 00:04:06,810 --> 00:04:07,710 I do have start and duration. 75 00:04:09,000 --> 00:04:11,730 If I look at the Details tab, 76 00:04:15,040 --> 00:04:19,390 the date offers me to see it with, 77 00:04:19,557 --> 00:04:24,280 for instance, a year, a month, that kind of things, 78 00:04:24,447 --> 00:04:25,420 in an ISO format for instance. 79 00:04:27,150 --> 00:04:28,000 How does it work? 80 00:04:28,147 --> 00:04:29,730 We will see it in another video, but in fact each object 81 00:04:30,370 --> 00:04:33,050 can decide the aspects it will show 82 00:04:33,760 --> 00:04:35,430 and offer to the inspector. 83 00:04:36,230 --> 00:04:37,640 Here there is the calendar for instance. 84 00:04:37,807 --> 00:04:42,330 You can see there is a graphical representation of what is a date. 85 00:04:44,400 --> 00:04:45,400 I go backward. 86 00:04:48,570 --> 00:04:52,020 In the same way, for Times, you can see that there are the same things. 87 00:04:52,560 --> 00:04:56,200 I have shown you the Raw tabs. 88 00:04:57,440 --> 00:04:58,540 There is also the Meta tab. 89 00:04:59,840 --> 00:05:03,480 It is a mini code browser which shows you the methods. 90 00:05:03,647 --> 00:05:06,770 For instance, here I can see the methods 91 00:05:06,937 --> 00:05:11,410 because I may wish to interact with the date, time. 92 00:05:11,840 --> 00:05:15,310 Let's imagine that I don't know what I can send to it, 93 00:05:15,477 --> 00:05:17,000 maybe I can send it hours. 94 00:05:17,137 --> 00:05:21,500 It returns 18. It's 18. 95 00:05:22,350 --> 00:05:25,780 Normally, I could see it there if I look for hour. 96 00:05:27,540 --> 00:05:30,900 I got the method definition. 97 00:05:31,067 --> 00:05:32,550 It is just to be more in the flow. 98 00:05:34,140 --> 00:05:36,000 Now, if I look at Morph. 99 00:05:37,940 --> 00:05:39,130 It is a more complicated object. 100 00:05:39,297 --> 00:05:42,300 We see several different aspects. 101 00:05:43,000 --> 00:05:44,660 What is nice here, for instance, is that if I click on 102 00:05:44,827 --> 00:05:46,620 Morph, I see its rendering. 103 00:05:48,190 --> 00:05:52,640 I see the rendering of the Morph object 104 00:05:52,900 --> 00:05:57,330 which is indeed a HSVAColorSelectorMorph. 105 00:06:02,720 --> 00:06:04,720 Just to show you, in fact with the inspector, 106 00:06:04,887 --> 00:06:06,560 I can interact with my object. 107 00:06:07,100 --> 00:06:11,470 I can tell it to open in a world and I can 108 00:06:11,637 --> 00:06:13,270 interact with my object. 109 00:06:16,870 --> 00:06:21,390 It will depend on which functionalities 110 00:06:22,000 --> 00:06:26,560 it offers. I can do 111 00:06:26,727 --> 00:06:29,090 selectedColor. We will see if it works. 112 00:06:29,890 --> 00:06:30,590 If I do self selectedColor. 113 00:06:30,757 --> 00:06:35,590 It returns a color. 114 00:06:36,000 --> 00:06:39,000 Here it is interesting because 115 00:06:39,700 --> 00:06:42,360 with the inspector I can do a print, 116 00:06:42,527 --> 00:06:44,260 and it returns a textual representation of the object. 117 00:06:44,940 --> 00:06:49,080 I could do inspect on it 118 00:06:49,740 --> 00:06:51,760 and it will open an inspector. 119 00:06:51,927 --> 00:06:52,690 It is what I’m doing here. 120 00:06:52,857 --> 00:06:55,000 Now if I want the result of this 121 00:06:55,167 --> 00:07:00,080 expression to be injected in the inspector flow, 122 00:07:00,247 --> 00:07:01,000 what can I do? 123 00:07:01,137 --> 00:07:03,190 I just have to do “Do it and go”. 124 00:07:03,610 --> 00:07:08,360 If I do “Do it and go”, I have added in the interaction flow 125 00:07:08,790 --> 00:07:11,010 a new object and an inspector on a new object. 126 00:07:11,530 --> 00:07:15,620 You understood. Here it is the colors with the colors encoding. 127 00:07:16,580 --> 00:07:17,500 Nothing special. 128 00:07:21,800 --> 00:07:24,250 We go backward. 129 00:07:26,570 --> 00:07:31,110 What is interesting to see, it is that here, I have 130 00:07:31,277 --> 00:07:33,820 a view of my object, for instance in sub-morphs. 131 00:07:36,000 --> 00:07:38,500 If I want to have the same view and if I want to find the 132 00:07:38,667 --> 00:07:42,180 sub-morphs composing my graphical object, 133 00:07:42,347 --> 00:07:47,030 when I’m in Raw mode, I have to browse 134 00:07:47,200 --> 00:07:52,050 inside the graphical components tree. 135 00:07:53,130 --> 00:07:54,280 It can be really annoying. 136 00:07:55,080 --> 00:07:57,760 I will show you a nice tip. 137 00:07:59,190 --> 00:08:03,660 Let’s imagine I have my Morph tree. 138 00:08:05,550 --> 00:08:08,640 I have two views which are exactly the same on the same object. 139 00:08:11,160 --> 00:08:12,820 I can do “Submorph”. 140 00:08:13,530 --> 00:08:16,540 I do Submorph in this one and there I have Morph. 141 00:08:16,830 --> 00:08:20,520 Now I can select the elements in the tree. 142 00:08:22,230 --> 00:08:25,610 I tell it: “I want you to display there 143 00:08:25,777 --> 00:08:30,590 only this one”, or for instance, here I am really 144 00:08:30,757 --> 00:08:35,290 on the sub-morph of the tree corresponding to my selection. 145 00:08:36,360 --> 00:08:38,900 It is very powerful because often, if I had to 146 00:08:39,100 --> 00:08:43,350 find the sub-morph corresponding 147 00:08:43,517 --> 00:08:48,480 to the little indicator, here it is quite easy, it is this one. 148 00:08:50,440 --> 00:08:54,850 However, if I am in a traditional mode, 149 00:08:55,017 --> 00:08:58,130 it is not so easy because… 150 00:08:58,297 --> 00:08:59,350 in fact I don’t know how to do it. 151 00:08:59,517 --> 00:09:02,270 I have to go inside 152 00:09:05,440 --> 00:09:06,960 until I find it. 153 00:09:07,470 --> 00:09:12,060 It is here I think, because here it is 154 00:09:12,227 --> 00:09:12,860 a simple object. 155 00:09:14,500 --> 00:09:16,530 You will see in the other videos that we can do 156 00:09:16,697 --> 00:09:20,680 this kind of operation in every object of the system. 157 00:09:21,370 --> 00:09:23,530 I will show you in particular that we can do it 158 00:09:23,697 --> 00:09:27,850 on files systems, on classes themselves. 159 00:09:28,160 --> 00:09:30,040 As a conclusion, what we have seen 160 00:09:30,207 --> 00:09:32,560 is that the inspector is an object that will enable you 161 00:09:32,727 --> 00:09:37,230 to talk to, interact with and modify living objects, 162 00:09:37,397 --> 00:09:41,010 your objects, and in another hand, each object will 163 00:09:41,177 --> 00:09:45,730 show different aspects or different views of itself 164 00:09:45,897 --> 00:09:48,260 in order to have a different 165 00:09:48,427 --> 00:09:51,640 interaction according to your scenarios. 166 00:09:51,807 --> 00:09:53,760 It constitutes a very, very powerful object. 167 00:09:54,190 --> 00:09:56,290 In fact, GT Inspector is really a great tool.