Thought Delimited

Zen Coding, in a nutshell, is a kind of coding shorthand primarily used to output HTML or XML code.ﾠ For example, the following line of Zen Coding:

div#page>ul>li*2>img.itemImg+a

...will produce this:

<div id="page">
	<ul>
		<li><img src="" alt="" class="itemImg" /><a href=""></a></li>
		<li><img src="" alt="" class="itemImg" /><a href=""></a></li>
	</ul>
</div>

If you compare the Zen Code to its output, you can see what the different parts of the Zen Code statement do. Assuming you know how you want to structure your HTML code, it's a pretty quick and easy way to generate the code you want with very little typing.

Having been recently reminded about Zen Coding, I decided to try out the latest version of the Zen Coding for Eclipse plugin and see if it would work in ColdFusion Builder 2.

The short answer: it does (and I imagine it works in CFEclipse as well). Once the plugin is installed, you can open your .cfm files in the regular editor window and use Zen Coding statements.

But then I discovered something I didn't expect: the Zen Coding plugin will convert even element names it doesn't recognize into matching start and end tags. In other words, even though it's not designed to be used with CFML tags, it can output them. Combine that fact with Zen Coding's support for adding attributes, and you can enter this line:

ul>cfloop[index=s][from=1][to=#ListLen(stateList)#]>li

...and hit the Tab key to get this:

<ul>
	<cfloop index="s" from="1" to="#ListLen(stateList)#">
		<li></li>
	</cfloop>
</ul>

...Maybe not the best real-world example, but it demonstrates the possibilities.ﾠ And the plugin lets you define your own shorthand abbreviations, so instead of typing "cfoutput[query]" to get "<cfoutput query=''>", you could define an abbreviation like "cfoutq" that will generate the same code.

I think this could be a cool way to write display code, and I'm looking forward to trying it out in real coding situations.

Update:ﾠ I totally overlooked the link on the Github page to the documentation for the current Zen Coding syntax:ﾠ http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn

After using ColdFusion Builder 2's new option that allows extension UIs to appear in an Eclipse view window (rather than a modal window) to create my CF Builder 2 Shortcut Keys extension, I decided to revisit the CFQuickDocs Lookup extension I built for the original ColdFusion Builder.ﾠ I've made a couple of improvements:

• Like my shortcut keys extension, it now opens up the CFQuickDocs site in an Eclipse view instead of a modal window, which makes it a lot more useful as a reference guide since you can go back and forth between it and the editor window and it stays open until you close it or quit Eclipse.

• You can now call up the extension in two ways.

  • As before, you can right-click in the Navigator view, choose "Open CFQuickDocs" from the context menu, and type in the tag/function you want to look up in the dialog box.

  • If the tag/function is already in your code in the editor view, you can highlight it and right-click to bring up the "Open CFQuickDocs" option in the editor context view to look it up.

• The extension auto-detects what version of ColdFusion you're running on your local machine in order to pull up the correct set of documentation on the CFQuickDocs site (ColdFusion 7, 8, or 9). This should be particularly useful to those developers still running 7 or 8 since the CFML language documentation built into ColdFusion Builder focuses on ColdFusion 9.

I'll conclude by thanking Jake Munson for creating and maintaining the CFQuickDocs website, which has been a valuable resource for me over the years.

Last night, I posted a simple ColdFusion Builder 2 extension that, when activated, creates an Eclipse view that lists all of the defaut Builder-specific keyboard shortcuts in the current ColdFusion Builder 2 beta.ﾠ You can get it from RIAForge at http://cfbshortcutkeys.riaforge.org/.

I created this extension using Sagar Ganatra's list of CF Builder 2 keyboard shortcuts and by looking at how Ray Camden altered the VarScoper extension to display in an Eclipse view (see http://www.adobe.com/devnet/coldfusion/articles/cfb2-extensions.html).ﾠ The ability to display extension UIs in an Eclipse view (a movable windowed component, like the built-in Navigator or Outline views) rather than a modal window is a wonderful enhancement in Builder 2.

A few notes about the extension:

• When you open the extension view, you have to click on either the Windows or Mac link to display the proper shortcut list (although the only difference in the shortcuts is that you use either the Ctrl key or the Cmd key).ﾠ If there's a way to detect the user's OS automatically, I haven't found it yet (cgi.http_user_agent wasn't useful in this regard).

• It is a static list of the shortcut defaults as they are shipped in Builder 2.ﾠ If you change one of these shortcuts in your preferences, the change WILL NOT be reflected in the list.ﾠ I looked around to see if the default keyboard shorcuts were stored in a readable file somewhere that the extension could examine and parse, but it looks like that isn't the case:ﾠ user-defined and user-modified shortcuts are written to certain configuration files, but the default shortcuts are not exposed in that manner (if someone knows differently, speak up).

• However, the advantage to it being a static list is that you can go ahead and customize the list in your copy of the extension.ﾠ If you pay attention to where the extension files are copied to when you install the extension, it's easy enough to go to that location, find the extension folder, and edit the index.cfm file in the extension.ﾠ It's a simple file, so it's easy to edit.

Hopefully this extension will be useful to folks who are trying to learn the new shortcuts, as you can use it to put the list right next to your editor window as you work.

UPDATE: per Sam Farmer's suggestion in the comments (thanks, Sam!), I've updated the shortcut to do OS detection using the os.name variable value in the server scope.

Thanks to a timely reminder on Twitter by both Henry Ho and Ray Camden, I tuned into the Connect preso given by Josh Adams today on some of the features coming in ColdFusion Builder 2, and got to watch all but ten minutes of it (when I had to take a client call).

Soon after the preso was over, John Farrar sent out a tweet asking about what was covered in the preso. I ended up responding to him with several Twitter DMs, which I thought I'd share:

• Smarter code assist for one, see http://blogs.adobe.com/anand/2011/02/take-a-look-at-the-editor-enhancements-in-cf-builder.html

• Ability to download and install RIAForge-hosted CF Builder extensions right from a list on CFBuilder startup page in IDE.

• Ability to define a code formatting style. Example: set style such that when you hit enter after a <cfloop> tag, next line auto-indent

• Code block shortcuts: put cursor in </cfloop>, hit key combo to either jump to matching <cfloop> or highlight whole <cfloop>

• Persistent code folding: you fold up block of code in file, close then reopen file, and editor will refold that block after a moment.

• Smart autosuggest: put "a" in var, start typing math function. When IDE suggests vars for function, ignores var with inappropriate data.

• Smarter tag autocomplete: start typing <cfloop>, select item from attribute choices, will add required collection attribute.

So overnight an update to ColdFusion Builder was released. According to the update instructions, if you're running ColdFusion Builder as a plug-in to Eclipse (like I am), you need to start/restart Eclipse clean, which can be done by typing "eclipse -clean" at the command prompt within your Eclipse folder.

The problem I ran into was I couldn't do that on my MacBook Pro. I opend up a Terminal window, navigated to my Eclipse folder, tried the command, and was told "command not found."ﾠ

I had an eclipse exec file in the directory along with the normal Eclipse.app application bundle file, so I'm not sure why it didn't work. I probably either did something wrong or perhaps there's something funky about my Eclipse install.

But fortunately I found another way to launch Eclipse with the clean option in an old set of Eclipse (3.3) documentation.ﾠ Here's what I did (after installing the ColdFusion Builder update):

• I opened a Finder window and navigated to my Eclipse directory.
• I right-clicked on the Eclipse.app application bundle icon, and selected "Show Package Contents" from the context menu.
• In the new Finder window that popped up, I went into Contents/MacOS, right-clicked on the eclipse.ini file, and chose to open it in TextEdit.
• I added "-clean" to the top of the eclipse.ini file, saved the file, then closed it.
• I then restarted Eclipse.
• Once Eclipse was up and running, I re-opened the eclipse.ini file, removed the "-clean" line, and saved it again.

ﾠ