Archive for Category ‘Javascript‘

 
 

ColdFusion 8 (Scorpio) is Coming

It seems this is the first week ColdFusion 8 is hitting headlines everywhere — and it’s still in a closed beta! I’m sure it won’t be long until there’s a public beta, but until then there are a slew of released features from official usergroup presentations and Ben Forta’s blog. Here’s a quick highlight tour of what’s been announced so far.

Yesterday a article about 9 ways ColdFusion 8 will rule web development somehow beat the odds and made it to the front page on Digg — only to be marked down as inaccurate and removed. The comments are riddled with “LOL ColdFusion sucks” comments left and right which would be more offensive if anyone actually gave valid points. It’s the same old reasons everyone seems to repeat — Adobe will discontinue support for CF, it’s slow, it restarts randomly, it was slow for Myspace (which everyone seems to quote) and the usual “I’ve worked with ColdFusion legacy code and it sucks”. I’ll save a rant on ColdFusions image for later, but suffice to say marketing CF8 to that group is going to be a straight uphill battle. The article details a number of exciting features.

Create AJAX windows, auto complete forms, calendar popups, grids, WYSIWYG editors, and much more. All using simple ColdFusion based tags and generating industry standard solutions such as Prototype and Yahoo User Interface Javascript.

Native JSON support. ColdFusion components now know if they are called by a web browser and will return JSON formated data automatically. You can also create JSON packets directly or consume them and turn them into native ColdFusion objects.

Native image manipulation functions. Blur, sharpen, draw, rotate, stream to browser, and much much more. This finally brings ColdFusion’s image support in line with PHP and other frameworks while keeping it so simple that even I could use it.

Ben Forta describes the how Scorpio Makes Exchange Integration Too Easy as well as a few examples of Scorpio Per-Application Settings which were previously unreleased. The lack of per application mappings have long been an issue in shared hosting, so that might also help the drive towards wider adoption at a lower price point. A month ago Ben Forta mentioned Scorpio’s Ajax Data Grids using the <cfgrid> tag. These grids can now bind to a cfc to obtain their data and be loaded via ajax — all by just using the tag! This also offers sorting and paging of course, making it similar to the flash forms version of cfgrid. Lastly he mentioned how you can now include autosuggest for the <cfinput> tag. Basically you can pass in a list of items to feed the list or bind it to a CFC. The end result looks something like this:

[cfm] name="fruit"
autosuggest="apple,banana,lemon,lime,mango,orange,peach,pear" />
name="fruit"
autosuggest="cfc:fruit.getFruit({cfautosuggestvalue})" />[/cfm]

The first example limits what can be suggested to the list of items, while the second goes out and fetches a list from a cfc when the input changes. I’m sure more in depth examples are coming that will expand on this feature, but as it stands now it’s easy enough to implement. This does mean creating a cfc in your model for this, but what if that can be delegated to a framework like with Ruby On Rails? Here’s an autocomplete example in Rails from Slash7.com.
# view

<%= text_field_with_auto_complete :contact, :name %>

# controller

auto_complete_for :contact, :name

The text_field_with_auto_complete has two arguments, one for the model (contract) and one for the method/column you’re wanting (name). In this case Rails does the rest of the work for creating a method that controller. This would hit a page like http://localhost/contact/auto_complete_for_contact&name=enteredText (not sure if that’s it exactly, but you get the idea). Rails uses that auto_complete_for :contact, :name line to create the “auto_complete_for_contact” method which can be overridden should you want to handle the autocomplete in your own way. Something like this could easily be built on top of the new ajax form helpers provided in CF8, without even having to write the underlying Javascript integration.

Sean Corfield also mentioned his Scorpio talk at CF Objective on Ajax Integration. There are still 3 CF.Objective() Scorpio sessions which are so far unreleased.

I’ve long favored Ajax, so I’m impressed to see the integration they’ve completed so far. I look forward to seeing what the rest of the world thinks of all these features as well, assuming they look past the title of the posts.

Make AJAX Easy with Model-Glue – Joe Rinehart

Notes from Joe Rinehart’s talk on Ajax and Model Glue at Frameworks 2007.

Ajax in this context is using an out of bound information in javascript allowing multiple page requests within a single page. Joe’s going over some ajax basics and how it’s changed our html workflow. We no longer get an entire request back, now we just update accordingly on success/failure based on the response. This can be validation response or just something that signifies that it worked.

Two types of Ajax – Structured and Unstructured. Unstructured Ajax doesn’t return any structured data. It’s just returning already rendered html which is replaced in the calling javascript. It’s the easiest to implement, and the javascript as well as a cf which generates the html are straightforward. Doesn’t require any major changes in architecture — no service layer, model, xml/json rendering engine is required. This approach isn’t the most flexible though. The receiving page can typically only do one thing with the result, which doesn’t allow for much functionality.

Structured ajax doesn’t automatically replace screen regions with request responses. Instead it has structured data; maybe xml, json, or delimited lists. This is pure data coming back from the server, allowing the structured ajax to work well with existing service tiers. It’s more difficult to implement structured ajax and requires javascript and dom scripting knowledge. This makes dealing with multiple browsers more difficult. There’s also no standard mechanism for structured data – xml, soap, json and now spry are all common.

Creating ajax calls depends on which browser you’re using. You might use ActiveXObject in IE or XMLHTTPRequest in Firefox. This is repetitive code that’s usually in the javascript framework. Joe will be talking about Prototype and Scriptaculous using unstructured ajax.

Prototype hides the implementation of XMLHttpRequest making ajax requests cross browser. It does have a structured Ajax features, but it’s custom to prototype and relies on a special HTTP header indicating a Json response. Script.aculo.us is the UI and effects library built on Prototype. Model-Glue will be used along with the Generic methods.

Model-Glue can return just plain javascript wrapped in a <script/> tag containing all javascript you want to return.

In this presentation Joe’s going over a basic todo list where users can add, edit and delete tasks as well as mark them as completed. You can view uncompleted tasks or all tasks. For this presentation Joe’s going to go over deleting a single task. Adding a Model Glue event of task.delete.ajax and using a ModelGlue.GenericDelete message, Joe added an ajax version of the delete. This will not return anything or show anything to the user. This can be called in a browser and it’ll delete the record you include in the url that matches your GenericDelete method. After including the required js files, an onclick method can be added to the onclick method of the delete link. Instead of a link to a page that will delete the task, joes changed it to call a deleteTask() function. Here’s the deleteTask() function.

function deleteTask(taskID) {
  new Ajax.Request("index.cfm?event=task.delete.ajax&taskID = " + taskID);
  new Effect.Fade("taskRow"+taskID);
}

Next step is to create an ajaxified way of adding new tasks. Start off by adding a template row to the html containing the form. It doesn’t have to have a submit, just a button whose action will be mapped in javascript with an onclick(). The modelglue xml addition to this has both a GenericCommit which will add the values filled out and the GenericList. Instead of getting back just the row that’s added, it gets back everything all tasks. Now the entire list will be updated each time something is added.

function addTask() {
 new Ajax.Update("listOfTasks","index.cfm?event=task.commit.ajax&name=" + $('newTaskName').value);
}

Last example will be returning xml and using it in Spry. Start off with a task.list.xml which gets the same GenericList of tasks. Instead of the view being an html page, the view will be a file that transforms the query to XML. Creating a custom dspAsXML.cfm page which converts it based on the column names. This could be expanded to convert arrays, structures or beans to XML data to be remixed by spry or elsewhere. There’s also a custom tag available, cfjson, which converts an object to json.

Prototype, That other library that everyone uses

It seems I’ve been reading mostly about jQuery lately in an attempt to make the jump, but Prototype seems to be in the headlines lately. Prototype has been in a bit of a dark age it seems. In the past year the only change I’ve heard about is the addition of the class selector, $$(). That’s not to say other changes haven’t been committed in the trek from 1.4 to 1.5, which was committed earlier this week, but there hasn’t been a great deal of knowledge from the source on the changes. That’s one of the biggest draws of the jQuery community — open communication coupled with a thriving community that spreads the word overnight. That’s not something that can change with the Prototype community with a single site, but it at least it should motivate the core audience. The site was started by Sam Stephenson (the father of prototype) and Justin Palmer of Encytemedia. It is the new official Prototype site, and should serve as a jumping off point until Palmers Pragmatic Programmers book is released.