Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating user interfaces

From: ColdFusion Builder Essential Training

Video: Creating user interfaces

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.

Creating user interfaces

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, in this case I'm going to use a regular expression that requires they enter a CFM filename. So, there's my regular expression. And then I can provide a custom error message. So, we'll say errormessage equals= "The file name must be a valid .cfm file." Now I've created a required field that also must match a specific pattern. So, as you see we can do a lot more with ide_config inputs than we can with regular old HTML inputs, at least without writing a bunch of custom JavaScript to do our validation for us.

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.

Show transcript

This video is part of

Image for ColdFusion Builder Essential Training
ColdFusion Builder Essential Training

40 video lessons · 3866 viewers

Daniel Short
Author

 
Expand all | Collapse all
  1. 7m 48s
    1. Welcome
      59s
    2. Installing ColdFusion Builder
      2m 20s
    3. Installing ColdFusion Builder as a plug-in
      3m 18s
    4. Using the exercise files
      1m 11s
  2. 17m 42s
    1. Workspace overview
      2m 25s
    2. Organizing your workspace
      6m 19s
    3. Adding and selecting workspaces
      2m 53s
    4. Installing and managing plug-ins
      6m 5s
  3. 12m 12s
    1. Creating projects
      2m 11s
    2. Importing projects
      2m 48s
    3. Creating project working sets
      2m 23s
    4. Managing projects
      2m 22s
    5. Linking folders
      2m 28s
  4. 23m 2s
    1. Configuring and managing ColdFusion servers
      6m 26s
    2. Using the Services Browser
      4m 15s
    3. Using RDS Dataview and Fileview
      4m 52s
    4. Using FTP
      7m 29s
  5. 18m 10s
    1. Creating editor profiles
      2m 6s
    2. Using Code Assist
      5m 43s
    3. Setting code coloring
      4m 5s
    4. Using shortcut keys
      3m 5s
    5. Working with outlines and syntax checking
      3m 11s
  6. 37m 40s
    1. Using code completion
      7m 25s
    2. Using snippets
      9m 23s
    3. Using SQL editing and the Query Viewer
      5m 55s
    4. Working with components
      7m 27s
    5. Working with variable mapping
      2m 14s
    6. Navigating code and documents
      5m 16s
  7. 13m 12s
    1. Getting set up
      3m 50s
    2. Using the ColdFusion debugger
      5m 37s
    3. Watching logs with Tailview
      3m 45s
  8. 13m 8s
    1. Installing extensions
      4m 5s
    2. Using the CFC Generator extension for ColdFusion 8
      4m 52s
    3. Using the CFC Generator extension for ColdFusion ORM
      4m 11s
  9. 34m 5s
    1. Building a simple contact form extension
      3m 42s
    2. Creating user interfaces
      8m 55s
    3. Packaging the extension
      3m 55s
    4. Building the handler
      8m 10s
    5. Using the Builder extension
      9m 23s
  10. 25s
    1. Goodbye
      25s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed ColdFusion Builder Essential Training.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.