Friday, September 19th, 2008
Dojo: The Definitive Guide; Degradable Reflection Widget
Category: Dojo
Matthew Russell is blogging and screencasting work from Dojo: The Definitive Guide and has put together a piece on a simple, degradable reflection widget using dojo.gfx:
Reflection has been in vogue for a while now in user interfaces, and it wasn’t long ago that I saw a headline about a JavaScript library that streamlined a number of useful effects such as reflection — but alas, without the benefit of Dojo. Well, being the Dojo fanboy that I am, I immediately started to ponder how to accomplish some of these same effects using the dojox.gfx module, and a couple of hours later, I had prototyped a nice, degradable widget that seemed to do the job. By the way, that’s one of the things I love so much about Dojo: once you have a reasonable grip on it, you seldom, if ever, have to look somewhere else. More times than not, a great deal of your work is already done for you, and you just have to connect some of the dots. Remember: it’s all about the frameworks
But there’s always a catch: in this case it’s that IE users must have Silverlight installed for the widget to work; otherwise, it degrades back to the plain image. The reason is that VML, IE’s default gfx renderer, doesn’t support transparency in gradients. No transparent gradient, no nice fade out effect. Likewise, if JavaScript is not available (honestly, who does that?), it degrades down to the bare image. If you didn’t already know, the gfx module exposes an API that works across browsers by using whatever drawing engine is available. At the moment, renderers are available for canvas, VML, SVG, and Silverlight. That pretty much covers it. Adding support for another one should be straightforward: follow the API guidlines and write it.
The Silverlight requirement is interesting, isn’t there a way to use IE behaviours to do a transparent gradient?
Watch the screencast to see it all in action.
So… 58 kb of JavaScript is added to give the image a reflection. I think I would add the shadow in Photoshop instead.
Afraid I must agree. Way too much overhead for too little.
As for the gradient:
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=’#FFFF3300′, EndColorStr=’#00000000′)
http://samples.msdn.microsoft.com/workshop/samples/author/filter/gradient.htm
@Jeria
It’s obviously a great solution to a scenario where you are dealing with lots of images and/or possibly user-generated content.
And also if you only adding Dojo to the page for reflections it’s quite a waste of a good library.
On the gradient issue…yes, you can do it with the filters but they only support 2 stops (start and finish); with dojox.gfx, we support the same kind of gradients that SVG does (multiple stops), which makes IE/VML support very problematic.
.
Perhaps one day MS will pull their heads out of their butts and implement either SVG or Canvas, and catch up with the rest of the world. Though I doubt it.
I rewrote the reflection.js, which is available at: http://cow.neondragon.net/stuff/reflection/ as a Dojo class and it works flawlessly. The class is about 4.8K, uncompressed and with original comments and copyright text. (I actually didn’t do much, except turning the original implementation into a Dojo class, so it can be used with the rest of the system.)
Lately, I have observed that Dojo widgets are getting heavier for what they do. A fully functional Dojo app brings most of the browsers to their knees. I haven’t tried release 1.2 yet, which became RC1 today, but even 1.1.1 is bulky and slow. The same functionality offered by other frameworks are much lighter and faster. For example, the Accordion container from Rico and Spry are lighter than Dojo. Dojo has a rich widget set, but not without performance overhead.
ragjunk, if you want to talk more about Dijit performance, I’d appreciate having a discussion with you. I’m easy enough to find… my first name either at dojotoolkit.org or sitepen.com.
Stuff like this are kinda easy, arent’ they?
http://www.widgetplus.com/testbed173.htm
@Mikael: Way to shamelessly plug your website.