ColdExt - an Ext JS tag library?
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.
Over the New Year's break I found myself with some spare hours and finally sat down to write a few tags. I thought I'd try my hand at a Panel component, until I hit a bit of a roadblock with custom tag generated content and outputting to a variable inside a block of JavaScript output. After returning from my holiday (yeah I was coding on holiday, who does that?!) I came across a post by Dan Vega titled Custom Tag JavaScript problem mentioning the toScript function, which was exactly what I needed - thanks Dan! ;)
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 :)
Nice work.
A few questions -
Can you do async form submission (easily) with this library? Also, why the <ext:init /> and the <ext:onReady>? I mean, I 'get' why - because you're modeling Ext's format - but - why...lol. Seems like you could have easily taken care of that behind the scenes (but without seeing the tag I'm not sure...)?
Also - why the out div and the renderTo attribute? Feels too much like Ext to me - which is not *bad*, but this is CF we're talking about - to me it should feel/behave like a CF tag which means it would render the div itself.
One more thought/question/idea - can you do remote content with your panels the way CF does by passing a url and perhaps bound parameters?
I'm not trying to 'pick' on your project - I'm just pointing out some things. I'm not saying you should mirror the built in CF stuff, but some of the bits with the built in stuff are just darned handy IMO...
@Todd: By async do you just mean with Ajax (XMLHTTPRequest?). I currently do have a default Ajax submission handler that will post an XHR back to the server (it's used in the first example - I really need to put up some working code so you can see it!). Of course a JavaScript handler is required client-side to process any results that come back in a response, but I'm thinking of providing some built-in handlers for that as well.
The <ext:init /> is required to inject the appropriate js and css stuff into the HTML <head>. Can't really get away from that, it's required :) It can also be used to override some global config stuff for that particular request, without changing the config stored in the application scope. More on that in my next blog post I think!
The onReady, as you point out, is just emulating what Ext does, as is the renderTo attribute and the HTML div. Why didn't I do something trickier? At the moment I don't really know the limits of what I can and can't do with Ext, but at the same time I don't want to lose any flexibility.
For example I know that with a few simple divs I could render a Panel floated next to a FormPanel, displayed inside a Window or another Panel. However if you have the custom tag doing the work to output the div then you might also need to pass in more attributes to the custom tag to define the HTML id/class/style to achieve the floating, width, and any other layout stuff that you might need to do on the div. I don't know if that would make the custom tag too bloated with attributes, or cause potential attribute name conflicts, or just make the code a little too messy to read, or none of the above! Basically I'm just testing the waters and sticking to the Ext formula, for now.
That said, it doesn't mean that I can't reconsider anything I've done thus far. This is early alpha stuff as far as I'm concerned, and I posted it specifically so I could get this kind of feedback, so thanks for taking the time to read it :)
Oh and on the remote content, no I haven't looked at that yet but it should be easily doable with either XHR or an iframe.
I am working on incorporating ExtJS's grid into our Admin. Using your custom tag approach would definitely help productivity.
Any chance you could share the structure of one of your custom tags? I'd be happy to contribute my grid custom tag to your library when I am done.
http://www.exttld.com/
It looks like a tag library for EXT 2.0 written in Java/JSP similar to what you are doing. Thought you might find it interesting.
Any plans of RIA forge?
Andy
If you need to do any js converting inline you can always use this handy function (JSStringFormat()) :)
I have been looking to simplify use of extJS and your approach is fantastic! Very neat.
Any chance you could share your library with us? I work with 2 other CF developers and we all would be happy to contribute to your library.
Again, great work!
Thanks!
Sachin
http://www.madfellas.com/blog/index.cfm/2008/2/4/C...
http://www.madfellas.com/blog/index.cfm/2008/2/4/C...