Transcript
Hello, France. In this episode, we're going to add a bridge button component to our Aya native, uh, application. Now, a bridge button component is, uh, basically a button that we can add, uh, uh, on the top right corner or also top left corner of our screen. That can click anything on, uh, our application. It can be a URL or it can just trigger some JavaScript. Now, uh, here in this native example, we have an example of implementing this button components. So let's try implementing it in, uh, application. First of all, I'm going to open my iOS application. I'm going to do it with the demo app. I found the demo app again by going to, uh, GitHub slash hot fired slash hot fired native iOS. And here inside this repository we have this demo application. So, uh, I launched it, uh, locally in the Xcode, and now I'm going to add a new button component. So inside this bridge folder, I'm going to go to file new empty file button component. And, uh, in this button component, I'm going to copy all this, uh, code. Okay, and now we need to initialize this button component in our scene controller. So you have a list of, uh, components. We need to add this component to the list button component itself. Okay? And, uh, now we need to add the, uh, HTML and the stimulus jes to our application, to our web application. Now I'm going to do it an example of super ails. So, uh, here I'm, uh, going to, yeah, run the application locally bin dev. And, uh, in the demo of our iOS, I'm going to say that I'm going to point to local, local host 3000. Okay? Now I'm going to restart this application. Okay? Here I, uh, have the application running, uh, wrapped into, uh, hot native application. And I want to add a button here to open some page or to open the quick search. You see, when I click, click search, it opens up this, uh, dialogue. So how can we do it? I'm, uh, going to first of all, install the native breach in my Rails application. Now, if we go to the hot five, the repository, he have this, uh, uh, let's search for hot fire, hot native Bridge. We're going to install this, uh, library in our application. So the command to run this library, we can find it, uh, in reference bridge components, no, not here. Uh, bridge installation. So we're going to run this command to install, uh, hot native Bridge with, uh, input maps. I will, uh, stop my server. I will run the command. It should, uh, inject something into my input map. So going to input map, you see it injected the hot via native bridge, but uh, I need to push it to a new line. Yeah, here. Okay, and it updated the stimulus. Okay, now I can start my rails application, but yeah, actually I need to first maybe add the, the stimulus controller. So going back here in the example for bridge components, I have the stimulus controller. I will put it in the bridge folder. So, uh, here I have JavaScript controllers. Inside I will create a folder bridge inside, I will have button controller do gs. I'll paste this here, and, uh, now I can try having this h tm l somewhere in my page. Let's run m dev. And let's say in application html, uh, I will add this, uh, link. Now, I don't have a slash profile in my application, so I will make it slash uh, tags. And now, uh, let's see. I have the rails application run in. Yeah, I have this button, view tags, it directs to slash uh, tags. And let's see if it works in my, uh, iOS application. Now, I will, uh, restart the iOS application. And, uh, no, I don't have, uh, a button visible here, but I have this view tag. Let's, uh, double check. So here the data controls should be bridge slash slash button because, uh, this is nested in the bridge folder. Okay, let's try again. I will refresh the page. Okay, now I have this text. I click on it, it redirects me to text. And, uh, on all the pages in my application, I have this, uh, text button. I can make it visible only on one page by just going to a specific page, like static index. And on the static index page, I will have the stacks. So I'm refreshing here. Now, I think we still see it because it is ced. Let's, uh, restart our native application. Okay, so I'm on the homepage. We have this, uh, tags. I go to another page. I don't have tags. I live on tags. Yeah. So now we have this, uh, button visible on, on one specific page. Looks, uh, quite good. Uh, what if we want to, to make this, uh, button not text button icon? Well, we would need to make some changes. So first of all, in the button component, currently we don't accept icons. And you see we generate this UI bar button item. If we look at the docks of this UI bar button item, we can specify an image. So let's try specifying an, uh, image. I will, uh, say go my image equals image, and where we're going to define this image, let's define it here. Let, uh, image equals uh, uh, we are going to find a UI image, and we're going to find it based on the system name. And the system name is going to come from data image. And in our, okay, uh, has no member do data image. So we need to define it here. It'll say lead image equals stream. Okay, so now in our stimulus controller, we need to pass in the data image. Let's, uh, go to our stimulus controller. Here it is. And here we have, uh, we pass in the title, and we, they're also going to pass in the image. So let's say let the image equals bridge attribute, uh, iOS image. Okay? And, uh, in the control itself, they're going to pass in and, uh, image per, so I will say, uh, data bridge, iOS image equals, and, uh, what kind of iOS images are there? Let's open SF symbols application, where we have a list of all iOS images. Let's, uh, have a tag image tag. Okay, now, uh, I will restart, uh, the application and, uh, I expect, uh, our HTML to pass the I image to our stimulus controller. The stimulus controller will pass it, uh, to our button components, swift in button components Swift, I pass the image variable to UR bar button item. Let's see if it works. Um, it looks like it doesn't. I think, uh, I know why it doesn't work because, uh, here by the send currently we send just the title and we also need to send the image. You see, it is even, uh, blurred out that, uh, it is not used. So I will say title go Goma image. Okay, let's, uh, try again. I will restart my iOS application and, uh, let's see if it works. Okay, wonderful. So we have this tag icon. I click on the tag icon and it redirects me to slash tags looks, uh, fine. So, uh, what if they want to conditionally have either an icon or text? Let's see. So, um, here on the homepage, I have, uh, an icon. And, uh, if we remove, uh, the image declaration, let's see if it works. Uh, yeah, let's restart the application. So I think that if we don't declare the image at all, it'll, uh, not display anything. So if we don't want to have the image, uh, present, but want to just have the text, it should just leave this blank, but it should still declare it. Um, let's start now. Okay, so, uh, here I have the tags. I click on tags, and, uh, it redirects. Let's, uh, try using this condition in another place. So on the homepage, I will have, uh, an icon to go to tags. And on tags, uh, uh, index, I will have, uh, text to go to the, uh, homepage. So slash and, uh, home title will be home and, uh, no image. Okay, so, uh, I'm going to text and I have the button to go home. So the text is an icon, and the home is, uh, text looks good. Now let's try having, uh, not, uh, a URL, but, uh, triggering stimulus, for example, opening this, this, uh, dialogue. So this dialogue is defined in search slash form. And, uh, here the, the, this is, uh, the button that gets clicked. So here I'm going to also define this code. Um, let's see. I will say data controller equals bridge button. Um, bridge iOS image equals, let's add some kind of search. Um, I will cope with this. So magnifying glass circle and, uh, bridge under score title equals search. Okay, I need to add the coma here. Now the syn index should be correct. Uh, yeah, also coma here. Okay, now let's, uh, refresh a page and see if it works. I will, um, refresh here. We still have the tag. Let's navigate to another page like lessons. And here we have this, uh, search. I click on it and you see it, uh, does open the, the same search dialogue. So it looks good. You see it is not A-A-U-R-L, it just triggers some stimulus. Um, yeah, looks good. And you see, let's, uh, try to have a look at the, which button declaration takes precedence. So again, I open the homepage and we have the text icon, but, uh, this is also defined on the homepage, but we still see the text icon, I think because we have it declared later in the H TM L than, uh, this one. So if we go to the homepage and, uh, put it on the bottom here, for example. So we declare the tags, um, yeah, if we declare the tags, uh, before the search, uh, let's see if it changes anything. Okay, so you see the last declared, uh, uh, bridge button gets, uh, displayed. If I had the, this button declared after the search button, then the text button would be displayed. Let's see. Okay, it works. Um, yeah, I think, uh, that's it for this episode. So we, uh, added the button component. We have a conditional display of a button that is either a text or an image and had look at, uh, uh, which, uh, button gets, uh, displayed if there are multiple buttons, uh, declared on, uh, uh, an H TM L page, the last one in the H TM L gets displayed. Thanks for watching and see you in the next one.
0