14. Reusable Control in .Net Maui

so we have created the added connect page we have done the view validations so there's a lot of work if we are going to create a add contact page the two pages look very very similar right the functionalities are different one of um add a page is to update contact the add page is to add a new contact so because of the similarities we need to think about create a reusable control so that we can share that control between these two pages so today in this video we are going to work on creating a reusable control okay let's go to the Views folder and let's right click and create a new folder and let's call it controls and to create a reusable control we are going to create a new item and we're going to search content view okay and then we're going to select the demo version and we can call it just contact control all right within the contact control we can see there are some placeholders and this is content view this is not content page anymore so what we can do is that we can go to edit contact page and then we can basically select everything and cut it over okay let's cut it over to the content control here right replace this vertical layout and you can see that we only have one problem which is this toolkit namespace problem so for that we can just fix that very easily and call it toolkit just like before referring to this toolkit now you can see that we don't have any problems in here now let's look at this contact control what do we have here we have these views the name email right phone and address and these views needs to be shared out right currently it's within the entry email and entry name all of these entry views right so we will need to share that out through a property so let's create the first property which is going to be the name and we just can call it name right because this is a Content control name refers to name of the contact of course here we cannot use a regular empty Getters and Setters so for getter we would just return the entry name dot text right and as you guessed the setter will just set the entry name dot text equals to the value right now I'll do that the the rest and then I'll come back okay so I've created all of them I have email address and phone number for sharing properties values uh we're good now we go back to the front end we can see we have taken care of these properties what about the buttons down below right we have update button we have a cancel button I think we should change the name from update to save right and then here it's called save just so that it can be reused in both ad and edit page and here we are going to create a new event handler and for this one as well create a new event handler going back to the code behind and we have these two event handler here we don't need to take care of the routing right the navigation but we do need to validate okay so let's go back to the edit contact page and let's think about how we can implement the validation here we can just cut this code and go back to the contact control and then we can do our validation inside here but the problem is that display alert is not available display alert is only available in in the page right it's basically a Content page so actually actually let's go back to our uh add a contact page if I do a control Z to undo the change and then if I right click if I actually hover my mouse over it you can see it's the display alert is from page right and our content page is a page but the content view is not a page so display alert is not available here but that's fine that's fine we are going to delete it or both of them but here we will need to spit out the error so how do we speed out error we need to create a event it's like a delegate in C sharp so here we can create an event uh it's going to be an event handler and then the the parameter is going to be a string which will be the error message itself and then the event itself is going to be called on error okay so we can then scroll down to the bottom and then here if we encounter a problem right then we will need to spit out that error message we're going to say on error right and we need to use a question mark so basically if the event handler is registered right from outside then we're going to invoke the event otherwise we don't right that's the purpose of this question mark here I'm going to type Dot and then invoke right and then who is the sender so we can just pass the sender from the event The Click event and then what is the error message so that would be the same error message that we had before I wish I didn't delete them and just comment them out so that I don't have to type this but its name is required right and then I'm going to copy this and put it over here the only difference here is that the error message is different so it's going to be error.2 string and that's it that's it but how does the parent control knows that the save button is actually clicked on for that we actually need to create another event and type is event handler this time we can just use event arguments and this is on Save right and since we are here we're going to also um react to the cancel button click right so then here when everything is validated then we can tell our parent page whichever page that uses this control that the user clicked on the save button it's actually validated already right so whenever this event on Save is triggered is evoked we have already validated it right so here we can just invoke and then we use the sender and also the event argument from the clicked event okay and then of course on cancel uh we can just say on cancel and then we invoke that event with the sender and the event argument that's basically it that's our reusable contact control so now now let's try to use it go back to the edit contact page and then let's see how we can use the reusable control first of all to use this new control we need to provide the namespace because if we just type the control name right contact control it's not defined here so let's go to here and then we're gonna say controls again whatever name you choose I'm choosing controls and then it's under controls so we can find it right here then we can say controls providing the namespace well it's already showing up right all of them already showing up there's only one and then we can give it a name and we can call it contact control and then we're going to register a unsave event handler here and we're going to create a new one actually um we're now going to create a new one we're going to create we're going to reuse because there's already one so it's this update right and then here on cancel again we're going to reuse this one but on error we don't have it we can create a new event handler right and that's it you can see it is very very simple on the front end go back to the back end uh it's even simpler because we are reusing these event handlers this unsafe we don't use it anymore we don't use it we can delete it uh the only thing that needs to be changed is here we don't have the the entry views anymore so the what we can do is we can say contact control contract I use the wrong names so be contact instead of contract right contact control so go back here and we need to fix this as well contact control on error okay so here we're going to say contact control dot name right and then this is going to be contact control dot address and contact control dot email last but not least contact control.phone number okay and then here the validations don't need to be happening here anymore because this event handler will only be invoked or triggered when validation has finished has passed what we do need to change is these assignments so I can just delete all of them and then I'm going to copy from here and paste it over here okay and then just fix the problems okay so now on error what do we need to do when we encounter an error this is a string which contains the error message so of course we just use the display alert from the page class and then title is going to be error as Euro message is just the message right and then cancel is okay button so that's it that's how we use our reusable contact control let's let's give it a test okay you can see the application is running let's click on any one of them and now we see the add account page no difference let's try to see whether we can update I put a dot there but let me actually delete the as sign just try to trigger the validation problem right so email format is invalid so that's validation is going on properly uh let's also try to delete the whole thing and then click on save this time it tells us not only the format is invalid but also it's required so let's put back the email address so John dot doe gmail.com and then click on the save button now I have John Doe gmail.com going back phone number is whatever address is one let's say Toronto Street click on save button and everything is basically still working right but this time we're using our reusable contact control in the next video we're gonna use the control the contact control in the add contact page and we're going to work on adding contact I'll see you in the next one

Channel: Frank Liu

Views: 4,269

Keywords:

Id: XpQdxGM54TE

Length: 13min 24sec (804 seconds)

Published: Mon Feb 20 2023