First Impressions of IE9

Internet Explorer 9 has launched and I was excited to get an opportunity to give it a test drive. A quick perusal of the new features list gets me a little more excited, as there is some nice stuff here.

First, let me start of by saying that I routinely use IE8, Firefox 3.6 and Chrome 10, both as a web developer and a regular user. While I’ve been fairly happy with IE8 over all — it accounts for about 75% of my browser usage across 3 different machines — there were times I wished for the performance of Chrome and the full-featured developer tools of Firebug and PageSpeed available in FF. I have also found myself using Firefox less and less in favor of Chrome for my normal browsing activities, with FF being relegated to mostly webpage testing scenarios. I wouldn’t say I’m completely comfortable with the Chrome UI, but it’s growing on me little by little. However, I love the performance benefits of Chrome on JavaScript heavy sites. The one exception being with Silverlight heavy applications, where I’ve found Chrome to be very sluggish compared to IE and FF.

Now that I’ve got that out of the way, lets get on with my first impressions. Put simply, I’m loving it. It’s fast. I haven’t bench-marked anything so this is purely subjective. But in the first hour or so of use I visited all my favorite sites plus a number of sites I’m actively developing and the performance seems every bit as fast as Chrome and I’ve encountered zero display issues. A number of these sites included some Silverlight based applications and the performance difference here was WAY faster than Chrome. In fact, I’d say Silverlight apps are even faster in IE9 than they were in IE8. I also haven’t noticed any rendering issues and the install went flawless.

The user interface does remind me a little of Chrome, particularly from the minimalist standpoint. It defaults to showing tabs and the URL/search box on one line, with a Bing toolbar below that. I’m not one for the Bing toolbar and I also don’t like my tabs sharing a line with anything else, so I quickly replaced the Bing toolbar with the tabs list. This leaves plenty of room for content and I think it ends up using slightly less space than a default Chrome window does. I’m also glad to see support for tear-off tabs, one of the features I really liked about Chrome, and I’m LOVING the site pinning features. The first site I pinned to the Windows 7 taskbar was Pandora.

And for a little fun, try visiting this site. In IE9, it makes use of hardware acceleration to display some SVG graphics. I tested is in all three browsers I had on my machine. FF 3.6 showed a miserable 6-8 fps, but was at least smooth. Chrome 10 bounced around between 15 and 40 fps with 20fps being typical and never was smooth – not sure why it wasn’t consistent. IE9 pegged the test at 60fps and showed no display lag was so ever.

I haven’t installed IE9 on my development machine yet, so I haven’t tried using it in a debug session from Visual Studio. Additionally, I’ve only spent a little time looking over the Developer Tools in IE9, and there looks to be some new features, such as Console and Network tabs,  which I’ll have to check out.  The compatibility mode now supports IE9, IE8 and IE7. I’d also like to see if a couple of bugs were fixed as well.

All in all, my first impression of IE9 is a good one. Time will tell if that holds true.

Creating Hover-Style Info Boxes on the Bing Maps AJAX v7.0 Control

When v7.0 of the Bings Maps AJAX control was released last fall, I began testing out how easy it would be to port some of my existing code that was originally developed against the v6.3 AJAX control. I was pleasantly surprised to find the newer version performed considerably faster, and had a more natural API. However, many of the features that v6.3 gives you OTB were not available in v7.0; info boxes being one of those features. Thus I began testing how easy it would be to develop my own info boxes. I got about 90% of the way there before running into some snags with the way mouse events and pushpins interacted that made building display-on-hover style info boxes problematic. You can read more about this experience on Windows Live Developer Forums – Creating Infoboxes in Bing Maps AJAX v7.

Microsoft recently released an update for the Bing Maps AJAX v7.0 control which includes the ability to create info boxes. The initial release did not offer this feature so this is a welcome improvement. It also seems to have addressed the mouse event issues with push-pins. Using information published in the MSDN documentation and the experiences gathered from other developer’s forum postings, I have put together an example of how to use the new info box features and create hover-style info boxes that allow clickable content. Unlike the examples provided in the API documentation, my solution doesn’t require that the user click the pin to display the info box, or click the close button to hide it . Instead, they will show by hovering the mouse over the pushpin, will stay visible as long as the mouse remains on the pushpin or info box, and will then automatically hide as the mouse moves off the info box or pushpin.

Sample code showing how this can be done is provided below.

Code Snippet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>
<html xmlns="http://www.w3.org/1999/xhtml&quot;>
<head>
    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&quot;></script>
    <script type="text/javascript">
        var map = null;
        var pinInfobox = null;

        // create a map object and place two test pins on it, with infobox on pin hover.
        function GetMap() {
            // Initialize the map
            var mapSettings = {
                // MapOptions
                credentials: "BING MAP CODE GOES HERE",
                // ViewOptions
                // default to roughly center of CO.
                center: new Microsoft.Maps.Location(39.1000, -105.6500),
                // this gives a combo arial and birdseye in v7
                mapTypeId: Microsoft.Maps.MapTypeId.birdseye,
                padding: 1,
                zoom: 7 // shows the whole state of CO
            };
            map = new Microsoft.Maps.Map(document.getElementById("myMap"), mapSettings);
            // Hide the info box when the map is moved.
            Microsoft.Maps.Events.addHandler(map, 'viewchange', mapViewChange);

            // Retrieve the location of the map center
            var pinLocation = map.getCenter();
            // Add a pin to the center of the map
            var pin = new Microsoft.Maps.Pushpin(pinLocation, { text: '1' });
            //Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
            Microsoft.Maps.Events.addHandler(pin, 'mouseover', pinMouseOver);
            Microsoft.Maps.Events.addHandler(pin, 'mouseout', pinMouseOut);
            // Add the pushpin to the map
            map.entities.push(pin);

            // create a second pin
            pinLocation = new Microsoft.Maps.Location(39.0000, -105.6000)
            pin = new Microsoft.Maps.Pushpin(pinLocation, { text: '2' });
            Microsoft.Maps.Events.addHandler(pin, 'mouseover', pinMouseOver);
            Microsoft.Maps.Events.addHandler(pin, 'mouseout', pinMouseOut);
            map.entities.push(pin);

        }

        // This function will create an infobox
        // and then display it for the pin that triggered the hover-event.
        function displayInfobox(e) {
            // make sure we clear any infoBox timer that may still be active
            stopInfoboxTimer(e);

            // build or display the infoBox
            var pin = e.target;
            if (pin != null) {

                // Create the info box for the pushpin
                var location = pin.getLocation();
                var options = {
                    id: 'infoBox1',
                    title: 'My Pushpin Title',
                    description: 'This is the plain text description.',
                    //htmlContent: '',
                    height: 100,
                    width: 150,
                    visible: true,
                    showPointer: true,
                    showCloseButton: true,
                    // offset the infobox enough to keep it from overlapping the pin.
                    offset: new Microsoft.Maps.Point(0, pin.getHeight()),  
                    zIndex: 999
                };
                // destroy the existing infobox, if any
                // In testing, I discovered not doing this results in the mouseleave
                // and mouseenter events not working after hiding and then reshowing the infobox.
                if (pinInfobox != null) {
                    map.entities.remove(pinInfobox);
                    if (Microsoft.Maps.Events.hasHandler(pinInfobox, 'mouseleave'))
                        Microsoft.Maps.Events.removeHandler(pinInfobox.mouseLeaveHandler);
                    if (Microsoft.Maps.Events.hasHandler(pinInfobox, 'mouseenter'))
                        Microsoft.Maps.Events.removeHandler(pinInfobox.mouseEnterHandler);
                    pinInfobox = null;
                }
                // create the infobox
                pinInfobox = new Microsoft.Maps.Infobox(location, options);
                // hide infobox on mouseleave
                pinInfobox.mouseLeaveHandler
                    = Microsoft.Maps.Events.addHandler(pinInfobox, 'mouseleave', pinInfoboxMouseLeave);
                // stop the infobox hide timer on mouseenter
                pinInfobox.mouseEnterHandler
                    = Microsoft.Maps.Events.addHandler(pinInfobox, 'mouseenter', pinInfoboxMouseEnter);
                // add it to the map.
                map.entities.push(pinInfobox);
            }
        }

        function hideInfobox(e) {
            if (pinInfobox != null)
                pinInfobox.setOptions({ visible: false });
        }

        // This function starts a count-down timer that will hide the infoBox when it fires.
        // This gives the user time to move the mouse over the infoBox, which disables the timer
        // before it can fire, thus allowing clickable content in the infobox.
        function startInfoboxTimer(e) {
            // start a count-down timer to hide the popup.
            // This gives the user time to mouse-over the popup to keep it open for clickable-content.
            if (pinInfobox.pinTimer != null) {
                clearTimeout(pinInfobox.pinTimer);
            }
            // give 300ms to get over the popup or it will disappear
            pinInfobox.pinTimer = setTimeout(timerTriggered, 300);
        }

        // Clear the infoBox timer, if set, to keep it from firing.
        function stopInfoboxTimer(e) {
            if (pinInfobox != null && pinInfobox.pinTimer != null) {
                clearTimeout(pinInfobox.pinTimer);
            }
        }

        function mapViewChange(e) {
            stopInfoboxTimer(e);
            hideInfobox(e);
        }
        function pinMouseOver(e) {
            displayInfobox(e);
        }
        function pinMouseOut(e) {
            // TODO: detect if the mouse is already over the infoBox
            //  This can happen when the infobox is shown overlapping the pin where the mouse is at
            //    In that case, we shouldn't start the timer.
            startInfoboxTimer(e);
        }
        function pinInfoboxMouseLeave(e) {
            hideInfobox(e);
        }
        function pinInfoboxMouseEnter(e) {
            // NOTE: This won't fire if showing infoBox ends up putting it under the current mouse pointer.
            stopInfoboxTimer(e);
        }
        function timerTriggered(e) {
            hideInfobox(e);
        }
    </script>
</head>
<body onload="GetMap();">
    <div id='myMap' style="position: relative; width: 500px; height: 500px;">
    </div>
</body>
</html>

My favorite Visual Studio 2010 Extensions

I’ve recently been spending a fair amount of time working with js and css files inside Visual Studio 2010, and while I generally like Visual Studio as an IDE, it does lack a few things in this area. As a result, I spent some time looking through the available extensions on the MSDN Visual Studio Gallery site. Here’s my list of favorites so far and a little bit about them.

1. devColor – This extension gives you some cool color managing features in css files. Have you ever found yourself looking at something like #E5234A in a css file and wondered exactly what color was being represented? Well, this tool gives that information to you at a glance, right in the css file by including a color-specific underline directly under the color value. This tool also provides a nice visual color-picker, a color anagram feature, and lists all colors used in the css file.

2. Jscript Editor Extensions – This is actually a pack of extensions that makes working with JavaScript much nicer. It adds brace-matching, code outlining/folding, current word-highlighting, and extra support for para elements for JavaScript intellisense. They also provide a vsdocs files for jQuery with para info, which is better than the vsdocs file MS puts out on their CDN.

3. JavaScript Parser – This extension provides a number of code-navigation features for JavaScript, but the one I find most helpful is the tree view of functions for your given js file. It provides similar functionality to the Class View window in Visual Studio, but for JavaScript files. The tree can be sorted in alphabetical order, or in source-file-location order, where each node appears in the same order as in the js file.

4. VSCommands 2010 – This is another grab-bag of enhancements (a lot actually), but there is one feature I really like in this pack and it is the sole reason I have it on my list. In fact, if I could find an extension that provided just this feature, I’d probably do away with VSCommands. It is the ability to use Visual Studio’s file group/ungroup feature directly in the solution explorer. This allows you to link related files together into a tree of items, exactly how the code behind is “nested” under the aspx file for example. You can do this manually without this tool, by simply editing the project file, but this tool makes it very convenient to do it right in the solution explorer.

   As I work on Ajax-rich sites, I’m often finding each web page has a need for it’s own js file. Rather than put all these into a separate scripts folder, I prefer to keep them in the same location as the web page for which they are related, but this can result in a lot of nodes in the solution explorer. Where I have found this a very useful feature is in organizing those page-level js files by grouping them under their related web page file. For example, the MyPage.js file can now be grouped under MyPage.aspx, keeping all related code together. Even better, I can also group minimized versions under the non-minimized versions.

5. Spell Checker – Nothing fancy, just does exactly what you would think. For me it’s been a great tool, though, because I’m quite bad about mistyping and/or misspelling words. Rather than having to copy-paste sections of comments, code, or text into another tool to do my spell checking – and have to weed through code in the process – this allows the spelling to be checked right in Visual Studio. It provides automatic spell checking of your documents, taking into account code formats, and provides red-squiggles under any misspelled words. Simply click-to-correct, add word to custom dictionary, or ignore the word. My only complaint is that there isn’t a “correct all” feature, but over-all I find it very helpful.

So there is my list of favorite Visual Studio Extensions so far. Want to share your experiences and/or favorites? Drop me a quick comment.

How to gray the text of a disabled Silverlight Label control.

Have you ever written code that both offended and impressed you at the same time? Maybe it was a piece of code that flew in the face of accepted design or coding practice yet produced inarguably good results. Maybe you came up with a hack to work around some limitation in your toolset or existing application which proved to be so resourceful you couldn’t help but be proud. I recently had one such moment while working on a Silverlight application.

While trying to design a configuration style dialog using a natural text pattern, I found myself needing to enable and disable blocks of text along with related controls. When disabled, I wanted the control to render itself in a ghosted fashion with grayed out text. The first issue you will run into when doing this in Silverlight is that the TextBlock element can’t be enabled or disabled as it does not derive from System.Windows.Controls.Control and therefore does not have an IsEnabled property.

This is where the Silverlight Toolkit’s Label control comes in as it does derive from Control. Additionally, since the Label control is also a ContentControl, it’s able to host any number of other controls as part of its content template including simple text. The IsEnabled property of a label will properly propagate down to other such controls which inherit from Control thus disabling them as well. However there seems to be a known issue with the current version where simple text content in the control is not rendered with the same disabled/ghosted style as the other controls. The net affect was that a Label was no different than a TextBlock for my purposes.

Starting in Silverlight 4, through the use of implicit styles, you can now define the look and feel of a control without having to specify a key name. This allows you to target your style for a specific type of control without having to specifically add a reference to the style in the location where you make use of the target control type. You can read more about Implicit Styles in Silverlight 4 at SilverlightShow.net.

This is the part where a hack becomes a thing of beauty (or at least power anyway). Leveraging some XAML provided in the CodePlex ticket for this issue and tweaking it for inclusion in App.xaml as an Implicit Style, I was able to extend all my label controls in the application with a grayed out text feature when they are in the disabled state. So while I was a little dismayed that something as simple graying out some text for a disabled control required a hack, I was also quite impressed with the power of Implicit Styles.

Sample App.xaml code:

<!-- /////////////////////////////////////////////////////////////////////////////
SDK LABEL HACK: the sdk version of the label doesn"t gray the text when disabled. 
http://silverlight.codeplex.com/workitem/969
-->
<style targettype="sdk:Label">
  <setter property="IsTabStop"
      value="False" />
  <setter property="HorizontalContentAlignment"
      value="Left" />
  <setter property="Template">
    <setter.value>
      <controltemplate targettype="sdk:Label">
        <grid>
          <vsm:visualstatemanager.visualstategroups>
            <vsm:visualstategroup x:name="CommonStates">
              <vsm:visualstate x:name="Normal" />
              <!-- add state change when Disabled-->
              <vsm:visualstate x:name="Disabled">
                <storyboard>
                  <objectanimationusingkeyframes storyboard.targetname="ContentControl"
                                   storyboard.targetproperty="Foreground"
                                   duration="0:0:1.5">
                    <discreteobjectkeyframe keytime="0">
                      <discreteobjectkeyframe.value>
                        <solidcolorbrush color="Gray" />
                      </discreteobjectkeyframe.value>
                    </discreteobjectkeyframe>
                  </objectanimationusingkeyframes>
                </storyboard>
              </vsm:visualstate>
            </vsm:visualstategroup>
          </vsm:visualstatemanager.visualstategroups>
          <border background="{TemplateBinding Background}"
              borderbrush="{TemplateBinding BorderBrush}"
              borderthickness="{TemplateBinding BorderThickness}"
              padding="{TemplateBinding Padding}"
              cornerradius="2">
            <contentcontrol x:name="ContentControl"
                    foreground="{TemplateBinding Foreground}"
                    content="{TemplateBinding Content}"
                    contenttemplate="{TemplateBinding ContentTemplate}"
                    fontweight="{TemplateBinding FontWeight}"
                    cursor="{TemplateBinding Cursor}"
                    horizontalalignment="{TemplateBinding HorizontalAlignment}"
                    horizontalcontentalignment="{TemplateBinding HorizontalContentAlignment}"
                    fontfamily="{TemplateBinding FontFamily}"
                    fontsize="{TemplateBinding FontSize}"
                    fontstretch="{TemplateBinding FontStretch}"
                    verticalalignment="{TemplateBinding VerticalAlignment}"
                    verticalcontentalignment="{TemplateBinding VerticalContentAlignment}"
                    istabstop="False" />
          </border>
        </grid>
      </controltemplate>
    </setter.value>
  </setter>
</style>
<!-- END SDK LABEL HACK
///////////////////////////////////////////////////////////////////////////// -->

Web Services for both AJAX Based and Silverlight Based Clients – Part I

Back in the nineties, I did some development on the old Palm Pilot devices and later tinkered with some Windows CE development as well as .Net development on Windows Mobile 5.x devices, but the experience always left me feeling a little underwhelmed. However the recent popularity of touch screen based mobile devices such as the iPhone, iPad, various Android based devices, and now the new Windows Phone 7 launch has inspired me to investigate mobile software development again.

In that pursuit, I decided to attend the local Microsoft Presents — Windows Phone 7 Unleashed event put on by the South Colorado .NET User Group in Colorado Springs. The event turned out to be a good time and provided some good hands on labs to experience what development on a Windows Phone 7 device entails. Let me just say that nearly two years ago I had heard that bringing Silverlight development to the mobile market was in the works at Microsoft and the potential prospects that could provide was a factor in my decision to invest time in learning Silverlight on the desktop. Microsoft has done a good job of ensuring those skills transfer to the mobile development experience on Windows Phone 7. I was amazed at how easily a colleague and I were able to put together a Silverlight and WCF Service enabled Windows Phone 7 application during our hands-on labs.

Given my positive experience with Windows Phone 7 mobile application development, I began wondering how I might tailor the design and architecture of the web applications I’m building today to be ready for mobile integration in the near future. The web applications I build today are generally done as ASP.Net and/or Silverlight clients and frequently make use of AJAX and/or Web Services to access server-side systems and data. Additionally, I’ve been making a strong push to leverage jQuery in my solutions so being able to work with jQuery’s AJAX services would be a huge plus.

Service Categories

For the purpose of this discussion, let me start by defining two general categories of web services, each targeted at solving different problems. The first are what I’d call private application services, where the client-side and server-side components of the system are generally controlled by the same developing party. Their interfaces and features are often purpose-specific and aren’t necessarily intended for general public consumption. These types of services are well suited to JSON and AJAX implementations.

The second type of service category could be described as public services, where the service itself is the application and its purpose is to expose data and features to any number of clients both known and unknown. Often these are implemented as RESTful services because of their discoverable nature and cross-platform compatibility. It’s the first category of services that I plan to discuss today.

Private application services generally fall into two groups that differ primarily in intended consumption scope – local or application wide. For those who follow the MVC or MVVM design patterns, local scope web services can be thought of as view-specific callbacks with very limited scope such as a specific page or component on a page. In standard ASP.Net web applications they are often implemented as a WebMethod on an ASPX page or using traditional web services (.ASMX files). Application wide services, where the reuse of the service is unlikely to extend beyond multiple pages in an application or maybe a set of related applications, are often implemented as standard web services using ASMX files or using WCF.

A number of projects I’m currently working on have a need for both local and application wide services which can be called using jQuery’s AJAX features. I also have a desire to share the application wide services with Silverlight clients and want to leverage the binary XML serialization that was made available starting with Silverlight 3 when accessing WCF services. This requirement falls right in line with Windows Phone 7 requirements and would allow me to work with these same services when doing mobile development on that platform.

So to cut short what is turning out to be a fairly long blog post, I believe I’ve come up with a project configuration that meets all my requirements.

1. I am able to easily make JSON formatted AJAX calls, using jQuery, to page-level Web Methods, traditional ASMX Web Service methods, and WCF service methods using the same client-side syntax. This will allow me to organize my services into functional groups and scope their reuse as appropriate (page, in-application, or cross-application).
2. I’ve also figured out a way to configure WCF services so that they are simultaneously accessible as JSON based services for AJAX clients as well as binary XML based services for Silverlight and Windows Phone 7 clients. This simply requires specific web.config file settings.

Stay tuned for a follow-up post on this subject, where I will walk you through samples of this configuration using Visual Studio 2010, jQuery and the new templating plug-in, WCF, and Silverlight 4.

MonoTouch and MonoDroid offer native app options for the .Net developer.

The need, or at least desire, for mobile enabled websites and applications has been steadily growing for quite some time. A number of my existing clients are now asking or planning for site upgrades that support mobile users and new clients often express a desire for these  features as well. I suspect we are on the cusp of another technological shift  similar to the 90’s era boom of web-innovation when so many client/server developers migrated to the web. Web-based application developers are no longer going to be able to ignore mobile development.

As a web application developer, I’m already familiar with HTML and CSS and have been experimenting with these technologies in the mobile space. HTML5 and CSS3 have some great features for making robust, rich internet based applications. I believe web-based applications targeted for mobile devices offer many advantages over native-app development, many of them the same as they hold over traditional desktop applications, but they currently have some limitations when it comes to accessing device hardware features such as the GPS or camera. Additionally, there are times when your application needs to be functional even if in a limited capacity when the user is offline; something that is very difficult to do with a mobile web application. For these things you need a native mobile application. However, as anyone who has looked into this knows, this requires a significant investment in time and money in order to cover all the bases.

Mobile application development for the .Net developer just got interesting!

Novell, a sponsor of the Mono project, has a couple of very interesting products in the works, MonoTouch and MonoDroid, which promise to allow .Net developers to build software for the iPhone, iPod Touch, iPad, and Android based mobile devices using C# and core .NET APIs. The iOS version is available now, while the Android version is in an early development phase. I’m particularly interested in MonoTouch’s ability to work with WCF services in a familiar manner, given that they are often a part of the web applications I build. This coupled with the ability to access the phone’s camera and GPS opens up a whole host of integration possibilities for a number of sites I’m working on; some of which are required to remain functional in an offline state. The Mono project has finally spawned something for which I can get excited about.