Spice Up Your UI

UI Tips

LANGUAGES: ALL

ASP.NET VERSIONS:ALL

Spice Up Your UI

DirectX Transitions and Filters Can Make Your Web PagesMore Compelling

By Andrew Flick and Devin Rader

As we enter the dawn of a new era, two new up-and-comingUI superheroes are here to make their debut. Who are we, you may ask? We areFlick and Rader: Partners in UI; but we are more commonly known to the outsideworld as Andrew Flick and Devin Rader, Technology Evangelists for Infragistics.

Whether we have superhuman powers is questionable but youwon t be seeing us scale any tall buildings in a city near you. And as thesuperheroes for a new generation, we are leaving the fight between good andevil to our predecessors, so that we may be able to focus on the daunting taskof saving the world one tip and trick at a time!

In the coming months, we ll introduce you to a range oftips and tricks, from transitions and filters and going 508 Compliant to how aserver-side developer should interact with a UI developer. All of our tips willenable you to create awesome user-interfaces in look, style, and performance.

Introduction

Internet Explorer contains many little-known and hiddenfeatures that, given the right circumstances, you can use to your advantagewhen developing Web sites. Because many of these features are specific toInternet Explorer, and are not available on any other browser, you shouldprobably only consider using them when you are developing in an environmentlike a corporate intranet or some other controlled environment where you canguarantee that everyone who uses the site will be using Internet Explorer. Giventhat caveat, there is really no reason why you cannot take advantage of thesepowerful features.

In this installment of UI Tips we are looking at transitions and filters. Transitions and filters are UI capabilities that have beenpresent in IE since version 4, but were greatly enhanced with version 5.5 andnow include a variety of visual effects, which we ll review and demonstratehere.

Static Filters

Filters change the way the content of an object isdisplayed. IE comes with a variety of useful filters you can use to change howyour content is displayed, ranging from blur, opacity, and glow effects tomaking elements spin and appear to hover. Adding a filter to your Web page isquite easy. Filters are essentially an extension to CSS styles in IE, so if youare familiar with creating styles for your page elements, then adding filtersshould be easy for you. For example, if you wanted to control the opacity levelof some text, you can use the Alpha filter:

 The quick brown fox jumpsover the lazy dog

Notice that when we specify the Alpha filter we also passthe opacity parameter into the method. Each filter will have its own parametersthat you must supply. Adding this filter reduces the opacity for our text to25%. You can add filters to almost every HTML element, so adding this samefilter to an Image, Button, or even a table would have the same effect.

You can also add multiple filters to an element. We canextend our sample above by adding a DropShadow filter:

 progid:DXImageTransform.Microsoft.DropShadow()">

   The quick brown fox jumps over the lazy dog

Figure 1: A demonstration of severaltypes of static filters.

Transitions

Transitions are filters that reveal new content with aparticular effect. They function similarly to the slide transitions that youcan add to a PowerPoint slide deck. Like filters, IE comes with a variety oftransitions that can be allied to a variety of elements on your HTML page.

Transitions are used just like filters, and, just like filters,can be used on almost every HTML element. Transitions can be used to createthings like a Photo Gallery viewer:

 var images = new Array(); images[0] ="image1.jpg";  images[1] ="image2.jpg";  images[2] ="image3.jpg";    var currentimage=0;

function nextimage() { currentimage++; if (currentimage >images.length-1) {     currentimage=0;  }  var oSlide =document.getElementById("imgSlide");  oSlide.filters[0].Apply(); oSlide.src =images[currentimage];  oSlide.filters[0].Play();}

 style="filter:progid:DXImageTransform.Microsoft.Fade(duration=3)"

 onclick="nextimage();" />

Here we are using the Fade transition to create a simplephoto viewer. Once again, we pass the duration parameter to the Fade transitionto tell it how long the fade should take. Other transitions have differentparameters.

You can also combine transitions with filters in the sameway you can combine multiple filters.

Gradient

The Gradient filter can be used to create gradients onelement backgrounds. Using the Gradient filter can be much easier than tryingto apply a gradient image to the background of your element:

 GradientType=0,StartColorStr='#0000FF', EndColorStr='#000000')">

This code will create a table with a gradient background. TheGradient lets you specify the colors you want it to use to create the gradient.You can also change the orientation of the gradient from a horizontal gradientto a vertical gradient. Horizontal is the default.

AlphaImageLoader

Finally, we have the AlphaImageLoader filter. This filterallows you to display an image and gives you options to clip and resize theimage. You can also use the AlphaImageLoader to load and correctly displaytransparent PNG images, which IE cannot natively do:

In this case, the image we are loading is smaller than thecontainer, but by using the sizingMethod property, we are able to use theAlphaImageLoader to resize the image to fit the container size.

Conclusion

Using IE s filters and transitions is a great way to add alittle spice to your Web pages and it s easy. For more information, see Filtersand Transitions on the Microsoft MSDN Web site. There you ll find anexcellent programmer s reference, as well as samples that let you try out moreof the filter and transition effects.

With that, we remind you to e-mail your questions to us [email protected].

Andrew Flick is a.NET technical evangelist for Infragistics Inc., a Microsoft Visual StudioIndustry Partner. He is responsible for authoring reference applications and.NET technology articles, as well as delivering Infragistics technologydemonstrations worldwide. Andrew is a Microsoft .NET MVP and is the chair ofthe INETA Academic Student Committee. Contact Andrew at mailto:[email protected].

Devin Rader is anInfragistics Technology Evangelist and is responsible for authoringInfragistics reference applications and .NET technology articles, as well asthe world-wide delivery of Infragistics technology demonstrations. Devin is anactive member and leader for INETA, has served as the sole technical editor fornumerous works, and is a contributing author for the soon to be published ASP.NET 2.0 Professional. Contact Devin at mailto:[email protected].