Cutter's Crossing - JQuery

Development Ties

Thu, 19 Feb 2009 08:53:00 -0400

On the last day of CFUnited 2005, a group of us were out on the patio having a final drink together. I got into a conversation with Clark Valberg about linguistics. I was a translator in latter half of my time in the military, and Clark was asking if I thought my experience with learning another language had helped me in learning to be a better developer? I absolutely agreed. I have an aptitude for languages, and always have. It's something I've picked up, and I can generally get to a point where I can effectively communicate (at least on the simplest of terms) within a very short time. Programming isn't much different, if you think about it. When I first got into computing again, after leaving the Army, I was teaching myself ten different programming languages at the same time. I had a lot of catching up to do, being out of the game for so long, so I picked up some books, found online resources, and took to the task of getting up to speed. Maybe that's why there are so many talented developers outside the US. In the US, we aren't required to learn another language out of necessity, whereas in most other countries of the world (not all, but most) it is very commonplace for people to speak two or more languages. You can kind of apply this in the reverse, to some degree, as well. Those who only learn one development platform may be limiting themselves. Knowing one programming language inside and out can be a good thing, but learning others can also open a developer to new ways of approaching a challenge. I've known many developers who knew a server-side language (ColdFusion, ASP, PHP, whatever), but never bothered to learn JavaScript, or how to write well formed XHTML. To me, that's limiting. Even crippling. What are your thoughts?

Upcoming Book: Learning ExtJS

Tue, 11 Nov 2008 17:16:00 -0400

I've been rather quiet for quite a while now. I have a rather large side project I've been working on, written entirely with an ExtJS front-end and ColdFusion on the back-end. I'm hoping to get that into a QA phase in the next week or two. I also just celebrated my 39^th birthday, my 8^th wedding anniversary, my daughter is the rock star of the 1^st grade (pulling straight A pluses in every category), and the holiday's are coming. On top of everything else, I'm putting the final touches on Learning Ext JS, to go to press at the end of the week/beginning of next, and due out in December. I've stayed relatively quiet on this, as I wanted to wait until PackT, my publisher, officially released information on the book. Let me start by saying that a few years ago I never would have thought I'd be doing this much client-side development again. And I definitely wouldn't have imagined me contributing to a book about client-side development. I began looking at ExtJS quite a while back, while contemplating how to "jazz up" and modernize some dated interfaces I was supporting. I thought that ExtJS was an exceptionally well thought out library of rich, consistant components and functionality. While I use JQuery almost exclusively for DOM queries and manipulation, I really didn't find enough consistency in the visual plugins at the time (this has improved with the latest round of the JQuery UI plugins). I began to learn of the real power of ExtJS, and became an even bigger fan when it was announced that Adobe was including it in Scorpio, the codename for ColdFusion 8, Adobe's first implementation of the ColdFusion web application platform since it's acquisition with the Macromedia merger. Sweet! A total win-win for me. Back in June, PackT contacted me. It seems they had started to develop a book, but the primary author, Shea Frederick, had gotten bogged down in other commitments before being able to complete the project. Some Googling on their part led them to Colin Ramsay and myself, through Cutter's Crossing. So they contacted me to find out if I was interested. The timing on this was awful. I was just starting the previously mentioned side project, my daughter was on her very first summer vacation, and just a lot of things going on. But it was too good to pass up. Aside from the fame and glory (yeah, right!), I knew that there weren't any other books out there on ExtJS, and it would be an excellent book to get out there for all the people trying to learn this exciting library. After talking the pros and cons with Aaron West, and getting sign off from my family, I finally contacted the Jedi himself, Ray Camden, to get some info on the writing process. We talked about time (a lot), commitment (more), and fame (maybe a little) and fortune (nearly none). I finally went ahead and said I would do it. So, here it is almost six months later. I took on the final three chapters of the book: working with data stores (think like browser cached data table sets), extending Ext objects to build your own custom components, and the book wrap-up, which covers all the little stuff many people miss because they aren't typically visible. Only one chapter has any server-side code (the data stores). PackT originally wanted to convert my ColdFusion examples to PHP, to conform with the rest of the book. This morning the publisher told me that they want to keep my ColdFusion examples, to show that the ExtJS library can work with any server-side technology. So, they're taking pre-order now, just in time for the holidays. Let me know what you think.

A Small Bug In AIR?

Fri, 04 Apr 2008 11:23:00 -0400

Well, maybe. One of my co-workers, Andy Matthews, has been working on a small app, integrating BlazeDS with ColdFusion to push messages to an HTML/AJAX based AIR application. He and I spent several days configuring the server integration and piecing out the ins-and-outs of how the messaging works (big thanks to Andy Powell on this too). Andy (Matthews), coming from a design background, created this beautiful chromeless HTML interface, with a little JQuery magic thrown in to work with the bridge. That's where this possible bug reared it's ugly head. The question is whether the bug is in AIR, or within the Flex/AJAX Bridge itself. Basically, if you've defined your transparency setting to true, within your App.xml file, then the load() method of the bridge will not call the function reference. Andy has submitted the bug to Adobe. He also dropped Christian Cantrell and Ben Forta (hey, it's who he knows...) the following email about the issue:

Christian/Ben... I believe that I've discovered a bug in AIR and I'm not sure who else to send this to. I've been working on an HTML/JS based AIR application for my company using BlazeDS. I'd finally gotten everything working in a test environment when I went to port the working code into my already working transparent, custom chrome AIR app. Then it stopped working. After debugging, I found the reason, or at least part of it. It appears that an AIR app which uses the FDMSBridge.swf provided by Adobe WILL NOT work when the app has transparency. In my sample app ----------------- 1) I opened my sample code (without transparency), and compiled it. 2) I pushed a message to the gateway and the message was successfully received in the app. 3) I then changed the transparency setting in the App.xml file from false to true and recompiled the app. 4) I pushed another message to the gateway and received nothing. In the final app --------------------------------------------- 1) Transparency was already set to true, so I compiled the app 2) I pushed a message to the gateway, and received nothing. 3) I then changed transparency to false, recompiled the app 4) Pushed a message and successfully received it. Further, when the app first loads, it correctly displays the alert window when transparency is set to false, but not when it's set to true. ------------------------ Here's a small code sample:


FDMSLibrary.load("FDMSBridge.swf", initBlazeDSCode);
 
function initBlazeDSCode() {
 alert('why me');
 var cs = new ChannelSet();
 cs.addChannel(new AMFChannel("cf-polling-amf","http://domainname.com/flex2gateway/cfamfpolling"));
 consumer = new Consumer();
 consumer.setDestination("ColdFusionGateway");
 consumer.addEventListener("message", messageHandler);
 consumer.setChannelSet(cs);
 consumer.subscribe();
}
 
function messageHandler(e) {
 alert('got a message! I GOT A MESSAGE!');
}

The Year In Review

Tue, 01 Jan 2008 13:29:00 -0400

2007, The Year Of The Scorpio, was a fantastic year to be a ColdFusion developer. The release of ColdFusion 8 marked a new age in web application development, with so many new features and enhancements that should see some truly outstanding next generation applications in the years to come. As a community, the CF crowd has really been flourishing, with new releases in several major frameworks, the introduction of the RIAForge open source repository for Adobe related technologies, widely publicized adjunct technologies like Flex 3 and AIR approaching final release (spawning a new conference in 2008, showcasing all three technologies together), and the premier of our own developer's social networking site, ColdFusion Community. We saw the loss of the CFDJ albatross, while the Fusion Authority Quarterly, introduced at CFUnited 2006, has truly come out as an excellent ColdFusion developer's resource. And we can't forget our very own, ColdFusion specific, blog aggregator, ColdFusion Bloggers, introducing us to so many other great developers willing to share their knowledge and experiences, like the creative, and very colorful, examples provided by Ben Nadel. I've always felt that a day without learning is a day that your dead from the neck up.I spent quite a bit of time this year learning new things, and sharing most. I've been slowly picking up Flex, put a little research into AIR, adopted JQuery heavily, run series of posts on developing on Apache and utilizing the outstanding components of the ExtJS library (the most trafficed posts on this blog). I tried to share some of the things I had learned about the new functionality of ColdFusion 8, started posting some General Coding Guidelines I've been writing for our company, and even got some first hand experience looking at the Current ColdFusion Job Market. I look forward to sharing more in the year to come. I always look for, and appreciate, all of the feedback you readers send my way. I think the future for ColdFusion is extremely bright, and I can't wait to see what 2008 holds for us all.

My First ExtJS DataGrid Pt 7: Custom Cell Renderers

Wed, 22 Aug 2007 09:07:00 -0400

So, it's been awhile. No, I haven't forgotten you, I've just been busy with a lot of things. One of which has been implementing a new ExtJS DataGrid in a project I'm working on. Sure, there's a lot more going on, but that's becoming a nice front end piece. As previously promised, I want to look at a renderer. [More]

ExtJS Nested Tab Set with Demo

Fri, 15 Jun 2007 18:22:00 -0400

Ok, following up on my last entry, here is the same nested tab set done with the ExtJS UI Library. I went the the "Build Your Own" section within "Downloads" and built a script for JQuery with the ExtJS Core and the TabPanel. I also downloaded the whole library so that I had all of the example scripts, css, and images. After this I included the following files in my document header (notice the pathing changes): [More]

Updated JQuery Nested Tab Set with Demo

Fri, 15 Jun 2007 14:00:00 -0400

Ok, there have been some changes, but I'll try to keep it easy, with an example, and there will be an included .zip file. First, you'll need the latest JQuery build, as well as the latest version of the Tabs Plugin. Pay attention to the pathing I have created in my code snippets here. [More]

The ColdFusion 8 AJAX Components Debate

Tue, 05 Jun 2007 23:51:00 -0400

A debate rages on across the ColdFusion development community about the inclusion, and use, of the AJAX driven components and accompanying tags that have been included in the Beta Release of ColdFusion 8. Many examples of their use and benefit have already been posted by the likes of Ray Camden, Ben Nadel, and Ben Forta. No surprise there, as they all are huge proponents of the product, and, like so many of us, are very excited about the upcoming release of our favorite web programming platform. But there are others still that think that the inclusion of these tags and components don't necessarily belong in the core language set of CFML. Many of these folks are also diehard JavaScripters, who took up writing AJAX early in it's infancy, fashioned their own components, or even contribute to open source libraries like JQuery. They argue that maybe the tags should have been separate CFCs available through the Adobe Developer's Exchange, or that the JavaScript rendered by the ColdFusion engine is too fat, taking up unnecessary bandwidth. Can't we all just get along? [More]

My First ExtJS DataGrid Pt 6: The Grid

Sat, 26 May 2007 20:52:00 -0400

Alright, rolling right along. Last tutorial (see the bottom of this post for a complete listing) we covered the initial setup of our ColumnModel, which is telling our DataGrid what the basic layout of our grid columns will be and to which fields of our DataStore each column will be mapped to. Now it's time to actually instantiate our grid. So, the first thing we have to do is create our Grid object and tell it which html element will be our grid within our page. Basically we'll tell the function the ID of the div element, what DataStore object to use, and which ColumnModel object to use.


// create the editor grid
var grid = new Ext.grid.Grid('topic-grid', {
    ds: ds,
    cm: cm
    });

This is it in it's most basic form. We're going to stay away from any fancy stuff for now, and get to selection models and stuff in a later post. Let's add to it a little bit by stating that the grid may be resizable.


// make the grid resizable, do before render for better performance
var rz = new Ext.Resizable('topic-grid', {
	wrap:true,
	minHeight:100,
	pinned:true,
	handles: 's'
});
rz.on('resize', grid.autoSize, grid);

That will make the grid resizable, and should be declared prior to rendering the grid. Rendering the grid is our next step, and way simple.


// render it
grid.render();

Can't get much easier than that. Going back to the resizable for a second, don't ask, I don't know. Easiest one for me to figure on sight is the minHeight attribute, but I haven't reviewed the API enough to know what all is going on. If you figure it out before I do then leave a comment. Next we'll need to add the paging tool bar to the footer. We'll get the footer, then add the paging toolbar.


var gridFoot = grid.getView().getFooterPanel(true);

// add a paging toolbar to the grid's footer
var paging = new Ext.PagingToolbar(gridFoot, ds, {
    pageSize: 25,
    displayInfo: true,
    displayMsg: 'Displaying users {0} - {1} of {2}',
    emptyMsg: "No users to display"
});

Notice the arguments of the PagingToolbar() function, the footer object, the DataStore object, and a JSON object with attributes of the pageSize (number of records), whether to display data set info, the message of the count, and a message to display should no records be returned. The final step here is to load the DataStore. Once this is done you will have a complete, basic DataGrid for display.


// trigger the data store load
ds.load({params:{start: 0, limit: 25}});

Notice here the 'params'. These are name/value pairs that are passed, via post, whenever you request the next page of your data, with these values being your initial request (starting at row 0, returning 25 records). If you go back and look at your pagingService.cfm (included in the download) you'll see where these values are used. So, that's the end of this post. You now have a basic DataGrid. In our next tutorial we'll start to style some things, and show you how to implement a custom 'renderer' for a specific column's data.

My First ExtJS DataGrid Pt 5: The ColumnModel

Tue, 08 May 2007 22:32:00 -0400

OK, we're winding down to the end of this tutorial, with only a few key components left. Today we cover the ColumnModel, which is how we manage the initial layout of our ExtJS DataGrid. We've already covered initial setup, our paging query, and defined out DataStore (see related entry links at the bottom of the post). First things first, let's instantiate the ColumnModel


var cm = new Ext.grid.ColumnModel([{
	// cm is our ColumnModel object

}]);

Next we'll define the layout of the first column in our grid


var cm = new Ext.grid.ColumnModel([{
	id: 'fname',
	header: "First Name",
	dataIndex: 'vcFirstName',
	width: 120
    }
}]);

Alright, pretty basic stuff here. We've placed an 'id' on this column. This allows you to later reference the column specifically for styling. We didn't really mark this one for a particular reason, we just did it to explain. Next we have the 'header', which is the text that appears in your column header at the top of your DataGrid. This is then followed by the 'dataIndex' to define the data column it is mapped to within your DataStore. Lastly we have the 'width' attribute, which speaks for itself. There are several other possible attributes that are available to you here, most of which are fairly easy to grab from the ExtJS API. We'll cover a few more in our next tutorial, but for now we'll just complete the layout of the ColumnModel.


var cm = new Ext.grid.ColumnModel([{
	id: 'fname',
	header: "First Name",
	dataIndex: 'vcFirstName',
	width: 120
    },{
	header: "Last Name",
	dataIndex: 'vcLastName',
	width: 120
	},{
	header: "Is Admin",
	dataIndex: 'bIsAdministrator',
	width: 40
	},{
	header: "Is Active",
	dataIndex: 'bIsActive',
	width: 40
	},{
	id: 'last',
	header: "Last Login",
	dataIndex: 'tsDateLastLogin',
	width: 150
}]);
// by default columns are sortable

cm.defaultSortable = true;

The order you work in will be reflected in your final initial layout. Each column definition is contained in curly braces, separated by commas. Each attribute is also comma delimited, with the attribute name being un-quoted, while their values are quoted if string values and not if numeric. Also notice the double quotes around the 'header' values, but the single quotes around the others. I don't know if this is intentional, and haven't really tested it, but this is the way it was in all of the example files so I thought it best to stick with the convention. The last thing we did here was set a directive on the ColumnModel to state the the columns will be sortable by default. Alright, now you have defined your ColumnModel. A few steps left to go just yet, like the grid itself, custom renderers, styles, and other things to give it a little more cowbell. We'll begin wrapping those up in our next edition. For those coming to the Nashville CFUG Scorpio Tour presentation tomorrow night I hope you'll flag me down and say high.

My First ExtJS DataGrid Pt 3: A Paging Query

Sun, 29 Apr 2007 20:15:00 -0400

OK, we're cooking with crisco now. You've probably taken a little time to look through the examples a little bit by now, and you've seen a little of what the paging grid looks like and can do, along with the many other examples. Our last tutorial covered setting things up, but before we dive into the JavaScript we'll need some data. Now, the paging example that's included with the Ext download calls an external PHP page to retrieve the necessary JSON dataset. JSON is great, being small and lightweight, but I'm working with MS SQL at work, which can return XML data. Since the library has built in proxies for dealing with either, I change it up to take in the XML. Each database has different ways of writing a 'paging' query. MySQL makes it really easy by providing multiple arguments for the LIMIT statement. MS SQL makes it a little harder. See, the trick is to only pull in the records, on each db call, that you actually need. Some people pull the entire recordset and then use a query-of-query to poll their required data, but if you're dealing with very large datasets then it makes more sense to only pull what your need when the time comes. I found a great article on MSDN (which I can no longer find) that gives a good suggestion on how to approach this, by using multiple sub select statements. But, the first thing we'll do is define some default parameters for those that will eventually be passed in on the AJAX calls.

First thing you probably noticed is that I have a FORM scoped variable that matches every URL scoped variable, defaulting the URL var first then defaulting the FORM var to the URL var's value. What this allows me to do is testing. I can call the page without any additional info and it will properly run, since I have defaulted all values, and I can tag on query string variables for initial output testing, or tap it directly from a form post. These variables are pretty basic: 'start' is the starting record row, 'limit' is the number of records to be returned, 'dir' is the sort order, and 'sort' is the column to sort on. After this we move to the query itself.


	SELECT	(SELECT COUNT(ID) AS recCount FROM tblUsers) AS recCount,
			ID,
			vcFirstName,
			vcLastName,
			bIsAdministrator,
			bIsActive,
			tsDateLastLogin
	FROM  ( SELECT TOP #FORM.limit# ID,
					vcFirstName,
					vcLastName,
					bIsAdministrator,
					bIsActive,
					tsDateLastLogin
			FROM   (SELECT TOP #FORM.start + FORM.limit# ID,
							vcFirstName,
							vcLastName,
							bIsAdministrator,
							bIsActive,
							tsDateLastLogin
	    			FROM (SELECT TOP #FORM.start + FORM.limit# ID,
								vcFirstName,
								vcLastName,
								bIsAdministrator,
								bIsActive,
								tsDateLastLogin
						FROM tblUsers AS T1
						WHERE tsDateLastLogin IS NOT NULL
	         			ORDER BY #FORM.sort# ) AS T2
	         		WHERE tsDateLastLogin IS NOT NULL
					ORDER BY #FORM.sort# DESC ) AS T3
			WHERE tsDateLastLogin IS NOT NULL) AS T4
	WHERE tsDateLastLogin IS NOT NULL
	ORDER BY #FORM.sort# #FORM.dir#
	FOR		XML AUTO, ELEMENTS

Notice a few things here. I only call the columns that I need. The two inner most sub selects use the TOP functionality to retrieve the 'start' row number plus the 'limit', so if you 'limit' yourself to 25 records and you are now calling page 3 (which would start with row 50) then you would say in these statements 'retrieve the TOP 50+25 rows', with the first sub-select then only asking for the 'limit' of the TOP 25. This gives you the TOP 25 rows of 50+25. You also see that a COUNT was added to the first select. Although this number appears in each record as 'recCount', it also gives you the total number of records that could be returned, thereby giving us the ability to say 'these are rows 50 thru 75 out of 38,543 records.' If you cfdump the query return you will see multiple query rows returned, but nothing like you might expect. We now have to convert the returned query into a properly formated XML string. For this I use a function that Andrew Powell showed us in a Spry presentation that he did for the Nashville ColdFusion User Group. This was something that one of his compadres at Universal Mind wrote, and that I've adjusted slightly here.



	
	
	
		var x = "";
		var y = "";
		var retXML = "";
		x = listFirst(ARGUMENTS.qry.columnList);
		for (y=1;y lte ARGUMENTS.qry.recordCount;y=y+1){
			retXML = retXML & ARGUMENTS.qry[x][y];
		}
		retXML = "<" & ARGUMENTS.doc & ">" & retXML & "";

Basically this will take your MS SQL query output and format it into a proper XML document, with the ability for you to also define the 'root' element (doc). I keep this function in a utility library so that I can call it at anytime. I then take the return of this and output it between some cfcontent tags with a type of 'text/xml' to get a dynamic xml doc to be consumed by these AJAX calls.


#sqlXMLtoCFXML(VARIABLES.qryReturned)#

The Ext library makes the call to the pages via a form post, then inspects the XML return to map fields to their assigned grid columns. But, that's another lesson. This wraps it up for today. Tune in next time (same Bat-time, same Bat-channel) for our next installment: Defining the DataStore. ~~P.S. Sample files will be added to this post sometime tomorrow.~~ The sample files are now included in the download area below. Let me know if you have any questions, comments, or war stories.

My First ExtJS DataGrid Pt 2: Setting Up

Wed, 25 Apr 2007 14:23:00 -0400

So, off we go. First things first, you'll need the JQuery and ExtJS libraries. I also found out (the hard way, since it's not in the install notes) that you'll need the Dimensions JQuery Plugin. The full ExtJS download contains the project core files, JS library 'adapter' files, all of the Ext components, examples, documentation, and a 'resource' directory of images and stylesheets to help you get started. I start off by placing the necessary script tags in the header of my document. Order of placement is important.

Now, for reference, you don't need the 'all' ext library for this to work, but I'm just doing personal testing right now and figured that it's easier than breaking things out at this point. The 'all' library is the complete component collection, core, and utilities within one script file. While nice to have it all, it is large, and you can use just the components you need. The 'Build your own Ext' section of the ExtJS site can show you all of the necessary dependencies to put together only what you need. I'm going to copy the paging.js file out of the ExtJS example directory and place it in the root of my js directory. I'm going to adjust this existing file to create my first paging grid. I know that this works, so I might as well not re-write the wheel. You'll also noticed that I used the included stylesheet file from the resources directory. Now, with all of this in place, all I need is my container div that will hold my DataGride. In the body of my document I place the following container code:

And that's the end of the initial setup. In part 3 I'll cover creating a paging sql page that will only call the records needed for each 'view' in our paging grid, returning the records in an XML format to be consumed by our grid. Until then, take a good look at the 'examples' directory in your ExtJS download, as well as the API and Examples section of Learn area of the ExtJS site. Also, included in the download below you will find the complete document we created today.

My First ExtJS DataGrid Pt 1

Tue, 24 Apr 2007 22:41:00 -0400

I can write my own code. I can take a process, define a proper algorithm for addressing an issue, and tap it out. In fact I enjoy the art of writing code, it's kinda like working on puzzles day in and day out, and I like a good puzzle. On the other hand I think it's also smart not to re-invent the wheel. Many minds have dealt with the same problems that I encounter every day, and someone has probably found a solution by now. Why fight that? [More]

Nested Tab Sets with JQuery and the Tabs Plugin

Fri, 16 Mar 2007 14:28:00 -0400

OK, I'm working on a small side project with a three column layout. In one column I want to place two multi-step forms. So I decide it would be good to use nested tab sets. From a usability perspective it makes sense, with so many operating system and program dialogs functioning the same way. From a design standpoint it makes sense, because it takes up little space and groups similar content. [More]