Many websites have interesting new ways of displaying menu items or sets of images. Popular among these is the fish eye. We describe in this blog how surprisingly easy it is to define a fish eye using using the Backbase Tag Definition Language (TDL), very similar to this demo: http://demo.backbase.com/3rdparty/dojo_fisheye/.

There is no standard Backbase widget that provides fish eye functionality. Of course you can use a fish eye easily by integrating it from another framework as is shown in the demo. This is a powerful way of mixing and matching what you need and in many cases it is a good solution. Another option is to define an equivalent widget yourself using the Backbase Tag Definition Language (TDL).

Let us start by briefly describing the functionality we would like to implement. Assume there are one or more fairly small, square images, displayed as a string on your page. Hovering your mouse over one of the images, will cause it to increase in size, moving the adjacent images to the side. When you click on an image an action is performed, by calling a JavaScript function. If you are unsure what I am talking about, click on the demo link above. The example we are going to show looks very similar.

We assume that you know how to set up a Backbase enabled page. If not, look in the Beginner Tutorial or the Application Development Guide to find examples of a basic start-up page.

Make sure to include the following namespace declarations, for example in the script tag:

Without further introduction, we show the code for the fishEyeItem:

This is rather short right? Let's explain what it means. First of all, the whole code fragment is surrounded by tdl tags, to indicate that a piece of TDL is included. Within the tdl element, you see a namespace tag, specifying a custom namespace for our widget as the default namespace, and the TDL namespace.

Within the namespace, you can specify one or more element tags. Here
we have only one, for which we chose the name fishEyeItem.

Look into the element for the template tag. The template defines the looks of our fishEye widget. As you can see, this is an ordinary img tag, where we made the width and the height fixed and we made sure that the image will stay on top by using the z-index.

We also specified an attribute for our widget, conveniently named src. What we want to achieve is that you can code: <yp:fishEyeItem src= "media/icon_browser.png" />, and that the image will be shown on your page, as if you had coded an img tag. Coding a mapper for the attribute will do just that. If you look at its implementation, you will see that the value of the src attribute is assigned to the src attribute of the image in the template, which will cause the image to appear when the fishEyeItem is instantiated.

There is also an attribute, action, that specifies what should be done when you click on the the image with a mouse. This brings us to the event handlers that are implemented for the widget. They cover the following events: mouseenter, mouseleave, and click. The click event handler gets the value of the action attribute and then evaluates the contents as JavaScript.

With this we have a fully functional widget, we just have to add the animation that makes the fish eyes interesting. As you can see, for each mouse event, there are two lines of SMIL that do the trick. Here we repeat the first line for mouseenter:

That is all there is to it! Of course we need to use our fishEyeItem item, and that is what we are going to do next. First copy and paste the TDL code into your start-up page, between the script tags. Then, include the following code:

Make sure that you have some images available, adapt the src attributes if needed. We are using the same deck as in the integration demo. Just copy and paste everything between <b:deck> and </deck> as found on this demo page, into your page. Make a few minor modifications: At the end remove this line:

When you open this page now in your browser, the result should be very similar to the one in the integration demo. Move your mouse over the images to see them animating and click on an image to see the text changing.

What next? As you can see, our fish eye is not as fully featured as the Dojo one. If you need that functionality, it can easily be added. For example, we could define another widget, fishEye, that could act as a container for the elements. This would allow us to add more functionality, like vertical alignment, animating the adjacent images like in the Dojo example, or implementing a carousel, which is nice for showing image sets.

Send us feedback about what you would like to see implemented as an extension of the fishEyeItem widget, and we will try to write about it in a next blog entry.