Today's CFBuilder Contest entry is our last - Gilt by Justin Carter. It covers something I haven't used myself, Balsamic Mockups, but from what I can see, this is a pretty powerful little extension and could become something - well incredible - for CFBuilder.

Gilt takes BBML (which is a text-based export from Balsamic) and converts into HTML. Currently it only works with forms. But the result is pretty interesting. Take for example this Balsamic Mockup UI:

From that you can create the BBML export. I've never seen it before, but here is a sample. (And the complete file is in the zip attached to this entry.)

   view plainprintabout
1  <mockup version="1.0" skin="sketch" measuredW="681" measuredH="554" mockupW="616" mockupH="534">
2   <controls>
3   <control controlID="0" controlTypeID="com.balsamiq.mockups::TextInput" x="201" y="149" w="-1" h="-1" measuredW="177" measuredH="29" zOrder="1" locked="false" isInGroup="-1">
4   <controlProperties>
5   <text>justin.w.carter@gmail.com</text>
6   <customID>email</customID>
7   <customData/>
8   </controlProperties>
9   </control>
10   <control controlID="2" controlTypeID="com.balsamiq.mockups::TextInput" x="201" y="108" w="-1" h="-1" measuredW="98" measuredH="29" zOrder="2" locked="false" isInGroup="-1">
11   <controlProperties>
12   <text>Justin%20Carter</text>
13   <customID>name</customID>
14   <customData>required</customData>
15   </controlProperties>
16   </control>

You take this BBML, paste it into a file, and here is the critical part - select all. Once you've done that, you can right click and select Gilt-Convert to HTML. If you forget to select all, you will get an error. And yep - I keep harping on this. One of the issues I'm seeing in all the extensions lately (and I include mine) is that they don't always properly support the ways they can be run. In this case, his extension is passed the file name, and when it detected no selection, it should have (imho) switched to using the entire source of file. As I said - everyone seems to mess this up. It's just a new way of thinking. Things are rough now. But as time goes on, I think we (those of us who develop CFBuilder extensions) will get the hang of it.

Anyway, after converting the BBML, you end up with:

   view plainprintabout
1  <label class="label" for="name">Name</label> <input id="name" name="name" value="Justin Carter" />
2  <input id="email" name="email" value="justin.w.carter@gmail.com" />
3  <label class="label" for="email">Email</label>
4  <label class="label" for="">Product</label> <input type="radio" id="product-cfbuilder" name="product" value="Adobe ColdFusion Builder" /> <label for="product-cfbuilder">Adobe ColdFusion Builder</label>
5  <input type="radio" id="product-flashbuilder" name="product" value="Adobe Flash Builder" /> <label for="product-flashbuilder">Adobe Flash Builder</label>
6  <input type="checkbox" id="notify" name="notify" value="Please notify me of product updates by email" /> <label for="notify">Please notify me of product updates by email</label>
7  <label class="label" for="enquiry">Enquiry</label> <select id="enquiry" name="enquiry">
8      <option value="Sales">Sales</option>
9  </select>
10  <textarea id="comment" name="comment">Tell us about your enquiry...</textarea>
11  <input type="submit" value="Save" />

Pretty dang cool! As I said, his extension only supports forms now. But you can imagine this getting more and more powerful as time goes on.

Another interesting aspect of this is his ideEvent.cfc component. He uses it just for one method, but he wrapped a simple method to handle the correct output for telling CFBuilder to insert text into the editor.

   view plainprintabout
1  function insertText(text) {
2      savecontent variable="xml" {
3          writeOutput('
4              <response>
5              <ide>
6              <commands>
7              <command type="inserttext">
8                  <params>
9                      <param key="text"><![CDATA[#text#]]></param>
10                  </params>
11              </command>
12              </commands>
13              </ide>
14              </response>
15          ');
16      }
17      return xml;
18  }

It's really just a glorified snippet, but does make the handler code much simpler:

   view plainprintabout
1  <cfheader name="Content-Type" value="text/xml">
2  <cfoutput>#ide.insertText(renderer.output())#</cfoutput>

I really like this idea and I hope to see more of it. Anyway, all in all, a great start. Thanks Justin!

p.s. I'll be posting a wrap up later this week. Thank you to everyone who participated and all the comments from my readers.