CFObjective: Day 1 - AJAX with Scorpio

Sean Corfield

Over 100 AJAX libraries are out there.  (Really?)  That's hard to believe.
AJAX and Scorpio

• Provides a rich set of UI controls
• Enable rich input/output
• Provide natural way to handle data management

New tags for layout and controls
CFC results can be returned in JSON format
Ability to bind data and methods to controls
Automatically proxy CFCs in JavaScript
Scorpio AJAX UI controls are based on Yahoo UI toolkit and Ext JS library

Input and Output

• Data binding across controls
• rich textarea (instead of FCK!!!!)
• Built-in autosuggest
• <cfgrid> and <cftree> get reborn

Databinding

• bind= attribute for cfgrid, cfinput, cfselect, etc.
• bind="{city}, {stateCode}"
• bind="cfc:path.to.cfc.func(args)"
• bind="javascript:func(args)"
• etc.

Data binding example: related select
Wow!  Done in 13 lines of code, and 1 basic CFC to grab data - 1 tiny JS (mostly to handle errors) function and data binding to <cfselect> - Very cool

Rich text editor - Uses FCKEditor!!!!!  Hah!  I was right in backing FCKEditor all this time.

Auto-suggest: example
Very cool.  Dynamic related auto-suggest.

At this point, someone asked to view source on the page Sean was demoing.  Yikes!  It was pulling every single library from the YahooUI into the page!  Then, someone in the audience piped up and noted that the beta release always uses the entire Yahoo UI library, but the release version will contain a mechanism that auto-selects only the needed libraries!  Sweet!  This is exactly was MS was demonstrating with their AJAX implementation in ASP.

<cfgrid> now rocks with AJAX data binding.  This can be VERY useful.

<cftree> now rocks by dynamically fetching data upon expansion - though I'm still not sure I would use <cftree> in a front-facing app.  Seems like it would be great though, for admin types of apps.  Trees can be cached.  Someone asked if you could drag and drop between tree items.  The answer is that Yahoo UI can be extended simply by grabbing code that others have already done (and they *have* done the drag and drop thing) and just drop it into your app.

NOTE: Try to acquire Sean's example code.  This could be very useful in getting a jump start in using Scorpio AJAX.

example: AJAX login window!  Very cool.

<cfajaxproxy cfc="ajax.AuthenticationSystem />
Allows javascript code to access CFCs directly.

Built-in AJAX debugger!  Can dump objects.

AJAX UI Controls in Scorpio - small example

• cflayout
• creates tab layouts, horizontal and vertical
• Individual tabs can be closed (hidden)
• border layout
• cflayoutarea to populate small bits of content - overflow can be specified and handled
  
• example: tabbing - VERY simply and cool
• example: panels and accordion controls - not much code needed at all - can specify things like min and max sizes.  Neat!
• cfmenu
• Sean had a tiny JS function that did auto-breadcrumbing.  Look this up.
• cftoolip
• Fantastic!  I've been using tooltips more and more in various ways
• Extremely flexible
• Can include an entire HTML page!
• cfwindow
• Holy crap this would make my life easier!
• Creates modal windows and any other kind you need
• Content can be anything.
• NOW the true power of CF is revealed!!!
• I am very excited about this
• cfdiv
• Creates an HTML tag whose contents are populated from a dynamic URL - Sounds interesting!
• auto-generates a "Loading..." message with animated icon.
• cfpod
• Holy crap.  Very awesome.
• Used blog pods as an example.
• Virtually the same as cfdiv, example has title.  cfpod is more specific for it's intended usage.

SerializeJSON(), DeserializeJSON(), IsJSON()
AJAX Date Picker

http://corfield.org

Where does this leave Spry?  In my opinion... high and dry.  I really don't know why I need it.
My prediction: ColdFusion 9 will ditch Yahoo UI in favor of a finished Spry product only because it seems ike a hack to rely on Yahoo UI.  I don't agree with this, but it's my prediction.  Ultimately that seems like a lot of work for nothing, unless Spry somehow turns out to do things better or more efficiently than Yahoo UI.