Over the last few months I've been tinkering with Ext JS and the possibilities of a ColdFusion tag library to make development with Ext a little easier and quicker. I had originally started working with Ext 1.1, concentrating simply on Forms support, but put development on hold because I had heard Ext 2.0 was on the horizon. With it's release towards the end of 2007 I realised that the small amount of work I had already done wasn't compatible with the changes in Ext 2.0, and I was also short on time in the weeks leading up to Christmas.
Since then I've written about 25 custom tags to support various Ext components including; Button, ColumnLayout, DateField, FieldSet, FormPanel, HTMLEditor, Panel, TabPanel, TextField, TimeField, Toolbar, Toolbar.Button, Toolbar.Fill, Toolbar.Separator, and other helper tags to define global configuration of some default options, initialise the library, define form submission handlers for AJAX support, and more...
At this point I'm considering what to do with the library, which I've unimaginatively named ColdExt.
Back in early December 2007 when Brian Love released Ext.cfc there was a bit of talk about a tag library which a number of us had seemingly been mulling over. My situation is that I need to start using some kind of UI library during February, and over the last couple of weeks I think the concept has proved to be feasible. My aim is to cover as many as components as I can but with as much flexibility as I can so that nothing will interfere with using Ext in the pure JS form that it was intended. As far as sharing the code goes I'm more than happy to release it and/or set up a project on RIAForge if there is any interest. I'll save the discussion of the technical design aspects of the library for another post to follow though, because there are a few things that I would like to open up to comments :)
Anyway, here is a sneak peak of some screenshots and the code snippets that produce them:
Initialising the library is as simple as:
To create and render a FormPanel that uses AJAX:
... which produces this working form:
A replica of a slightly more complex layout from the Ext Example Dynamic Forms:
... which produces:
So there you have it! As I said I'll write another post to discuss how I've designed the library so far, and I'll see if I can put some working examples up by the end of the week. Please feel free to give me your thoughts on what I've shown so far :)