The correct way to embed Adobe Flash in your web page... again

I previously posted about a neat little JavaScript library called SWFObject. This wonderful little library easily gets you around the Internet Explorer activation control issue. In doing some work for Company X, I found that though SWFObject works under normal conditions, it didn't seem to work when made part of our larger JavaScript framework. I suspect it has something to do with doing DOM modifications after the page has rendered. I looked around and found another library, UFO.

UFO stands for Unobtrusive Flash Objects and is another free (under the creative commons GNU LGPL license) JavaScript library for embedding Flash in web pages. It seems to be well supported (currently it's on version 3.22) and it's just as flexible and easy to use as SWFObject. It's slightly larger that SWFObject, so my advice is to choose the one that works best for your project. My thanks to UFO's author, Bobby van der Sluis, and his employer Refunk for allowing him to work on it during work hours!

Flash Activation Workaround (UFO): $0

Total cost of project to date: $59.99

The correct way to embed Adobe Flash in your web page

One of my pet peeves is when I go to a "professionally designed" website and there is that annoying outline around their embedded Adobe Flash objects. This only effects Internet Explorer (of which only about 88.66% of you) due to a process called "Activating an ActiveX Control's Interface" which was added to IE 6 in response to loosing a patent lawsuit with a Eolas (Eolas seems to me to be one of those companies that does nothing but patent ideas and then sit on them until they can sue... a prime example of what's wrong with the patent system in the United States). Essentially, it means that you can no longer use the APPLET, OBJECT or EMBED tag on a web page if you expect your user to interact with that control unless the user "Activates" it my clicking on it. But there is a work around, use JavaScript to embed your control instead of HTML. A pain in the butt, but it works.

Luckily there is SWFObject, a nice little JavaScript file that makes embedding Adobe Flash (the most common ActiveX control in world) easy. You include swfobject.js, create a DIV where the flash should be shown and then create SWFObject object with a few parameters (location of the .swf file, size, frame rate, etc.).

I know a lot of websites are created by designers on using the Mac... which means they usually test their websites on either FireFox or Safari. But, please, please, please be considerate of the other 88% of us and use SWFObject for your embedded flash.

Flash Activation Workaround (SWFObject): $0

Total cost of project to date: $59.99

YUI for that Web 2.0 interface

The big buzz these days is about AJAX. You constantly see press AJAX enabled site that does this and does that... but AJAX is really only a way of getting data back and forth between your browser and the web server without having to refresh the page every time... what really gets people excited is how that data is displayed with interactive controls. Just as I felt it necessary to spend "Big Bucks" on the design of my site it seems that having these interactive controls is the user perception threshold that is required to truly be a well regarded Web 2.0 site.

For "Company X" I looked at using ASP.NET AJAX (formerly codenamed Atlas), being a C# Microsoft .NET shop it was a pretty logical choice. It's free (as long as you've already dropped the bucks to have IIS servers, .NET development environment tools, etc.) and is, even in it's current 1.0 version, an extremely full featured library with lots and lots of controls. The main idea of ASP.NET AJAX is to hide the dirty details of hooking up AJAX, JavaScript, DOM (Document Object Model) on multiple browser types from the programmer and make it seem just like plain old ASP.NET programming. I expect to see ASP.NET AJAX embedded into the next version of Visual Studio. But we are on a budget here, so what a poor PHP programmer to do?

I went to my handy Google Search box and typed in "AJAX interface library" and the first item on the list was the Yahoo! UI Library (YUI). The kind folks at the Yahoo! Development Network have release this library of cross browser compatible JavaScript controls (many of which work with AJAX methodology) under a BSD license... which means gives them some credit, but otherwise it's all yours to do with as you please.

Along with a bunch of base utility functions there are some great controls such as AutoComplete (a favorite among AJAX aficionados), Calendar and, my personal favorite, TabView. They also have a neat little app / control called Logger that allows you to put debug statements in your JavaScript and then watch them fire off in a floating control panel. Should be extremely useful for tracking down those inevitable JavaScript bugs.

Just for giggles I figured that if Yahoo was giving this out, their natural enemy must also have an offering. After look around a bit (I typed "google javascript UI" into Google) I found the Google Web Toolkit. It has many of the same features as YUI except that the AJAX part is already built out, but only for the Java language. So if you're doing your project under a Java server this toolkit might be more appropriate that YUI.

JavaScript UI Controls (Yahoo! UI Library): $0

Total cost of project to date: $59.99