|
Techforum
Enhance your Web pages with DHTML
 Sounds
out of place? Not really. DHTML has been there for years now. Frankly,
during my regular work, I do not work on many cases which require
a specialized, effects/multimedia rich UI. Most apps are business
oriented. But recently, I was working on a different kind of site
development.
During this period, I delved deeper into DHTML. Out of curiosity, I randomly
scanned various sites that are visually attractive and offer refined UI, but
in many places, I noticed that DHTML is not being used to the extent it could
have been. Therefore, here is a collection of the treasures, tips and tricks
and great features I found in DHTML.
Simplicity and effectiveness
Here is a simple application.
<html>
<script language=”javascript”>
this.setInterval(“sample()”,1000);
function sample()
{
var d = new Date();
text1.innerText=d.toLocaleTimeString();
}
</script>
<body>
<label id = text1></label>
</body>
</html>
Copy this in notepad, save it as sample.htm and browse it in IE 4 or above.
What do you get? A clock. No server trip after this code is rendered in your
browser. Simple, neat, and serves the purpose.
You think I am kidding? Not at all. Just few days back I was told by a very
experienced friend of mine that he has come across an application that fires
queries to SQL Server from the client browser every second just to show the
time!
Now, why the function toLocaleTimeString? Because this renders time in the format
that is specified in the local machine’s regional settings. Smart is it
not?
The setInterval function of jScript is a simple client-side timer. The second
parameter sets the timer interval in milliseconds and first parameter indicates
which function to run for each timer interval. By the way, you can have multiple
setInterval commands active in a single page, which means you can have multiple
timers set at different intervals! Imagine the utility of this feature.
Now let us proceed further for some more advanced stuff.
What is DHTML?
All of us know that HTML was originally created for rendering static text and
images. Of course, now it has evolved into all sorts of things. But still, HTML
is HTML – static.
Even today, when you send a mail in Hotmail, another page is required to be
downloaded to show the message – “your message was sent successfully”.
Your message composing HTML page does not have a status bar that can show this.
Why? Because it still uses traditional HTML.
DHTML, in very simplistic terms, is a way of going beyond the static nature
of HTML. Forget the fact that, once rendered on a client browser, the HTML page
is completely static. With Dynamic HTML, everything is changeable and in your
control–at the client side– without any server trips.
Now, let us see a simple example.
Why don’t we use it often?
One of the main reasons why we have not explored this much is because DHTML
is a very specific feature of Internet Explorer. Pure MS technology. And of
course, we want to develop (or at least were taught to develop) applications
for all browsers. No monopoly, remember?
Secondly, while DHTML was introduced, many other waves in technology also were
prevalent and then the .NET came. During all this deluge, DHTML was not noticed
as much as it should have been. Of course all of us use bits and pieces here
and there. But not in depth. Not at all to the level which will do real justice
to the great technology.
Now let us consider the problem of browser neutral development.
The reality of browser neutral development
I have been talking about this to customers, in events and in this column itself
for a long time now. Even earlier I have expressed the same views. But now it
is a simpler task.
My view is simple. There is IE and then there are others – whoever they
might be. Forget litigation, monopoly, unfair trade practices and all that.
We are developers and we want more features so that we can provide more features
to our customers. Simple.
If there is IE and another application, I have to think “which one gives
more features to me?”. If I have to make something browser neutral, I either
end up coding many ‘if’ clauses depending upon the client browser
or I end up coding based upon the least common set of features.
Writing ‘if’ clauses to manage browser specific features is duplication
of effort. This leads to more and more un-managed code! Not recommended at all.
I am sure all of you have gone through this in the past. Now, why offer less
features to our customers because we want to code for limitations of some browser?
In fact, if users are getting more business level functionality, they would
not at all mind loading IE just for using specific applications while continuing
to use their favorite browser for other purposes. Anyway all browsers are free,
so why restrict our creativity?
This argument now is simpler to manage, since IE is anyway the undisputed winner.
Mind you – not because of the marketing muscle of Microsoft, but because
of the great enrichment of its feature set over a period of time.
The difference between the least common denominator and the maximum possible
functionality is so vast now that developers as well as architects cannot even
justify browser neutral programming to themselves, leave alone customers.
Websites do not become popular because of browser neutrality. They become popular
because the target audience benefits by using them - repeatedly.
In short, don’t worry about this issue. Just exploit all the great features
that IE offers to you and satisfy your customer needs more effectively with
lesser coding. Mind you, I am not even considering the sophistication of .NET
here. Even in a traditional HTML scenario IE has much more to offer. The one
of the more important things is DHTML.
The gap between developer and designer
I have always talked about the gap between developers and administrators. Here
is another gap that is equally important. Content creators are graphics guys,
whereas functionality is created by developers. Developers like development
and graphics guys like animations, effects, fades, filters, Flash, GIFs, VRML,
audio and so on. Obviously there is a gap.
Consider a simple example. On a Web page, you want to show three different images
in the same place. Each image will stay for a specific time and then fade into
the next one. This goes on and on.
How will you implement it?
Firstly, this would traditionally be considered a graphics oriented task. Developers
would not even be utilised for it. Graphics guys will either use Flash or animated
GIFs. Developers will try to use an ad-rotator control. Both these approaches
have their limitations.
Now if we have to implement this for a user definable number of images, and
if this information about images is kept in a database, what happens? No amount
of GIF animation or Flash will help you directly. Right?
Further, instead of images if we want some text to rotate, what happens then?
Big problem.
That is where the developer comes into picture. Consider a set of text messages
or image list in a table, which is configurable at runtime, of course. You want
to rotate these images with specific transitions, fully under your control.
This is where you use the Filters and Transitions object model available within
IE.
Don’t just think of this as a graphics-oriented application, which just
changes images. It can be more than that. Each of the images can be an advertisement.
At a given point of time, you know which ad is shown. Now you can programmatically
change the link location and point the click to a different location/website.
You can count clicks and so on. Thus you have just managed to write a sophisticated
ad management system.
To illustrate this, here is a simple solution to both these problems, using
the power of DHTML and IE filters and transitions.
Filter and Transition demo
Before we delve deeper into filters and transitions, let us have a quick demo
of its power.
<html>
<HEAD>
<SCRIPT>
// stores the names of pictures
var Pic =
new Array()
Pic[0] = ‘Gone Fishing.bmp’
Pic[1] = ‘River Sumida.bmp’
Pic[2] = ‘Coffee Bean.bmp’
//initialises counters for picture and transformations
var max = Pic.length
– 1;
var i = 0;
var trans = 1;
var transmax = 24;
//sets the timer to run every 3 seconds.
// you can change this value to any number in
// milliseconds
this.setInterval( “doTrans()”,
3000);
function doTrans()
{
//increments the image array index
if(i == max)
{i = 0;}
else
{ i = i+1; }
//finishes the previous transition
imgObj.filters[0].apply();
//sets the transition number
imgObj.filters[0].Transition=trans;
//changes the picture
imgObj.src=Pic[i];
//runs the transition
imgObj.filters[0].play();
//increments the transformation. Total 24 available
if(trans == transmax)
{trans = 0;}
else
{trans = trans+1;}
}
</SCRIPT>
</HEAD>
<BODY>
<IMG id=imgObj src=”” align=left
STYLE=”filter:revealTrans() “/>
</BODY>
</html>
For this demo you will require three different images. The images that I have
used are available in the C:\WINNT folder. You can of course use any images.
1. Save this code as a .HTM file.
2. Copy two images in the same directory.
3. Make sure you specify the image names correctly.
4. Run the page.
What happens?
Right now leave aside the code. It nicely shuffles images with different transition
effects every time.
How did this happen?
As you can see this is a fairly simple HTML page with just one image tag. Initially
there is no picture specified therefore, it shows a missing picture icon on
the page. You can always put some initial image.
The image tag has a special Filter clause in the Style section. This is where
DHTML filters and transitions work from. This can be set either through the
style tag or using DHTML. We have used both. The revealTrans() function enables
the display of transitions.
The timer calls the transition function every three seconds. The transition
function doTrans() does all the work.
The script is also simple. The key functionality happens in the imgObj.Filter
object.
Now, what are these transitions? The number listed indicates the transition
number.
This practically covers most transitions available in PowerPoint! That too on
a Web page – with no plugins loaded.
Do you see the power of this functionality? We will explore more of DHTML and
these visual effects in the next article.
0 Box
in.
1 Box out.
2 Circle in.
3 Circle out.
4 Wipe up.
5 Wipe down.
6 Wipe right.
7 Wipe left.
8 Vertical blinds.
9 Horizontal blinds.
10 Checkerboard across.
11 Checkerboard down.
12 Random dissolve.
13 Split vertical in.
14 Split vertical out.
15 Split horizontal in.
16 Split horizontal out.
17 Strips left down.
18 Strips left up.
19 Strips right down.
20 Strips right up.
21 Random bars horizontal.
22 Random bars vertical.
23 Random
transition from above possible
values. |
 |
About the Author:Dr
Nitin Paranjape is the Chairman and MD of Maestros (Mediline).
He is a consultant with many organisations, covering appropriate
technology utilisation, business application of relevant technology,
application architecture and audit as well as knowledge transfer.
He has authored more than 650 articles on various technology-related
subjects. He can be contacted at nitin@mediline.co.in |
|
