Detecting Whether A User Is In Or Out Of Browser

Today is the second part of a three part series on “Out of Browser”, which is a part of a larger series, the 31 Days of Silverlight.

We started yesterday with a simple Silverlight project that had Out of Browser enabled. You can download that out of browser application here. We’ll be adding to that project today.

In our next step, we’re going to need to know when the application is running in an out of browser state vs. a traditional in-browser state. With some simple event handlers, we can make this happen. We can also change our application to accommodate these changes.

1. Setting up a Loaded event handler

The first thing we need to do is tell our application to call an initial method when it loads. To do this, I added a simple event handler in my MainPage() method.

        public MainPage()
        {
            InitializeComponent();
            Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

This also creates the event handler method for us, and I’m going to add a simple if/then/else statement to determine our browser state.

2. Detecting the browser state

In our new event handler method, I’ve created an if statement that just checks the boolean value of Application.Current.IsRunningOutOfBrowser. In each case, I change the image to either red or green, and adjust the tooltip to read the appropraite text for the state. Here’s what the method looks like:

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            if (Application.Current.IsRunningOutOfBrowser)
            {
                outofbrowserimage.Source = new BitmapImage(new Uri("outofbrowser_on.png", UriKind.Relative));
                ToolTipService.SetToolTip(outofbrowserimage, "Uninstall Big Bang Theory");
            }
            else
            {
                outofbrowserimage.Source = new BitmapImage(new Uri("outofbrowser_off.png", UriKind.Relative));
                ToolTipService.SetToolTip(outofbrowserimage, "Install Big Bang Theory");
            }
        }

Because I might want to call this functionality at other times than when the application loads, I’m going to refactor this code a little. If you haven’t used this functionality of Visual Studio 2008 before, I highly recommend it.

3. Refactoring our code

Highlight the code you want to move to its own method, and right click on it. Like this:

It will prompt you to give this code a new method name. I called my method CheckOOB, since that’s what it will do.

So here’s what my entire code-behind file looks like now:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Media.Imaging;

namespace SilverlightOutOfBrowser
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            checkOOB();
        }

        private void checkOOB()
        {
            if (Application.Current.IsRunningOutOfBrowser)
            {
                outofbrowserimage.Source = new BitmapImage(new Uri("outofbrowser_on.png", UriKind.Relative));
                ToolTipService.SetToolTip(outofbrowserimage, "Uninstall Big Bang Theory");
            }
            else
            {
                outofbrowserimage.Source = new BitmapImage(new Uri("outofbrowser_off.png", UriKind.Relative));
                ToolTipService.SetToolTip(outofbrowserimage, "Install Big Bang Theory");
            }
        }
    }
}

The next thing I want to do it make it so that the image I am using to show status is also a button for the user to click. I don’t want them to have to discover the right-click menu to install, instead, I want to make it an obvious choice. Let’s do that next.

4. Creating an Install button

We will need an event handler on the image, so let’s start there:

outofbrowserimage.MouseLeftButtonUp += new MouseButtonEventHandler(outofbrowserimage_MouseLeftButtonUp);

In the subsequent method, we can simply call the Application.Current.Install() method. We need to wrap this statement in a check to make sure that the application has not already been installed. Where this becomes the biggest issue is when the user has installed your application, but is back at the website version of your app. If they click the Install button again, your application will throw an error, because it’s already been installed. Here’s the code:

void installBigBangTheory(object sender, MouseButtonEventArgs e)
        {
            if (Application.Current.InstallState == InstallState.NotInstalled)
            {
                Application.Current.Install();
            }
        }

An important thing to note about this Install() function is that it MUST be called by a user-instantiated action. This means that you can’t just call it when the application loads, or in the background. It has to have a code pathway that resulted from a user action.

Also, regarding uninstalling…there’s no way to do it via code. To uninstall, your user will have to right-click on the application, or go to their control panel to uninstall it. I’m hoping that we can provide a more user-friendly solution to this in future versions of Silverlight, but for SL3, this is the way it is.

Summary

This is actually a pretty simple process. Check a boolean value, and act accordingly. But, as we learned from the Spiderman movies, “with great power comes great responsibility.” Make sure that you’re providing clear instructions for your users regarding how to install and uninstall your application. Installing, as a word, is frightening to many users and most every systems administrator.

To see this application running, and to install it, click here.

If you’d like to download this code for this project, you can get my Out of Browser Detection solution here.