September 15th, 2008
Tags: , ,

Category: Screencasts

A Simple, Degradable Reflection Widget

A nice, shiny apple

Dojo makes creating a reflection of a nice, shiny apple like this one quite easy!

This post is the first of many screencasts for this site, so please bear with me as I get more skilled at producing video, developing my big boy voice, and those sorts of things. I’ve chosen QuickTime’s H.264 format as my default for screencasts, but if there are other (or better formats), I can always re-encode or provide alternatives. Just let me know!

Viewer discretion is advised.

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.

Watch the Screencast

I’ll briefly step through some of the interesting slivers of the widget in the next section for those readers who want to skim a written synopsis and put it to work right away, but those of you who have a the time and inclination to have me talk you through it should watch the screencast (~26M, mov file.) I don’t particularly cover basic aspects of the widget lifecycle or anything like that in this post, so if you’re interested in some screencasts on those kinds of basics, please leave a comment and let me know.

Skim the Synopsis

So you’re still reading…alright, once you download the example code, you should be able to unzip the archive, open up the html file, and everything should just work. Well, unless of course you’re using Internet Explorer and don’t have Silverlight installed. Unfortunately, it doesn’t appear that VML supports transparency in gradients (the very mechanism which gets us the faded out reflective effect), so there’s not a lot that we can do there. But the good news is that it’s degradable, so the image will appear as usual on IE.

The markup required to put it to work is simply something to this effect:

<img id="apple" dojoType="dtdg.ImageReflector" src="apple.png" />

And just like any other Dojo widget, you could opt to create it programmatically with something to this effect:

var niceShinyApple = new dtdg.ImageReflector({/* props could go here */}, "apple");

If you take a look under the hood, you’ll see that it’s surprisingly simple to pull this off. First, you create a surface to draw on that is some fraction of the image’s height and place this surface just below the image itself. Then, just draw a reflection of the (clipped) image on the surface using the standard 2D matrix transform for reflection and apply a linear gradient that becomes more transparent as it approaches the bottom. That’s really it. The rest is just a little bit of software engineering.

But do note that this would be a lot harder if the dojox.gfx API (yes, it says that it’s version 0.9, but it’s up to date as far as I can tell) wasn’t so fricken’ awesome. Serious kudos to Eugene Lazutkin and all of the committers who have worked so hard on making it this good. Having full-blown 2D matrix operations at your fingertips in such an accessible way for arbitrary backends is so powerful.

Download the Goods

Just in case you weren’t paying attention, you can use the links in this very sentence to download the example code and download a copy of the screencast (to watch in the privacy of your own home.)

Leave Feedback

Again, this is my first screencast, so if there are things that you particularly liked or things that I can do to make the next one a lot better, please leave a comment and let me know!

Tags: , ,

8 Responses to “A Simple, Degradable Reflection Widget”

  1. Matthew Russell Keeps The Good Stuff Coming | Continuing Intermittent Incoherency Says:

    [...] CDN hosting of Dojo and practices what Dojo preaches about pragmatic progressive enhancement. Awesome stuff! This entry was written by alex, posted on September 16, 2008 at 3:30 pm, filed under [...]

  2. Chris Mitchell Says:

    Here’s a link to the new gfx api doc on dojocampus.org that’s in the process of being updated for Dojo 1.2:

    http://docs.dojocampus.org/dojox/gfx

  3. Ajaxian » Dojo: The Definitive Guide; Degradable Reflection Widget Says:

    [...] 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 [...]

  4. Ajax Girl » Blog Archive » Dojo: The Definitive Guide; Degradable Reflection Widget Says:

    [...] 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 [...]

  5. Dojo: The Definitive Guide; Degradable Reflection Widget | "IT" - I LIKE "IT" ! Says:

    [...] 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 [...]

  6. Gavin Doughtie Says:

    Maybe you could use IE’s filters system for the gradient fade-out.

    http://msdn.microsoft.com/en-us/library/ms532847(VS.85).aspx

  7. Javascript News » Blog Archive » Dojo: The Definitive Guide; Degradable Reflection Widget Says:

    [...] 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 [...]

  8. Matthew Russell Says:

    @Gavin – I think you’re right, and I should probably clarify to everyone else that I wasn’t suggesting that IE just couldn’t do this without the help of Silverlight so much as I was trying to relay that it didn’t seem to be possible in VML, which is the default dojox.gfx renderer for IE.

    Anyway, I fiddled around a bit with the IE filters, and it seems that something of the following form can do the fade out effect (from plain markup):


    <img src="apple.jpg" style="position:absolute;top:0;left:0;float:left;height:400px;width:400px;">
    <div style="position:absolute;top:0;left:0;float:left;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#00000000', EndColorStr='#FFFFFFFF');height:400px;width:400px;"></div>

    What’s of clumsy about it is that it seems you can’t apply the transform directly to the image’s style or to a div containing the image; instead you have to position the div with the applied filter over top of the image — at least that’s all I could get to work. (Anyone know differently?)

    At any rate, it doesn’t seem that it would be too difficult to hack that little bit into the sample code if anyone decides to go that route. My personal thoughts, though, are that we might be doing the web a favor by not supporting these proprietary filters, so I’ll leave that as an “exercise of the interested reader.”