ColdExt has had support for tag insight in CFEclipse since way back in Beta 1 (wow, almost 12 months ago now!), but thanks to Dave Ferguson's recent efforts you can now have the same tag insight experience in Dreamweaver.
Today, Dave has released an updated Dreamweaver tag library for ColdExt RC 1 so grab it while it's hot!
Now up on RIAForge is the first Release Candidate of ColdExt. ColdExt is a ColdFusion tag library which makes it easier to build rich user interfaces using the amazing Ext JS library. ColdExt supports multiple CFML engines including CFMX 7, CF8, Railo 3.0.1 and OpenBD 1.0.
This release provides support for ExtJS 2.2.1 plus 6 new demos and 2 new user extensions - fileUploadField and gridSearch.
The main enhancement in RC 1 is to allow the JS and CSS resources for User Extensions to be loaded up front on the calling page, meaning that UX components can now be used in remote pages loaded via Ajax. This can be configured on the onReady tag using the uxLoad attribute, by specifying a comma delimited list of the extensions to load (based on the folder name of the extension in the /ext/ux folder) or by specifying "all" to load the resources for all extensions. For e.g.
<ext:onReady loadingMask="true" uxLoad="all">
Check out the latest demos for a bit more of a taste of ColdExt, and be sure to view the source of each demo to see how easy ColdExt is to implement.
In other news, Kevin Roche wrote a nice series of blog posts on ColdExt back in December documenting some of the issues he faced in implementing some components. ColdExt also got a mention in Episode 2 of the CF Hour podcast by Dave Ferguson and and Michael Sean Becker â€" cheers guys :)
Also be sure to mark your calendars for April 14-16 2009 as the first ever Ext Conference will see the release of Ext JS 3.0! Expect a ColdExt release to follow during April.
If you have any feedback or feature requests for ColdExt please get in touch by leaving a comment here, using the contact form on the ColdExt project page or emailing me directly (my email address is in the readme.txt file in the downloadable zip!)
About a week or so ago I gave my blog another redesign :D This time I've gone a bit more minimalist by using just a couple of gradients and some old-school pixelated design elements for the logo and edge of the content area. In my search for an image to go in the header I thought of using the CF logo somehow but didn't quite know what to put with it; then I stumbled on Kai Koenig's "coolest CF t-shirt ever" photo on Flickr featuring the (slightly modified) CF dude from the AIR Launch Party poster by eboy. <boratVoice>Great success!</boratVoice>
Next, I've begun using Twitter on a regular basis now and you can see my last few messages on the madfellas home page or follow me if you're also using Twitter. I'll mostly be twittering about CF and tech related topics with the usual funny web stuff thrown in. At the moment I'm using the TweetDeck client and I'm finding it quite good.
Over the course of the weekend I'll be playing around with setting up my development environment in OS X along with replacements for my frequently used Windows apps. So far everything is going well and the only things I am really missing are a Windows Media Player 11 which I'm replacing with VLC, and Windows Live Writer which I am running (and composing this blog entry with) using VMware Fusion's Unity feature :)
I've also got a few updates to make to ColdExt in regard to user extensions and some other new features to investigate.
And last but not least... I'll finally be starting work in London next week! More on that to follow later ;)
Quite a lot has happened in this release of ColdExt, but I'll try to keep things as short and sweet... If that's possible :)
If you haven't heard of ColdExt before you are probably wondering what it is. ColdExt is a ColdFusion tag library which makes it easier to build rich user interfaces using the amazing Ext JS library. ColdFusion 8 has built-in support for some of the features of Ext JS 1.1, but the idea behind ColdExt is to stay up to date with the current Ext JS release (currently version 2.2) while providing support for as many UI components as possible, and to support CFMX7 as well as other CFML engines (more on this below).
I had originally planned to get Beta 3 out the door much sooner, but after reviewing the small amount of code generation I was doing I thought I should take it a step further. The result is that almost 75% of the ColdExt tags are being generated from a set of easy to update metadata (courtesy of some data scraping). In the event of a new version of Ext JS being released (as was the case with Ext JS 2.2) I can update existing tags with modified attributes or help text, across the whole library, in minutes instead of hours. This also makes it much easier to add new tags to support new components, which is fairly evident from the tag counts in this release (see below).
Making an appearance in Beta 3 is support for User Extensions which live in the new "ux" tag namespace, i.e. <ux:tagName>. The first wave of supported extensions include Grid Filters, Grid Group Summary, Grid Panel Resizer, Grid Row Expander, Grid Row Actions and Portals. If you're after support for a particular extension please put a request on the ColdExt forums and I'll see what I can do.
The changes to ColdExt Beta 3 in a nutshell:
Also, good news on the CFML engine compatibility front is that ColdExt is now supported on Railo 3.0.0.008. The latest version on the Railo site is still 3.0.0.005 but you can update to the latest preview release by following the preview patch instructions.
Unfortunately there is no OpenBD support just yet as there is a bug with nested custom tags that I'm waiting on a fix for, but hopefully ColdExt will be supported on all major CFML engines soon. Feel the love :)
So without further ado, download ColdExt Beta 3 and see the demos in action!
P.S. I moved to London last week and I'll be attending the UKCFUG meeting on 6th November, so feel free to say "Hi" if you see me because I don't know any CF'ers in London yet :) Happily I've found a great room to rent which I'll be moving into on Sunday with my girlfriend, so now the big challenge is to find a job at a time where the world's economy is in rather poor shape. Fingers crossed...
The time has finally arrived... In 4 days time I'll be riding the tube and roaming the streets of London looking for somewhere to live and somewhere to work! And hopefully the excitement will follow :)
Since I'm travelling with my girlfriend Monique we decided London would be the best place for us to quickly find accommodation and both get jobs. There are a number of other cities in the UK we would have liked to try but it's really difficult to get the timing of things right when you don't have family or friends there to help get you off the ground. Having a permanent address is incredibly important for applying for bank accounts and NI numbers, so we really have to be there to get things organised, and time is money!
The house share situation in London seems to be pretty good (when viewed from afar, at least). On Gumtree there are dozens of flats going up each day within our price range and in Zones 1 and 2, and to increase our chances of finding a place quickly we're also going to a Speed Flatmating event next Thursday. Yes, it is what it sounds like, you get to meet heaps of people that are looking for flat mates or looking for a flat, so it should be fun.
As always when looking for developer jobs you come across some doozies that you can't help but laugh at. I found one that name-dropped ColdFusion (along side PHP), and then proceeded to list a bunch of technologies that would be required - some which didn't make much sense in context, and one in particular that hasn't really been defined or experienced by anybody yet:
"Additional coding - PHP, MySQL, SQL, JavaScript, LAMP, Apache, Coldfusion, software, applications, web, SQL Server, Linux, UNIX, Ajax, JQuery, RSS, JSON, Web 2.0, Web 3.0"
Classic...
On the ColdFusion side of things there seems to be quite a few permanent/full-time jobs going in London but not too many contract jobs. We want to spend around 6 months working in London so that we can travel again next summer to see some more of the world, which kind of counts the full-time jobs out (and technically I don't think you're supposed to work in a "permanent" position on a UK Working Holiday Visa).
I've just put my CV online so I guess I'll see if I get any bites from recruitment agencies. I should also say that I'd really appreciate any tips if a suitable CF Developer position pops up in the near future (my email address is on my CV), and likewise Monique is looking for Web Design work :) But enough of the self promotion.
One of the best things about moving to London will just be getting back into some kind of normal routine. After travelling for 6 months I've realised I miss sleeping at regular times and being able to cook nice healthy meals every night (not to mention relaxing with some Xbox 360 games!). I'm also looking forward to being able to attend CFUG meetings and other ColdFusion related events since I didn't have the opportunity to do so in Australia. I'm disappointed that I will miss out on seeing Porcupine Tree play at the O2 Arena this weekend though, I just missed it by a few days!
So, just a few more sleeps to go - I hope everything fits in our suitcases :)
P.S. ColdExt Beta 3 will be released very soon...
Wow, what a hectic yet amazing couple of months. As some of you may know, I recently packed up all my stuff back home in Australia and put it into storage to embark on a working holiday around Europe and the UK for a year or more. So far, though, it has been all holiday and no work. It's kind of fun being homeless and unemployed :)
Progress on ColdExt has been a little bit slower than I had hoped, but it's going well just the same. I've been able to fit in some coding on lazy mornings in the Netherlands, on the trains through Italy, on cheap Ryanair flights (though it's difficult with a 15" notebook and no elbow room), and even managed to tinker with a few demos in between sessions at Scotch on the Rocks (what a superb conference - I want to attend again next year!).
So what has changed since my last blog post and the Beta 1 release? Well, quite a lot actually. I'm calling this the Beta 2 "Preview" release because the documentation and demos haven't been finished but the majority of the tag support is there.
Download ColdExt Beta 2 "Preview" from RIAForge
I'd like to thank the people that have been using ColdExt, reporting issues and assisting with new ideas and tag implementations. I know I haven't got around to implementing all of them yet but rest assured they are on my Todo lists in Basecamp. I particularly want to get to some of the Ext JS User Extensions (such as Paged Row Numberer, Grid Filters and Radio Groups) before releasing Beta 2 "proper". Until then, have a look at the ColdExt Beta 2 "Preview" Demos to get a taste of Ext goodness :)
Having a bunch of custom tags and an XML dictionary for CFEclipse is one thing, but knowing how to use them is another! So last night I began working on every developer's favourite task... documentation :P
The ColdExt Wiki is now enabled on RIAForge and I have started out with baby steps by writing a Getting Started Tutorial which covers the absolute basic requirements of getting up and running with ColdExt.
I have a number of pages and tutorials planned for the wiki (some of which I have already made notes of on the wiki home page) and will get around to adding them as soon as I can. If anyone would like to help out with documentation (rofl!) or start a discussion about what documentation is needed the ColdExt Forums could be a good place to do it. I am open to suggestions!
The next release of ColdExt will very much be about better documentation and demos, in addition to more tags and enhancements of course :)
P.S. Does anybody know if it's possible to turn off WikiTerms on RIAForge? At the least I think a special token like __NOTERMS__ would be very useful.
I'm fairly excited about this release because it has some really cool stuff in it :) I've already dropped the biggest bombshell in the blog post title, which is support for tag insight in CFEclipse - very nice!, but there are a bunch of other nice updates and new features as well...
Changes at a glance include;
Download ColdExt Beta 1 from RIAForge
Here are the new online demos:
I will refrain from posting screenshots and code listings of the demos this time round since you can download everything you need and view the working demos above (well, that and it's getting late here in Oz and I need some sleep!) :)
One thing you need to know though is how to set up the coldext.xml file to work in CFEclipse. Just browse to the "pluginsorg.cfeclipse.cfml_1.3.1.5dictionary" directory inside CFEclipse (your CFEclipse plugin version number may vary) and insert a copy of the ColdExt "dictionarycoldext.xml" file. Then in the same location, make a backup of the "dictionaryconfig.xml" (just in case) and then open it to make the following modification, inserting a single line to include the coldext.xml file:
<version key="cf8" label="Coldfusion 8">
<grammar location="cf8.xml" />
<grammar location="user.xml" />
<grammar location="coldext.xml" />
</version>
Give CFEclipse a restart and you should now be swinging with ColdExt tag insight!
*Note that at this stage only the attributes for about 90% of the tags are documented, I haven't gotten around to inline help for the actual tags themselves just yet...
If you have any feedback about this release feel free to post here in the comments or make use of the features on RIAForge:
All feedback, bug submissions, feature requests and comments are much appreciated :)
With support for forms, layouts, menus, remote data, trees and various other bits and pieces, the icing on the cake is definitely support for GridPanels... So without further ado, I present ColdExt Alpha 3:
Download ColdExt Alpha 3 from RIAForge
There are no less than 10 new tags including asyncTreeNode, field (used with Stores), gridColumn, gridPanel, pagingToolbar, simpleStore, store, toolbarSplitButton, treeLoader, and xmlReader. A few tags have also been updated to provide support for Ext themes and greater functionality for data stores.
This will probably be the last release that I brand as an Alpha, as the releases over the last 5-6 weeks have really just been about seeing what kind of coverage I can get on all the main UI elements you would want or need to build an app. Looking towards the next release I think ColdExt will be in good enough shape to provide examples of small-scale but real world applications. We'll see how things go I guess!
Between this release and last I've put ColdExt into SVN on RIAForge and have usually been committing new stuff every few days. At the moment everything is going into the trunk so feel free to check there for updates if you are keen :)
Now for the demos...
First up is an example of using the treeLoader with an asyncTreeNode to load a tree remotely using JSON. This one was posted in the comments of my last ColdExt entry as I wrote it a couple of days after the release, but I'm including it here as well for those that missed it:
The following is example code for a tree that uses remote loading:
<ext:init /> <ext:onReady> <ext:treePanel var="myTree2" title="TreePanel TreeLoader" rootVisible="false" width="250" renderTo="out"> <ext:treeLoader url="treedata.cfm" /> <ext:rootNode text="Root Node" /> </ext:treePanel> </ext:onReady>
Next are the 2 new grid demos. The first demo contains two replicas of the samples that come with Ext 2.0, which feature a grid using an array of data with a simple store plus examples of custom renderers (not the currency formatting and coloured values in the columns), and a grid which loads its data remotely from an XML file:
The second grid demo is a custom one that I have created. It shows off a couple of neat features such as the pagingToolbar and the use of a jsonStore with remote paging and sorting (use FireBug to watch the Ajax requests as you interact with the demo!):
Here's a screenshot of the grid in action:
The following is example code used for the JSON grid with remote paging and sorting:
<ext:init /> <ext:onReady> <ext:jsonStore var="myJSON" autoLoad="true" remoteSort="true" root="query.data" totalProperty="totalcount" url="data2.cfm"> <ext:field name="id" /> <ext:field name="country" /> <ext:field name="capital" /> <ext:param name="limit" value="10" /> </ext:jsonStore> <ext:gridPanel renderTo="out" title="JSON Grid" width="354" height="287" stripeRows="true" store="myJSON"> <ext:gridColumn header="ID" width="40" sortable="true" dataIndex="id" /> <ext:gridColumn header="Country" width="150" sortable="true" dataIndex="country" /> <ext:gridColumn header="Capital" width="160" sortable="true" dataIndex="capital" /> <ext:pagingToolbar displayInfo="true" pageSize="10" store="myJSON" /> </ext:gridPanel> </ext:onReady>
It's also worth mentioning that this demo makes use of CFJSON, which is great because it means ColdExt and its demos work fine on both CFMX7 and CF8. (Incidentally CFJSON was updated a couple of weeks ago but I haven't grabbed the latest version of it just yet. It will be in the next release though).
As usual, if you have any questions, comments or feature requests I'd love to hear them.
This release almost took me a couple of weeks to get out the door, and with 5 new tags and 13 updated/improved tags ColdExt is getting that little bit closer to being usable in the real world.
New tags include support for components such as accordions, tools with onclick handlers, tooltips, and xtemplates. The updated tags include better support for container layouts, tabs and treePanels. And there are 2 new demos to check out as well :) As usual, just extract the folders to your webroot to get up and running quickly.
Download ColdExt Alpha 2 from RIAForge
In this release the Ext files are no longer bundled so you will need to head over to the Ext JS Download page, grab the Ext 2.0.1 release and extract it to a temporary directory. Then in your webroot, where you have already placed the "coldext" and "demos" folders from the ColdExt Alpha 2 release, create a new folder called "ext". As per the image below, into the new "ext" folder you just need to place a copy of "ext-all.js" (from the "ext-2.0.1" folder) and "ext-base.js" (from the "ext-2.0.1adapterext" folder), and both the "css" and "images" folders (from the "ext-2.0.1esources" folder), then you should be right to go.
The first new demo is the ColdExt Accordion demo which is a replica of the Accordion Window that is in the Ext Desktop demo (minus the minimize/maximize functionality).
Here is a screenshot of the accordion demo as it is rendered:
And below is the main chunk of ColdExt code used to construct the accordion demo:
<ext:init />
<ext:onReady>
<ext:createChild renderTo="out" tag="h1">ColdExt Example Accordion (Ext Replica)</ext:createChild>
<ext:window var="myWindow" title="Accordion Window" layout="accordion" iconCls="icon-accordion"
width="250" height="400" border="false" resizable="true" show="true">
<ext:toolbar>
<ext:toolbarButton icon="icons/fam/connect.gif">
<ext:tooltip title="Rich Tooltips" text="Let your users know what they can do!" />
</ext:toolbarButton>
<ext:separator />
<ext:toolbarButton icon="icons/fam/user_add.gif" tooltip="Add a new user" />
<ext:toolbarButton icon="icons/fam/user_delete.gif" tooltip="Remove the selected user" />
</ext:toolbar>
<ext:treePanel id="myTree" title="Online Users" lines="false" rootVisible="false" margin="0 0 5 0">
<ext:tool id="refresh">
<ext:onclick>
var tree = Ext.getCmp('myTree');
tree.body.mask('Loading', 'x-mask-loading');
tree.root.reload();
tree.root.collapse(true, false);
setTimeout(function(){
tree.body.unmask();
tree.root.expand(true, true);
}, 1000);
</ext:onclick>
</ext:tool>
<ext:rootNode>
<ext:treeNode text="Friends" expanded="true">
<ext:treeNode text="Jack" iconCls="user" />
<ext:treeNode text="Brian" iconCls="user" />
<ext:treeNode text="Jon" iconCls="user" />
<ext:treeNode text="Tim" iconCls="user" />
<ext:treeNode text="Nige" iconCls="user" />
<ext:treeNode text="Fred" iconCls="user" />
<ext:treeNode text="Bob" iconCls="user" />
</ext:treeNode>
<ext:treeNode text="Family" expanded="true">
<ext:treeNode text="Kelly" iconCls="female" />
<ext:treeNode text="Sarah" iconCls="female" />
<ext:treeNode text="Zack" iconCls="green" />
<ext:treeNode text="John" iconCls="green" />
</ext:treeNode>
</ext:rootNode>
</ext:treePanel>
<ext:panel title="Settings">
Something useful would be in here.
</ext:panel>
<ext:panel title="Even More Stuff">
Something useful would be in here.
</ext:panel>
<ext:panel title="My Stuff">
Something useful would be in here.
</ext:panel>
</ext:window>
</ext:onReady>
Next up is the ColdExt Combobox demo which makes use of the XTemplate templating features that Ext provides. Templates are mostly used with the DataView component which the Combobox uses internally for rendering its list of items (note that I haven't yet implemented DataViews directly in ColdExt, they will be coming in the next release!). Not only can templates display simple data values but they can do logic, simple calculations and even implement member functions for more complex actions, as per the example below.
Here is a screenshot of the Combobox and XTemplate in action, rendering some data side-by-side in a list:
And below is the code used to produce the Combobox. Take special note of the XTemplate tag and the nested member function that is used in the template, it's a super powerful feature IMO.
<ext:init />
<ext:onReady>
<ext:createChild renderTo="out" tag="h1">ColdExt Custom Example Combobox</ext:createChild>
<!--- coldext custom example - combobox --->
<ext:createChild renderTo="out" tag="h2">Combobox 1 - XTemplate Example</ext:createChild>
<ext:jsonStore var="myJSON" url="data.cfm">
<ext:storeField name="id" />
<ext:storeField name="country" />
</ext:jsonStore>
<ext:formPanel border="false" renderTo="out">
<ext:comboBox name="country" emptyText="Select a Country..." hideLabel="true"
displayField="country" valueField="id" store="myJSON">
<ext:xtemplate>
<tpl for="."><div class="x-combo-list-item">
<span class="country">{country}<tpl if="this.isCode('KZ', id)">, very nice!</tpl></span>
<span class="code">{id}</span>
</div></tpl>
<ext:script>
isCode: function(a, b){
return a == b;
}
</ext:script>
</ext:xtemplate>
</ext:combobox>
</ext:formPanel>
</ext:onReady>
Anyway, that's about it for this release. If you have any questions, comments, feedback or feature requests please feel free to drop me a note in the comments.