Reserve the date! Developer Day 2011
jQuery und ASP.NET MVC Workshops

Taking advantage of Windows 7 with Web Pages

The Windows 7 taskbar is one of the great improvements of Windows 7. Users can pin applications to the taskbar so the application is fast accessible. The application need not to run, the application is accessible with the click of a button and thus replaces the quick launch. With the task bar the application can also offer some tasks that can be accessed from the user directly, instead of starting the application first and accessing the specific feature of the application. The .NET 4 version of WPF got an improvement that integrating the application with the task bar becomes an easy task. Starting with IE9, this is also an easy task to do with Web applications as this article demonstrates.

First, I’m adding a custom icon to the Web application. This icon is shown with IE9 in the taskbar and with the address link as the following figure shows.


If the Web application is pinned to the taskbar, the icon is displayed on the left side as well, and the back and forward buttons are colored. There’s a way to specify the color of the back and forward buttons. If the color is not specified, the color is taken automatically from the icon.


The icon can be specified in the header section of the HTML page with a link to an icon as shown. The meta elements named application-name, msapplication-tooltip, msapplication-starturl, and msapplication-window are used to configure the settings for the taskbar.

<link href="/Content/Icons/favicon.ico" rel="Shortcut Icon" type="image/x-icon"/> <meta content="CN innovation" name="application-name" /> <meta content="Information about CN innovation" name="msapplication-tooltip" /> <meta content="" name="msapplication-starturl" /> <meta content="width=1024;height=768" name="msapplication-window" />

Selecting the context menu of the application pinned to the taskbar you can see information about the application as well as some links for fast access as the figure below demonstrates. This is the jump list.

The icon of the application is shown in the lowest section above the unpin and close options. These options as well as the menu to start in private browsing cannot be changed with IE9. The name of the application that was set with the application-name meta tag is shown beside the icon. With the application here I’ve also added two tasks for fast access which are Training and Books, and a custom section that lists the latest blog entries. How this is done is shown next.


Adding tasks to the task list is just a matter of adding meta tags msapplication-task. The content of this tag lists the name that is shown in the jump list, the link that should be opened on activating the item, and the icon.

<meta content="name=Training;action-uri=;icon-uri=/Content/Icons/training.ico" name="msapplication-task" /> <meta content="name=Books;action-uri=;icon-uri=/Content/Icons/books.ico" name="msapplication-task" />

The items that should appear above the task list can have custom section names. I’ve created a Blog section and display titles of the last five blog entries that link to these. Adding such items to the jump list is done with JavaScript. First it is verified if the Window is pinned. This can be done with the function window.external.msIsSiteMode. If it is not, and if the site is opened from a different browser, the script doesn’t need to run. A new section is created with the function msSiteModeCreateJumpList. Items to the jump list are added with msSiteModeAddJumpListItem. The parameters of this method are the name that should be displayed with the jump list, the URL that should be opened, and the link to the icon that should be displayed.

<script type="text/javascript"> try { if (window.external.msIsSiteMode()) { ext = window.external; ext.msSiteModeClearJumpList(); ext.msSiteModeCreateJumpList("Blog"); ext.msSiteModeAddJumpListItem("Sharing Assemblies between Silverlight and .NET", "", "/Content/Icons/blog.ico"); ext.msSiteModeAddJumpListItem("Real World .NET 4 and C#", "", "/Content/Icons/blog.ico"); ext.msSiteModeAddJumpListItem("BASTA! 2011 in Mainz", "", "/Content/Icons/blog.ico"); ext.msSiteModeAddJumpListItem("WPF ListBox Postioning using a Canvas", "", "/Content/Icons/blog.ico"); ext.msSiteModeAddJumpListItem("Reserve the date! Developer Day 2011", "", "/Content/Icons/blog.ico"); ext.msSiteModeShowJumpList(); } } catch (exception) { } </script>
In my site the JavaScript function is created dynamically by using server-side ASP.NET code to create items that reference the last five blog entries.

It will be interesting to see what features Web applications will get from Windows 8. This taskbar feature from Windows 7 is limited in the way that there is not enough place for all my important applications. Let’s see how Windows 8 changes this using Metro, and what other features Web applications can use from Windows 8.


CN innovation

How to use WPF 4 to integrate in the Windows 7 taskbar is shown in my book Professional C# 4 and .NET 4.

Information on programming Web applications in my Web programming workshop.


Feed You can follow this conversation by subscribing to the comment feed for this post.

remote control helicopter reivews

Swich to wordpress, make your blogger nicer. -My 2 cents

django developer

easy task. Starting with IE9, this is also an easy task to do with Web applications as this article demonstrates.


While the Sticky Notes applet may not be the most exciting feature in Microsoft Windows 7, there are actually a number of situations where this little applet can come in handy

Verify your Comment

Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.


Post a comment

Your Information

(Name and email address are required. Email address will not be displayed with the comment.)