16
If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
I recently got tapped to put together some really cool stuff using one of the great but nearly un-explored features of Internet Explorer 8 , Web Slices. We put together a series of slices for General Motors highlighting their Chevy, Buick, Cadillac and GMC brands car shows in Chicago with the expectation of adding other shows as they occur. This IE 8 feature allows you to create a button in the IE 8 tool bar linked to content or live information and has the ability to indicate when new content is available like a feed. I created the slice content using Silverlight 3.0 .
Setting up the slice to use all it’s feature can be a little tricky since the documentation available is , well, awfully inadequate. One of the first issues I ran into was that its impossible to call any of the navigate functions of the DOM. All navigation has to be done by using an htm <a> element (in HTML) or a <LinkButton> (in Silverlight) . You cannot target a specific tab or window (it will always open a new tab or window) but can navigate within the slice. Now, there are a number of ways to create a slice. The docs cover the basics here IE Activities And Web Slices.
I am going to cover the recommended practice of using all three elements; the installer, updater and content. First the relationship between the elements. The installer set up the web slice in the IE tool bar. This can be accomplished by using HTML attributes or script that can be embedded into any page.
HTML Attributes:
<div class=”hslice” id=”buick-webslice” style=”top: 40px; position: absolute; left: 40px;”>
<span class=”entry-title”>Buick Web Slice</span><br />
<a rel=”feedurl” href=”update.htm” style=”display: none;”></a>
<img src=”images\buickslice.jpg” />
</div>
This causes IE 8 to render a special border around the content and an install icon for installing the slice.
Script:
<a style=”cursor:pointer;” onclick=’window.external.AddToFavoritesBar(”http://www.buick-auto-shows.com/info/Update.htm#buick-webslice”,”Buick Auto Shows”, “slice”);’>Download the Buick-Auto-Shows.com Web Slice</a>
Note the ‘id’ attribute in the HTML and the bookmark ref in the url in the javascript version. Now the installer piece points to the update piece that I have placed on a page called update.htm. Here is the contents of Update.htm.
<div class=”hslice” id=”buick-webslice”>
<div class=”entry-title”>Buick Auto Shows</div>
<div class=”entry-content”>
<span id=”placeholder”>2/16/2010 12:00:00 PM</span>
</div>
<a rel=”entry-content” href=”Slice.htm” style=”display: none” />
<a href=”http://buick-auto-shows.com/info/ie8-webslice.html” rel=”Bookmark” style=”display: none” target=”_blank” />
<span class=”ttl” style=”display: none”>15</span>
</div>
This is what the browser will use to determine if the slice has new content available. It has an ‘entry-content’ section that the borwser will cache and check to see if it has changed. I used a date but it can be any thing, a version number, a random string or sequence that changes when you want to signal the slice that new content is available. It also has a <a> element referencing the the actual slice content with the attribute rel=”entry-content” and an <a> element with a rel=”bookmark” attribute that is the link that will be used as the link for the slice in the toolbar. I pointed it at the install page of the slice. The final part is the <span> element that holds the ‘ttl’ (Time to Live) value for the slice. These vales can be equal 15min, 30min,1hr,4hr,1day,1week or never. The one above is set to 15 min.
The content that the update peice points to is hosted in what I named slice.htm. Its a page that is formated to be hosted in the default size of the slice window. I used Silverlight 3.0 as the actual content. You can find all of this here at these links:
Slice Install Pages:
http://gmc-auto-shows.com/info/ie8-webslice.html
http://chevy-auto-shows.com/info/ie8-webslice.html
http://cadillac-auto-shows.com/info/ie8-webslice.html
http://buick-auto-shows.com/info/ie8-webslice.html
Slice Update Pages
http://gmc-auto-shows.com/info/update.htm
http://chevy-auto-shows.com/info/update.htm
http://cadillac-auto-shows.com/info/update.htm
http://buick-auto-shows.com/info/update.htm
Slice Content Pages
http://gmc-auto-shows.com/info/slice.htm
http://chevy-auto-shows.com/info/slice.htm
http://cadillac-auto-shows.com/info/slice.htm
http://buick-auto-shows.com/info/slice.htm
Main Landing Pages
http://gmc-auto-shows.com
http://chevy-auto-shows.com
http://cadillac-auto-shows.com
http://buick-auto-shows.com
