1 00:00:00,890 --> 00:00:06,710 Welcome back in this video, we are going to look at how to navigate with an argument because once we 2 00:00:06,710 --> 00:00:09,770 click on any of those news, we want to see the details. 3 00:00:10,100 --> 00:00:10,430 Right. 4 00:00:10,430 --> 00:00:14,120 So go back to the top news here, Namita Singh. 5 00:00:14,120 --> 00:00:15,950 So it gives me the title here. 6 00:00:16,309 --> 00:00:23,300 Raja Razzaq was probably the one who wrote this, so you see, we can go over and navigate to the details 7 00:00:23,300 --> 00:00:23,600 screen. 8 00:00:23,600 --> 00:00:25,430 That's what we're going to set up in this video. 9 00:00:27,280 --> 00:00:32,020 And obviously, it needs to know which link we clicked on, so that's what the argument is going to 10 00:00:32,020 --> 00:00:32,470 be about. 11 00:00:34,240 --> 00:00:34,580 All right. 12 00:00:34,600 --> 00:00:37,610 Let's start off by making each item clickable. 13 00:00:37,750 --> 00:00:43,900 Therefore, we go to our top news item and the cool thing is we can just make the entire box clickable, 14 00:00:44,110 --> 00:00:44,470 right? 15 00:00:44,740 --> 00:00:49,210 So there is this dot clickable that we can add the clickable method. 16 00:00:49,270 --> 00:00:53,140 And this will be not at this level, but inside. 17 00:00:53,140 --> 00:00:54,970 So here, clickable like. 18 00:00:54,970 --> 00:01:03,090 So then we can say what should happen once we clicked on something and I'm just going to call this on. 19 00:01:03,100 --> 00:01:04,209 News clicked. 20 00:01:08,780 --> 00:01:14,120 And I'm just going to call the method on news clicked, and therefore we need to pass it in here. 21 00:01:14,240 --> 00:01:23,390 So I'm just going to add on news clicked or click, which will be a lambda expression with no parameters 22 00:01:23,390 --> 00:01:27,530 and a unit at unity, not the game engine. 23 00:01:27,800 --> 00:01:29,270 And then it will execute something. 24 00:01:29,450 --> 00:01:30,170 So now we can. 25 00:01:30,200 --> 00:01:33,410 So basically, I'm just creating a method here that we can now pass. 26 00:01:33,740 --> 00:01:35,930 And I'm just going to use unused click. 27 00:01:36,170 --> 00:01:42,710 So what we're saying is pass a new method here and then this method that we are passing, we can then 28 00:01:42,710 --> 00:01:44,660 call inside of our top news item. 29 00:01:45,080 --> 00:01:50,180 So that's a really like advanced technique, but it's super useful and very cool. 30 00:01:50,930 --> 00:01:59,000 So in the top news here at the top level, we can go ahead and now add on news. 31 00:01:59,000 --> 00:02:01,250 Click So here items. 32 00:02:01,730 --> 00:02:06,470 So for every news or a top news item, we can now pass in the method. 33 00:02:06,980 --> 00:02:15,170 So here there was this unused clicked that we just created, and we can now use the curly brackets if 34 00:02:15,170 --> 00:02:18,710 I ever get to click them properly to now do something. 35 00:02:19,190 --> 00:02:23,720 So here's what I'm going to use is my nav controller because it felt unused. 36 00:02:23,720 --> 00:02:24,620 It was great out. 37 00:02:24,680 --> 00:02:29,090 But now we're going to use it again to navigate so we can navigate. 38 00:02:29,480 --> 00:02:32,120 We can say to which route we want to navigate. 39 00:02:32,120 --> 00:02:38,480 So we're going to say to the detail route and Missy, because I played around with this, I call the 40 00:02:38,480 --> 00:02:39,320 details screen. 41 00:02:39,530 --> 00:02:46,550 So in order to be or to stay consistent with my application that I have prepared, I'm going to use 42 00:02:46,550 --> 00:02:48,440 the detail as the name for that. 43 00:02:48,890 --> 00:02:55,820 So in my top news, I'm going to route to the detail, but now I need to pass some information to it. 44 00:02:55,820 --> 00:02:56,960 So how do I do that? 45 00:02:57,680 --> 00:03:06,680 Well, I can use the dollar sign, dollar sign and then pass the new data ID to it, for example. 46 00:03:07,190 --> 00:03:14,090 So this will give me the new status ID, which will then allow me to display details about it. 47 00:03:16,500 --> 00:03:24,180 So now let's make this new data available, so we get the news data now on our detailed screen, so 48 00:03:24,180 --> 00:03:24,910 to speak, right? 49 00:03:24,930 --> 00:03:31,410 We don't really get it, but we need to change the details screen parameters here to also take in some 50 00:03:31,410 --> 00:03:32,070 news data. 51 00:03:32,760 --> 00:03:38,960 So now we're going to say, give me the news data when you create a detailed screen or you call my details 52 00:03:38,970 --> 00:03:43,170 screen and then we can replace this text. 53 00:03:43,650 --> 00:03:50,970 So go to top news with gold, the top news with some additional information for, for example, the 54 00:03:50,970 --> 00:03:51,610 new state data. 55 00:03:51,610 --> 00:03:54,570 This passed to us and used the author. 56 00:03:55,140 --> 00:03:59,760 So now whenever we're talking to the details screen, we are going to display the author as well. 57 00:04:01,350 --> 00:04:07,700 Now, in the preview, we'll get an error because it says, well, hey, you are not passing the news 58 00:04:07,710 --> 00:04:08,640 data to me. 59 00:04:09,180 --> 00:04:09,960 Please do so. 60 00:04:10,080 --> 00:04:14,730 So what I'm going to do is I'm just going to pass some default news data to with nothing too fancy, 61 00:04:14,730 --> 00:04:19,680 just me tossing Cleo Smith news with the title and so forth. 62 00:04:20,010 --> 00:04:26,310 So just some data that we need to pass, otherwise our previous screen wouldn't work. 63 00:04:28,400 --> 00:04:36,020 OK, so now I only passed the I.D., if you recall and also our composable isn't happy and so forth. 64 00:04:36,290 --> 00:04:42,620 But if we look at our top news, you see I'm only passing the I.D. I'm not passing an entire object, 65 00:04:42,620 --> 00:04:50,000 which is obvious because otherwise you would have to convert the object or make it see realizable or 66 00:04:50,030 --> 00:04:52,160 things like that would be way too complicated. 67 00:04:52,400 --> 00:04:58,700 So what we do instead is we say, all right, I'm only going to pass the ID and now you go ahead and 68 00:04:58,700 --> 00:05:01,100 load the news for that ID. 69 00:05:01,730 --> 00:05:06,260 And we can just do that in our mock data so we can just create a function in here. 70 00:05:07,810 --> 00:05:09,310 Which will get the news based on the. 71 00:05:10,060 --> 00:05:11,080 So get news. 72 00:05:12,710 --> 00:05:18,960 With the News I.D., which will be an integer Nullarbor, so it could be empty and it will return and 73 00:05:18,980 --> 00:05:19,700 use data. 74 00:05:20,210 --> 00:05:24,590 So I want to make sure that it actually returns something sample return. 75 00:05:24,860 --> 00:05:25,760 Top news list. 76 00:05:26,540 --> 00:05:28,850 But first with the given ID. 77 00:05:29,180 --> 00:05:35,780 So here curly brackets it that ID equals equals news ID. 78 00:05:36,350 --> 00:05:41,300 So what's going on here does a lot of lambda code and stuff in here? 79 00:05:41,630 --> 00:05:45,710 So basically, we're saying with this getting used method is called it needs to get an ID, which is 80 00:05:45,710 --> 00:05:49,970 going to be of type integer another bill and it's going to return a new data object. 81 00:05:50,450 --> 00:05:52,490 Then we're returning the first item. 82 00:05:52,490 --> 00:05:58,580 So from our top news list, which is there's a list of mock data, we are going to return to first item 83 00:05:58,760 --> 00:06:05,780 where the ID of the item that we're looking at has the same ID as our news ID. So if the new ID, for 84 00:06:05,780 --> 00:06:12,350 example, is eight, then it will give me the first item inside of the top news list where the idea 85 00:06:12,350 --> 00:06:18,920 is eight and it's fine to use first because we are using unique IDs where we don't have news that is 86 00:06:18,920 --> 00:06:21,650 going to have the same ID as another piece of news. 87 00:06:22,190 --> 00:06:28,550 OK, so that's why it's important to make sure that your IDs are unique, but in any given database 88 00:06:28,550 --> 00:06:33,650 that you would use, this would be the case anyways, because this would be your key for your piece 89 00:06:33,650 --> 00:06:34,010 of data. 90 00:06:34,020 --> 00:06:36,620 We're going to look at that later on when we're actually loading data. 91 00:06:38,170 --> 00:06:43,720 So now let's go over to our new setup, which is obviously very unhappy because it's trying to use this 92 00:06:43,720 --> 00:06:49,380 composable detail with the details screen, but the details screen is only getting enough control, 93 00:06:49,390 --> 00:06:50,890 but no additional details. 94 00:06:51,370 --> 00:07:01,540 So what I'm going to do here is I'm going to change this detail and add a placeholder for the argument. 95 00:07:01,660 --> 00:07:05,740 So here we are getting the news I.D. as well. 96 00:07:05,770 --> 00:07:06,090 Right. 97 00:07:06,100 --> 00:07:07,750 So this is going to be the new route. 98 00:07:08,590 --> 00:07:12,010 And then we need to provide the argument type using the NEF type. 99 00:07:12,610 --> 00:07:16,330 So here we are inside of the composable. 100 00:07:18,920 --> 00:07:25,520 We need to pass arguments, and we're going to say what kind of arguments they will be, it will be 101 00:07:25,520 --> 00:07:32,180 a list of never arguments where our new side is going to be the name. 102 00:07:32,540 --> 00:07:41,240 So here and use ID and then we need to use a number here saying of what type this will be. 103 00:07:41,630 --> 00:07:45,710 So I'm going to say the NAF type will be an end type. 104 00:07:46,760 --> 00:07:53,630 So we're just basically saying, OK, we're getting use ID and we are saying the argument that you are 105 00:07:53,630 --> 00:07:54,020 getting. 106 00:07:54,020 --> 00:07:59,510 So this piece here, which has this news ID name, which is the same that we have here, and then we're 107 00:07:59,510 --> 00:08:05,300 saying of what type it is and we're saying it is going to be a integer because the news ID, if we look 108 00:08:05,300 --> 00:08:10,520 at it, once we are passing it here is going to be of type int. 109 00:08:12,310 --> 00:08:19,810 OK, so now we get the arguments, and at this point, our nav back stack entry gives us some additional 110 00:08:19,810 --> 00:08:20,560 information. 111 00:08:21,160 --> 00:08:22,000 So let's use it. 112 00:08:22,330 --> 00:08:23,350 Let's use this nav. 113 00:08:24,810 --> 00:08:31,970 Back stack and entry object that we are getting, which is it that you just saw before I added this, 114 00:08:31,980 --> 00:08:32,970 you see there, is this it? 115 00:08:33,390 --> 00:08:42,330 So it will be this nav back stack entry that I'm going to create the ID of based on this nav back stack 116 00:08:42,330 --> 00:08:42,900 entry. 117 00:08:43,500 --> 00:08:44,940 I hope I set that correctly. 118 00:08:45,600 --> 00:08:51,480 I get it from the arguments where I get it on the entry level, so I'm getting the integer with the 119 00:08:51,480 --> 00:08:52,500 name of news ID. 120 00:08:53,430 --> 00:08:58,530 So there's a lot going on here, but basically we're just saying whatever new side is, give me that 121 00:08:58,530 --> 00:09:01,110 now and stored inside of this ID variable. 122 00:09:01,860 --> 00:09:10,560 And I can use this ID in order to use this mock data method, get news to then load the news and pass 123 00:09:10,560 --> 00:09:11,580 it to the details screen. 124 00:09:12,240 --> 00:09:24,170 So we're saying, well, new data should be the mock data with the get news and it will be the new side. 125 00:09:24,870 --> 00:09:27,600 And I actually just called it ID, which is this variable here. 126 00:09:28,380 --> 00:09:30,630 So this will give me the news data object, right? 127 00:09:30,630 --> 00:09:32,730 Because this is of type news data. 128 00:09:33,870 --> 00:09:39,930 And now I can use this new data object to pass it to my details screen like so because my detailed screen, 129 00:09:39,930 --> 00:09:43,710 as you recall, hopefully required a new data object. 130 00:09:46,160 --> 00:09:52,640 OK, so now we're passing the news data object, and it will display in the text of the button that 131 00:09:52,640 --> 00:09:54,920 we can then click in order to go back to the top news. 132 00:09:55,250 --> 00:09:59,150 So if I did everything correctly, then we should be good. 133 00:09:59,180 --> 00:10:04,340 Even though it is very tricky because we are working with strings and strings are always tricky so things 134 00:10:04,340 --> 00:10:10,520 could go wrong, which is why I would potentially make sense to re name those or make sure that those 135 00:10:10,610 --> 00:10:17,630 strings are going to be static variables that you stored somewhere in a in a single object or so. 136 00:10:18,050 --> 00:10:19,730 OK, so now let's look at this. 137 00:10:19,740 --> 00:10:23,390 Click on breaking news and see Raja Razzak from CNN. 138 00:10:23,870 --> 00:10:25,430 Let's click on this beautiful image here. 139 00:10:25,440 --> 00:10:26,160 What's up there? 140 00:10:26,180 --> 00:10:30,340 That's Mike, Mike Florio and so forth. 141 00:10:30,350 --> 00:10:33,950 So whenever we don't have an image, you see, it just uses to breaking news. 142 00:10:33,950 --> 00:10:34,730 Default image. 143 00:10:36,030 --> 00:10:36,580 Alrighty. 144 00:10:36,920 --> 00:10:44,660 So that's how you can pass data using the NAF controller and jetpack compose.