Objective Action - AJAX

Using Ext JS 2.2 Ajax in CF - Part 4 - Color Picker and Date Picker Controls.

Fri, 26 Dec 2008 16:18:00+0100

One of the big reasons for using Ext JS with ColdFusion is the ability to use the widgets to improve the user interface we present to our users. Ext JS comes aith a Date picker and a Color Picker and the ColdExt tags demo has both tantalising us in its demo pages. Unfortunately the ColdExt demos don't really show us how to use them in a real application. In the most simple case we might want a form to show one of these controls and for the user to be able to submit the form with the chosen date or color value. Lets take a look at the example code for the color palette:





  
   
	Color Palette  
	  
....

Unfortnately this code does not show how we can use the code in a form. All the Ext JS controls are based on an event model. When we add a control to page with the ColdExt tags it won't do anything unless we add some Javascript to react to the events that happen to the control. A quick look at the Ext JS 2.2 API reveals that there are a number of events that we can create listeners for. The one that looked most interesting for me wass the select event which fires when a color is selected and passes the control and the selected color as parameters. To make use of this we can create another control to save the value which can then be submitted by the form. In this simple case I have created an Ext textField control to save the selected value. I populate it with the color value when the user clicks on a color in the palette. So here is my new example code whit a listener, which looks for the 'select' event and updates the textField in the code below:






	Color Palette
	
		
			function(control,value){
				Ext.getCmp("color").setValue(value);
			}
		
	

	

....

A similar piece of code can be used for the date picker:



	Date Picker
	
		
			function(control,value){
				Ext.getCmp("date").setValue(value);
			}

Of course, in a real example, the textField would be most likely to be inside a form tag and would not then require the renderTo attribute. I hope this has been useful to you. If so please leave a note in the comments.

Using Ext JS 2.2 Ajax in CF - Part 3 - Adding new rows to the grid.

Wed, 24 Dec 2008 16:49:00+0100

Welcome to my third visit into the world of Ext JS and the ColdExt tag library. To put this post in context I have included a picture of my final grid control at the top of the page. When I began trying to use the Ext Grid Control to edit records, one of the first problems I had to solve was how to add additional rows. I asked the question on the ColdExt forum but got no answer. Luckilly there were lots of people who had solved the problem on the Ext JS forums before me. It took me a while to translate the Ext JS solutions into one based on ColdExt, but here is what I came up with. Several of the Ext JS widgets make use of the Ext.Data.Store this is a general purpose way to store data on the client and can keep trach of changes in the background leaving the control to get on with the display and presentation of the data. The Store also provides ways to transfer the data to and from the server. One particular version of the store is JsonStore which provides a way to read and populate the store from Json data which is easy to create with ColdFusion. In the ColdExt examples Justin Carter has used a Json library by Jehiah Czebotar and Thomas Messier to create the Json which is used to load the store. In his notes Justin says this is "for compatibility". I know CF8 will create Json directly so I am not sure where the compatibility issue lies. It could be done to allow CF7 users to make use of the ColdExt tags or it could be because of some difference between the way CF8 creates Json and what is needed by the Ext Js widgets. Maybe someone who knows will comment. So the first set in using the Grid as an editor is to create a suitable data store. Here is my code for that:

The url parameter on the JsonStore tag links to my ColdFusion template that creates the Json data. I have created fields for each of the columns I display in the grid and I also created a couple of extra param tags which I use to keep track of which row is selcted and a list of the rows which have been deleted. The limit param is used to drive the paging toolbar which allows the user to page through a large dataset a few rows at a time without having to download all the rows to the client. So our goal is to create a new record and display it in the grid, where the user can update it with their own data. In order to do that all that is needed is to add the new record to the store. Ext JS will take care of the rest. To add a new record we need to first create a record template:



	// Create a record type to allow new ones to be created.
	var ObjectType = Ext.data.Record.create([
		{name: 'objecttypeid', type: 'number'},
		{name: 'groupid', type: 'number'},
		{name: 'visibilityid', type: 'number'},
		{name: 'managementid', type: 'number'},
		{name: 'title', type: 'string'},
		{name: 'description', type: 'string'},
		{name: 'allowmultiple', type: 'bool'},
		{name: 'groupmayown', type: 'bool'},
		{name: 'membermayown', type: 'bool'},
		{name: 'membermayedit', type: 'bool'}
		
	]);

When we have a tempate for a record we can create one:

	
	// Create a new empty record.
	var newRec = new ObjectType({
		objecttypeid: 0,
		groupid: #attributes.grou_select#,
		visibilityid: 5,
		managementid: 5,
		title: '',
		description: '',
		allowmultiple: true,
		groupmayown: false,
		membermayown: true,
		membermayedit: true
	});

Finally we add the record to the store:


	// Turn editing off and add the record.
	myGrid.stopEditing();
	myGrid.getStore().insert(0, newRec);
	myGrid.startEditing(0, 0);

In order to use the above code in a coldExt control we simply have to specify it as the handler for the button on the toolbar. We wrap the handler code in a pair of handler tags.

Finally we link the code to the button on the toolbar:

Well I hope that is some use to someone. Please let me know if it helps you.

Using Ext JS 2.2 Ajax in CF - Part 2 - Combo boxes in the grid.

Fri, 19 Dec 2008 10:07:00+0100

The real reason I started looking at Ext was my frustration with the Ext based grid control in ColdFusion 8. As I mentioned in the previous post, I have never had much sucess with the <cfgrid> tag. It seems to offer so much but deliver so little. When it comes down to the final page its always gone in favour of somthing much more clunky but which actually works. Flush with my sucess with combo boxes in an Ext form. I was convinced that I could move on to the real goal. The Ext Grid control. This seemed to offer everything I wanted. The examples showed all the needed features and with the support of the ColdExt tags I showed no fear. Well I was soon caught out by the same issue that got me earlier. How to make the combo box do what a select list does. The Ext grid has the same problem with combo boxes as regular forms. However I could not see how to make use of my earlier fix, the use of a hidden field. There were a number of postings on the Ext Forums, with various solutions, none of which appeared to work for me. I decided to pick a forum posting by nkohari and worry it until I got somewhere. At first it seemed completly incompatible with the ColdExt tags, so I began with using the Javascript and not using any ColdExt tags. What was missing from that posting took a little time to discover.


var store = new Ext.data.SimpleStore({
  fields: [ "value", "text" ],
  data: [
    [ "value1", "Option 1" ],
    [ "value2", "Option 2" ],
    ...
  ]
});

var combo = new Ext.form.ComboBox({
  store: store,
  valueField: "value",
  displayField: "text",
  ...
});

Its all in the ... that nkohari adds to the parameters. After a little worrying and changing things I had a working drop down but it was trying to get somthing remotely when all the data was local. Further investigation revealed that the ColdExt tags add mode: "local" where the ... is in the combo definition. Added that and it all worked! When I looked at the final code I began to realise that there was a way to make most of it work using ColdExt tags. The main issue is that the renderer has to have a combo box passed to it as a parameter so you have to define your combo boxes before you build the grid rather than inside the grid as normal. So my final solution uses the script from nkohari to build the renderer and the rest is done with ColdExt:



	
	
		Ext.namespace("Ext.ux");
		Ext.ux.comboBoxRenderer = function(combo) {
		  return function(value) {
		    var idx = combo.store.find(combo.valueField, value);
		    var rec = combo.store.getAt(idx);
		    return rec.get(combo.displayField);
		  };
		}
	
	
	
		#qManagement.mana_title#

Inside the grid we simply use the predefined combo box and our renderer.

I hope that helps someone else use the Ext Grid without the hassle I had. Please let me know if it helps you.

Using Ext JS 2.2 Ajax in CF - Part 1 - Coldext plus Combo box Id and Value

Wed, 17 Dec 2008 13:21:00+0100

Over the last couple of weeks I have been playing with a new Ajax library. New? Well its been around a while but it is new to me. The reason for my interest was the frustration I had with using the grid in ColdFusion. The cfgrid tag is very appealing but every time I tried to use it, something I needed did not work quite well enough or quite the way I wanted in order to make it suitable for the application. It has always been very frustrating. The latest CF8 implementation is no better. I realised that the thing I was working on would be best done with some kind of grid. I started with a cfgrid tag and soon realised that my idea would not quite work. Then I remembered that the latest CF8 HTML grid uses Ext 1.0 as its underlying engine. I took a quick look at the Ext web site and the grid demo. When I tried the samples I saw immediately that the latest version of Ext would do what I needed. Basicly I wanted to be able to easily page through a number of records and the examples had a way of adding a paging toolbar and a toolbar with icons for save and refresh and so on. The only problem for me was that my exiting application code was using some other ColdFusion features that were based on Ext. I realised that using two different versions of Ext together would impossible so I had to replace all the existing easy to use CF tab based stuff with Ext code which is based on Javascript. It was do-able but not vey nice. Luckily before I began the job I thought to check RIAforge and found that Justin Carter had created a series of CF custom tags to support the Ext 2.2 libary. Basicly each tag exacly mimics the JS call so that you can write a CF tag instead of the JS code. For me this made the conversion much easier. No need to reformat everything just change some of the tags to call Justin's tags and it worked! A big thank you to Justin for the tag library. Since then I have come across some issues with the way Ext JS things work and found work arounds. Some of them are not quite sraightforward, I decided to document my solutions so that anyone else who wants can avoid going through the hassle. So here is my first contribution....

Combo box Id and Value

At first sight the Ext JS combo box seems to be exacly like an HTML select. There is a dropdown list, you can choose somthing from the list and it gets displayed. Simple? Wrong! The combo box is actually a more complex control and although it can look a bit like a select it is actually a completely new beast to those who have grown up using HTML. In the default mode the combo box does one major thing that the select does not and that is it allows you to type a new thing into the box that is not just one of the items in the drop down. This is the key to the reson why it does not work like a select control. While the select control allows you to choose a value and returns the id associated with that value the combo can't quite do that. Because you can type somthing it has to return what is displayed. After all it might just be something not actually in the dropdown list. You can set the contol so that it does not allow typing by setting a parameter, (editable="false"), but that won't make the control return the id rather than the value. On the Ext Js web site there are some complex solutions offered with cuson renderers for the combo box, but somehow they don't feel easy to implement. What I decided to do was to create a hidden control and use that for the id. When someone updates the choice, a change event can be used to update the hidden contol. Here is an example written using the coldext tags.




	#qMarketing.sour_title#
	
	
				function(control,newValue,oldvalue){
			Ext.getCmp("naxg_marketing").setValue(newValue);
				}

I hope you find it useful. Please let me know if you do.

AJAX - A battle between Spry and CF8 built in facilities

Sun, 13 Jan 2008 10:06:00+0100

I have been working on a new project which requires AJAX functionality and unlike some projects have some more time available to try out alternate ideas. The result has been interesting, so I thought I would share it. There are a number of pieces of funcionality planned and in almost every case there has been a choice of using a CF function or a Spry equivalent and I have come down in favour of the Spry equivalent. [More]

Setting a Select Control from a spry dataset.

Wed, 21 Nov 2007 09:08:00+0100

I have been playing with Adobe's Spry AJAX framework and am most impressed by the Spry Dataset. It really gives Spry a big plus over some of the other frameworks since it makes handling data from databases much easier. One thing that I needed was missing, an easy way to set a select control based on the dataset. It wan't however very difficult to do that when I tried. To save you wading though the docs to find it here is how I managed it. [More]

New Books from Peachpit and new sitepoint Blog about CF

Fri, 19 Oct 2007 14:47:00+0100

I had a note yesterday from Jackie Hill of Peachpit with details of a some new books that they are releasing this month. Ben Forta's bestselling ColdFusion book has been updated for version 8, Adobe ColdFusion 8 Web Application Construction Kit, Volume 1: Getting Started. May well be of interest to my readers. I checked on Amazon and they also have Volume 2 and Volume 3 of the book affectionately known as CFWACK. I have posted links to all three volumes in the right hand menu bar. With so much new stuff in CF8, Ben has had to split the book into three volumes. The pricing is also interesting since Volume 1 is way less than the other two. Maybe Adobe are getting the point that there needs to be a better path into CF for beginners. On publicising CF. I see that Kay Smoljak is going to be blogging about ColdFusion at SitePoint. They regularly feature interesting articles about web site development and I often read with interest the articles on Javascript, AJAX, Search Engine Optimisation and CSS issues.

CFUnited - Advanced AJAX Development - Rakshith N

Sat, 30 Jun 2007 14:21:00+0100

I went to another CF8 session with Rakshith N who was covering some of the new AJAX features. CF8 now has an easy way to handle JSON. JSON is Javascript Object Notation and represents the data in Javascript. Based on array and object literals. It is less heavy than XML.


{ books:[
{isbn:'00230', title:'xyz'}
{isbn:'00231', title:'abc'}
}

CF8 has new functions to deal with JSON

SerializeJSON()
DeserializeJSON()
IsJSON()

When CF8 creates the JS data types, simple types remain as simple types, Arrays and Structs get converted to JS arrays and JS Structs. There are two different formats of Query, Row format and Column format.

AJAX Plumbing

Essentially when we use AJAX some area of the page will be updated by a call to the server from a Javascript program. There is some HTML markup for the area of the page we want to update. We can now define an AJAX region with a cfdiv tag. cfdiv uses the bind parameter to link to a cfc or cfm page that will be called to create the content for that area of the page.

OR

There are four types of bind

CFC
Javascript
URL
Plain

A new cfajaxproxy tag will create a JS proxy for a cfc method, allowing you to call the cfc from within javascript. A ColdFusion object in the client JS code can be used to get information from ColdFusion. For example you can use "ColdFusion.navigate" on a link to make it download a JSON object from the server. Other examples:


ColdFusion.Ajax.submitForm(fomnId, url, callBasckHandler, errorHandler, httpMethod, asynch)

ColdFusion.log.dump(message.component)

In addition there are now AJAX versions of the tree and grid controls which can replace the Java versions in earlier CF.

There are tags to do layout like the flash form layout tags.

FlexManiacs - Day 2 - Mike Sundermeyer and Tom Hobbs - Adobe Experience Design

Tue, 26 Jun 2007 14:06:00+0100

The XD Team is working with companies who want to push the envelope. Including RIAs and Mobile phone interfaces in Flash and Flex. Now working on new Flex components. Mike and Tom outlined a typical scenario involving the development of page wireframes, then graphic design, then code in Flex or HTML. They then showed a series of new techniques and thinking that would allow much better user interfaces to be developed. [More]

Scorpio News

Thu, 10 May 2007 18:21:00+0100

There were a few already known facts about the new version of ColdFusion, known as Scorpio. As the tour of user groups to promote the new version progresses we are beginning to see some interesting postings on various Blogs.

The first one I noticed was Dave Shuck's Blog which has a really comprehensive list of the new features.

Dave reports on the capability of the new <cfimage> tag which I personally asked for in CF6 and CF7 but was disappointed. I don't expect to be disappointed this time as the tag seems to do everything I want.

I was also concerned by the lack of an upgrade for the KTML edit facility in the new Adobe Dreamweaver Developer Toolbox extensions which have replaced the Interakt Tools, which we made good use of. I need not have worried as a better and easier solution has bee provided by the new RICHTEXT="true" attribute on the <cfinput> tag.

Two new tags have been designed to allow easier construction of portal type sites. <cfpod> and <cfwindow> can be used to create panels that can be resized and moved around. Dynamic menus are also supported by the <cfmenu> tag.

If you want to read a file <cfloop> will now loop over a file.

The small number of architecture gurus will be happy by the introduction of the <cfinterface> tag which allows ColdFusion to implement object oriented interfaces.

To pass arguments to tags argumentsCollection can be used in most cases avoiding some need to create strange logic when different numbers of parameters are present.

Integration with other Adobe products is a major benefit in the new version. Adobe Acrobat Connect users will be pleased to see that presentations can be created easily with the new <cfpresentation>, <cfpresenter> and <cfpresentationslide> tags, while <cfpdf> allows access to the metadata within a pdf file, merge pdf files, generate thumbnails, and encrypt pdfs.

The facilities with pdf files are also enhanced to allow forms to be completed offline and submitted to CF8 for processing by use of the <cfpdfform> tag.

As far as the cold fusion engine is concerned there is now much better support for performance tuning, with real time monitoring and the ability to take snapshots of the server at points when problems occur. Its also possible to run CF8 in a virtual machine under VMware.

On Ben Forta's Blog Ben has added more snippets with the news of support for JSON in AJAX. Two new functions, SerializeJSON() and DeserializeJSON() make it easy to convert data to and from JSON which is generally regarded as the best way to move data to and from AJAX applications. In addition, CFC methods can now return data serialized as JSON by specifying returnformat="json".

Ben also tells us about another new tag <cffeed> which can be used to read and create RSS or Atom syndication feeds.

Regular Expressions get two new function too with the introduction of REMatch() and REMatchNoCase().

There are new security features in Scorpio, giving increased control and flexibility in managing ColdFusion Administrator Access and RDS access.

In his blog, Ray Camden reveals that CF 8 has a function that checks for the existence of an array element. There is no longer a need to use try/catch if you have arrays that potentially have null elements.

He also notes that there are new ways to create arrays and structs and that AJAX is going to be supported through a number of tags. For example <cfajaxproxy> will handle all the JavaScript plumbing to let you invoke any CFC method from JavaScript, and support for refreshing AJAX grid controls.

You can also create a Spry dataset in CF8.

Some people are worried by the new features and think they might be on the way out. But personally the <cfexcahnge> tag looks like it will make it possible to move into new areas of functionality, and Ian Smith has identified 9 ways for CF8 to rule web development.

The ColdFusion Muse has identified that Scorpio will support the standard set of operators we are used to seeing from other languages like "++" and "!=". He also says that <cfajaxproxy> allows you to instantiate CFCs from the client. This exposes the functionality of your CFC in your JavaScript.

Among the other good CF8 snippets I found in the blogs were:

getComponentMetaData - lets you get metadata by passing a path of a CFC.
<cfstoredproc> now supports caching
query caching now works even when using cfqueryparam
<cfftp> now supports sftp
cfc serialization for session replication
Flash form restrictions removed.
Apache Derby, a 100% Java database, will be supported.

I can't wait.....

Spry Datasets + Free Beer + Adobe CS3.

Mon, 26 Mar 2007 09:58:00+0100

I have been using Adobe Spry for the last few weeks to present tables of data and alow the user to filter and sort the data on the page. I must admit I'm really impressed by how easy it is to add these features to a page. Unfortunately I can't give you a link for what I have done because it's for an intranet application. If you're interested, I will be speaking about it tomorrow eveing at the Thames Valley Cold Fusion User Group. The meeting will also be linking up with the Launch of Creative Suite 3 from New York and some lucky person will win a copy of CS3 in the raffle. You do have to come along to be entered in the raffle. Adobe have offered to pay for the Beer too! Please add a comment to the Blog if you are planning to come along. That way I'll know how much Beer to buy. What more could you ask for?

4:15pm Joe Rinehart - Make AJAX Easy with Model-Glue

Thu, 01 Feb 2007 21:28:00+0100

Joe gave a good Intro to Ajax Technology and began by pointing out that most people don't use XML to transfer data from server to client, but use JSON or HTML instead. The XMLHttpRequest object is used to make the request to the server. Many frameworks can be used to hide the complexity of these calls. Joe likes the Prototype framework which is very simple to use. A single call can say get this URL and stick the results in a div tag. For the example application he also used script.aculo.us, an extension to prototype, which provides some additional JS features. He demonstrated how to create an event handler that deletes a record,
Include the AJAX and JS frame works,
Fade the deleted row,
You should also give some clues to the user that AJAX is being used. Firebug was used to show the traffic between the Firefox browser and the server.