Notification “Toast” For In-Browser LightSwitch Apps Using Growl For Windows

So what is “toast”, apart from a tasty component of sandwiches and breakfasts? It refers to those notification windows that pop up above the Windows system tray – a nice alternative to the bad old days when developers alerted users with an annoying stream of dialog boxes that demanded a click to proceed.

In Silverlight Out-of-Browser applications (and therefore LightSwitch OOB as well), we can use the NotificationWindow class.  With Silverlight 5, which is the default target for the client in the new beta of LightSwitch for Visual Studio 11, we can access in-browser some features previously reserved for out-of-browser, but this comes with certain limitations (Internet Explorer only) and extra setup (you must either use group policy settings or registry settings on each client machine to enable elevated trust apps in-browser).  So for in-browser use, most LightSwitch applications may not be able to take advantage of Silverlight’s NotificationWindow class.

There are other shortcomings of the NotificationWindow class as well.  One is that it can display only one notification window at a time.  Another is that it doesn’t implement a queue – you have to handle that yourself otherwise competing notifications may override one another.

As an alternative, providing more flexible “toast” that works in-browser in either Silverlight 4 or 5 and doesn’t require elevated permissions, you can take advantage of one of the third party notification window managers, such as Snarl or Growl For Windows.  These provide queueing of notifications, multiple notifications on window at once, forwarding notifications to a remote machine or iPhone, and can even be configured to tweet your notifications.  Connectors are available for .NET, Javascript, and more.

For this example, I’ll be using Growl For Windows, so you’ll need to install it first.  You’ll also need to configure it to “Allow notifications from websites”.

Create a new LightSwitch project.  Go to our application properties on the Application Type page and switch the Client to “Web”.

In the Solution Explorer, switch to “File View” for your LS project.

Download the Growl For Windows Javascript Connector and add the growl.js and GrowlFlashConnector.swf files to your project (copy from explorer, paste into the solution in the solution explorer… or drag and drop – the files should be at the top level… the same level as default.htm)

Edit the default.htm file in your project – you may need to click “Show All Files” in order to see the “default.htm” file listed..  Inside the <body> section at the top, add

<div id="growlconnectorcontainer"></div>

In the <head> section, add

    <script type="text/javascript" src="growl.js"></script>
    <script type="text/javascript">
        function register() {
            var application = new Growl.Application();
            application.name = "LightSwitch Example App";
            application.icon = "http://www.growlforwindows.com/gfw/examples/js/growl.png";

            var notificationTypes = new Array();
            var nt1 = new Growl.NotificationType();
            nt1.name = "NT1";
            nt1.displayName = "Notification Type 1";
            nt1.enabled = true;
            notificationTypes.push(nt1);

            Growl.register(application, notificationTypes);
        }

        function notify(notificationType, title, text, icon, priority) {
            var notification = new Growl.Notification();
            notification.name = notificationType;
            notification.title = title;
            notification.text = text;
            notification.icon = icon;
            notification.priority = priority;
            Growl.notify("LightSwitch Example App", notification);
        }

        window.onload = function () {
            var config = {};
            Growl.init(config);
        }
    </script>

In a real world application, you’d want to include your javascript in an external .js file instead of embedding it in the default.htm, but let’s keep it simple for now.  Save changes and close the default.htm file.

Open “growl.js” and go to File…Advanced Save Options and make sure encoding is set to UTF-8 with Signature. If you fail to do this, it may work fine under Internet Explorer, but give you a “Failed to invoke: register” error when running under Firefox or Chrome.

Right-click on our project in the solution explorer and choose “Unload Project”.  Right click again and choose “Edit”.  Search for _BuildFile and add the following below the </_BuildFile> for default.htm:


<_BuildFile Include="growl.js">
<SubFolder>
</SubFolder>
<PublishType>
</PublishType>
</_BuildFile>
<_BuildFile Include="GrowlFlashConnector.swf">
<SubFolder>
</SubFolder>
<PublishType>
</PublishType>
</_BuildFile>

Save changes and close the file, then right-click on your project and choose “Reload Project”.

Add a new Editable Grid screen with nothing selected in the Screen Data dropdown. On the screen create a button “TestGrowlNotify” and edit the Execute code for the button, adding the following:

Dispatchers.Main.BeginInvoke(() =>
{
  HtmlPage.Window.Invoke("register");
  HtmlPage.Window.Invoke("notify", "NT1", "Test Notification",
    "This is a test of the notification system",
    "http://www.growlforwindows.com/gfw/examples/js/growl.png", "Normal");
 });

In this example, I’m using an external URL for the icon, but it can be a file path, a URL, or an array of bytes representing the raw binary data.

add the following in the usings section at the top:

using System.Windows.Browser;
using Microsoft.LightSwitch.Threading;

If you are using LightSwitch 2011 instead of the new LightSwitch for Visual Studio 11 Beta, then you may need to add a reference to System.Windows.Browser. To do this, switch to “File View” mode for your solution, right-click on the “References” folder in the client project, choose “Add Reference”, then select the System.Windows.Browser assembly.

Our approach is to use an HTML bridge to invoke methods in a Flash control, which in turn interfaces with Growl.   We first register our application with Growl and give it a list of notification types that we plan to use.  This allows users to

choose to ignore certain notification types, forward them to other machines or email accounts, etc.  Once registered, we just call notify and specify the type of notification, a title, some text, an icon, and a priority.

Run the project and click on your “Test Growl Notify” button and you should see a notification pop up!  This technique should work on both Windows and OS X.

It doesn’t handle OOB apps.  I’ll cover how to handle that issue in my next article.

  • http://www.paulspatterson.com Paul

    Awesome.Thanks!

  • http://janvanderhaegen.wordpress.com Jan Van der Haegen

    This post is a perfect example of how LightSwitch is an application framework that does not suffer from those “simply can’t do it” brick walls you hit with classic RAD environments. The sky is the limit!
    Great work Lore! Keep rocking LS!

  • Dave Vorgang

    Hi Jewel,

    Excellent. One question, does the end-user need to install Growl or can that process be automated?

    Thanks,
    Dave

    • http://dotnetlore.com Jewel Lambert

      The end-user will need to install Growl…

      So far the only in-browser solutions I’ve come up with (barring using Internet Explorer and editing the registry to allow elevated trust in-browser) all require the end-user to install additional software.

      • Dave Vorgang

        Thanks for the quick reply.

        I look forward for more posts from you in the future.

        Take care,
        Dave

  • hey

    hey where is the article??? its gone??

    • http://dotnetlore.com Jewel Lambert

      Thanks for letting me know… not sure what happened – must’ve disappeared during a site upgrade or something. I believe I’ve managed to restore everything now.

  • hey

    1-
    Dispatchers.Main.BeginInvoke(() =>
    {
    HtmlPage….

    Dispatchers.Main.BeginInvoke(() =>;
    {
    HtmlPage…

    2-

    is not enough it throws error,

    And there is something more becuase it doesnt register or notify..

    It was working a few days ago before article gone somewhere..

    • hey

      When i restart the GROWL application, everything is ok now :)

  • hey

    2- was
    //
    //

    <!–

    –>

  • http://www.YonetimKati.com hey

    A little note;

    Growl is working only with IE today, others throw exception “Failed to invoke”.

    I learned this after my app publish

    Thanks Jewel for this superb article