the singularity of being and nothingness
JavaScript
Quick JavaScript Goodness
Apr 10th
Ok, so this is nothing new nor is it something that hasn't been blogged about before. However, I thought I'd share in case it helps some other googler that can't find what they're looking for 🙂
So in JavaScript, most functions have a pretty standard form: you name the function and then define which arguments you wish to pass to the function. Depending on how you work out the logic in the remainder of the function, the arguments can all be required, all be optional, or whatever.
The one major drawback, however, is that the arguments must be passed in the proper order. For example, if I have a describeMovie() function that takes an actor, title, and year argument, the order I define these arguments in will be the order in which I have to pass them in my function call.
function describeMovie(actor,title,year) { // alert the movie’s lead actor alert(actor); …………}
would require
onclick="describeMovie('Bruce Willis','Surrogates','2009')"
in order to work properly.
(This won’t work:)
onclick="describeMovie('Bruce Willis','2009','Surrogates')"
Also, while I can easily pass the actor and title parameters without the year parameter (describeMovie('Bruce Willis','Surrogates')), I’ll run into issues if I try to pass just the actor and year parameters (describeMovie('Bruce Willis','2009')), for the order in which they are More >
Ext JS Screenshot Fun
Mar 2nd
Quick (ok, not really) video about some screenshot croppin' goodness with Ext.
Check it out, and become my Facebook friend while you're at it!
Share this:
Ext to ColdFusion…Nice!
Feb 21st
So I know a lot of the posts I’ve been writing recently have been about stuff that’s been around a while–Ext helper functions, CFScript, etc. Nonetheless, I post them because some of the answers to questions I’ve found in developing solutions have been less-than-easy to find, so perhaps repeating some of the same things again will help Google find it a bit easier for someone else someday.
On with redundancy!
Obviously, JSON-related technologies have been around for a while, and with ColdFusion 8, a lot of native JSON handling was added for the creation of some sweet AJAX-y goodness. While I’ve dabbled with these, I’ve never really had a need for them…until now.
I recently developed a remote CFC function that required about 12 different arguments. On the client side, I also developed a quick EXT Ajax.request() method to pass these arguments into the CFC function.
Now with Ext, it’s incredibly simple to pass arguments to server-side functions, as this example illustrates:
Ext.Ajax.request({
url: 'com/functions.cfc',
success: successMethod,
failure: errorMethod,
headers: {"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"},
params: {method:'setupLife',argument1:arg1,argument2:arg2}
});
I like this alot, because it allows me to treat each argument as its own “thing,” rather than stringing together a bunch of “&argument1=arg1” in the query string.
But what if More >
30 Seconds with Ext
Feb 11th
Ok, so this is not earth-shattering, but I came across a pretty cool feature in Ext's DomHelper class the other day.
But first, a little context. Don't you just HATE creating new HTML elements with JavaScript? If you go the route of explicitly pasting them together, your code ends up looking like spaghetti…and I hope you're good at tracking down escaping errors 🙂
And what about wrangling with createELement, appendChild, and the ilk with their corresponding unpredictable behavior across browsers?
It's a gigantic pain in the butt, but as I found out recently, Ext makes it SUPER simple. Using the DomHelper class, you can easily leverage Ext to confidently generate any number of elements without having to worry about escaping characters or remembering the nuances of creating elements for each browser.
Let's say I just want to make a new table:
Ext.DomHelper.append('cart-details', {tag:'table', id:'detail-table'});
In this super simple example, I'm adding a new table element to an existing div with an id of "cart-details." To add the table, I simply invoke the append() method from the DomHelper, and 40 characters later I'm all set.
But what is even cooler is that the DomHelper class allows you to create NESTED elements as well! Check this out:
Ext.DomHelper.append('detail-table', { tag: More >
Converting ColdFusion Queries for Ext
Jan 21st
At my new job, we use Ext fairly regularly to get some pretty cool AJAXiness up in the mix of things. To familiarize myself with Ext (I’ve not really used it until now), I recently downloaded the newest version and have been playing around with it quite a bit.
One of the elements I like quite a bit is the data grid. Like most other things, Ext makes it pretty simple to pull off a slick sortable, pageable data grid with very little work.
Of course, given that I use ColdFusion alot, I decided to hook up a grid to a remote CFC call. While the call itself is easy enough to do, there is one issue: the JSON that CF returns is in a format that Ext cannot quite understand.
Now there are a bunch of pre-built converters out there, some more robust than others (and a few I couldn’t quite get to work).
So in the spirit of trying to figure it out for myself, I wrote up a simple function in ColdFusion that will take a regular query and convert it into happy JSON that Ext can deal with.
First, here’s our function to create our generic query:
<cffunction name="getPosts" access="remote" returnformat="json" output="false" hint="Gets list/detail More >
Using Spry Data with Thickbox
May 15th
If you've ever tried to use Spry data sets with a default implementation of Thickbox (a jQuery-based version of the familiar Lightbox), you've probably noticed that it doesn't work.
The reason for this, of course, is simple: out of the gates, thickbox.js fires off an initialization function (tb_init) through jQuery's ready(). What this means, technically, is that thickbox has already started its processing and element fishing before Spry's data sets have been fully loaded and rendered. What this means, practically, is that Thickbox won't work.
Though frustrating, there is a fairly simple way to work around this.
Conceptually, what we'll be doing is to bypass jQuery's ready() function and load tb_init manually AFTER we know Spry's data sets have fully loaded and rendered.
First, we need to figure out when the data sets are done processing. This is pretty simple, because Spry comes with a handy way of sniffing this out.
We'll start by setting up a new data region observer. Our observer will watch the data set and when it reaches the "state" that we define, we can manually fire the thickbox.js processing.
So here's our new observer:
the_Observer= new Object()the_Observer.onPostUpdate = function() { // Here's where the thickbox function call will go… };
Spry.Data.Region.addObserver("the_region", the_Observer);
Nothing More >
Checking if Spry eventListener Exists
May 3rd
So if you use Spry, you know that adding an eventListener to anything is super-simple. It's easy to add, and managing the processing that occurs on events is pretty intuitive.
For example:
Spry.Utils.addEventListener("myButton","click",doMyFunction,false);
This one line of code adds an eventListener to the element "myButton" for the onclick event, which will fire "doMyFunction()". And it's just as easy to remove the same eventListener:Spry.Utils.removeEventListener("myButton","click",doMyFunction,false);
Easy enough. However, I recently found myself wanting to not only add and remove eventListeners, but also to check if they exist for certain elements. Luckily, before digging into the DOM to much, I checked SpryDOMUtils.js–sure enough, there's a function already built for this.
In fact, as you may or may not be aware, you can run Spry.Utils.addEventListener() on an element as many times as you like–only one eventListener will be registered. This is because addEventListener() runs a check to see if the eventListener is already registered, and proceeds from there (look at line 166 in SpryDOMUtils.js v. 0.6 to see this in action).
So checking to see if an eventListener is registered for an element is exactly the same as adding and removing the eventListener. Here's what it looks like:
Spry.Utils.eventListenerIsBoundToElement("myButton,"click",doMyFunction,false);
This will return true or false, and you can do whatever you'd More >
Manipulating Spry Datasets in the DOM
May 1st
I recently created a little peice of functionality using Spry data to setup two lists that can swap data on the fly,
without the need for any postbacks to the server. I've done this thing several times before, but in the past, I've done it very inefficiently. Let me give you an example.
Let's say I'm building a list of songs to put on my mp3 player. I start with a list of all the songs from my media library, as well as a blank list that's waiting to be filled up with songs for the play list. In the past, what I've done is create two Spry data connections to a database, one to manage the play list, and one to manage the full list of songs.
Of course, this is easy enough to do, but I wanted to make it a bit better. For example, when selecting a song, I wanted to be able to show that the song was selected (and also make it un-selectable again).
My past approach would have been to start with an onclick event to handle the data saving. Once this process was complete, I would have fired a complete reload of both my More >
Dynamically Loading JavaScript…with Spry!
Dec 23rd
I've written a couple of articles in the last few months about my adventures in JavaScript. While I certainly don't claim to be even proficient, I am getting better day by day. As I pick up tricks and tips, I try to pass them on to help others out (hopefully!).
Recently, we ran into an issue at work. We're constantly adding JavaScript functionality to our company intranet. While adding references to JavaScript files in the master pages that drive the templates is easy to do, there is a process that all master page changes have to go through, and this can limit the desirability of future changes. What we needed was a way to dynamically load JavaScript files when needed, so that only the core init.js file that is loaded with every page request needs to be referenced on the master pages.
I've never done this kind of thing before, so I did a little snooping around. There are apparently alot of solutions out there, some of them better and more robust than others. After studying what they do, I decided to try my hand at building a simple JS loader in Spry, given that the core files I need are More >
Elegant JavaScript
Nov 30th
In his excellent book (and equally great NOVA mini-series), The Elegant Universe, physicist Brian Greene outlines the history of "the search for the theory of everything," the elusive, unifying theory that will explain the universe in all of its manifold glory. The interesting thing about this theory, however, is that it's primary characteristic is not soaring profundity nor escaliting complexity. To the contrary, Greene is convinced that the theory of everything, when finally discovered, will be characterized primarly by simplicity–or in his words, "elegance."
To Greene, the "theory of everything" will be elegant because it will bring together what are now disparate theories that describe the nature of the universe. It will be a theory that cohesively weaves together an understanding of the micro and macro universe; will unify the known physical laws; and will fundamentally "feel" right because of how it describes the infinitude of life in a simple theorem.
So what in the world does this have to do with writing JavaScript? Well, it's somewhat of a stretch, but as I continue to grow in my JavaScript skills, the principle of "elegance" which Greene so eruditely describes resonates with me.
Let me explain. In no way do I wish More >
