1 00:00:00,450 --> 00:00:01,440 ‫Welcome back. 2 00:00:01,470 --> 00:00:06,750 ‫In this video, we are going to look at tasks and specifically when working with DWP. 3 00:00:07,260 --> 00:00:17,130 ‫Therefore, let's create a new project and let's use WP F here and I'm going to call it WP F tasks and 4 00:00:17,130 --> 00:00:18,360 ‫EE in my case. 5 00:00:18,480 --> 00:00:28,920 ‫Then let's press OC to create that project and in my UI now let's add a button and I'm going to do that 6 00:00:28,920 --> 00:00:29,940 ‫through the toolbox. 7 00:00:29,940 --> 00:00:34,570 ‫So I'm just going to select a button and drag it into my UI. 8 00:00:34,590 --> 00:00:35,460 ‫So there we are. 9 00:00:35,460 --> 00:00:47,070 ‫I'm just going to make it a little bigger and let's change the font size to 32, maybe something like 10 00:00:47,070 --> 00:00:47,440 ‫that. 11 00:00:47,460 --> 00:00:51,440 ‫Now it's a little easier to read and I'm going to give it a name. 12 00:00:51,540 --> 00:00:59,650 ‫Name is equal to my button because I want to use it later on in my code behind. 13 00:00:59,670 --> 00:01:00,030 ‫All right. 14 00:01:00,030 --> 00:01:00,900 ‫So that's the UI. 15 00:01:00,930 --> 00:01:06,000 ‫For now, we are going to add a little Web browser later on, but for now, the button is going to be 16 00:01:06,000 --> 00:01:06,570 ‫fine. 17 00:01:06,780 --> 00:01:13,200 ‫And in my main window, I want to use that button, but I need a click event, therefore. 18 00:01:13,200 --> 00:01:19,440 ‫So whenever somebody clicks on that button, I want to download something from the web, and once it's 19 00:01:19,440 --> 00:01:28,500 ‫done downloading, I want to assign the HTML to the button text or to the button content and therefore 20 00:01:28,500 --> 00:01:29,490 ‫I need a click event. 21 00:01:29,490 --> 00:01:36,000 ‫So I'm going to double click on the button and it will create a new my button click event here. 22 00:01:36,000 --> 00:01:40,590 ‫So this method is going to be triggered whenever we click on the button. 23 00:01:40,590 --> 00:01:48,240 ‫And the easiest way to see if that's true is to just use a message box and just say something like Hi 24 00:01:48,630 --> 00:01:50,670 ‫or it worked or something like that. 25 00:01:50,700 --> 00:01:54,030 ‫Now let's run it just to see if our code actually works. 26 00:01:55,350 --> 00:01:59,430 ‫Because before we do anything else, let's just see if Button works and it says hi. 27 00:01:59,430 --> 00:02:00,510 ‫All right, that's fine. 28 00:02:00,810 --> 00:02:05,160 ‫Now, as you can see, the text itself is not really as big as the button text. 29 00:02:05,220 --> 00:02:06,210 ‫That's not pretty. 30 00:02:06,210 --> 00:02:07,980 ‫But that's not what this video is about. 31 00:02:07,980 --> 00:02:08,190 ‫Right? 32 00:02:08,190 --> 00:02:14,160 ‫It's about tasks and it's about downloading something in the background while the UI is not being stuck. 33 00:02:14,370 --> 00:02:18,840 ‫All right, so let's find a way to make it stuck. 34 00:02:18,840 --> 00:02:23,370 ‫So let's go ahead and try something like downloading. 35 00:02:23,370 --> 00:02:32,730 ‫And in order to download something, I'm just going to use an HTTP client and I'm going to call a web 36 00:02:32,730 --> 00:02:33,540 ‫client. 37 00:02:34,830 --> 00:02:41,640 ‫Now, HTTP client is a class that we have to add system dot net, dot, http. 38 00:02:41,670 --> 00:02:42,810 ‫That's what we need here. 39 00:02:42,810 --> 00:02:52,440 ‫So this web client now, it will be a new HTTP client and now I want to have a string which is going 40 00:02:52,440 --> 00:03:03,030 ‫to be the HTML, which will be web client dot get string async and which string shall get well, it 41 00:03:03,030 --> 00:03:05,640 ‫should get the https. 42 00:03:06,360 --> 00:03:10,140 ‫Colon forward slash forward slash google dot com. 43 00:03:11,670 --> 00:03:14,880 ‫And I want to have the result of that. 44 00:03:14,880 --> 00:03:20,670 ‫So download website and give me the result and store it within HTML. 45 00:03:20,970 --> 00:03:23,400 ‫So that's what this thing will do. 46 00:03:23,400 --> 00:03:23,760 ‫Right. 47 00:03:23,760 --> 00:03:28,710 ‫And what I'm going to see is the thread that I'm on. 48 00:03:28,710 --> 00:03:31,140 ‫So I want to see the thread that I'm working on. 49 00:03:31,140 --> 00:03:39,570 ‫Right line is going to be thread number and thread dot. 50 00:03:40,050 --> 00:03:42,870 ‫And in order to use thread, we need to. 51 00:03:44,140 --> 00:03:51,070 ‫Use system threading and in order to use debug we need to use system diagnostics. 52 00:03:51,070 --> 00:04:00,160 ‫So let's do those two things and now we can go ahead and get the current thread and the managed thread 53 00:04:00,160 --> 00:04:00,580 ‫ID. 54 00:04:00,580 --> 00:04:05,830 ‫So I just want to know which ID does the thread have that I'm currently running on? 55 00:04:05,830 --> 00:04:11,950 ‫So when I click the button this debug will be printed and it will download something. 56 00:04:13,440 --> 00:04:22,770 ‫Now let's say I want to change the button content so my button got content to something like done. 57 00:04:23,700 --> 00:04:25,080 ‫So let's test that. 58 00:04:26,220 --> 00:04:27,090 ‫There we are. 59 00:04:27,120 --> 00:04:32,130 ‫Once I click on the button, you can see now it's done, downloaded it and it's done. 60 00:04:34,910 --> 00:04:37,700 ‫And that happens because this one here. 61 00:04:37,700 --> 00:04:43,460 ‫So downloading Google.com actually works pretty fast and that's why it's even possible to do the content 62 00:04:43,760 --> 00:04:44,780 ‫equal done. 63 00:04:44,780 --> 00:04:50,630 ‫But usually that shouldn't be possible or in most cases it won't be possible because this task here 64 00:04:50,630 --> 00:04:51,950 ‫usually takes quite a while. 65 00:04:51,950 --> 00:04:59,990 ‫And we have a thread here that is quite, quite heavy because downloading stuff usually takes a while 66 00:05:00,320 --> 00:05:04,910 ‫and except it's very, very little that we are actually downloading in this case, we're just downloading 67 00:05:04,910 --> 00:05:08,990 ‫a Google dot com website which very, is very, very short. 68 00:05:08,990 --> 00:05:11,000 ‫It's just a couple of kilobytes. 69 00:05:12,050 --> 00:05:15,800 ‫So instead I'm not going to download a five megabyte file. 70 00:05:15,800 --> 00:05:19,610 ‫So it's a little longer until all of that is done. 71 00:05:19,610 --> 00:05:21,140 ‫So let's check it out again. 72 00:05:22,310 --> 00:05:24,860 ‫I'm going to press the button and now you see it freezes. 73 00:05:24,860 --> 00:05:27,530 ‫And only once it was done, it changed to done. 74 00:05:27,530 --> 00:05:31,640 ‫So maybe the 25 megabyte file is too small. 75 00:05:31,640 --> 00:05:34,220 ‫Let's make the 200 megabyte file. 76 00:05:34,220 --> 00:05:39,200 ‫Let me actually check if there is one on the website and there is one. 77 00:05:39,200 --> 00:05:40,430 ‫All right, let's try it again. 78 00:05:40,430 --> 00:05:44,690 ‫Now, the file will be a lot bigger and will take quite a while to get it done. 79 00:05:44,690 --> 00:05:49,460 ‫So I'm pressing on the button and as you can see now, it's freezing, it's frozen and it doesn't have 80 00:05:49,580 --> 00:05:51,860 ‫anything until the download is done. 81 00:05:51,860 --> 00:05:53,960 ‫And that's because we are on the third one. 82 00:05:53,960 --> 00:06:00,350 ‫So the whole screen is frozen until that download is done and that's something that is very dangerous. 83 00:06:00,350 --> 00:06:01,460 ‫You should not do that. 84 00:06:01,460 --> 00:06:08,420 ‫You should always be careful when doing stuff that's heavy on the main thread or on the UI thread because 85 00:06:08,420 --> 00:06:14,270 ‫the main thread or the UI thread is really busy with updating the UI. 86 00:06:14,270 --> 00:06:21,830 ‫So it does all the UI stuff and well now my file or my program is frozen. 87 00:06:21,830 --> 00:06:22,220 ‫Pretty much. 88 00:06:22,220 --> 00:06:24,470 ‫So I'm just going to use a 200 megabyte file. 89 00:06:24,470 --> 00:06:29,930 ‫Maybe that's a better choice and that will be done and we will still see the difference. 90 00:06:29,930 --> 00:06:30,530 ‫Right. 91 00:06:30,620 --> 00:06:36,860 ‫So I just have used here a link where you can simply run or download random files. 92 00:06:36,860 --> 00:06:38,330 ‫So let's press it again. 93 00:06:38,330 --> 00:06:42,950 ‫As you can see now it's frozen and it will take a little while until it's done. 94 00:06:42,950 --> 00:06:43,760 ‫And there you are. 95 00:06:43,790 --> 00:06:44,360 ‫It's done. 96 00:06:44,360 --> 00:06:47,030 ‫So downloaded the file and it's done. 97 00:06:47,660 --> 00:06:48,150 ‫Okay. 98 00:06:50,440 --> 00:06:53,680 ‫And what you also see is that we are running on thread number one. 99 00:06:53,680 --> 00:06:55,840 ‫So that's the main thread, right? 100 00:06:55,840 --> 00:07:01,120 ‫And we're running on the main thread and we're trying to download something and we're trying to update 101 00:07:01,120 --> 00:07:05,950 ‫the UI and well, that's why it takes a little a little while here. 102 00:07:06,760 --> 00:07:10,030 ‫So now you might say, all right, let's create a task to do that. 103 00:07:10,240 --> 00:07:18,010 ‫So let's create a task that run and we are going to run some code in here. 104 00:07:18,010 --> 00:07:23,170 ‫So I'm just going to copy that code in there like that. 105 00:07:23,290 --> 00:07:25,360 ‫And now let's debug that. 106 00:07:25,360 --> 00:07:30,280 ‫So let's add a little debug point in here. 107 00:07:30,370 --> 00:07:36,370 ‫So let's go ahead and debug that just to see which threads are actually involved. 108 00:07:36,370 --> 00:07:40,630 ‫So I'm going to press the button and then we are we are inside of this thread. 109 00:07:41,460 --> 00:07:42,660 ‫And there we are. 110 00:07:42,660 --> 00:07:44,400 ‫So we have several worker threads. 111 00:07:44,400 --> 00:07:48,900 ‫We have the main thread, which is the thread one, and we saw that earlier on as we executed something. 112 00:07:48,900 --> 00:07:58,500 ‫So we have the main thread and then we have our task run which has a thread as well and we are in thread 113 00:07:58,500 --> 00:07:59,100 ‫five. 114 00:07:59,100 --> 00:08:05,010 ‫So you can see thread five is a worker thread and that's the one that we have here. 115 00:08:05,010 --> 00:08:06,570 ‫So let's go to the next step. 116 00:08:07,650 --> 00:08:11,850 ‫We're still at the, um, execution or still at thread five. 117 00:08:12,030 --> 00:08:13,800 ‫Then let's do it again. 118 00:08:14,650 --> 00:08:15,900 ‫Still a thread five. 119 00:08:15,910 --> 00:08:18,580 ‫And now we're trying to do something. 120 00:08:18,580 --> 00:08:20,680 ‫So we're trying to update my button. 121 00:08:20,680 --> 00:08:21,250 ‫Done. 122 00:08:23,610 --> 00:08:25,590 ‫And let's go to the next step again. 123 00:08:26,080 --> 00:08:28,920 ‫And as you can see, my application freezes. 124 00:08:28,950 --> 00:08:31,920 ‫It's evaluating expression, my button. 125 00:08:33,820 --> 00:08:34,990 ‫So we're waiting again. 126 00:08:34,990 --> 00:08:37,060 ‫So quite happy for it. 127 00:08:37,060 --> 00:08:40,780 ‫And as you can see, ma'am, that we are in Operation Exception. 128 00:08:40,780 --> 00:08:45,910 ‫The calling thread cannot access the object because a different thread owns it. 129 00:08:46,300 --> 00:08:47,410 ‫What does that mean? 130 00:08:47,440 --> 00:08:51,970 ‫Well, it means that my button is owned by a different thread. 131 00:08:52,680 --> 00:08:53,670 ‫And by which thread. 132 00:08:53,670 --> 00:08:58,340 ‫Well it's owned by the UI thread, which is our main thread. 133 00:08:58,350 --> 00:09:05,860 ‫So the main thread is responsible for taking care of all of the UI elements so that they don't freeze. 134 00:09:05,880 --> 00:09:12,600 ‫It's important that UI always responds, and in this case it's not responding anymore because we are 135 00:09:12,600 --> 00:09:18,950 ‫trying to access this line of code even though it's not in the right thread. 136 00:09:18,960 --> 00:09:24,540 ‫So we are in thread five and we're trying to access something that belongs to thread one and that's 137 00:09:24,540 --> 00:09:25,530 ‫something that is invalid. 138 00:09:25,530 --> 00:09:31,920 ‫So we get this invalid operation exception here and we need to find a different solution to manage that. 139 00:09:33,030 --> 00:09:37,440 ‫And it's generally a concept of different threads. 140 00:09:37,440 --> 00:09:43,290 ‫So generally you have to be careful when you work with different threads and with different objects. 141 00:09:43,290 --> 00:09:48,780 ‫If the objects are owned by other threads, you cannot change them or modify them. 142 00:09:48,780 --> 00:09:50,850 ‫So that's something that you have to be aware of. 143 00:09:50,940 --> 00:09:52,490 ‫So how can we do that? 144 00:09:52,500 --> 00:09:57,900 ‫Well, generally, let's stop the app first and let's go into button. 145 00:09:58,350 --> 00:10:03,240 ‫Therefore, I create a button here and I want to check out button. 146 00:10:03,240 --> 00:10:07,860 ‫So I'm pressing control or holding control and pressing on the button. 147 00:10:07,860 --> 00:10:15,360 ‫So a button inherits from button base, which is a content control which inherits from control, from 148 00:10:15,360 --> 00:10:18,390 ‫framework element from UI element. 149 00:10:19,510 --> 00:10:27,490 ‫Which is a visual object, which is a dependency object, the dispatcher object and that we are so it's 150 00:10:27,490 --> 00:10:29,380 ‫a dispatcher object. 151 00:10:29,380 --> 00:10:33,670 ‫And in here it just checks the access and verifies the X axis. 152 00:10:33,670 --> 00:10:41,500 ‫So this is a dispatcher object and we're using a dispatcher here and the dispatcher has plenty of variables, 153 00:10:41,500 --> 00:10:42,850 ‫events and so forth. 154 00:10:42,850 --> 00:10:44,170 ‫Why do I show you that? 155 00:10:44,170 --> 00:10:53,500 ‫Well, it's because we will use dispatcher in order to manage our thread for the my button. 156 00:10:53,890 --> 00:10:55,630 ‫So what should I do here. 157 00:10:55,630 --> 00:11:04,060 ‫Well, I need my button dot the dispatcher so gets the windows threading dispatcher the system windows 158 00:11:04,060 --> 00:11:07,510 ‫dot threading dot dispatcher object is associated with. 159 00:11:07,510 --> 00:11:15,910 ‫So now we find out which thread belongs to our button or actually which to which thread our button belongs. 160 00:11:15,910 --> 00:11:23,440 ‫So let's check the dispatcher and here I invoke executes the specified action asynchronously on the 161 00:11:23,440 --> 00:11:28,330 ‫thread the system windows threading dispatcher is associated with. 162 00:11:28,330 --> 00:11:31,930 ‫So that's exactly what I was talking about, what we need to do. 163 00:11:31,930 --> 00:11:37,570 ‫So let's go ahead and do that and let's execute the code in here now. 164 00:11:38,920 --> 00:11:42,700 ‫So I'm going to close it at the bottom there. 165 00:11:42,700 --> 00:11:48,400 ‫And now you can see now I can go ahead and say, okay, my button content just says done, and I'm going 166 00:11:48,400 --> 00:11:54,070 ‫to use the debug once again in order to see in which thread I am at this point. 167 00:11:54,070 --> 00:11:55,960 ‫So let's run the code again. 168 00:11:56,470 --> 00:11:58,240 ‫Now let's press the button. 169 00:11:58,240 --> 00:12:00,340 ‫And as you can see, we're in here now. 170 00:12:00,910 --> 00:12:05,800 ‫And now it needs to evaluate the load again so that we are so we in thread five. 171 00:12:05,800 --> 00:12:08,470 ‫Now this is where we do the debugging thing. 172 00:12:09,070 --> 00:12:12,490 ‫Then we go to the next thread or next line. 173 00:12:12,490 --> 00:12:17,410 ‫Next line and then the UI is back on track. 174 00:12:19,240 --> 00:12:19,630 ‫Where? 175 00:12:19,630 --> 00:12:20,440 ‫In here. 176 00:12:20,890 --> 00:12:22,660 ‫And now we can go to the next step. 177 00:12:22,660 --> 00:12:29,500 ‫So we're in the dispatcher and and here it actually jumps over what I wanted to show you. 178 00:12:29,500 --> 00:12:31,690 ‫So let's check it out. 179 00:12:32,140 --> 00:12:41,920 ‫Go to windows and let's see the debug console, which is the output so that we are it says thread number 180 00:12:41,920 --> 00:12:44,950 ‫five and then it said thread number one. 181 00:12:44,950 --> 00:12:48,760 ‫So this is thread number one and that's thread number five. 182 00:12:48,760 --> 00:12:53,320 ‫So the owner of the button, as you can see, is thread number one. 183 00:12:54,040 --> 00:13:01,000 ‫And in order to make that a little clearer, we could add that to our line here. 184 00:13:01,000 --> 00:13:09,370 ‫Thread number one or thread number, so-and-so owns my button, so now we'll be a bit clearer. 185 00:13:09,910 --> 00:13:12,850 ‫Let's run it again and then it should show correctly. 186 00:13:12,850 --> 00:13:18,010 ‫So here is the output and there's nothing interesting yet. 187 00:13:18,010 --> 00:13:23,740 ‫We press the button and you see thread number five was executed and then it starts to download. 188 00:13:23,740 --> 00:13:27,970 ‫And once it's done, once it's done, it says Here, thread number one owns my button. 189 00:13:28,970 --> 00:13:30,380 ‫So let's press again. 190 00:13:31,430 --> 00:13:37,640 ‫And now, as you can see, the button still works and it's still updating. 191 00:13:38,300 --> 00:13:39,470 ‫So that's good. 192 00:13:41,150 --> 00:13:42,950 ‫And that is one way of doing it. 193 00:13:43,280 --> 00:13:49,160 ‫There is another way, though, and I'm going to show you another one, which is a preferred solution. 194 00:13:49,160 --> 00:13:52,670 ‫So I'm going to copy this, my button click. 195 00:13:53,630 --> 00:13:57,750 ‫I'm going to call it my button click to just so it doesn't interfere. 196 00:13:57,770 --> 00:14:02,660 ‫And now I'm going to say at which thread I am outside. 197 00:14:02,660 --> 00:14:04,760 ‫So here which thread? 198 00:14:04,940 --> 00:14:06,290 ‫I want to click the button. 199 00:14:06,290 --> 00:14:08,690 ‫Well I should be in the red one then. 200 00:14:09,500 --> 00:14:17,900 ‫I'm going to use a wait task run and that task should be an async task. 201 00:14:17,900 --> 00:14:20,660 ‫So we need to add async keyword here. 202 00:14:20,750 --> 00:14:26,480 ‫Now Visual Studio is still not very happy, so I need to make this method asynchronous. 203 00:14:26,750 --> 00:14:35,510 ‫So this my button click now will be an asynchronous button method which will await a specific task to 204 00:14:35,510 --> 00:14:37,100 ‫run asynchronously. 205 00:14:37,130 --> 00:14:45,680 ‫And what I do in here is I simply download this file again, and instead of using a dispatcher, what 206 00:14:45,680 --> 00:14:54,740 ‫I can do now is I can actually update my button outside of this task. 207 00:14:55,010 --> 00:14:56,930 ‫So I'm going to do it outside here. 208 00:14:56,930 --> 00:15:02,570 ‫I'm going to say my button content and it's going to say something like Done downloading. 209 00:15:05,380 --> 00:15:06,180 ‫That's it. 210 00:15:06,750 --> 00:15:16,680 ‫So now instead of doing it with a dispatcher, which was a little workaround, I make it asynchronous, 211 00:15:16,680 --> 00:15:19,110 ‫so now it should work fine as well. 212 00:15:19,140 --> 00:15:27,390 ‫Now, in order to test that, I'm going to change the method here to click method to button click to. 213 00:15:27,420 --> 00:15:30,260 ‫Otherwise this method would never be executed. 214 00:15:30,270 --> 00:15:32,040 ‫So let's do that. 215 00:15:32,040 --> 00:15:36,300 ‫And maybe let's also add on which thread we are. 216 00:15:37,020 --> 00:15:44,790 ‫So thread number so-and-so before awaiting task. 217 00:15:47,370 --> 00:15:58,170 ‫And then this one is after a wait task and that one will be during a weight task. 218 00:15:59,490 --> 00:16:00,930 ‫So now let's run it again. 219 00:16:03,670 --> 00:16:04,960 ‫Let's press our button. 220 00:16:06,630 --> 00:16:08,640 ‫And here you see before task. 221 00:16:09,430 --> 00:16:10,690 ‫That was number one. 222 00:16:10,690 --> 00:16:13,630 ‫Then during a weight task that was thread number two. 223 00:16:13,630 --> 00:16:19,600 ‫And after weight task, it's at number one again and we're done downloading. 224 00:16:19,600 --> 00:16:21,070 ‫So that's a different approach. 225 00:16:21,070 --> 00:16:24,220 ‫That works perfectly well as well and that's even a better way. 226 00:16:24,220 --> 00:16:27,700 ‫So you don't have to go the way of checking which thread am I on? 227 00:16:27,700 --> 00:16:33,910 ‫But you create a different thread where you do this stuff, but and you also make it a weight. 228 00:16:33,910 --> 00:16:36,340 ‫So you make it asynchronous. 229 00:16:39,180 --> 00:16:44,640 ‫Now, a little something that I want to show you as well is a web browser. 230 00:16:44,640 --> 00:16:48,420 ‫So what I'm going to do here is I'm going to reduce the size of the button. 231 00:16:48,870 --> 00:16:53,930 ‫I'm going to put it here at the top left corner, and I'm going to use a web browser. 232 00:16:53,940 --> 00:16:58,440 ‫I'm going to just drag it in there and make it a little bigger. 233 00:16:58,440 --> 00:17:04,170 ‫So now we'll just have this web browser and it should show us the side that we're on. 234 00:17:04,260 --> 00:17:09,480 ‫So what will happen is whenever I press the button, I'm going to download a specific website which 235 00:17:09,480 --> 00:17:11,100 ‫I will define manually. 236 00:17:11,160 --> 00:17:15,870 ‫So this is just a little example to add on what we have seen so far. 237 00:17:15,900 --> 00:17:20,220 ‫I'm not going to go into a full on web browser. 238 00:17:20,220 --> 00:17:21,930 ‫I'm not going to show you how to do that. 239 00:17:21,930 --> 00:17:23,310 ‫You can go ahead and try yourself. 240 00:17:23,310 --> 00:17:28,470 ‫I'm just going to show you how you can now use that HTML that you have downloaded from this specific 241 00:17:28,470 --> 00:17:32,250 ‫link, which is hardcoded. 242 00:17:32,400 --> 00:17:36,900 ‫And simply use that so or display that in a web browser. 243 00:17:36,900 --> 00:17:39,450 ‫So https google.com. 244 00:17:39,450 --> 00:17:44,050 ‫So what will happen is whenever I press the button, google.com will be downloaded. 245 00:17:44,070 --> 00:17:51,510 ‫Now in order to do that, I need to have a specific method and I'm not going to type it out manually, 246 00:17:51,510 --> 00:17:53,190 ‫I'm just going to copy and paste it in here. 247 00:17:53,190 --> 00:17:59,910 ‫So this method on HTML change will be called whenever a dependency property will be changed. 248 00:18:00,000 --> 00:18:07,890 ‫So what I'm going to say here is on HTML, change needs a dependency object and a dependency property 249 00:18:07,890 --> 00:18:10,950 ‫change to event argument which is called E. 250 00:18:10,980 --> 00:18:17,040 ‫And here I'm just creating a web browser which is going to take that dependency object and use it as 251 00:18:17,040 --> 00:18:18,000 ‫a web browser. 252 00:18:18,000 --> 00:18:24,450 ‫And then if the web browser is not null, then navigate to a specific string which will be new value 253 00:18:24,450 --> 00:18:25,200 ‫as a string. 254 00:18:25,200 --> 00:18:32,550 ‫So whatever those dependency arguments are, property change event arguments are, that's where I get 255 00:18:32,550 --> 00:18:34,200 ‫the string from. 256 00:18:34,200 --> 00:18:38,280 ‫So that's pretty much just what needs to be displayed on the web browser. 257 00:18:38,550 --> 00:18:44,610 ‫So I would have done it in an easier way, but the problem is it's not that easy to do that. 258 00:18:44,610 --> 00:18:47,460 ‫So there aren't easier ways or many easier ways to do that. 259 00:18:47,460 --> 00:18:50,070 ‫So that's generally the approach that you would need to do here. 260 00:18:50,070 --> 00:18:56,250 ‫So instead of just updating the button with done downloading, I want to update the web browser and 261 00:18:56,250 --> 00:18:58,050 ‫therefore the web browser needs a name. 262 00:18:58,050 --> 00:19:03,540 ‫So I'm going to give the web browser a name and I'm going to call it my web browser. 263 00:19:04,950 --> 00:19:11,040 ‫Now, the web browser, I'm going to call it here or actually modify it here. 264 00:19:11,040 --> 00:19:18,000 ‫What I want to do is I want to set the value of that browser and I want to set it with something. 265 00:19:18,030 --> 00:19:24,480 ‫And because you can see we need the dependency property and an object which is a value. 266 00:19:24,810 --> 00:19:26,430 ‫So how do I get that? 267 00:19:26,430 --> 00:19:27,690 ‫Where do I get that from? 268 00:19:28,140 --> 00:19:30,870 ‫Well, there are multiple, multiple things here. 269 00:19:30,870 --> 00:19:35,340 ‫So one of them is we need a dependency property, so let's create one. 270 00:19:36,150 --> 00:19:38,220 ‫Let's put it at the top here. 271 00:19:39,360 --> 00:19:41,490 ‫And again, I'm just going to copy and paste it. 272 00:19:41,500 --> 00:19:44,610 ‫I'm going to show you how it looks like and what it does. 273 00:19:44,610 --> 00:19:48,690 ‫So it's a read only dependency property called HTML property. 274 00:19:48,690 --> 00:19:50,730 ‫And we register it. 275 00:19:50,970 --> 00:19:53,310 ‫We register it with HTML. 276 00:19:55,540 --> 00:20:02,560 ‫As you can see, it needs a name, string name, HTML, then a property type, an owner type and property 277 00:20:02,560 --> 00:20:03,310 ‫metadata. 278 00:20:03,310 --> 00:20:10,720 ‫So that's something that we have touched on when working with dependency properties in the WPF chapter. 279 00:20:10,720 --> 00:20:15,730 ‫So here I just created with HTML, the type is it's a string. 280 00:20:15,910 --> 00:20:16,930 ‫What is the owner? 281 00:20:16,930 --> 00:20:18,010 ‫It's the main window. 282 00:20:18,010 --> 00:20:25,090 ‫So our class here and what kind of data is this or which data do I want to give to it? 283 00:20:25,090 --> 00:20:28,540 ‫And I give it the on HTML changed metadata. 284 00:20:28,540 --> 00:20:29,800 ‫So what does that mean? 285 00:20:29,800 --> 00:20:34,900 ‫Well, whenever we set the HTML property on HTML changed will be called. 286 00:20:34,900 --> 00:20:37,930 ‫And that's this method here that we'll be called. 287 00:20:38,590 --> 00:20:43,870 ‫So now what we can do is we can set the value of my browser with the following. 288 00:20:43,870 --> 00:20:50,980 ‫We can go ahead and say HTML property and set it with HTML. 289 00:20:51,610 --> 00:20:57,910 ‫In order to use HTML, we need to make a little work around here or have a little workaround. 290 00:20:57,910 --> 00:21:05,020 ‫Actually, I'm going to call it my HTML like that and I need to create a variable here. 291 00:21:05,080 --> 00:21:15,760 ‫Just going to be a string my http l which is just going to say blah, just a string which is with stupid 292 00:21:15,760 --> 00:21:17,590 ‫text in here, nothing special. 293 00:21:17,710 --> 00:21:23,440 ‫But then once it's done downloading we get the result into our HTML string. 294 00:21:23,440 --> 00:21:29,830 ‫I couldn't just say HTML here because this string is locally created and I cannot create it or it's 295 00:21:29,830 --> 00:21:35,680 ‫within the scope of our task here and I cannot create it outside. 296 00:21:35,680 --> 00:21:38,080 ‫So that's why I need to have this little workaround. 297 00:21:38,080 --> 00:21:42,220 ‫So now I can go ahead and say my HTML is HTML. 298 00:21:42,550 --> 00:21:43,960 ‫So this. 299 00:21:44,710 --> 00:21:50,320 ‫Variable here, which is in the scope of our my web browser that we set here. 300 00:21:50,350 --> 00:21:53,360 ‫That's why I can go ahead now and set it in here. 301 00:21:53,380 --> 00:21:57,340 ‫So within the scope of our await task. 302 00:21:57,580 --> 00:22:00,520 ‫Now, of course, we need to finish this line. 303 00:22:00,520 --> 00:22:06,820 ‫So that's the way you can set the value of a web browser. 304 00:22:07,830 --> 00:22:08,540 ‫All right. 305 00:22:08,550 --> 00:22:11,970 ‫It's a little workaround, but it works, so let's test it. 306 00:22:12,420 --> 00:22:13,890 ‫Let's execute our code. 307 00:22:16,890 --> 00:22:18,210 ‫That's pressed the button. 308 00:22:20,050 --> 00:22:21,090 ‫And there we are. 309 00:22:21,100 --> 00:22:26,450 ‫So we have plenty of script errors, but that's because we haven't said anything else up. 310 00:22:26,470 --> 00:22:36,040 ‫But as you can see here we are at Google now, so we can go to images, to Google Maps and so forth. 311 00:22:36,610 --> 00:22:40,840 ‫So now we have created our little browser, which simply brings us to Google. 312 00:22:42,010 --> 00:22:43,860 ‫All right, cool. 313 00:22:43,870 --> 00:22:50,140 ‫So as I said, I'm not going to go too deep into browsers and stuff and I didn't even want to go too 314 00:22:50,140 --> 00:22:51,550 ‫deep into those topics. 315 00:22:51,550 --> 00:22:53,410 ‫But that's just the way you have to set it up. 316 00:22:53,410 --> 00:22:57,040 ‫That's a little, uh, yeah, a little set up that you need to do. 317 00:22:57,040 --> 00:23:02,110 ‫So you need to have this method, you need to have this dependency property, and then you can go ahead 318 00:23:02,110 --> 00:23:10,420 ‫and set the value of your browser with the HTML property, which is our dependency property and some 319 00:23:10,660 --> 00:23:15,760 ‫HTML code, which is the HTML code we download from Google. 320 00:23:17,830 --> 00:23:18,100 ‫All right. 321 00:23:18,100 --> 00:23:24,340 ‫Just quickly, to summarize once again, what is the idea of using different threads? 322 00:23:24,520 --> 00:23:30,250 ‫Well, you have the main thread which handles the UI, and if you want to do something that's heavy, 323 00:23:30,250 --> 00:23:36,940 ‫so which takes a little while to do, for example, downloading from the web, for example, copying 324 00:23:36,940 --> 00:23:41,680 ‫something from one file to another or working with hard drives or whatever. 325 00:23:41,710 --> 00:23:45,130 ‫That's where it really makes sense to do that in the background. 326 00:23:45,130 --> 00:23:50,290 ‫So you create a different task or a different thread which takes care of that. 327 00:23:50,290 --> 00:23:58,120 ‫So here we created a asynchronous task which does that in the background, and once that is done, we 328 00:23:58,120 --> 00:24:00,250 ‫can go ahead with the rest. 329 00:24:00,250 --> 00:24:06,850 ‫So it's not going to freeze our main thread, our UI is still going to work properly, and that's what 330 00:24:06,850 --> 00:24:07,720 ‫it's all about. 331 00:24:08,020 --> 00:24:08,650 ‫All right. 332 00:24:08,650 --> 00:24:10,120 ‫So see you in the.