How to customize the ColdFusion AutoSuggest

ColdFusion 8 and 9 have an autosuggest functionality that just couldn't be simpler. If you want to have an autosuggest input on the screen, you can do it with a single line of code:

view plain print about
1<cfinput type="text" name="language" autosuggest="english,spanish,french">

That snippet will place an autosuggest box on the screen and allow a choice of english, spanish or french. Snazzy yeah?

If you want, you can bind the autosuggest to a javascript function, or directly to a CFC, making data retrieval and formatting very simple.

view plain print about
1<cfinput type="text" name="language" autosuggest="javascript:doSomethingJavascripty( {cfautosuggestvalue} )" />

view plain print about
1<cfinput type="text" name="language" autosuggest="cfc:DoSomething.coldFusiony( {cfautosuggestvalue} )" />

You can also make more complex examples, take a look at the ColdFusion 9 Documentation for Autosuggest for some ideas. All this is possible because ColdFusion used the extensive YUI library under the hood. The control used by the ColdFusion Autosuggest is the YUI AutoComplete widget.

Let's say you wanted to do something that the YUI AutoComplete offers, but isn't in the ColdFusion documentation, what do you do?

[More]

How to Make a Show Password Link with JQuery

While we all agree a good security measure is hiding passwords in form inputs, giving a user the ability to unhide the password is a nice usability feature. How often are you changing your password with nefarious people standing over your shoulder, right?

Really, the difference between markup for a text field and password field is just the type attribute of either 'text' or 'password'. JQuery makes it easy to work with attributes, by the $().attr() method. So, this would seemingly be a very simple task, right? Let's try it:

view plain print about
1<script type="text/javascript>
2 oldBox.attr('
type', 'text');
3</script>
Whoa, this promptly results in the following error:

uncaught exception: type property can't be changed

Ouch. That didn't work like we expected, did it? Let's look at why. Once an element is inside the DOM, the type of the element can't be changed. The differences between the various DOM controls just mean we can't change a type of an element once it has been added. We can, however, clone the element, change the type then attach it to the DOM and it will work perfectly.

[More]

If You Build or Maintain Client Side Libraries or Widgets I Want To Talk To You

The ColdFusion community is full of bright people who have built really neat libraries and widgets to make better features and functions for applications. One of my favorites, CFUniform (a rich forms library) lets you build consistent, feature rich forms with very minimal code. I use this library all the time to make my applications snazzier and more maintainable. There are plenty of cool projects I've not yet used and while working on some Model-Glue features this weekend, I had an idea.

See, I've been working on the scaffolding feature in Model-Glue. This feature is a great way to get a jump start on a data-centric application. Simply configure Model-Glue and your ORM of choice and Model-Glue will generate everything needed to Administrate your data. Forms, Lists, delete screens, Bam, it'll generate the whole thing for you in seconds. Of course, the generated code is easily customized to fit the need of the application, but because it is generated from the database, the functionality is generic and the look and feel is somewhat limited.

What if we had a real easy way to plug in some of these rich libraries into Model-Glue? Forms libraries, Ajax widgets, Grids, Rich tables, all these could be as simple as adding a few characters into an XML file. Sounds fun, right?

What I want is to talk to a few of the folks behind some of the coolest libraries to explore how I can provide the best integrations. If you are the author or maintainer of some library or widget, or you use something that you are really fond of, let me know by leaving a comment. We might be able to work together to provide some really neat, useful functionality for the community.

Must Have Tool For Ajax/Remoting Work!

Nathan Mische, one of the best JavaScript programmers I know, works on the ColdFire project. ColdFire is sort of like Firebug for Firefox, only geared towards ColdFusion.

If you've developed any sort of Ajax functionality, you know testing remote services can often be frustrating. Trying to get a handle on what parameters are being passed, how to send test parameters, knowing what the results of the request were, often mean dealing with a number of problem layers and a lot of confusing Red Herrings.

If you do any Ajax work, take 72 seconds out of your life to watch this quick screencast on the Request Queue in ColdFire.

See how efficient the workflow is? See how quick one can test remote services? How much time would this save you, what with all the cfdumping, the alerts, the aggravation?

What are you waiting for? Download ColdFire Now!

What Is ColdFire?

ColdFire is an extension to Firebug. It provides debug information in a Firebug tab as opposed to the bottom of the page. This lets you debug and keep your site layout intact, since ColdFusion's built-in debug information can sometimes mess with your site layout. ColdFire currently shows debugging information in the following tabs:

  • General
  • Execution Times
  • DB Queries
  • Traces
  • Timer
  • Variables
  • Request Queue

On CSS, HTML and Boiling Frogs

I've just released an article at the RIA Zone titled CSS3: A solution for applications, or are we the boiling frogs?. The article is about CSS and HTML for applications and begins like this:


I've made countless web pages using HTML + CSS and have no complaints about the technological combination for Internet documents and pages. The rub comes when trying to make an application. Note the distinguishing factors. HTML + CSS is a horrid combination for making applications.

To be true, the HTML + CSS isn't truly the problem, the problem lies in inconsistent rendering by the clients (browsers). However, a large part of my job is making sure an application works, not debating with users which browser renders 'correctly'.

When building an HTML + CSS based application, there will be some unanticipated time required to track down and hack around a strange edge case or rendering bug . The time spent to track down the source of the error, which by the way only happens in IE version 6.0.23234234 and in Firefox 2.098435 and not Firefox 2.102309, is lost time. I've even spent 8 or 9 hours tracking down the source of a CSS related problem, googling around, reading blogs to find a solution and then testing all the various browsers using various user interaction permutations to verify the fix didn't break another client implementation. While spending this time was necessary for the success of the application, I would have preferred to spend that time towards building another useful feature for the users.


The article is a lot longer. Give it a read and let me know if I am off base.

8458 Views Print Print Comments (7) Flex, AIR, Ajax

The New JQuery UI Launched

The first drop of JQuery UI was released September 16th 2007. This release includes:

[More]

Solving Problems with FireBug

Dave Ferguson posted recently about HTML CFGRID style column content and focuses on how to style columns in an HTML CFGRID. The true gem of this post is how he used Firebug to walk down the markup and find the class names and properties of the CFGRID output.

Firebug is truly a wondrous tool. I use it every single day and I save a TREMENDOUS amount of time when working with HTML and Javascript. Also, I've really reduced the number of times typing:

view plain print about
1alert('what is this variable ' + varName );
or
view plain print about
1alert('Just work this time, #$*@*&$&!! ' + varName );

I wrote about Firebug previously and provided a link to a Video by Joe Hewitt explaining the feature set of Firebug 1.0. Joe Hewitt created Firebug and does a great job showcasing the features on this video, courtesy of YUI Theater. I recommend viewing this video, if you have not already.

Thanks go to Dave his original post. I look forward to more great content at Dave Ferguson's blog.

JSEclipse is so much fun

I was digging through a bunch of javascript code today and trying to trace out some variables. In JSEclipse, an eclipse plugin made by Interakt(newly in the Adobe fold), if you highlight a variable name, or a property name, it not only highlights all instances in the file, it also places little markers for each instance on the right hand gutter of the IDE. A quick mouse click jumps right to the instance. I've used JSEclipse for a little while now, but this was the first I noticed this handy feature.

This particular JS file was well over 700 lines and I needed all the help I can get. Thank you Interakt for JSEclipse.

There are plenty of other nice features in the JSEclipse plugin such as:

  1. Contextual code completion
  2. Suggest parameters to be filled
  3. Reads all classes in current project
  4. Scan current file for words
  5. Syntax Highlighting
  6. Syntax based code folding
  7. Error reporting
Get a full feature list here.

You can get JSEclipse here. (Registration Required).

AjaxCFC + JQuery

Rob Gonda has incorporated one of the top ajax libraries in AjaxCFC. For developers who appreciate the concise power of JQuery this is a big plus. If you haven't had a look at JQuery yet, this site is a great place to start.

I personally don't hate writing javascript, I just don't like the signal to noise ratio. It seems like I write many lines of code for a simple bit of functionality. The fine folks at JQuery have a tremendous amount of functionality in their library and in just a few lines, you can add some nice flair to your web applications.

So, a big thanks to Rob Gonda for pushing out the newest (alpha) release of AjaxCFC. We appreciate your efforts