Sat Jan 29 2011

For those who want to skip the documentation part and get to the downloading:

 

Why, Why Not. The other day Mark Nichols and I were recording a Developer Smackdown podcast about ASP.NET Helpers when we had this idea. Why not make the new IE9 features so easy to add you don't even have to think about it?  So we did, and the IE9.Helper was born.

Background. IE9 has a number of new developer features which are pretty neat. You can find the full list of features here:  http://msdn.microsoft.com/library/gg131029.aspx.  We decided to pick off a few just to get started, specifically: Site Pinning, Adding to the Start Menu, Dynamic Overlays, Window Activation.

_Goal. _So you're sitting there asking yourself: this stuff wasn't hard in the first place. Your right it really isn't, but we figured we could make it even easier to incorporate it into your site. Maybe even just drop a line and be done. We didn't quite get there and I am sure there is room for improvement, so please let us know.

Installing. Everything is packaged into a NuGet package. The package will appear in both the standard feed as well as your WebMatrix feed as the IE9.Helper 1.0.0. The package installs 1 cshtml file into your app_code folder.  The IE9.cshtml file contains all the helpers, functions and other goodness needed.

PM> install-package IE9.Helper

_Sample: _We did create a simple sample site which has everything already wired up. You can find that download here: http://ie9helper.codeplex.com/releases/view/59985

Now that we have the package installed, it's time to get going. You can break things down into three parts, initialization, calling the helpers and identification.

_appStart.cshtml.  This is where we configure things.  To be honest, this is the one place where I would like to clean things up. Yesterday we were too entrenched in the problem space so we left it for now. Here is the _appstart.cshtml from the sample project:

@using System.Collections.Generic;

@using System.Dynamic;


@{


    var jumplistItems = new List<dynamic>();


        dynamic firstItem = new ExpandoObject();

        firstItem.Name = "Page #1";  

        firstItem.Action = "/Page1";  

        firstItem.Icon = "./fav.ico";  


        jumplistItems.Add( firstItem );


        dynamic secondItem = new ExpandoObject();

        secondItem.Name = "Page #2";  

        secondItem.Action = "/page2";  

        secondItem.Icon = "./green.ico";


        jumplistItems.Add( secondItem );


        dynamic thirdItem = new ExpandoObject();

        thirdItem.Name = "Page #3";  

        thirdItem.Action = "/page3";  

        thirdItem.Icon = "./blue.ico";


        jumplistItems.Add( thirdItem );


        IE9.Initialize(

                applicationName: "ie9 helper demo",

                applicationColor: "#FF8000",

                jumplistItems: jumplistItems

        ); 

}

@##$%@#$ , WHAT! I thought you were making this easier? Point taken but lets break this down. At the bottom you see IE9.Initialize passing in three parameters. We will make the jumplistItems optional in the next release ( coming in the next day or so ).  This is where we are setting the Application Name, Application Color and the Jumplist Items. The rest is where we are creating a List of dynamic items which will represent the Jumplist items in your pinned site.  Each Item has a Name, Action ( or url ) and the Icon ( the icon .ico ) that will display on the side of the link.

Helpers. With that out of the way lets get to using it. There are only two helpers, AddJumpLists() and AddMetaTagsAndEvents(). Why two? We we figured maybe there would be someone who didn't want to add JumpList items. If we turn out to be wrong, we will just combine them.  You simply call these helpers like so:

@IE9.AddJumpLists()
<pre class="code"><span style="color: #232323"></span><span style="color: black">@</span><span style="color: #232323">IE9.AddMetaTagsAndEvents()</span></pre>

Now these two helpers you would add into your of your site, typically in your master layout. In our sample, we created an optional section and implement that section in the page. I WOULDN'T DO THAT! We only did it in the sample so we were not jumping between pages.

Attribution Time. By calling the two helpers we've essentially added a bunch of jQuery functions and the IE9 meta tags.  At this point we could start pinning the site but we don't have anything using those functions such that we could overlay an icon.  Our jQuery functions will search for the following 4 class names and implement their click function:

  1. ie9AddOverlay2. ie9ClearOverlay3. ie9AddToStart4. ie9WindowActivate

Let's create a button that will add the site to the start menu:

<button class="ie9AddToStart">Add to Startbutton>

 

ie9AddToStart, ie9ClearOverlay, ie9WindowActivate all work exactly the same.

ie9AddOverlay, is a little different.  Since overlays are really meant to be dynamic ( meaning I can overlay any ICO I want at anytime ), we need to do more than just implement the click event, we also need to know what ICO to overlay.  HTML5 to the rescue. Below you see we have added the class ie9AddOverlay, but we also added a new attribute data-overlay. Data- is an HTML5 attribute where we can quasi add our own custom element.  So in our case data-overlay is where we pass the path to what icon we want to overlay.  Then during our jQuery's click function we will read that attribute and overlay it.

<a href="/page2" class="ie9AddOverlay" data-overlay=./green.ico>goto page 2a>

That's it.  We will be pushing another release in a day or so. Nothing really to big just some cleanup and more documentation. We would love any feedback you might have so please feel free to share.