Transcript
Now, if you go to the default, uh, hot file native iOS uh, uh, repository, there is this demo application, and you can run this demo application in the Xcode. So by clicking on the, uh, by opening it in Xcode click and Play, you will have this iPhone pop up with the hot file native demo application that you can click around and see the default, uh, native behaviors outta the box. And on the bottom we have these different bridge components. So, for example, there is this form example. If you click on this form example, there is a form with a couple of fields and a native submit button in the top right corner. So by clicking on the submit button, you'll submit the form. Let's see how the same page works in the web. Now, if we open this, uh, demo, uh, here you will see the default URL that is being served with this, uh, application. Here it is. I will open this URL, um, and here in the bottom you see it's kind of the same, uh, uh, page, just the way it looks on the web. And here we have this form example. And you see in this form, I have the HTML submit button for the same form. So, uh, in the the native view, we are hiding the HTM L submit button and display in the native submit button. And in the background, this, uh, native submit button actually submits, uh, the hidden, uh, H TM L submit button. Now, how can you use this kind of behavior in your own, uh, application? So, uh, first of all, uh, going to native, uh, iOS here in this demo O application, we have this form component, uh, already installed. So you can reduce this form component and to use, uh, this, uh, iOS form component in your, uh, application. You would, uh, need to look how this, uh, hot file native, uh, web application is structured. So here we have this hot native demo repository. It is the web app itself that has been served here. And inside it we have the, uh, form, uh, controller. So it is the stimulus controller that, uh, interacts with, uh, this, uh, native, uh, form component. And this stimulus controller is being applied on an H TM L page. Let's try finding the H TM L page form, uh, bridge form. So, uh, here is an example of applying this, uh, uh, stimulus controller to an HTML form. Now, let's try applying it in, uh, a form in the rails application. So here I have a basic growths application that it, it, I'll be using the, uh, mangon repository for the example. So, uh, here it's, uh, just a basic HTML form. I have the H TM L submit button, and, uh, I have error rendering. So just, uh, basic Rails app. Let's try serving this Rails app in our IOS. So, uh, going to this, uh, demo file, instead of serving the remote URLI will serve the local URL. So the current URL is going to be the local URL. Let's see that I have the server running. Yes, I do. Okay. I will, uh, run the application with the local URL. And, uh, here I'm actually already logged in. I can go to the list of organizations, the organization, and here I have, uh, a form. And you see it's already opened in a model, uh, by default by because, uh, in this, uh, demo application, we already have this part configuration. And it says that all the URLs that start with, uh, that end with slash new or slash edit by default are opened in a model. But we want to show this, uh, native, uh, submit button that will submit this form. Now, to do this, I would need to first of all install, uh, uh, bridge or previous Strada in my Rails app. So going to the hotel native, uh, uh, docks, there is this, uh, command line, uh, thing that I can run if I'm using input maps to install Hotel native bridge. So I will run it in my, uh, rails, uh, app. Okay, let's have a look at our input map file. Yeah, so I have, uh, added hot file native bridge. Now I need to add the stimulus controller. Let's have a look at the stimulus controller, uh, form controller. I will just go with the stimulus controller and I will put it in the, uh, stimulus controllers in the bridge folder. So I just created the bridge folder, and inside I will create this form controller. I'll go with the contents of this form controller, and, uh, I'm going to apply it to my form. So let's open organization slash form, and I'm going to apply the stimulus controller. So first of all, the name of the controller is form, and it is inside the bridge folder. So I will say, uh, data controller bridge, dash dash form. Now it's bridge dash form, not just form because uh, I have this nesting inside the bridge folder. Uh, next I have the submit target that needs to be applied on the submit button. So I will say data, um, bridge form, uh, target is submit. Now have a look at the syntax here. The synex works well. Uh, and I can also apply the submit stat and submit. And let's see how these are applied in the, uh, HTML example. So here we have this, uh, action, uh, to disable and enable the submit button. Uh, so while the submission form submission is in progress, the uh, button will be disabled. So, uh, also here I will have data action to submit start and to submit end. Okay, let's, uh, see if, uh, it works in our form. Now I will, uh, close the model. I will open it again. We have error loading page. Let's see why. Yeah, I don't, didn't start the server. Okay, let's retry. And you see we have the native submit button. So it's working. Uh, beautiful. Uh, we can close the model. We can, uh, try actually submitting the form. So organization number five, uh, click on this bottom. The organization has been created and have a look at this via the behavior. So, uh, when we created the organization, we close the model, see the previous page, and then there's the new page, and we don't actually see a flash message. So to see this kind of flash message after, uh, submitting the form and, uh, to not have all this fear the behaviors, we're going to also add another data durable action that is going to be not, uh, advance the navigation by default, but replace, let's have a look at how this form submission works with turbo action Replace. So organization number seven, create organization. And you see, we then have all this loan animation of, uh, a closing the model and then direct, we just, uh, uh, are on the new page and the flash messages work. Okay. Now imagine you have a lot of forms in your application, and you would want to add this, uh, uh, controller action and this, uh, data target to all of them. This could take you quite a while and it'll make the code a bit, uh, more clumsy and less maintainable. Now, uh, Joe Maslo in his daily log application has a solution for this. So he has this form helper that wraps around the default, uh, form width element, and adds, uh, uh, this, uh, data breach form target submit by default to the submit button and, uh, adds, uh, the breach form controller and the action, uh, by default to the form itself. So it would, uh, clean up the syntax a lot. Let's try, copy this form, help into our application, uh, application helper. Let's see where our helpers are. I will create another form helper and I will cope with this contents. Now see, uh, this file still has this older, uh, name in the strata. Uh, you could rename it to Breach Form Builder. Uh, but now we can use the strata phone with, let's try using it. So, uh, I will, uh, use, I will actually remove all the code changes added here. I will just use, uh, Strada form with, let's try opening the, uh, organization, edit or create again. And, uh, yeah, it looks like wasn't applied. Let's, uh, see why. Uh hmm. Okay, so we have strata form width, um, bridge form Target. Yes, bridge form. Let's, uh, try refreshing. Let's go and try opening new organization. Okay. Yeah. So, uh, it works. It looks like I just needed to, uh, no, no. It works for Create, but not for update. Now, it, uh, will maybe work if I add a label here, like save, let's save if it works now. So, going to edit. Yes. So, uh, it looks like in some cases we need to explicitly have the label defined on the Form Summit button, but, uh, but not just, uh, the label should be guessed. So now the label, it's present and, uh, it works. Let's again, go to new organization. Yes. So we have this, uh, save button. Uh, okay, so this, uh, Synex is, uh, much, uh, cleaner. And, uh, yes, this is basically how you can use, uh, the bridge form component in, uh, rails application. And don't forget, uh, about, uh, adding data, durable action, uh, replace on the, the forms that you want to open in models, and after which you want to show a plus message. So, thanks for watching and see you in the next one.
0