flash/rich HTML coexisting is definately turning up a whole new, fun set of challenges. So far, some of my favorites are:
* having rich modal windows appear behind flash elements (fixable using the iframe shim technique)
* setting focus of various elements (fixed by creating a variable in our base page class that let me set the default focus to any elment by ID)
* today’s, having to do with the ExternalInterface.AddCallback method in flash, and its playing nice with swfobject.

In essence, we have a login function that pops up one of those nifty DHTML layers with a login box. Our top navigation is all flash, and has a login call to action…so having flash call javascript functions isnt hard, but getting javascript to “poke” at the flash and have it run an internal function is a bit trickier. Utilizing the aforementioned callback method, its fairly simple. The problem we had was, in Internet Explorer, order of operations was a bit out of whack.

we got an error on:
__flash__addCallback(coreLoader, "loginNav");
coming from INSIDE the flash…what seemed to be happening was the javascript that set up the object “coreLoader” wasnt running at the right time because of the time it took for swfObject to set up the embed. So, adding
coreLoader = $('coreLoader');
immediately AFTER
so.write("topNav"); set up the object again, this time not filling the object with a null (because swfObject had
correctly identified an embed with id=coreLoader), and allowing the internal flash “addCallback” function to work.

hm, technical writing is difficult. but i felt the need to document this problem (even if it wasnt very well) for my own future reference, and hopefully someone else will find it handy as well.

the more general moral of the story is: pay attention to order of operations, they may save your life some day.

somewhere in my cramped schedule i plan on taking some time to really evaluate some of the power behind the Yahoo UI Library. Ive seen Dustin Diaz do some cool stuff with it, but this morning Ryan pointed me to a sick Wordpress comment installation by Jack Slocum that was rapidly built using YUI. The system allows you to comment in blocks of content within a blog post, as well as the overall post. VERY cool. And, as Ryan pointed out, really freaking fast.

Demo/source included in the posting of the project itself.

worth checking out for sure.

ive been using deconcept’s swfobject for a while to remedy the IE Click to Activate box…along with simplifying the embedding of flash elements on the page. for one reason or another, the Click to Activate problem comes back if you leave the browser open for a little while, even though every flash element is embedded with javascript.

so while the IE bug is a strange, somewhat unpredicatble manifestation, one of my coworkers suggested this fix. I added it to the mix and everything is back to normal.

i tried to understand why, but really, it’s IE so all logic is out the window.

if anyone has any idea why this might happen, please, give a shout.

remember how i said my png transparency solution relied on deconcept’s swfobject? We noticed that whenever you clicked a link that left a page, it seemed that every embedded flash object was dumped from the page, collapsing holes and causing everything to look screwy for a second before the page switched.

for the record, this can be fixed by following these directions:
http://lists.deconcept.com/pipermail/swfobject-deconcept.com/2006-August/001407.html

Or, just comment out these lines from the swfobject.swf

if (typeof window.onbeforeunload == 'function') {
var oldBeforeUnload = window.onbeforeunload;
window.onbeforeunload = function() {
deconcept.SWFObjectUtil.cleanupSWFs();
oldBeforeUnload();
}
} else {
window.onbeforeunload = deconcept.SWFObjectUtil.cleanupSWFs;
}


edit: for crying out loud, why dont any of my wordpress plugins for code formatting work???

edit 2:

Geoff at Deconcpet wrote me about this, and it was definitely a known issue. I’m previewing the next release of swfobject, which seems to have the problem locked down, although, i dont have the ability to test the main function of the cause of the bug: the release of swf’s with streaming content. I should have that soon, for testing, and will follow up a report on that.

Thanks, Geoff. You (and swfobject) are awesome.

check out http://www.dangerouslyawesome.com/png2swf/ for less rambley documentation, and some downloadables.

WARNING: everything is still very alpha. very much in testing/production. report bugs in the comments, but theres a good chance i’m already aware/working on it

not the gum kind, not the 90’s dot com kind, the javascript event kind!

quick reference post today, i found a handy chart while reading through Apress Ajax Patterns and Best Practices. This graphic, in the chapter about the decouple navigation pattern (post to come, perhaps), charts the ability to bubble-ability and “cancel-ability”, in a cross browser fashion, so you can limit yourself to event triggers that work!

(c)2006 Apress/thanksdontsuemeplease
(note: i’m pretty sure onmousdown/onmousmove are typos, missing an ‘e’)

As you may have noticed, Ive been writing alot about Javascript recently. Mostly, because I’ve been reading alot about javascript recently. I’m working on a project that involves my first real brushes with AJAX, besides the word itself being thrown around all willy nilly. Everything is being built from scratch with ASP.Net 1.1, no anthem.net, no atlas. Just Michael Schwarz’s Ajax.Net Pro.

The whole thing really is pretty sharp. I’m not going to give a tutorial of how to work it, though I cannot recommend the documentation on michael schwarz’s page…pick up pragmatic ajax.

This commentary is more about designing ajax applications than how to build them. More than anything, the whole “stay within the page” model, and using div overlays as dialog boxes in a “modal window” fashion.

Overall, I dont like it.
I like inline editing, and so far in this app, we havent had any of it. TONS of places it could be used, but the application IA didnt call for it. Everything was placed in div-overlay dialog boxes. And since the content varies, the we need more and more methods to create a custom dialog box for each modal window.

Generally speaking, if there is any kind of delay on the callback, the dialog box gets munged. If you click on the trigger to launch it more than once, the effects could be disasterous on the page. Too much mouse input is required. Its an abuse of an application window model in a web-based application, and it just doesnt work for me.

I’m looking forward greatly for the sunset meeting on this project. It was the first AJAX project design for the IA, and the first AJAX app for me and the other developer. LOTS of learning for all of us…what works, what doesnt, and what do do for the future. Our next app is going to be incredible, so long as our sunset meeting is productive.

Some good reads:

AJAX wireframing (PDF Warning)

Matthew Miller’s Blog about ‘Too Much Ajax’

I recently pseudo-raved about the javascript capabilities of Aptana. I quickly turned and realized…while the concept is awesome, the execution only goes halfway…mostly thanks to the crap-tastic performance of a java-based IDE.

Well, this morning, i discovered one more reason why I’ll quietly wish that I could do all of my development, not just the stuff i do at home on the side, on my mac. I was catching up on Thomas Furch’s blog, and noticed that he made a post about a bundle for textmate that gave it support for prototype AND scriptaculous. It even does inline wiki searches, so you can pull up docs on the functions you want to use from script.aculo.us, using Ctrl+Shift+H. hot.

I’ve already admitted, at least twice, that one of the primary reasons for switching to mac was textmate for web development. Obvoiusly, I’m a happy camper all the way around with my mac experience but its things like this that make me breathe a sigh of relief. Why arent PC application developers doing anything to make my life easier? Why do I spend all day fighting with Visual Studio 2003? Why do I wait for acrobat to crash my browser? Because I’m used to it. Maybe my mac experience isn’t that great, it’s just better than my crappy pc interactions.

I’m gonna shut myself off before i turn into another mac fanboy. But definately check out the budle, and textmate if you somehow havent yet. Features abound in the screenshot below!

verdict: on windows, aptana is slow and clunky. shame, too, because my comparably spec’d core duo iMac runs it nearly flawlessly…and it provided the most efficient javascript development experience I’ve ever had. A task that I was dreading for a week and a half was…well..to quote chris pirillo “more less sucky”.

The real reason for my commentary today has to do with alot of people who are commenting and digging aptana, which i think is great for the product promotion. over 2000 diggs at the moment for an article claiming that aptana is a “Dreamweaver killer“. I dont want to get started on my “anti product-killer” rant right now, but the fact of the matter is that this product wont ever kill dreamweaver for the same reason microsofts zune isn’t going to kill the ipod. community. products that are built around a community of users are practically impossible to kill because you not only have to offer a better product, but an incentive to leave all of your friends and make new friends. I dont know about you, but that doesnt sound like something I’m interested in doing any time soon.

the next 6 months have the potential for a lot of work to cross my keyboard…most of it, out of the scope of things that I can do on my own. I’m looking to team up with sharp, creative, driven individuals who are experienced but also are interested in learning new things. Designers shouldnt hesitate to contact me, though, most of the work is technology oriented. Skills needed include:

• valid xhtml
• css (tableless layouts
• javascript
• ajax
• php
• asp.net
• actionscript
• jsp
• really…anything tech. cant hurt to try, and I’m always looking for smart folks to work with.

have any of the above in your portfolio? send resume/links/a friendly message my way. use my handy contact form.