Introducing Live Templates 0:00Let's talk about what JetBrains refers to as live templates, or really just think of these as dynamic snippets. So it's possible that in some of the lessons here at LaraCast, you see me use a variety of snippets. One of my favorites is TextField. So essentially, I enter this shortcut, I hit tab, and that will expand to a full form block that contains all the necessary classes for, say, Twitter Bootstrap, and then I can enter just a little bit of text to set the label, the name, and a comment. Let's create that together. But before we do that, let's at least figure out how we want this to look. Designing the Form Snippet 0:31Let's create that together. But before we do that, let's at least figure out how we want this to look. Now I will paste in just a little snippet here to get us started. So for our needs, we want to wrap it within a div that has a class of FormGroup, and then why don't we make this more Laravel style. So we could do FormLabel. And by the way, if you're ever using these methods and you can't exactly remember if you specify the input that it relates to or the body, remember, you can navigate by symbol. So Command Option O, we want the label method, and let's take a look.symbol. So Command Option O, we want the label method, and let's take a look. All right, here we can see it accepts the name, the value, and any associated options. Now to go back where I was, we could do a number of things. But my favorite, and you haven't seen this yet, is to press Command E. So that will bring up a dialog of all your recent files. Now the most recent one will always be the file you were on last. So that means, for example, if I wanted to toggle between these, I could just keep hitting Command E, Enter, like so. Anyhow, let's give it a name, and we will use a placeholder for now, as well as a value.Command E, Enter, like so. Anyhow, let's give it a name, and we will use a placeholder for now, as well as a value. Because remember, when we create a live template from that, those will be dynamic. Next we want our text input. Form Text for the name, and once again, the value. Also though, notice that we want to give it a class. So let's provide that. Form Control. And I think that will be fine for our needs. So now, if I select this block right here, I can select it manually or press Option Up Saving a Live Template 1:52And I think that will be fine for our needs. So now, if I select this block right here, I can select it manually or press Option Up just a few times to select the whole div. Now if we want to save this as a live template, once again, why don't we just search for the command here. Shift Shift, Live Template, and there we go. Save as Live Template. Okay, so if we expand this, you can see we have a new User section here. The abbreviation will be TextField, and we'll say Form TextField. Now this is an important one. Configuring Template Variables 2:18The abbreviation will be TextField, and we'll say Form TextField. Now this is an important one. If you ever create these snippets and you find that they're not working, make sure that you specify the proper file type. So remove that, and now I can type TextField, Tab, and there you go. Alright, let's press Command Comma to go back to Settings, and hunt it down. Live Templates, and here's the one that we were working on. So why don't we update this to Name, and I'm going to set the exact same placeholder here. So that means when I fill out the variable for Name, it will be inserted both here and Resolving Emmet Conflicts 2:51here. So that means when I fill out the variable for Name, it will be inserted both here and here. Next, we think we could do something like this, and that'll work, but we will need to adjust it just a bit. Nonetheless, let's see how that looks. So apply it, clean this up just a bit, and now if we try it again, TextField, Tab, Username, but now if I hit Tab again, it thinks that I'm actually entering an HTML tag here, so it's screwing things up. Let's fix that by going back to Preferences, and if we visit the Emmet tab, and Emmet isit's screwing things up. Let's fix that by going back to Preferences, and if we visit the Emmet tab, and Emmet is provided by default, I will show you that a little later, but now we could either disable XML Emmet, or we could set the abbreviation to be something else. For the time being, why don't we just disable it and try it again. TextField, Username, Your Username, and now notice that this isn't quite ideal. We're getting there, but the Labels text should not be the same as the Inputs text. Also, it might be nice to have something like Username Input, if you like to do that sort of thing, to divide up your forms. So let's see what we can do here.of thing, to divide up your forms. So let's see what we can do here. Let's go back to Live Templates and adjust this just a bit. Okay, so the first thing is, I will say Name Form Input, and next, why don't we say by default the text input should have a value of null, and you can override that if you need to. Also, though, it would be nice if we could set a default. So we can do that by hitting Edit Variables, and basically, we want the Labels value to basically be a cleaned up version of the Labels name, at least by default. So we will click here and specify that we want to capitalize whatever the name is equalbasically be a cleaned up version of the Labels name, at least by default. So we will click here and specify that we want to capitalize whatever the name is equal to. Alright, so let's click OK, apply it, and maybe also apply a colon after it. Let's try it again. TextField, Username, and now notice that it populates this at the same time. So many times, you can ignore that completely. We might even do the exact same thing up here. So you can see it takes just a little bit of tinkering, usually. So let's set that to Value.So you can see it takes just a little bit of tinkering, usually. So let's set that to Value. Alright, I think we're all set to go. So one last time. TextField, Username, and we will keep the default. So let's do another one. TextField, Email, keep the default, and then how about one more, and how about we call that Website. Alright, so you can see how easy this is. You might even want to extend this for a couple more. Creating a Password Template 5:14Alright, so you can see how easy this is. You might even want to extend this for a couple more. For example, if we were to create another one up here, how about this be called Password Field, and it's mostly going to be the exact same thing. However, this time we will use a password field. Form Password, and remove all that. Now I can say Form Password Field, and don't forget you also have to update the variables here. So let's move that down, and once again set it to Capitalize Name. Finally, set the context to HTML as well as PHP.So let's move that down, and once again set it to Capitalize Name. Finally, set the context to HTML as well as PHP. And I think that should do the trick. So once again, let's try it again together. TextField, Username, and now we have a Password Field for the password, and you're done. So especially when building forms, these live templates can be incredibly useful, but of course it's not limited to just your views. You can use this thing for pretty much the entire spectrum of your coding workflow. So don't forget to leverage live templates.So don't forget to leverage live templates.
