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.)
<mockup version="1.0" skin="sketch" measuredW="681" measuredH="554" mockupW="616" mockupH="534"> <controls> <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"> <controlProperties> <text>justin.w.carter@gmail.com</text> <customID>email</customID> <customData/> </controlProperties> </control> <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"> <controlProperties> <text>Justin%20Carter</text> <customID>name</customID> <customData>required</customData> </controlProperties> </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:
<label class="label" for="name">Name</label> <input id="name" name="name" value="Justin Carter" /> <input id="email" name="email" value="justin.w.carter@gmail.com" /> <label class="label" for="email">Email</label> <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> <input type="radio" id="product-flashbuilder" name="product" value="Adobe Flash Builder" /> <label for="product-flashbuilder">Adobe Flash Builder</label> <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> <label class="label" for="enquiry">Enquiry</label> <select id="enquiry" name="enquiry"> <option value="Sales">Sales</option> </select> <textarea id="comment" name="comment">Tell us about your enquiry...</textarea> <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.
function insertText(text) { savecontent variable="xml" { writeOutput(' <response> <ide> <commands> <command type="inserttext"> <params> <param key="text"><![CDATA[#text#]]></param> </params> </command> </commands> </ide> </response> '); } return xml; }
It's really just a glorified snippet, but does make the handler code much simpler:
<cfheader name="Content-Type" value="text/xml"> <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.
Archived Comments
That is freakin' cool! :) I've used Balsamiq mockups before for my Flex apps and have thought about creating something like this Flex Builder but never followed through. Brilliant idea for CFBuilder. Great work!
@Ray,
BTW, it's BalsamiQ, not BalsamiC :)
Hmm, ever heard of Napkee? (http://www.napkee.com/) -- they really have already figured this all out very well and although it's not a free solution it's really the best implementation of the BMML -> HTML/CSS/JS workflow. Plus, you can also export a BMML to FLEX! I've been a big fan of Balsamiq and Napkee (especially using both, in tandem) as a rapid mockup/wireframe tool for a while, this has saved me quite a bit of time in my design workflow process for both websites and iPhone apps.
Wow! This is seriously cool. Can't wait to play with it.
I am a huge fan of Balsamiq. I first heard about it a couple weeks ago at the MarkLogic Users Conference and it's totally changed the way I plan pages/sites/apps. I can't say enough positive about it and it's built on AIR. The ability to use Gilt with CF Builder is awesome. Balsamiq also supports building Flex Apps from the tool using WebOrb. Great stuff all the way around.
@Gareth: From now, it's Balsamic. #raylaw
Thanks for the review Ray. I knew straight away I had committed (lack of) error handling sin when I saw the other reviews roll in :)
http://twitter.com/justinca...
There is heaps of scope to improve the capabilities of this extension, my problem was trying to keep the features manageable in the time I had to work on it (while finishing my job *and* packing to leave the UK!).
You can already edit the XML file to change the scaffolding markup if you wanted to, but I've started down the path of allowing custom XML files as well - you could have a renderer for cfUniForm, or ColdExt, or whatever custom style of markup you like. I just need to build a few more smarts into the parsing first - some z-index, grouping (to allow for fieldsets), and row logic - and then add a dialog to choose the rendering template. (Maybe I could even allow programmatic extension of the rendering functions - upload a CFC into the extension?) On top of that, you could have options to scaffold direct from a BBML file to a new CFM file rather than working with text selections. CSS and JS output could follow, ala Napkee. I think it would actually be possible to change the XML template right now to do (inline) positional CSS rendering though ;) (I'm not a huge fan of positional CSS, I prefer good structure + floats most of the time).
It was fun to build too so thanks for running the competition Ray. Without it I probably *still* wouldn't have played around with extensions, but now I'm hooked and even have a couple more ideas for extensions brewing!
For those that are interested I've submitted a project to RIAForge which live at http://gilt.riaforge.org (once approved).
I've made some small tweaks (including error handling, w00t!) and I'm working on making it more easily customisable from the get go.
Gilt is now up on RIAForge as a downloadable zip (SVN will come later), version bump from 0.1 to 0.1.1 just with basic error handling included :)
http://gilt.riaforge.org/
This would be an awesome way to move from concept to prototype in COOP. Where can I get a copy of this app to build on the inspiration of this product?
LOL, of course should not leave a page in a tab and fail to refresh before posting a good season later. Will grab it from RiaForge.
Is this also supported for those of us using CFEclipse or is this for CF Builder only? We love Balsamiq but don't have CF Builder and would really like to use this if we could.
I don't believe CFEclipse supports plugins.