Decoupled Code with MessagingCenter in Xamarin.Forms

this video is going to be all about subscribing so did you subscribe to my channel yet let's talk about why you should subscribe to my channel no no not that subscribe we're going to talk about the examine forms messaging center which allows you to have this published subscriber pattern right inside of xamarin forms because it's just built in so you can very loosely couple um just send a message from the sender to the subscriber and they don't even have to know each other but you can trigger code from the other side so let's just go check out what that's all about but you should still also subscribe to this channel so surprise surprise here we see a file new xamarin forms project running in visual studio for mac on the left you can see the example code of the template that you get out of the box on the right you can see it running on the ios simulator so while this is on mac you can also do this exact same thing on windows and while you see this running in the ios simulator all of this is just pure xamarin form so this will work on any platform that is supported by forms now let me update the title which is always a big thing in my videos so this is going to be messaging sender sample and whenever i say that save that you can see hot reload kicking in and it will automatically show these changes on my ios simulator this also works for android of course and on physical devices so that is very cool okay so let me actually get out the rest of this ui right here so i don't need all of these labels i'm going to need a couple of buttons actually so i'm going to do this stack layout right here make the orientation horizontal well not like that there we go slash there we go close it and i'm going to add a couple of buttons here and the first one is going to be uh subscribe so this is not subscribed to me which is something that you should also be doing but this is subscribe to the messaging center that is going to send us messages in a little bit and whenever we click that uh we are going to handle that so i'll do that in a little bit and the other thing i want to do here is go to page and i'm going to generate a new click handler here there we go because what i want to show you is i want to get this new page i want to show you to that we can actually send message between different objects different pages and that will all work as well to make the sample a little bit more real life a real life example this is all to the side i always like to center my things so let's say horizontal sender and expand save that there we go now we have subscribe and go to page and life is good okay so to show you that i'm receiving messages i'm going to use the collection view right here and since this is also in the stack layout as well i can just add that collection view right here and for that collection view i'm going to say item template and there we go and i'm going to specify a data template and that's just simply going to be a label with the text that has a binding to dots so if you're confused here with data binding and mvvm and that kind of stuff i have a couple of videos on that you can see the playlist popping up in your screen right now or you can find it in the video description so i'm going to skip over that a little bit but what this will do is basically the dot will bind to the the entire object that is is going to be rendered in this single instance of the template and actually in this collection view i'm going to say item source is also binding i'm going to bind this to a collection which is going to be messages messages yes messages is a good name so there we go i still have to create that of course i think this is complaining property data template content does not support the value of label i think that's incorrect i think it actually does support that visual studio so i'm going to take my chances and see if that is actually true or we will have some debugging on my hands a little bit later so there's that then let's go to the code behind for this main page right here and uh now these names are a little confusing so let's do this subscribe also to my youtube channel winky face all right there we go and what we're going to do here is we're going to see the messaging center so you can see it already pop up and this is just a static class that always exists basically so you can just access it like this you can reference the actual instance it is of the type i messaging center so you can also use this with your dependency injection if that's what you want but we can just use this messaging center right here but the most important things are down here these bottom three send subscribe and unsubscribe so whenever you send something you're just going to send it and send can have multiple subscribers so you don't know where you're going to send it to who is going to receive it but the subscribers can act on that message now the subscribe of course is the other end of the line where you can actually subscribe to a certain message and whenever you get that message you can act upon that so you can execute any code that you like basically in different parts of your code they don't need to have any relationship that's the loose coupling thing of the messaging center um because you know you don't know where you're sending you don't know where you're actually well you do know where you're receiving uh but you don't have to have any relationship between the objects so with this you can you know reach into your platform code and and and execute some ios or android specific code um or you can just go to an entire different page and do some things there maybe some new data is coming in and you want to say in different parts of your application you have to reload some bits but those parts of your application don't necessarily have a relationship or some way to actually reach each other so you could then just use the messaging center to send a little message and execute some code there and the unsubscribe of course is whenever you don't want to receive the messages anymore um you can unsubscribe and you will no longer receive them so here is one note um you can you should basically only unsubscribe whenever you don't really want to receive the messages anymore because all of this is working with weak references which means whenever the page or the object or whatever is not necessary anymore the garbage collection will actually clean it up whether or not you're subscribed so this subscribe will not hold on to a reference of the object that um has the subscription um that is a good thing to know so that you know that um you know you are not waiting for any messages to come in while they are not and also that you don't have to be worried about memory leaks so you basically only have to unsubscribe whenever you really don't want the messages anymore and not so much because of the memory management okay so here i'm going to subscribe and whenever i do i want to specify a sender so i still need to specify the um the type of the sender which can be anything so i can make this object to make it very generic and not have that relationship between the objects and in this case i know it's going to come from another page so i can make it a little bit more specific to to do that page then i have to specify the object of the subscriber so that's going to be this because you know i want to subscribe the main page object so you can also subscribe another object from here if that's what you want um we're going to do a message so basically this type here that you specify here and this message here is going to be the unique kind of key um that that has to be like the same to actually get this message delivered right so that is the thing whenever we send it we'll see that in a little bit we have to specify the exact same things for the message to come across to to this thing so here i'm going to say tic this is a magic string you probably want to put this in some kind of shared place where it's a constant or or whatever so you don't get any typos in there and you can just reference that variable in in both the send and the subscribe and then next i have the action which i can execute so you can of course pass in some delegate here or you can just write it in line with a lambda expression which i'm going to do now and you can see because i specified this as a page so i can get a parameter here that is actually the page that is sending something so here i can also access the page or the other object that you might have specified i can get that here from the parameter that is supplied as well so basically it's kind of like the same as this event handler right here you will get the sender and we can also get some arcs some arguments so i'll show that in a little bit so let's just close this i think there was one other optional parameter that you could do here which is the source i'm not actually sure what that is all about if you do know let me know in the comments then i can learn something from you but actually let me add an argument here so whenever you want to also get some extra data with that message you can totally do that so here we go date time i'm just going to send a simple date time here and you can see uh that here with the action that i'm going to execute i also have to update this so daytime because that's now coming in too but this can be any object this can be your own complex object with something that you want to you know need to provide extra data the data that has been reloaded so you don't have to go out to the database again or go out to the rest api again you can just send that data through your application but what i'm going to do oops i need to add that public observable collection because then it updates nicely of simple strings so let the intellithe send solve this using system collections object model there we go messages i called it and this has to be a property um get set there we go his new observable collection string there we go so this is right this is our collection that is the item source for our collection view messages uh and the observable collection makes sure that you know it updates nicely that we don't have to do anything with our data binding so the last thing i need to do is here set the binding context not the condition context is this so basically this tells uh the main page that it has to use this this this same object as its binding context and with that i can magically in my example say binding to a property so in this case messages and it will know that it has to come from this object and then with that binding dot here it knows to actually get that string out of that messages and to render that into this label so that is very quickly how this data binding works okay so i got this in place then all i need to do is messages dot add is um well there we go let's do message received at uh there we go date time let's just do it like this we will just see something come in uh okay so we've got that set up whenever a message is coming we will just add that to our collection view and here go go to page so let's do that i want to make this async because the navigation stuff is all async and i'm going to say await navigation dot let's make it a modal because you know else will run in that issue where ios will start complaining that you can't navigate whenever it's not a navigation page and that kind of stuff so i'll just do a modal um push that one and make it a new oh and we don't have that page yet okay so all right all right all right let's create that page first go to my shared project right click add new file and it's already on the form section right here forms content page forms content page example because you know i love my example um here this is the send page so let's do that and here we have our same page okay good i don't like this extra content thing it's already done for us and here i'm going to add another stack layout and let's make it horizontal options center and expand vertical so you know then it gets in there nice and centered i love getting things centered there we go and do another button with a text of send send clicked there we go this is going to be our send and another button because we have a modal so we have to have some way to close the page there we go let's get a space in there clicked all right so we've got this all set up let's finish the main page now first so we can say new uh send page here we go okay so this is not the way this works all right wait navigation oh it says pop okay push push motor lacing there we go so this is all set up we can go to our new page where we can send things and we whenever we subscribe so whenever we receive that message we will show that in our collection view okay okay this is going pretty well so send page we have a couple of buttons um and let's do so this one we're going to send and let's do that so we're again just going to say messaging center but this time we are going to say send and we're going to say page because you know remember that has to be that same thing that we have to actually send something and hello where's my where's my oh there we go page sender so this is going to be this right uh because this is the page that's going to be sending the thing the send page and the message is going to be tick that's what i said the message would be right so there we go this is enough to send a message and remember you have to you know this has to be in sync the page so the object that you're specifying and this message right here and what else we need to do is of course um add that parameter in there so that whole thing has to match else your message won't be received and we can do that in the same way that we did with the subscribe so here it's going to be a daytime and then whenever i do this i have to specify a daytime here so this is just going to be daytime now there we go so save that and we are ready to send some messages so that is pretty pretty cool um and for this one oh we're going to close page there we go so this again needs to be a sync and we're going to say await navigation dot pop this time it has to be pop modal async and there we go so i think we've got everything set up now let's just stop our application and rerun this for a little and should not be very long for this to come back up and then we'll see our page with a couple of buttons well we've seen this before but now it actually works so let me just go to the page first and we're going to click send so it did actually send although we're not showing anything but it did send but nothing happened right so we're expecting to go back to the previous page and see nothing because we didn't subscribe yet so close page and there's nothing there so that's good and this is going to be a kind of i'm kind of nervous now because is it going to work whenever i do subscribe so let's click that subscribe button go to the page again click send and now whenever we go back we have a message received okay that went well so this is pretty cool right we can go to the one page send a message to the other one there is received it can do all the things and you can just do everything with that message that is pretty cool so now when i go here and i click send two times then i expect to have three entries right so there we go that just works out of the box but there's one interesting thing that i want to you know show you as well that is whenever i click subscribe again so now is it going to be subscribed is going to be double subscribed what's going to happen well notice that we have three items right now i go to the page i click send and i go back and now we have five so this is something that you need to know right whenever you subscribe a second time the messages will come in twice whenever you do three it will come in thrice thrice is that is that a thing well anyway yeah you can you can subscribe as many times as you want and it will be processed each time so that is something you need to be aware of because what i have seen happening is people subscribing on appearing of their page which means every time your page is appearing you will have a new subscription and your messages will be processed over and over again so you either need to be very aware with your unsubscribe as well that you want to disappear to unsubscribe but it's maybe even better to just not do it on the on appearing and be very aware of the places where you want to subscribe to the messages so that is something that i wanted to show you so i hope this made clear how to work with this messaging center in xamarin forms how to very loosely couple your code whenever you don't want to make a relationship between these objects and you still want to trigger some actions there so to be very honest this is kind of a last resort for me and i don't use it very very often because you know it it can make your code a little bit messy because it isn't really clear where something is sent or where something is subscribed and you can't do like right click final references because you know there is no reference because that is the way this is built up but it can be very useful and actually one of the questions that i got under my video on their uh the dependency service to you know reach into your platform projects and run platform-specific code is when should i use the messaging center and when should i use the dependency server so is that something that you're also curious about please let me know in the comments and i'll make a video about that um i'm planning to do that anyway but then i can maybe prioritize that a little bit so that is because that's a good question and i'm happy to answer that one or of course any other questions that you might have so let me know in the comments and i'll be happy to do that as always all the links can be found in the video description um please click that like button if you've liked this video did i already ask you to subscribe to my channel for this video i guess i did but i'm doing it once more please subscribe to my channel and other than that well i'll just be seeing you for my next video and keep coding you

Channel: Gerald Versluis

Views: 6,305

Keywords: xamarin forms, xamarin.forms, xamarin forms messaging center example, xamarin forms messaging center not working, xamarin forms messaging center, messagingcenter xamarin forms, messaging center xamarin forms, xamarin messaging center, xamarin messagingcenter, xamarin messagingcenter not working, Xamarin Forms 101, xamarin.forms tutorial, xamarin.forms tutorial for beginners, Xamarin 101, xamarin forms tutorial for beginners step by step, Using MessagingCenter in Xamarin.Forms

Id: JyiL6W-fvEs

Length: 18min 45sec (1125 seconds)

Published: Mon Feb 01 2021