ColdFusion RIA - Web Development

Playing with jQuery UI : Part 1

Mon, 31 Aug 2009 13:25:00 -0400

I downloaded the jQuery UI library a few weeks back (should have done it earlier too). I started playing around with it, but work has been so busy did not get much time to look at it. Finally, found some time to do a basic tabs, accordians, sliders, progress bar demo. Its very basic, good start to learing how some of the things work.

View Demo

The progress bar demo is probably the most complex one, so code for it follows. [More]

jqGrid 3.5 with jQuery UI ThemeRoller Themes Demos

Sun, 02 Aug 2009 14:54:00 -0400

jqGrid 3.5 was released yesterday. It includes lots of good features, including a new rendering engine for faster loading. It also now supports jQuery UI ThemeRoller themes, so to start off itself you have access to variety of styles and can create your own easily too.

So I went ahead and created a demo that shows the grid in all these themes.
View Demo

How I did this style selection switch, follows

[More]

ColdFusion 9 cfgrid with ORM: Part 2 - Full CRUD Grid

Thu, 30 Jul 2009 14:35:00 -0400

Previously I blogged on getting a normal cfgrid running with ColdFusion. This post will look at expanding that to a full CRUD grid using ORM.

In addition to ColdFusion, I am also using jQuery and jqModalspecifically to display the modal boxes. Main reason being that I was itching to do some jQuery stuff.

Code follows. [More]

Quick Tip : When Working with jQuery and jqModal

Sun, 26 Jul 2009 19:26:00 -0400

This has stumped me twice, so best thought to make a blog post, for my own records and also for anybody who gets stuck at the same place.

Over the weekend, I have been working with jQuery and specifically jqModal for a full fledged CRUD Grid using ORM. For some of the alerts/forms I was using jqModal to show them. Everything worked fine on Firefox, but IE8 had issues. After an hour or so of searching, I realized that I had faced a similar issue when working with jqModal on IE before.

The problem is that since I do not wirte a lot of HTML in my day to day coding, I generally omit the DOCTYPE sepcification from my pages. This causes interesting issues on IE. So, the solution was to specify the DOCTYPE and everything was working smoothly in IE too. My DOCTYPE specification that solved these issues was:

See the difference:
DOCTYPE NOT Present
DOCTYPE Present

Adding Ext JS Buttons to ColdFusion 9 cfgrid Paging Toolbar

Fri, 24 Jul 2009 13:17:00 -0400

Just a quick post about how to go about adding custom buttons to the cfgrid's paging toolbar. I believe this has changed from Ext 1.1 (which ColdFusion 8 implements) to Ext 3.0 (which ColdFusion 9 implements).

You can see the normal cfgrid here. It comes with no buttons, and it as such with a grid implementation it would suit us if we could show add/edit/delete buttons.

So, you can get your pretty icons and add some nice buttons to the grid allowing users to perform operations. I have one up with an add button.

Code follows

[More]

ColdFusion 9 cfgrid with ORM: Part 1

Tue, 21 Jul 2009 12:30:00 -0400

One of the exciting new feature in ColdFusion 9 is its ORM implementation. ORM in simplest terms allows us to access the database using objects, or in in even more simpler terms you don't have to write any queries for simple CRUD functions. To learn more about ColdFusion 9 ORM visit Adobe's ColdFusion 9 ORM Docs and Introducing ORM in ColdFusion 9 Beta.

This post will look at implementing a cfgrid using ORM. This will be first in a series starting from just implementing the grid to read data ending with a full fledged CRUD cfgrid with ORM.

[More]

ColdFusion 9 cffileupload Tag - Upload Multiple Files (Updated)

Mon, 20 Jul 2009 17:29:00 -0400

New Post Here It has been updated for ColdFusion 9 release, which fixed a bug that was present during Beta.

Implementing Ext JS Custom Paging Toolbars with ColdFusion 9 cfgrid

Mon, 20 Jul 2009 13:34:00 -0400

If you look at Ext JS examples for 3.0 release you will notice a lot of (New) stuff. The 3.0 release includes a bunch of new plugins to the normal Ext grid framework. A couple of these plugins deal with rendering a different type of paging bar.

Note: The demos/samples for ColdFusion 9 will be a bit slow to load due to them being hosted on a cheap VPS server (the best I could do).

Out of the box, the normal ColdFusion 9 cfgrid has the standard Ext JS paging bar. A demo of the ColdFusion 9 cfgrid can be viewed here: ColdFusion 9 CFGRID.

We will now replace the standard paging bar with a Sliding Pager and a Progress Bar Pager in this blog post.

[More]

Adding ExtJS Row Numbering to ColdFusion cfgrid

Thu, 16 Jul 2009 20:56:00 -0400

With the release of ExtJS 3.0 and the ColdFusion 9 beta I have been digging into the library more. One of the libraries for the grids that ExtJS Core offers is Numbering the grid rows on the current page. ColdFusion doesn't have that option, so I decided to implement it. It was quite simple actually.

Note: This was all done on ColdFusion 9 beta and Ext JS 3.0. ColdFusion 8 ships with ExtJS 1.1 and I am not sure whether the RowNumberer class was present in version 1.1 or not. Also, since we don't have a ColdFusion 9 beta host (or if there is one I haven't found it), you will have to do with screenshots.

So, here is how the grid looks (and this thing looks a lot better than the ColdFusion 8 grid)

[More]

ExtJS 3.0 Grid with ColdFusion 8/ColdFusion 9

Mon, 13 Jul 2009 11:14:00 -0400

With the recent release of ExtJS 3.0, I have been looking at the library again. I decided to do a simple Grid implementation using ExtJS. ExtJS is probably one of the best looking JS libraries out there out of the box and when implemented its extremely quick. The main issue as has been when integrading jQuery with ColdFusion was passing the JSON back in the proper format for the grid. Have a look at the Demo First Here. [More]

IE is still used by 70% of the internet users, Please Test your site on IE

Thu, 12 Feb 2009 11:47:00 -0400

I know as developers, most of us work with Firefox for development purposes. And that is fine, Firefox has great tools for web developers (Firebug being the main one) that eases our development pains, allows us to troubleshoot javascript easily and shows us our results of the Ajax calls. But, we all are still web developers, not Firefox developers. And 70% of the people who browse the web do use Internet Explorer, so if you have major functionality in your site that doesn't work on IE, its a bad thing. I am not talking about issues with the layout, or some CSS being interpreted differently, but things like Filtering search results, or Code download. I have been coming across such sites with increasing frequency. On top of that, if your site is about some awesome framework for web development (hint), better be sure it works on IE. When it doesn't, people who enounter the bugs will think, if the site itself doesn't work on IE, will the framework give me good results on IE? So, my plea to everybody who is making a website, test your functionality on Internet Explorer.

Using jQuery based jqGrid with ColdFusion: Part 4: Full CRUD grid with Custom Search Screen

Wed, 04 Feb 2009 21:37:00 -0400

So, previously I blogged about basic jqGrid implementations with Filter/Search and Inline Edit capabilities. The grid here now builds on all that, and implements Add and Delete functionality. I also changed the theme to the new steel theme (available in version 3.4 zip), its much more professional looking compared to the others in my opinion.

This implementation doesn't exactly follow the previous posts. For this grid I am using:

Inbuilt Form based Add, Edit and Delete functionality
Custom Built Search Dialog Screen
Custom Refresh Action
Use jqModal for the custom search dialog.

See The Demo. DB being changed realtime, any operations you perform will happen.

[More]

Using jQuery based jqGrid with ColdFusion: Part 3 : Inline Editing of Data Rows

Fri, 30 Jan 2009 20:56:00 -0400

So, we have now looked:

Creating a basic jqGrid with ColdFusion
Implementing the jqGrid Filter functionality

The next step is to allow inline row editing in our grid. This is very simple to implement using jqGrid and it looks good too:

So, to start off, have a look at the Demo. Database is being changed realtime, so any updates you make will happen.

[More]

Using jQuery based jqGrid with ColdFusion: Part 2 - Filter Records & work with Custom Data

Thu, 29 Jan 2009 12:20:00 -0400

Continuing to work with jqGrid, this time we will implement its Filter/Search functionality. jqGrid provides an inbuilt filter component, which can be inbuilt into its navigation grid (navgrid), or from a custom pager/toolbar button, or from an external button on your page. This opens in the form of a window (similar to cfwindow):

Check Out the Demo Here

[More]

Using jQuery based jqGrid with ColdFusion: Part 1

Tue, 27 Jan 2009 00:53:00 -0400

So, this weekend I started looking at jQuery. I have seen many people around the blogosphere use it and it is surprisingly lightweight, and doesn't require a lot of code writing. There is also another problem, the ColdFusion cfgrid implementation slows down as the number of records increase. So, specifically I looked at jqGrid plugin for jQuery to implement a datagrid. I took my previous work on a simple User List grid and started the process of replicating it using jQuery. Thankfully, I was not the first one to think of something like this, so I had a head start thanks Hal Helms So to start off, have a look at the Demo [More]