Dan Mackey On ColdFusion Development

ColdFusion, Java, .NET, AJAX, DHTML development and general programming. Daniel is owner and Administrator of CFTagStore.com and works for an Application Development Company in Ireland called Digital Crew. His interests cover all areas of programming in multiple languages with a particular interest in Internet Technologies.

All Articles tagged : Javascript
2006-07-29 12:38:00.0

ColdFusion And AJAX Organizational Chart - Beta

About 2 weeks ago before I started my , I worked on a quick proof-of-concept ColdFusion and Ajax enabled Organizational Chart widget.

My main aim was to create a widget that would render in modern browsers and would allow the adding of nodes to the chart using AJAX so the whole page didnt have to be reloaded.

I faced some interesting problems:

  • I wanted to use pure CSS and DIVs but soon found out this was impossible for the moment so had to settle for a mix of CSS and normal TABLE elements.
  • The logic in finding the current parent to append new elements to needed quite a bit of thought to work on all browsers.
  • Deleting nodes a few levels up had to take sub-nodes into consideration.
  • The user-interface had to be very simple and in context with each node.

I decided on the following:

  • I created a custom tag which runs using recursion. This allows the whole chart to be generated using one line of code and you can choose which node to start rendering from.
  • Because the chart is built using a recursive custom tag and I can choose any start node, implementing the AJAX was easy, easy easy.... All I have to do when an add node icon is clicked, the parent node id is passed using AJAX and the custom tag is called with a start ID of the passed parent and the returned HTML is rendered without reloading the page.
  • I used the extremely handy CFSAVECONTENT to render the HTML from the custom tag and simply return the resultant variable. This made the code really easy, flexible and readable.

The main way to use the tag is:

  • To create a node, you click the Add Node icon from the parent node.
  • To edit a node, you double-click an existing node.
  • To delete a node, you click the Delete Node icon on the node to be deleted.

The editing of nodes is not complete. I envisage this to dynamically create a text area in the node and update the TEXT of the node on the fly using . Another option in the future would be to pop-up a menu that allows you to change the TYPE of node.

Things I would like to see added:

  • Panning of a VIEW area for large charts
  • Ability to change each nodes type
  • Add the ability to render each node with rounded corners using the brilliant NiftyCude library.
  • Ability to export the chart in a variety of formats : graphics or PDF

The funny thing is, I developed this 2 weeks ago on one of my 3 hour after-work learning stints where I generally read new things through blogs or try proof-of-concept ideas that may help in future projects. About 2 days ago, I got an email from someone through who had an idea for a CFOrgChart type tag/application with the same ideas I had planned.

Funny how things happen...

Now the fun part...try the demo : demos/cforgchart/index.cfm

PS: Please use with care and dont ruin it for other people by deleting all nodes. This is only a demo and I havent performed any checking or locking of nodes yet.

PPS: Can someone (Karl :-) ) check this on Safari and report back?

Add to your del.icio.us    DIGG This!    Technorati Cosmos Link    Post to Reddit    Add to your Furl    Add to Blinklist
Comments [12] - Leave a comment
2006-05-23 12:02:00.0

Quick Tip : Mozilla disables window.status by default

I was doing some testing on an app that needed to display mouse events so instead of doing what I normally do I said its only quick debug so I'll set the window.status - No joy.....

Mozilla by default now disables access to WINDOW.STATUS

You have to enable it by going to : TOOLS->OPTIONS->CONTENT-> ADVANCED and enable "Change  window status text"

Just a quick one incase you ever need to turn it on. This is a good thing to stop annoying sites but bad in general. There should be a wizard when installing Mozilla where you can specify whats turned off and not have to find things in the future.

This is one of my main gripes with Mozilla and Thunderbird. There doesnt seem to be any consistancy in where OPTIONS, SETTINGS or PREFERENCES are stored and their popup windows, dialogs, menus and tabs all hide settings in the most unpredictable places.

This is one of the reasons Windows is the de facto desktop operating system for normal users because they standardised the user interface. Even though Firefox is a great browser and Thunderbird is a great email application, you can see they were primerily developed on platforms other than Windows where there is no standard as far as settings, menu items etc should be placed.

Tags: Javascript | Rants | Tips
Add to your del.icio.us    DIGG This!    Technorati Cosmos Link    Post to Reddit    Add to your Furl    Add to Blinklist
Comments [3] - Leave a comment
2006-05-22 16:14:00.0

CFImageResizer - Preview

Over the weekend I was looking through my old posts and spotted my post about the cool Flickr Image Resizing Flash widget and stumbled upon Googles new GMail Contact photo editor and it got me side-tracked into developing our own widget.

There are many many times where an online easy-to-use image cropping tool would be handy for both us and our clients.

Using the X Javascript Library, I got enough functionality complete in a few hours to show a screenshot. I am going to make this robust, easy to use and useful, possibly interfacing with Java through ColdFusion <CFOBJECT> to do the actual image cropping. The only snag is it will be JPG and PNG only :-(

 

Add to your del.icio.us    DIGG This!    Technorati Cosmos Link    Post to Reddit    Add to your Furl    Add to Blinklist
Comments [2] - Leave a comment
2006-05-17 21:04:00.0

Google Web Toolkit Released....

Google have released their Widget Library to help developers make Web 2.0 applications faster and easier.

The toolkit is the standard Google kit used to make GMail, Google Groups etc

Plenty of online demos. First impression is that they look very basic but as you play with them and start thinking how you would do it, you begin to realise the power of them.

http://code.google.com/webtoolkit/

May look into this toolkit for an upcoming Web 2.0 app Peter and myself are planning...

The fact that they are cross-browser with no loss of functionality is the best bit. They also have a nice tool that allows you to write your AJAX apps in Java and they have a tool that runs through and converts your code to cross-browser compatible DHTML.

Add to your del.icio.us    DIGG This!    Technorati Cosmos Link    Post to Reddit    Add to your Furl    Add to Blinklist
Comments [0] - Leave a comment