Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The user interface for ColdFusion Builder extensions is defined in an ide_config.xml file. This file not only generates the UI for your extension but also tells CF Builder what to do once you've completed the dialog. So, we're going to start by actually building our ide_config.xml file. To do that, I have a starter one here in the Begin folder. So, let's create a new folder for our extension to get started. So, we'll choose New and Folder, and we'll call this Ch8Test.
Click Finish and then I'm going to copy both of these files, both my formTemplate and my ide_config. I'm going to paste those in the Chapter 8 Test folder. That way we can keep these nice and clean. So, let's open ide_ config and go over the basics. So, you can see it's fairly small and straightforward. The entire thing is wrapped in one application tag and at the top, we have all of the information that's defined during the install process for the extension. So, we'd given the name of the extension, who wrote it, the version, the description and some license information.
So, let's go ahead and fill this one out. We'll call this one Simple Contact Form Test, author, we'll put down as lynda.com Viewer. For a version let's call this Beta 1 just to be fancy, and then we'll give it a description. This installs a simple contact form wherever you choose. Right-click in the Project View to add the contact form. All right! Then we'll provide a license, say 'This stuff is free,' and then we get to decide where we want our menus to show up.
So, under here we have menucontributions. You can add multiple contributions inside here and this basically tells CF Builder where you're going to create these right-click menus and you have four choices. You can choose the Project View, which is what we're going to use. You can choose the RDS View. So, if you're over here in the RDS View and you right-click something. For example, our CFC Generator, if I have a table selected here and I right-click. I can see the Adobe CFC Generators. So, this is using the RDS view contribution target.
The Outline View would allow me to right-click in the Outline here and have a right-click menu to perform an action. And we have Editor, so if I right- click inside the editor, I can add a right-click menu. So, for now we're going to choose Project View. So, I'm just going to get rid of these and then we have our menu tag, which determines what the main menu item is going to be. So, when I right-click, what is that first menu item the user is going to see? In this case, let's call it lynda.com Viewer.
Then underneath that we determine what the action is going to be. So, I can add multiple distinct actions underneath one menu item. So, for our action we are going to name it Simple Contact Form. The next thing we have to do is tell it which handler we wanted to fire when we perform this action. Now down here at the bottom on line 23, you can see where we define all of our handlers and you'll reference these by id. You notice my attribute here is handlerid. Here, I have a handler tag with an id.
So, let's call this buildContactForm. Let me shrink these panels over here so we can see everything. The last attribute I have is showResponse. I'll set showResponse true because I want my extension to show the users some feedback when it's all finished. My handler is going to determine what that response is, but if I set showResponse to false, it will fire the handler and then the extension will just disappear and the user doesn't get any feedback. So, since we have our handlerid set to buildContactForm I'm going to copy that and paste it down here.
There I can make sure I have all my casing correct. Now our handler type is going to be CFM, as are all ColdFusion Builder extensions, and then I tell it which filename I wanted to run when this handler is executed. In this case, we'll just call it index.cfm. Now we'll go back up to our action tag and beneath that you'll see I have a dialog tag and a height and width for that dialog. Inside here, I'm going to place input tags that determine what inputs I want to show to the user.
Now these are very, very similar to HTML inputs, but we do have some different attributes for the input tags and an extension that you don't have in HTML. So, let's start adding one of these. The first input I want is a file location, a directory that I want to place my new file in. So, I'm going to add an input tag. I'm going to give it a name. We'll call this fileLocation. Then I can actually specify a default value for this field. I'm going to leave it blank because I don't want any value in here. Then I'm going to provide a label.
The label is what will go to the left of the input in the dialog. So, in this case we're going to say 'Save file to.' Then I can provide a tooltip, which actually displays at the top of my dialog, that gives the user some information about what they are supposed to do inside of this field. So, in this case we're going to add a tooltip that says, 'The directory to save the contact form into.' Then I'm going to specify a type. Now I have some different types as well.
In this case, the type I'm going to use is project directory. What this is going to give me is a dialog that lists all of my current projects and I can dig through there and find a directory inside a project that's already defined in my Navigator. Now I could also specify a type as just plain old directory. That's going to allow me to browse my entire hard drive. Other valid types are string, boolean, file, which would allow me to select any file on my hard drive, password, list, where I could actually define a list of appropriate values, and project file, which would allow me to choose a file in a predefined project.
Now I don't expect you to remember all those and we don't have them typed out here. So, if you choose Help and ColdFusion Builder Help, it'll bring up the Adobe Community AIR Help system and you can find all of this information inside of the Community Help AIR client. So, let's go back and finish up our UI here. So, I'm going to change that back to project directory. Then I'm going to say that this value is required, true, and close my tag. So, I know that's a lot to take in, but the key thing to remember is that you need to provide a label, a tooltip to help out the user, a type and you can find all those types in the Adobe Community Help and then a required attribute.
But there's even more we can do here. I'm going to add one more and we'll call this fileName and if you recall when we walked through the UI, I actually had some validation that made sure that a proper filename was typed in. So, the way we do that - I'm going to go ahead and add my default and my label, The name of the new file. We're going to specify a type as string. We'll say required is true, and then I'm going to add a pattern attribute. And with the pattern, I can actually provide a regular expression that will validate the input of that field to make sure that it matches what I want them to put in.
So, I'm going to make things a little bit easier to finish this off. In my Snippets here, I have some additional inputs I'm going to add. So, all I've done is inserted input tags for the mailServer, Username, Password, Subject and the e-mail address that all the content is going to be sent to. As you can see, for the mailTo I've also made that required. And that's how you build out your UI for the extension.
Now I've realized at this point that you haven't actually seen anything. So, in the next video we're going to cover packaging your extension so that we can actually see it in ColdFusion Builder and start debugging.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101086 Viewers
61 Video lessons · 87855 Viewers
71 Video lessons · 71735 Viewers
56 Video lessons · 103607 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.