The Broadchoice Community Platform has a number of "modules" (applications) that you can add to a page and one of those is a list of documents for download (or external links). You add the module to the page and then select documents (from your document library) to add to that module. In previous releases, authors had to add documents in the order that they wanted them to appear on the (generated) web page. We looked at a number of UI options for allowing authors to "rank" the documents within the module but felt most of them were fairly clunky, involving entering ranking numbers to reorder things or up/down arrows requiring authors to move documents one position at a time. Ugh!
Ray pointed me at one of the cool jQuery UI interactions: sortable. It allows you to mark a "container" tag (e.g., a div) as sortable and then users can drag'n'drop the "child" elements into the order they want. You can attach event handlers that fire at various points in the drag'n'drop operation.
Here's how we do it:
<cfloop query="documents">
<div id="doctag_#documents.id#" onMouseOver="setCursor(this,'move')" onMouseOut="setCursor(this,'auto')">
#documents.name# ... etc ...
</div>
</cfloop>
</div>
update: function(event,ui) {
jQuery.get('/updateRank.cfm?' + $('#sortable').sortable('serialize'));
}
- jQuery marks the sortable div contents as being, well, sortable!
- jQuery adds an event handler for update - when the drag'n'drop operation completes - that invokes a URL on the server, passing in the serialized data from the children of the sortable div, i.e., the id values as a list in the new order: doctag[]=1,3,4,2. It assumes an underscore as a separator.
- Monday
- Opening General Session
- Adobe Roadmap: Enterprise
- Flex Architecture Face-Off - panel
- Real-Time Collaboration Apps with Flex and Cocomo - Nigel Pegg
- Tuesday
- Mixing Open Source and Commercial Software
- General Session
- Adobe@Adobe: IT Innovation
- Developing Rich Applications with jQuery and Adobe AIR - John Resig
- The REST of SOA
- Wednesday
- Advanced Patterns for ColdFusion Test Automation - Bill Shelton / Marc Esher (MXUnit)
- Building Real-Time and Collaborative Applications with Flex and BlazeDS
- Event-Driven Programming in ColdFusion - an updated version of my session from Scotch on the Rocks and CFUNITED
- Cocomo Deep Dive: Building Social RIAs with Flex + Adobe Hosted Services - Nigel Pegg
- Developing Enterprise ColdFusion Applications - Joe Rinehart
Also a reminder that BACFUG meets on the Wednesday evening immediately after MAX ends and I am pleased to announce that we are having a double session with some MAX speakers:
- Bill Shelton and Marc Esher will present on Unit Testing in ColdFusion with MXUnit
- Joe Rinehart will present on Model-Glue 3: Gesture
(via Vince Bonfanti's blog)
David Harris has a brief post about the joys of jQuery where he comments on what, to him, was an unexpected feature that allowed binding of variables, i.e., JavaScript (and ActionScript) support closures. I find it interesting that he thinks this binding "somehow feels wrong" and I've seen the same reaction from a number of people when first confronted with closures.
This binding is what gives closures their power and why they are more than just "anonymous functions". They carry with them the context in which they were created.
It's also an interesting contrast with ColdFusion where variable binding is done at the last minute at runtime and thus you can take a UDF function that references variables.foo (which might be a page scope variable) and add that function to a CFC instance and now variables.foo will refer to foo in the variables scope of the CFC itself.
I think that's why my Closures for CFMX library has proved so puzzling for a lot of folks :)
In this session, you'll learn from John Resig, the creator of the jQuery library, how to build a desktop application with Adobe AIR and jQuery. jQuery is a fast, concise JavaScript library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. Although jQuery is typically used inside a web browser, it's now possible to use jQuery to build rich desktop applications.Should be a great (and extremely popular) talk!
I had nothing to do with this project but given my recent interest in jQuery, I felt it was worth blogging about. I think it really shows the power and simplicity of jQuery.


