Developing Active Desktop items for IE 4.0

Microsoft's Internet Explorer 4.0 can change the way you've traditionally reached your intended audience. For example, to go beyond creating a compelling Web site, you can augment your content offering by providing your audience a more immediate, condensed experience. Indeed, you can do so by taking advantage of IE4.0's Active Desktop feature.

An Active Desktop item can be any HTML component; it works in the same manner as an Active Channel. The difference is, just as the name implies, the Desktop item stays on the user desktop—not on the channel bar as does an Active Channel. In this article, we'll show you how to create a Desktop item for your users. But before we begin, let's take a look at the underlying technology behind Active Desktop in IE 4.0.

Under the hood

The Active Desktop in Internet Explorer 4.0 is built from two separate layers: the transparent icon layer, which exposes all the user's existing desktop shortcuts, and the background HTML layer that hosts all Active Desktop items. The HTML layer is a single, local HTML file called Desktop.htm that's created and edited automatically by Internet Explorer 4.0. This file contains the following items:

HTML tags that represent each Active Desktop item. Each Active Desktop item consists of a single HTML tag with arbitrary x- and y-positions. The HTML tag for an Active Desktop item can be either an image (IMG tag) or a floating frame (IFRAME tag) and is generated automatically by Internet Explorer 4.0. The floating frame is the most commonly used approach, because it neatly encapsulates an entire arbitrary HTML document that can contain anything the publisher desires. In either case, there's a single URL that points to the actual content.
An ActiveX control that enables moving and resizing the Active Desktop items and helps manage the list of items.
Any other static HTML that the user wants to have in the background. By default, this is just a reference to the user's chosen wallpaper, which is exposed as the background watermark for the HTML page. Users can customize their desktops by installing Active Desktop items designed for Internet Explorer 4.0. They can install such items by dragging and dropping, or by manually specifying a URL for an image or floating frame. (Manual setup requires the user to access the new Web option tab in the Display control panel.)

Now that we've explored how the Active Desktop works, let's take a look inside a Desktop item.

Elements of a Desktop item

As we mentioned, the Desktop item shares the same technology as the Active Channel. Consequently, you define the content of a Desktop item in a Channel Definition File (CDF), within a <CHANNEL>…</CHANNEL> tag. However, unlike an Active Channel, you'll use different attributes inside the <CHANNEL> tag to identify a Desktop item. You can use any HTML-based component, such as Dynamic HTML, ActiveX Controls, Java applets, and scripting, to create your Desktop item.

As a publisher you can specify the initial size and update intervals of the Desktop item. As part of the IE 4.0's information delivery system, the URL associated with any Active Desktop item is automatically added to the user's subscription folder. All contents of the Desktop item are automatically cached in the system so it's visible even when the user isn't connected to the Internet. Moreover, since Desktop items become part of the user's desktop, they're fully customizable by the user. A user can resize, move, or delete a desktop item at any time. Now that we've learned about some of the underlying technology behind Active Desktop and Desktop item, it's time to create our own.

Find the links

For this example, we'll first create a simple HTML page that contains two links, one for the back issues and another for the demo page. This is the page that the users will see on their desktops.

Next, we'll create a channel file and define our update intervals, pointing the file to the HTML page we've created. When we're finished, we'll add our Desktop item to our desktop. Figure A displays our Microsoft Web Builder Desktop item.

Figure A

We've added our Microsoft Web Builder Active Desktop item to our desktop.

Create the content

Using your HTML editor, create a simple HTML page. It's important to keep your page light and simple so it will load faster. Begin by defining a style sheet definition as we show here:

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual InterDev 1.0">
<META HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1">
<TITLE>Web Builder Desktop</TITLE>
<STYLE type="text/css">
<!--
   BODY  {font-size: 10pt; color: yellow; font-family: Verdana, Arial, Helvetica;z-index:1;}
   P.INITIAL:FIRST-LETTER {font-size:200%; float:left;}
   .dropcap:First-letter {font-size:20; float:left;}
   H1 {{font-size: 16pt; color: orange; font-family: Verdana, Arial, Helvetica;z-index:1;}
   A:link {font-size: 10pt; color: lime; text-decoration: none; font-weight: bold; font-family: Verdana, Arial, Helvetica;}
   A:visited {font-size: 10pt; color: lime; text-decoration: none; font-weight: bold; font-family: Verdana, Arial, Helvetica;}
   STRONG {font-size: 14pt; color: #003366; text-decoration: none; font-family: Verdana, Arial, Helvetica;}
   SMALL {font-size: 7pt; color: gray; text-decoration: none; font-family: Verdana, Arial, Helvetica;}
   .subhead {font-size: 11pt; font-weight: bold; color: #003366; text-decoration: none; font-family: Verdana, Arial, Helvetica;}
   .thanks {font-size: 25pt; font-weight: bold; color: lightgrey; text-decoration: none; font-family: Tahoma, Times, Helvetica;}
-->
</STYLE>
</HEAD>

Now add the text to finish the page, like this:

<BODY bgcolor="navy">
<p>
<h1>Microsoft Web Builder</h1>
<p><small>
Missed an issue? Not to worry! Click here to grab the back issues of Microsoft Web Builder:</small><br>
<a href="http://209.48.162.17/mswb/backissues.asp">Back Issues</a><br><br>
<p><small>
You've seen the code, now see these projects in action! Click here to go to our demo site and see 
your favorite project in action:</small><br>
<a href="http://209.48.162.17/mswb/demos.asp">In Action</a><br><br>
<p>
Every month Microsoft Web 
Builder offers you a hands-on 
approach to the hottest Web technologies available 
from Microsoft.

</BODY>
</HTML>

Notice that we didn't add any table definitions to size the text block. We'll define the size of this page in the channel definition file, which we'll create next.

Create a channel

The Channel Definition File (CDF) for the Active Desktop item works similarly to the one in an Active Channel. To create the CDF, start with the XML header and the <CHANNEL> tag, like this:

<?XML version="1.0"?>
<Channel>

Next, we'll add the item's update schedule with a <SCHEDULE> tag. You can use any future date as the EndDate attribute. You'll also need to specify an update interval for the content. If your content is updated frequently, you can use WEEK, DAY, and HOUR. In our case, we've set the update interval to MONTH to correspond with our Web site updates, like so:

<Schedule EndDate="1998.11.05T08:15-0500">
        <IntervalTime MONTH="1" />
        <EarliestTime HOUR="12" />
        <LatestTime HOUR="18" />
</Schedule>

Now it's time to add the actual link to the HTML we've previously created and to title the item. To do so, use the following line of code:

<Item HREF="http://www.mswebbuilder.com/WBDesktop.asp">
<Title>Web Builder Desktop</Title>

At this point, we must ensure that IE4.0 knows to use this item as a Desktop component. In the line of code

<Usage VALUE="DesktopComponent">
<OpenAs VALUE="html" />

the OpenAs attributes define how IE 4.0 should host the content. You can use HTML as we've done here, or you can use IMAGE if you want your Desktop item to appear as an icon on the desktop.

Next, we'll define the width and height of the Desktop item. Keep in mind that most users are still using a relatively small 640 by 480 pixel display, so don't use a size that will take over the entire desktop. In our case, we've used a conservative 220 by 337 pixel image for our item, with code like this:

<Width VALUE="220" />
<Height VALUE="337" />

Finish the CDF file by closing the open tags with the lines

</Usage>
    </Item>
</Channel>

Now, save the file as ActiveWB.CDF. At this point, we've finished creating the CDF file and are ready to use our Desktop component.

Add a link

To make your Desktop item accessible, you'll need to provide a link from your Web site to the CDF file you've just created. You can use a simple text link or an image to create your link as we show here:

<a href=http://www.mswebbuilder.com/ActiveWB.cdf>Click here to add to desktop</a>

That's it! Your Desktop item is now ready to be installed in thousands of desktops worldwide. To test the item, click on the link from IE 4.0. When you do, IE 4.0 will display the Subscribe dialog box, as shown in Figure B.

Figure B

You can customize the update schedule of a Desktop item just like you would a channel.

Click OK to accept the default schedules. IE 4.0 will now download the content and place it on your Active Desktop.

Conclusion

An Active Desktop item works much like an Active Channel to improve the content delivery to your intended users. In this article, we've demonstrated the simple process of creating a Desktop item to do just that.

-----------------------------------------------

This article is reproduced from the December 1997 issue of Microsoft Web Builder. Microsoft Web Builder is an independently produced publication of The Cobb Group. No part of this article may be used or reproduced in any fashion (except in brief quotations used in critical articles and reviews) without prior consent of The Cobb Group. To contact The Cobb Group, please call (800) 223-8720 or (502) 493-3200.

Copyright © 1997 The Cobb Group, a division of Ziff-Davis Inc. The Cobb Group and The Cobb Group logo are trademarks of Ziff-Davis Inc. All rights reserved. Reproduction in whole or in part in any form or medium without express written permission of Ziff-Davis is prohibited.