Archive for 'javascript'

Jul200908

jonathan

Comments

JavaScript: The Good Parts

A few weeks ago, Shea Frederick asked me if I could put together a presentation for the July meeting of the Baltimore/DC JavaScript Users Group. We talked about some of the things we’ve been working on, and I mentioned that I’d been reading JavaScript: The Good Parts, an amazing book by Douglas Crockford. And a “book review” style presentation was born.
I decided that since the book is so dense with js knowledge, I’d just pull out my favorite takeaways and put them into a 30 minute presentation.
I didn’t spend too much time polishing the slides (or my delivery), so it came off more as a discussion than a “presentation”. It was fun. The 10 or so folks in the room chatted about the virtues of a loosely-typed language, debated about whether == is truly evil, and were truly grossed out by one of the images in the deck.
It was fun. I think next time, I’ll spend more time in spidermonkey doing some live coding, as well as showing off JSLint running on the cmd-line. And brush up on some language details - Jay Garcia schooled me on why the === works (it internally compares types before comparing values). My only regret is that I missed the jalapeno & pineapple pizza.

Jun200903

jonathan

Comments

ExtJS 2.2 JsonStore, HttyProxy method is case-sensitive

When overriding the HTTP method from post to get on your JsonStore, the method name is case sensitive. It must be capitalized.

var store = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({url: '/data', method: 'GET'})
});

Using method: ‘get’ does not work – it will still be an http post. This is clearly stated in the docs, but it’s too bad it’s case-sensitive.

Apr200925

jonathan

Comments

Embedding Flash in an ExtJS component

ExtJS does not like it when your code uses document.write. Whatever you write blows away the entire Viewport and that’s all you see. So as I’m converting a client’s existing site into Ext controls, I bump into this when I try to put a Flash swf into an Ext.Panel.

Boom. When the panel with the Flash is rendered, it takes over the entire page. Not quite what I want it to do.

So I see the Flash is being created in js code, using something called AC_FL_RunContent(). It’s from the Adobe Flash Player Detection Kit – a handy javascript library that will render cross-browser html to show your movie. Using…document.write! Yow!

So a bit of googling turns up only a few forum posts discussing how to render Flash inside of Ext components. One popular solution is to use the uxmedia Ext extension…but it’s not open source for commercial use. And in addition, I don’t need a pretty way to invoke my Flash, I just need the existing Web 1.0 way to just work inside an Ext component.

So, time for a little hackery. The Flash Player Detection Kit includes the helpful file AC_OETags.js, which is what you would include with your webapp. You call the javascript function AC_FL_RunContent(), passing a bunch of arguments. So here’s the simple hack: instead of document.write-ing the string, change the code to return that string to you. Make AC_Generateobj return the str, and make AC_FL_RunContent return the results.

Now in your client code, capture the html:

var flash_object_markup = AC_FL_RunContent(.......);

And then render it into a div using a Panel.

// assuming <div id="flash_content"></div>
var content = new Ext.Panel({
  html: flash_object_markup
});
content.render('flash_content');

And now the flash object is contained and manged by ExtJS.

I’m sure hacking the Adobe js file isn’t for everyone, but I think it’s perfectly reasonable. And if you have pre-existing js code that creates Flash html with the Detection Kit, this is a pretty seamless way to get them integrated with ExtJS. And nobody should be using document.write, anyway.

  Recent Entries »