Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
We're going to use an extension to build an extension? You've got it. We're going to use the Extension Builder extension, which ships with CFBuilder, to do all the dirty work in building out our ide_config.xml file. Now if you haven't already watched the rest of the videos in this chapter, be sure to go back and watch them all, so that you understand how all the moving parts fit together before you try and take the easy way out. With that being said, let's start learning how to use the Extension Builder. So, you can right-click anywhere in your project, choose Adobe Extension Builder and New.
The first page of the Extension Builder just asks where you want your new extension to be placed. By default, it's going to specify the folder that you right-clicked on, and then we can choose to create a folder with the extension name. If you uncheck this box, CFBuilder is going to place all of your extension files in the Chapter 8 folder, which is not what we want, since we have a bunch of other stuff in there already. So, we're going to leave this box checked, and after we give our extension a name, CFBuilder will create the folder for us. Now that the easy part is done, we'll click OK.
Now we need to configure everything about the extension. As we go through each of the tabs, you'll need to make sure you click Save in all the right spots, so your data is maintained for when you finally click Finish and generate the extension. So, let's go through each of the tabs. The first one is all of our extension details, basically what the user sees when they install the extension. So, let's just call this Test Extension. We're going to specify our author and the version, as well as an E-mail address, our description, and our license.
Once we have all that complete, click Save. Then we can go on to the next tab. The next one specifies all of our menu contributions. Basically, what we want to display when a user right-clicks in any of the appropriate spots. So, I click Add menu, and I just need to fill out my details for that main flyout menu. If you recall in our previous videos, this is what's going to display in the Name attribute of the menu tag. So, we'll call this Test menu, and specify our target.
You can see we have rdsview, projectview, outlineview, and editor. I'm going to stick with projectview, which we used in the Creating User Interfaces video. Once I have that saved, I can click on Action and start creating our Action tags. The Name attribute is going to be that secondary flyout on our menu. So, in this case, let's just call it Test Action, and if I had previously defined any handlers, I would see them listed here in this list, but I need to create a new handler Id, since I haven't yet defined any. Call this testHandler. For our handler file, we'll just name it testHandler.cfm.
I can then define if I want that handler to show a response, and how big I want the dialog to be for this particular handler. For our title, let's call it Test Action Inputs. And then we'll specify a dialog height and width. Let's make it 600 wide and 400 tall. I can then specify a close handler file, which is a ColdFusion file that will be run if the user closes the dialog without actually clicking OK or Finish. When I have that action complete, I can click Save and then start adding my inputs.
I'll click Add Input, and I can specify all of the attributes for our Input tag. Let's create an input for an E-mailAddress, no spaces or special characters, and then a Label. I can specify a tooltip, and I have a handy list of all the valid types for our inputs. For this one, we'll leave it as a string. And then I can specify defaults. I can either hardcode a default here, or I have a handy list of system variables that can be used as a default. For example, the project name that they clicked on, the project location, the server home, or even the wwwroot for the ColdFusion server that's associated with this project.
The rest of the dialog allows me to add some validation, such as the Pattern, Error Message, Help Message, for Boolean values, whether this box is checked by default, and whether it's required. I'll click Save and Done. Now I can see the input for my action. I can continue clicking Add Input, and add as many as I'd like. If I see something I need to edit or remove, I can just click the appropriate links here in the Actions column. When I'm through defining this action, I'll scroll down, click Done, and then I'm back to my menu contributions list.
I can see all the actions that are associated with this menu. I can also add filters from here. A filter allows me to limit this menu to a particular folder, project, or file by using a regular expression. For example, if I only wanted the extension to be available to a folder that was named Chapter8, I could choose folder, and then type Chapter8 into the Pattern. For now, I'm going to leave the filters off, so we'll click Done without filling out anything. So, we still have no filters added.
When I'm done with this menu, I'll click Done, and now I have a list of defined menus. I can continue adding as many menus as I want. For now, we'll stick with the one and move on to our handlers. Now because I've already defined at least one handler in my menu, I can see that handler here in my list. I can edit or delete it directly from here or add new ones. If I click Add Handler, I'm going to end up with the same dialog that I had through the Menu Contributions tab.
Now the last tab is Install Wizards. ColdFusion Builder extensions can actually have multi-page wizards that will guide a user through all the necessary inputs for your extension. So, if you have a large extension that requires many inputs from the user, it might make sense to break it up into more digestible pieces. To configure a wizard, you first need to give it a width and height. We'll do 600x400, the same as our previous menu contributions. We can then specify a handler for the wizard. We'll leave it as testHandler.
If I wanted a new one, I can specify here. And then click Save. Once the wizard is defined, I can then click Add Page. The setup is almost exactly the same as an action. You're going to specify a title for the page. Let's call this Page 1, click Save, and then start adding inputs. We'll just do a quick input here. We'll ask for the user's project name. Leave it as string and for the default, we'll choose the currently selected project, and make it required.
Click Save and Done. Now I have my input for this first page of the wizard. Click Done again. And now I can see each of my pages. I can continue to click Add Page and add as many pages to the wizard as I'd like. Now that I've been through all the tabs, saved each of them as I've gone, I'm now ready to click Finish. I'm going to get a complete summary of exactly what the Extension Builder is going to generate for me. It shows where it's going to be installed, all of my details, each of my menus, their actions and inputs, as well as the installation wizard.
At this point, I can return to the Home and actually go through and double-check everything if I see something wrong. I can click Cancel, which is going to remove all of the information and you won't get a confirmation, so make sure that's actually what you want to do, or the button I really want to click is Generate Extension. Extension then tells me everything that it did. It created a folder for me, created my ide_config.xml file, created the handlers directory, and added my testHandler. And it also created a framework directory and copied a bunch of framework files that I'm going to be able to use to build out my ColdFusion handlers.
It's also created an application.cfm, which actually disables debugging and does some other fancy tricks to make sure that there's no variable clashing as I execute my extensions. Then it has installed the extension for me at this particular location. So, I'll click Close. If I go to my Test Extension folder, I can see my ide_config.xml file. Go ahead and open that up and you can see it's done a whole lot of work for me. Now it didn't add many inputs, so this isn't quite as impressive as it could be, but as you can imagine writing all of these input fields is far more tedious than just filling out the dialogs through the Extension Builder UI.
But the more interesting part is in the handlers directory. Here, I have my application.cfm and my testHandler, and inside my testHandler, it's actually running part of this ColdFusion Extension framework. It's processing all of my request information into a variable, which it then dumps to the page and tells me where I need to add all of my handler logic. Now if you're serious about developing extensions, it's worth your time to go to the framework directory,and take a look at some of the tools available to you. There are CFCs for not only processing the request from the extension, but also pulling out field information from tables, getting info on tables themselves, and even taking a look at Outline nodes and pulling project info directly from the Navigator.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101128 Viewers
61 Video lessons · 87889 Viewers
71 Video lessons · 71763 Viewers
56 Video lessons · 103634 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.