Web Slice is a cool feature in IE8!
In frequently updating web sites, for monitoring status we need to visit those web sites often. Usually we keep the URL to monitor in our favorites list and hit the web site whenever required. When we hit the web site the entire page gets loaded, but our point of interest is only a small updating portion of the web site. This usually happens when visiting the stock updates web site. We want the updated stock, which is actually a very small portion of the web site. But for getting those updates we need to load the entire web page. Is there an option to view only that small updated portion of the web site? YES, indeed there is an option to only view the small updated portion of the web site with IE8's Web Slice feature!
Using Web Slices user can add small snippets of a web site in the IE favorite toolbar and monitor their updates. These Web Slices needs to be enabled during web site creation. Please note that this feature is only supported in IE8. Figure below shows the Web Slice for the updated section.
Figure 1: Web SliceHow to create a Web Slice?
To enable a WebSlice on your site, just add HTML annotations to your webpage. A WebSlice uses a combination of the hAtom Microformat and the WebSlice format.
<div class="hslice" id="item123">These three annotations helps IE recognize that it is a WebSlice and treat it like a feed; handling the discovery, subscription, and processing of the WebSlice. You can also add additional properties to a WebSlice, such as expiration, time-to-live value, and an alternative source as shown below:
<p class="entry-title">Stock: Reliance Petro</p>
<div class="entry-content">BSE: XXX, NSE: XXX
…
</div>
</div>
In the above sample we have used a URL for the feed as "http://localhost:24730/StockInfo/DataFoundUpdate.aspx#datafound-update". Please note that this URL has ID of the container DIV preceded by "#" as "#datafound-update". It is better to have separate aspx page for showing the updates, because this separate page will be lightweight and hence can be rendered quickly. The DataFoundUpdate.aspx page mentioned in the above example has code as shown below:
<div class="hslice" id="datafound">
<p class="entry-title">Stock: Reliance Petro</p>
<a rel="feedurl"
href="http://localhost:24730/StockInfo/DataFoundUpdate.aspx#datafound-update" />
</div>
<html xmlns="http://www.w3.org/1999/xhtml" >In the above code we have referenced a silverlight page, just to show rich UI interface to the user. Instead you can also render the updated content. Authentication is also enabled for the Web Slice. You can set User name and Password by changing the Properties of a Web Slice. The Web Slice properties can be change by right clicking the favorite slice --> Properties.
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div class="hslice" id="datafound-update">
<h2 class="entry-title">Data Found Report</h2>
<a class="entry-content" rel="entry-content"
href="http://localhost:24730/StockInfo/SilverlightDisplay.aspx" />
</div>
</form>
</body>
</html>
Some important links on Web Slice:
1. More information on Web Slice
2. Watch Web Slice Video
3. Download the source code
Here is a cool framework developed for Creating Web Slices in ASP.NET at CodePlex.
Hope this helps you!
Posts
0 comments:
Post a Comment