Inveigled By Design » Blog

Silverlight 4: Integrating With COM

bg — Sat, 12 Dec 2009 18:39:34 +0000

One new feature introduced in the Silverlight 4 beta that caught my eye was the ability to communicate with a Silverlight app via COM. It definitely opens up some powerful ways to interact with the Windows desktop environment in Silverlight. I mocked up this quick demo just to see how it might work and hope it’s useful to someone else trying to figure out how to do this.

Here are the tools you need to get started:

Visual Studio 2010 Beta
Silverlight 4 Beta Tools for Visual Studio 2010
Administrator privileges on your development machine

The Silverlight 4 Beta Tools will give you the Silverlight 4 runtime, integrated project support in Visual Studio, and the Silverlight 4 SDK. Remember that these are beta tools, so I do not recommend installing them on a production developer machine just yet.

There’s more information on getting set up with Silverlight 4 here:
Silverlight 4 Beta Information

Get the Code:

Download the code here:
SilverlightComDemo.zip

A Preview:

In this article, we’ll build a simple COM library that will display a user interface with four buttons and a Silverlight app displaying a simple circle inside a grid. The user will be able to move the circle in the Silverlight app by pressing the buttons being displayed by the COM library. This demonstrates the concept of interacting with Silverlight apps via COM.

While this application is very simple and not that useful, the same techniques can be applied to interact with custom hardware, office applications, or other COM components on the user’s system.

Step 1: Create the COM Library

Your COM Library may be a c++ library, or something like Excel or Word that already exist. For purposes of this demo, I’ll create the COM library in .Net. There are some good references for how to do this on CodeProject if you need more information.

Before you fire up Visual Studio 2010, note that if you are running Windows Vista or Windows 7, you have to right-click on Visual Studio and choose “Run as administrator” to create the project. This is because we are going to configure Visual Studio to register our COM library automatically, which requires administrator privileges.

Here are the steps to get started:

Create an empty solution in Visual Studio and name it SilverlightComDemo.
Create a new C# class library called ComDemoLib.
Right-click on the project in Solution Explorer and choose Properties and then the Build tab.
Check the “Register for COM interop” checkbox. When you build the library, Visual Studio will register the com library so that it can be accessed by the Silverlight app we’ll create below.
Click on the Signing tab and check the “Sign the assembly” checkbox and create a new key that our assembly will be signed with. You will not be able to register the COM library unless the assembly has a strong name (is signed with a key).

Setting up .NET classes so that they can be seen as COM objects requires using the System.Runtime.InteropServices library and decorating your classes and interfaces with some attributes. I found this article to be a good reference for seeing how to set things up:
C# COM Object for Use in Javascript.

Continuing on:

Remove the Class1 class that is created by default in the ComDemoLib project
Right-click the ComDemoLib project and add a reference to the .Net System.Windows.Forms assembly.
Add a windows form to the project and call it DemoForm

Now add four buttons so that DemoForm looks like this:

The code behind defines four directional events and hooks up the button click handlers to fire them:

using System;
using System.Windows.Forms;

namespace ComDemoLib
{
    public partial class DemoForm : Form
    {
        public event EventHandler MoveUp;
        public event EventHandler MoveDown;
        public event EventHandler MoveRight;
        public event EventHandler MoveLeft;

        public DemoForm()
        {
            InitializeComponent();
        }

        private void button_up_Click(object sender, EventArgs e)
        {
            fire(MoveUp);
        }

        private void button_right_Click(object sender, EventArgs e)
        {
            fire(MoveRight);
        }

        private void button_left_Click(object sender, EventArgs e)
        {
            fire(MoveLeft);
        }

        private void button_down_Click(object sender, EventArgs e)
        {
            fire(MoveDown);
        }

        private void fire(EventHandler eventToFire)
        {
            EventHandler temp = eventToFire;

            if (temp != null)
                temp(this, EventArgs.Empty);
        }
    }
}

Now create three classes:

ComDemoClass will be our main COM object that the Silverlight app will interact with
IComDemoClass defines a very simple interface for our ComDemoClass
IComDemoClassEvents defines an interface for our COM events that the Silverlight app will receive

In order to register with COM, our ComDemoClass and interfaces must be public and have Guids assigned to them via the Guid attribute. When I tried to access “Create GUID” from the Tools menu in Visual Studio 2010 beta, it was grayed out. If this is true for you as well, you can access the Guid Generator tool by typing “guidgen” at the Visual Studio 2010 command prompt. If you run this project on your machine, you should generate new guids for any new classes that you create.

Our ComDemoClass will have two methods: ShowForm and HideForm that control the visibility of the demo form we created above. It will also fire the directional events that will tell the Silverlight app which button was pushed.

Here is the code for the ComDemoClass:

using System;
using System.Runtime.InteropServices;

namespace ComDemoLib
{
    [Guid("C920762D-5819-4B06-A9FE-F42EA615771D")]
    [ComVisible(true)]
    [ClassInterface(ClassInterfaceType.None)]
    [ComSourceInterfaces(typeof(IComDemoClassEvents))]
    public class ComDemoClass : IComDemoClass
    {
        private DemoForm m_form;

        [ComVisible(false)]
        public delegate void moveEventSignature();

        public event moveEventSignature Left;
        public event moveEventSignature Right;
        public event moveEventSignature Up;
        public event moveEventSignature Down;

        public void ShowForm()
        {
            if (m_form == null)
            {
                m_form = new DemoForm();
                m_form.MoveLeft += form_Left;
                m_form.MoveRight += form_Right;
                m_form.MoveUp += form_Up;
                m_form.MoveDown += form_Down;
                m_form.Show();
            }
        }

        public void HideForm()
        {
            if (m_form != null)
            {
                m_form.MoveLeft -= form_Left;
                m_form.MoveRight -= form_Right;
                m_form.MoveUp -= form_Up;
                m_form.MoveDown -= form_Down;
                m_form.Dispose();
                m_form = null;
            }
        }

        private void form_Left(object sender, EventArgs e)
        {
            fire(Left);
        }

        private void form_Right(object sender, EventArgs e)
        {
            fire(Right);
        }

        private void form_Up(object sender, EventArgs e)
        {
            fire(Up);
        }

        private void form_Down(object sender, EventArgs e)
        {
            fire(Down);
        }

        private void fire(moveEventSignature eventToFire)
        {
            moveEventSignature temp = eventToFire;

            if (temp != null)
                temp();
        }
    }
}

This is pretty simple. It creates a demo form and then fires events when the user presses the buttons on the form. Note that for COM, our events have to be defined in a separate interface and our class declares the interface via the ComSourceInterfaces attribute.

Here is the code for the IComDemoClass interface:

using System.Runtime.InteropServices;

namespace ComDemoLib
{
    [Guid("3BCA5655-05EC-42D8-A046-5C0567DB7901")]
    [ComVisible(true)]
    interface IComDemoClass
    {
        [DispId(0x10000001)]
        void HideForm();

        [DispId(0x10000002)]
        void ShowForm();
    }
}

And finally the IComDemoClassEvents inteface:

using System.Runtime.InteropServices;

namespace ComDemoLib
{
    [Guid("9942C070-D524-420F-AEBA-30A50D5A5291")]
    [ComVisible(true)]
    [InterfaceType(ComInterfaceType.InterfaceIsIDispatch)]
    public interface IComDemoClassEvents
    {
        [DispId(0x00000001)]
        void Left();

        [DispId(0x00000002)]
        void Right();

        [DispId(0x00000003)]
        void Up();

        [DispId(0x00000004)]
        void Down();
    }
}

Now build the library and verify that it was registered on the system. Any messages about failures to register will be logged to the output window. Once the build succeeds, if you right-click on the ComDemoLib project and choose “Add Reference”, you should see ComDemoLib listed in the COM tab (this is for verification only, hit cancel and don’t actually add the reference).

Step 2: Create and Configure the Silverlight Application

Now that we have the COM library ready to go, we need a silverlight application that can interact with it. Add a new Silverlight Application project to the solution and name it “SilverlightComDemo”. Allow Visual Studio to create a web hosting project (SilverlightComDemo.Web) and ensure that you are using Silverlight 4.

In order to interact with COM, the Silverlight app needs to run out of browser and have elevated permissions on the user’s system. In order to use COM, it also needs to reference the Microsoft.CSharp.dll. To configure this:

Right-click on the SilverlightComDemo project and choose properties
On the Silverlight tab, check the “Enable running application out of the browser” box
Press the “Out-of-Browser Settings” button. At the bottom of the window, check the “Require elevated trust when running outside the browser” checkbox.
Right-click the SilverlightComDemo project again and choose “Add Reference”. Click on the “Browse” tab and then add a reference to the Microsoft.CSharp library, which was installed as part of the Silverlight 4 SDK. The default path is here:
C:\Program Files\Microsoft SDKs\Silverlight\v4.0\Libraries\Client\Microsoft.CSharp.dll

Our MainPage will be pretty simple. It includes some installation stuff (that will only show when the app is not installed or not running outside the browser) and the grid with the circle in it whose position will be controlled via the COM library:

Here’s the xaml for the page:

Here’s the full code for the MainPage.xaml.cs code behind file, which I’ll discuss below:

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Interop;

namespace SilverlightComDemo
{
    public partial class MainPage : UserControl
    {
        private dynamic m_comDemoClass;

        delegate void motionEventDelegate();

        public MainPage()
        {
            InitializeComponent();
        }

        private void UserControl_Loaded(object sender, RoutedEventArgs e)
        {
            bool ready = true;

            demoGrid.Visibility = Visibility.Visible;
            installationControls.Visibility = Visibility.Collapsed;

            #region installation Checks

            // see if the app is installed
            if (App.Current.InstallState != InstallState.Installed)
            {
                ready = false;
                installText.Text = "Please install the application";
            }

            // make sure the app is running out of browser
            if (!App.Current.IsRunningOutOfBrowser)
            {
                ready = false;
            }

            if (!ready)
            {
                demoGrid.Visibility = Visibility.Collapsed;
                installationControls.Visibility = Visibility.Visible;
                return;
            }

            #endregion   

            // we want to hide the form when the app exits
            App.Current.Exit += application_exit;

            // if we got here, we're ready to go, create the com object
            m_comDemoClass = ComAutomationFactory.CreateObject("ComDemoLib.ComDemoClass");

            // if the class was created, show our control form
            if (m_comDemoClass != null)
            {
                m_comDemoClass.ShowForm();

                m_comDemoClass.Left += new motionEventDelegate(moveLeft);
                m_comDemoClass.Right += new motionEventDelegate(moveRight);
                m_comDemoClass.Up += new motionEventDelegate(moveUp);
                m_comDemoClass.Down += new motionEventDelegate(moveDown);
            }
        }

        private void installButton_Click(object sender, RoutedEventArgs e)
        {
            App.Current.Install();
        }

        private void application_exit(object sender, EventArgs e)
        {
            if (m_comDemoClass != null)
            {
                m_comDemoClass.Left -= new motionEventDelegate(moveLeft);
                m_comDemoClass.Right -= new motionEventDelegate(moveRight);
                m_comDemoClass.Up -= new motionEventDelegate(moveUp);
                m_comDemoClass.Down -= new motionEventDelegate(moveDown);
                m_comDemoClass.HideForm();
            }
        }

        private void moveLeft()
        {
            int currentColumn = Grid.GetColumn(ellipseControl);

            if (currentColumn-- == 0)
                currentColumn = 2;

            Grid.SetColumn(ellipseControl, currentColumn);
        }

        private void moveRight()
        {
            int currentColumn = Grid.GetColumn(ellipseControl);

            if (currentColumn++ == 2)
                currentColumn = 0;

            Grid.SetColumn(ellipseControl, currentColumn);
        }

        private void moveUp()
        {
            int currentRow = Grid.GetRow(ellipseControl);

            if (currentRow-- == 0)
                currentRow = 2;

            Grid.SetRow(ellipseControl, currentRow);
        }

        private void moveDown()
        {
            int currentRow = Grid.GetRow(ellipseControl);

            if (currentRow++ == 2)
                currentRow = 0;

            Grid.SetRow(ellipseControl, currentRow);
        }
    }
}

In order to set the app up for debugging and interacting with COM, we need to get it installed on the system. Build the app and run it. It should open up your default web browser and show you the installation controls:

Go ahead and press the “install” button. You’ll get a popup window that lets you choose where to put shortcuts for the app and warns you that the app will have potentially dangerous access to your system. Your users will see this same warning whenever you deploy a Silverlight application that requires elevated trust on a user’s system.

Now that the app is installed, you can configure it for easy debugging by following the directions here:
Debug Silverlight OOB Applications Without Attaching

Step 3: Integrate the COM Library into the Silverlight Application

From the code listing for MainPage.xaml.cs above, you’ll see that we created an object from our COM library (m_comDemoClass) by declaring a dynamic type. This tells the compiler that it is a type that will be defined at runtime.

The code to create the object and set up the event handlers is here:

 // if we got here, we're ready to go, create the com object
            m_comDemoClass = ComAutomationFactory.CreateObject("ComDemoLib.ComDemoClass");

            // if the class was created, show our control form
            if (m_comDemoClass != null)
            {
                m_comDemoClass.ShowForm();

                m_comDemoClass.Left += new motionEventDelegate(moveLeft);
                m_comDemoClass.Right += new motionEventDelegate(moveRight);
                m_comDemoClass.Up += new motionEventDelegate(moveUp);
                m_comDemoClass.Down += new motionEventDelegate(moveDown);
            }

Since we don’t have a direct reference to the COM library, we have to create the object using the ComAutomationFactory.CreateObject call. This is defined in the System.Windows.Interop library. We create the object and then hook up listeners for each of the events.

We also hooked up a listener to the application_exit event so that we can clean up the COM class when the application is closing:

     private void application_exit(object sender, EventArgs e)
     {
            if (m_comDemoClass != null)
            {
                m_comDemoClass.Left -= new motionEventDelegate(moveLeft);
                m_comDemoClass.Right -= new motionEventDelegate(moveRight);
                m_comDemoClass.Up -= new motionEventDelegate(moveUp);
                m_comDemoClass.Down -= new motionEventDelegate(moveDown);
                m_comDemoClass.HideForm();
            }
        }

And that’s it! Now when you run the app, you should see the DemoForm window pop up. When you click on any of the buttons, the yellow circle’s position should move around according to which button you clicked.

Unit-Testing WebClient Dependencies in Silverlight

bg — Sat, 14 Nov 2009 23:21:33 +0000

If you are going to be interfacing with web services in Silverlight, there’s a good chance you’ll have classes that are dependent on System.Net.WebClient. Unfortunately, because of some of the security restrictions in Silverlight, you cannot mock or stub the System.Net.WebClient class. In addition, the constructor for DownloadStringAsyncCompleteEventArgs is internal, making it difficult to simulate the web client completing a call.

I started trying to test this completely within Silverlight by creating an interface and testable wrapper around the WebClient class. I ran into a dead end, though, when I tried to create the EventArgs classes. Silverlight will not let you create an instance of a class with an internal constructor via reflection because of the security restrictions.

I have chosen to deal with this particular issue by working around it by using a non-silverlight class library to run the tests. I’ll demo this with a fairly simple WebClient-dependent class but it will demonstrate the techniques for testing it.

First create a Silverlight Class Library that will contain the WebClient-dependent class. This is the class library you will use in your final Silverlight application. I called mine WebClientDependencyProject for this demo.

Then I added a simple class that is dependent on a WebClient. Note that it is not complete and does not deal with thread safety, but was concocted for demonstration purposes:

using System;
using System.Net;

namespace WebClientDependencyProject
{
    /// 
    /// makes calls to a web service
    /// 
    public class WebClientDependentClass : IDisposable
    {
        /// 
        /// fired when a call is completed
        /// 
        public event EventHandler CallCompleted;

        private WebClient m_webClient;

        /// 
        /// constructor
        /// 
        /// the web client class to use
        public WebClientDependentClass(WebClient webClient)
        {
            m_webClient = webClient;

            if (m_webClient == null)
                throw new ArgumentNullException("webClient", "webClient cannot be null");

            m_webClient.DownloadStringCompleted += webClient_DownloadStringCompleted;
        }

        /// 
        /// cancel the current web client call
        /// 
        public void CancelCall()
        {
            m_webClient.CancelAsync();
        }

        /// 
        /// clean up
        /// 
        public void Dispose()
        {
            m_webClient.DownloadStringCompleted -= webClient_DownloadStringCompleted;
        }

        /// 
        /// makes a call on the web client to the specified uri
        /// 
        /// the uri to use in the web call
        /// the key to return with the results
        public void MakeCall(Uri uri, Guid key)
        {
            m_webClient.DownloadStringAsync(uri, key);
        }

        private void webClient_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
        {
            EventHandler temp = CallCompleted;

            if (temp != null)
                temp(this, e);
        }
    }
}

To test this class, create a new Windows (not Silverlight) Class Library.

I chose to name this library the same name as the Silverlight version, but added .WPF to the end of the name (WebClientDependencyProject.WPF) so that I could distinguish it from the Silverlight version.

Now right-click the new project and choose Add -> ExistingItem. In the Window that comes up, browse to the folder containing the Silverlight class library and select your WebClient-dependent class. Instead of choosing the Add button, click the arrow to the right side of the Add button and choose Add As Link. This will add a link to the Silverlight file rather than copying it:

Now you have the same code, but it will use the full .net framework classes and security settings rather then utilizing the restricted Silverlight versions. This opens up mocking the WebClient class as well as creating DownloadStringAsyncCompleteEventArgs instances.

In order to mock the WebClient class, I use Rhino Mocks 3.5.

Now you need to add one last project to your solution. This should be another windows (non-silverlight) class library that will contain the tests. I called mine WebClientDependencyProject_Tests:

Add a reference to the Rhino.Mocks library as well as the Microsoft.VisualStudio.QualityTools.UnitTestFramework.

Within this library you also have access to the full .net framework capabilities and do not have the Silverlight security restrictions, so mocking the WebClient class and simulating the DownloadStringCompleted events becomes fairly straightforward:

using System;
using System.Diagnostics;
using System.Net;
using System.Reflection;
using System.Threading;
using Microsoft.VisualStudio.TestTools.UnitTesting;
using Rhino.Mocks;
using WebClientDependencyProject;

namespace WebClientDependency_Tests
{
    [TestClass]
    public class WebClientDependencyClass_Tests
    {
        [TestMethod]
        [ExpectedException(typeof(ArgumentNullException))]
        public void ConstructorShouldThrowOnNullWebClient()
        {
            WebClientDependentClass dependentClass = new WebClientDependentClass(null);
        }

        [TestMethod]
        public void ConstructorShouldSubscribeToDownloadStringCompletedEvent()
        {
            WebClient webClient;
            WebClientDependentClass dependentClass;

            webClient = MockRepository.GenerateMock();

            dependentClass = new WebClientDependentClass(webClient);

            webClient.AssertWasCalled(
                x => x.DownloadStringCompleted += Arg.Is.NotNull);
            dependentClass.Dispose();
        }

        [TestMethod]
        public void DisposeShouldUnsubscribeFromEvent()
        {
            WebClient webClient;
            WebClientDependentClass dependentClass;

            webClient = MockRepository.GenerateMock();

            dependentClass = new WebClientDependentClass(webClient);

            webClient.AssertWasCalled(
                x => x.DownloadStringCompleted += Arg.Is.NotNull);

            dependentClass.Dispose();

            webClient.AssertWasCalled(
                x => x.DownloadStringCompleted -= Arg.Is.NotNull);

            dependentClass.Dispose();
        }

        [TestMethod]
        public void MakeCallShouldCallDownloadStringAsync()
        {
            WebClient webClient;
            WebClientDependentClass dependentClass;
            Uri uri;
            Guid key = Guid.NewGuid();

            webClient = MockRepository.GenerateMock();

            uri = new Uri("http://www.inveigledsoftware.com");
            dependentClass = new WebClientDependentClass(webClient);

            dependentClass.MakeCall(uri, key);
            Thread.Sleep(300);

            webClient.AssertWasCalled(x => x.DownloadStringAsync(uri, key));
            dependentClass.Dispose();
        }

        [TestMethod]
        public void CancelProcessingShouldCallCancelAsync()
        {
            WebClient webClient;
            WebClientDependentClass dependentClass;
            Uri uri;
            Guid key = Guid.NewGuid();

            webClient = MockRepository.GenerateMock();

            uri = new Uri("http://www.inveigledsoftware.com");
            dependentClass = new WebClientDependentClass(webClient);

            dependentClass.MakeCall(uri, key);
            Thread.Sleep(300);

            webClient.AssertWasCalled(x => x.DownloadStringAsync(uri, key));

            dependentClass.CancelCall();

            Thread.Sleep(300);
            webClient.AssertWasCalled(x => x.CancelAsync());
            dependentClass.Dispose();
        }

        [TestMethod]
        public void DownloadStringCompletedFiresEvent()
        {
            WebClient webClient;
            WebClientDependentClass dependentClass;
            Uri uri;
            ConstructorInfo[] constructors;
            ConstructorInfo constructor;
            bool wasCalled = false;
            DownloadStringCompletedEventArgs returnedArgs = null;
            DownloadStringCompletedEventArgs readArgs = null;
            Guid key = Guid.NewGuid();

            webClient = MockRepository.GenerateMock();

            webClient.DownloadStringCompleted += (sender, e) =>
            {
                wasCalled = true;
                returnedArgs = e;
            };

            constructors =
                typeof(DownloadStringCompletedEventArgs).GetConstructors(BindingFlags.NonPublic | BindingFlags.Instance);
            Debug.Assert(constructors != null);
            constructor = constructors[0];
            object args = constructor.Invoke(new object[] { null, null, false, key });
            Debug.Assert(args != null);
            readArgs = (DownloadStringCompletedEventArgs)args;

            uri = new Uri("http://www.google.com");
            dependentClass = new WebClientDependentClass(webClient);

            dependentClass.MakeCall(uri, key);
            Thread.Sleep(300);

            webClient.AssertWasCalled(x => x.DownloadStringAsync(uri, key));

            dependentClass.CallCompleted += dependentClass_callCompleted;

            webClient.Raise(x => x.DownloadStringCompleted += null, this, readArgs);

            Assert.IsTrue(wasCalled);
            Assert.IsNotNull(returnedArgs);

            Assert.IsTrue(m_eventRaised);
            Assert.AreEqual(m_args, readArgs);
            Assert.AreEqual(key, m_args.UserState);

            dependentClass.CallCompleted -= dependentClass_callCompleted;

            dependentClass.Dispose();
        }

        private bool m_eventRaised;
        private DownloadStringCompletedEventArgs m_args;
        private void dependentClass_callCompleted(object sender, DownloadStringCompletedEventArgs e)
        {
            m_eventRaised = true;
            m_args = e;
        }
    }
}

If you end up sharing many files between class libraries, Microsoft has created the Project Linker tool to help keep the WPF/Silverlight projects that share files in sync:
Project Linker

UPDATE Dec. 4, 2009:

In Silverlight4/Visual Studio 2010, it looks like you will not have to make duplicate WPF projects to allow testing your Silverlight libraries. This would eliminate having to create the WebClientDependencyProject.WPF project in the above example. More information here:
Sharing Silverlight Assemblies with .NET Apps

Learning Silverlight: Auto-run a Storyboard in Sketchflow

bg — Sun, 25 Oct 2009 22:25:39 +0000

One thing I want to have in the project prototype I’m working on in Sketchflow is the ability to run a storyboard automatically when a form loads. This is a fairly straightforward process. I’ll demonstrate it using a progress bar whose value progresses from 0 to 100 after the screen loads. Click this link for a sneak peak at the functionality:

Auto Run a Storyboard Demo

Step 1: Create a Progress Bar on the Sketchflow Screen:

Open Blend and create a new Silverlight 3 Sketchflow Application. Display the SketchStyles assets by clicking on the Assets tab on the left column of the Blend window, expanding the Styles list, and choosing SketchStyles:

Drag a progress bar to the screen Sketchflow created for you and set its properties on the right column of the Blend window in the Layout section as shown below:

Step 2: Create a Storyboard to Animate the Progress Bar:

You can create animations in Silverlight and WPF using Storyboards to change the values of the user interface controls over time. For this demonstration, you’ll animate the value of the progress bar. About half-way down the left column of the Blend window, in the Objects and Timeline section, click on the plus sign to add a new storyboard. Name the new storyboard progressBarValue:

In the newly-created storyboard you’ll see a timeline with a 0, 1, and 2 at the top. Make sure the screen edit window is highlighted in red and the message “progressBarValue timeline recording is on” appears at the top. You’ll be animating the value of the progress bar as the storyboard progresses from 0 to 2.

Click on the number 1 so that the line below it appears in yellow. Click on the progress bar to make sure it’s selected and then in the right column of the Blend window in the Common Properties section, set the Value of the progress bar to 50. You’ll see the bar turn gray half way across:

Now click on the 2 at the top of the storyboard layout so that the line below it turns yellow. In the Common Properties section, set the progress bar Value to 100. The bar should be solid gray now:

Click Close in the Objects and Timeline section of the left column of the Sketchflow window to close the storyboard.

Step 3: Create a Behavior to Auto-Run the Storyboard:

You can use a Behavior that is triggered by an event to trigger the storyboard to start running. The behaviors are located in the Assets tab in the left column of the Blend window. Select the behavior called ControlStoryboardAction:

Drag the ControlStoryboardAction to the Objects and Timeline section and drop it on the object named LayoutRoot. LayoutRoot is the default grid that Sketchflow created on the screen that contains the progress bar you created. Now you should see ControlStoryboardAction nested under LayoutRoot in the Objects and Timeline section:

Click on the ControlStoryBoard action to make sure it is selected. In the right column of the Blend window on the Properties tab, edit the properties of the action so that Trigger event name is Loaded and the ControlStoryboardOption is Play. Select progressBarValue from the Storyboard list to run the storyboard we created for the progress bar.

At this point you can run the project to view the results. Unfortunately, you’ll discover that by the time Silverlight loads in the test page, the animation will have already started and likely completed running. This will be evident because the progress bar will be completely gray.

Step 4: Adjust the Timing of the Storyboard:

In the middle column of the Blend window where the screen display is, look for a button with <> on it toward the top right of the artboard. This will change the display to show you the xaml that is being used to create the display. For the progressBarValue storyboard change the StartTime to 00:00:04 to delay the start until 4 seconds after the LayoutRoot is loaded. You can adjust this value to whatever delay you would like. You can also adjust the two keytimes to control the speed of the animation:

Now when you run the project, you should see the screen load and then within a second or two, the progress bar will gradually change from 0 to 100 over a few seconds.

That’s all there is to it. You can use many different events and controls to run a storyboard either automatically, or in response to a user action.

Installing XAMPP on Windows 7

bg — Sat, 24 Oct 2009 14:21:06 +0000

I just switched over to using Windows 7 with a full development setup including IIS 7 and Sql Server 2008 (including reporting services). I also use Apache to edit a local copy of my blog and websites. I decided to let apache run on the default port 80. In order to do this, I installed XAMPP Lite, which was pretty straightforward, but getting it running was not. Here’s what got it working for me:

Step 1: Download and install XAMPP:

Download and install one of the XAMPP exe files from here:
Apache Friends – XAMPP For Windows

You can use XAMPP or XAMPP Lite, whichever suits your needs, but be sure to get the EXE rather than the ZIP file. I used XAMPP Lite version 1.7.2 for this installation.

Double-click the installer and let it run. I chose to let it install on the default C: destination folder:

I’ve read that it can’t be run on the same partition as the operating system, that it has to be run as administrator and in compatibility mode, but I didn’t find any of that to be true. Windows 7 sometimes pops up a message at the end of the install saying it didn’t install properly. I just hit the “The program installed correctly” button.

Step 2: Change the port that IIS is running on:

By default, IIS and Sql Server use port 80, so first you have to move IIS to a new port. Click on the Start button and in the “Search programs and files” box, type in “iis”, and hit Enter. This will start up the Internet Information Services Manager.

Under “Connections” on the left, expand the entry for your PC name, then Sites and click on Default Web Site under Sites (this may have a different name if you have named your default site):

Now with the Default Web Site selected, click on Bindings on the right side of the window. In the bindings window, click on the first entry, hit the edit button and enter the new port you want IIS to run on. (I chose 8080).

Click “Ok”, “Close”, and then on the right side of the Internet Information Services Manager, under Manage Web Site, click on Restart. Close the Internet Information Services Manager. You can verify that IIS is now running on port 8080 by opening a browser and typing http:/localhost:8080 into the address bar:

Step 3: Moving Sql Server Reporting Services:

Now you can try running the XXAMP Control Panel and running Apache. In my case, it appeared to start, but then would stop immediately. In order to figure out what else is running on port 80, you need to run the Command Prompt as an administrator.

Click on the Start button and go to All Program -> Accessories -> Command Prompt. Right click on Command Prompt and choose Run As Administrator.

Once the command prompt opens, type in “netsh http show servicestate” (without the quotes). This will show you what is running on what ports on the system. In my case, it was REPORTS and
REPORTSERVER that were on port 80:

These are both SQL Server Reporting Services, which I want to use, but I’ll also move to port 8080. To configure the Reporting Services, launch the Reporting Services Configuration Manager. This is located under Start -> All Programs -> Microsoft Sql Server 2008 -> Configuration Tools:

Click on Web Service URL in the left panel and change the TCP Port to 8080.

Now choose Report Manager Url from the left panel and Click Advanced.

Change the TCP Port to 8080 and click OK.

Close out the Reporting Services Configuration Manager.

Now if you open the XAMPP Control panel and run Apache, it should stay running. If it doesn’t work at this point, reboot the system and try again.

Now you can verify that apache is working by opening a browser and typing http://localhost into the address bar:

Setting SketchStyles in SketchFlow

bg — Sun, 18 Oct 2009 13:23:51 +0000

When I first started up SketchFlow to create a prototype, by default all of the controls were styled using the standard controls styles rather than the sketch-like style I had seen in the SketchFlow demos. It wasn’t obvious to me how to use the sketch style and I didn’t find it easily, so here’s how to do it:

Create a new SketchFlow project:

You can create one for Silverlight or WPF:

Display the project assets:

Click on the “Assets” button toward the bottom of the toolbar on the left and expand the Styles:

Select SketchStyles as default:

Under Styles, right click on SketchStyles and select “Set as Default Style” from the context menu.

Create controls:

Now when you add controls to your screens they will be styled as sketches:

Alternative:

Alternatively, you can pick the sketchflow controls directly by selecting the Assets tab on the left side of the screen, expanding the Styles option, and clicking on SketchStyles. You can then click on any of the Sketch controls and utilize them in your screens:

Learning Silverlight: Hosting Silverlight Content

bg — Mon, 12 Oct 2009 14:08:41 +0000

One of my latest quests is to learn more about Silverlight.

One of the first things I wanted to figure out is how, if I’m going to be developing Silverlight apps, can I publish them on my site so I can share them. So far I’ve found three ways to do it. For purposes of this demo, I created a very simple silverlight app that just has a single button. Each time you click the button, the text toggles between “Click Me” and “Reset”.

Embedding Silverlight Content in an HTML page

Since I plan on posting a series of Silverlight projects as I learn more about what can be done with it, I thought one way to show them was to give each one it’s own html page. This involves using the object element and setting its source property to point to the .xap file that’s generated when you compile your silverlight app.

Here’s what the html code looks like (my .xap file is called Hello.xap and it lives in the same directory as the web page):




   
   
   
   
   Embedding Silverlight in HTML:

   

    


  
    Embedding Silverlight in HTML:

You can view this page with the embedded app here: Hello

There’s alot to more to learn before this is ready for a production deployment, but it gets the job done for now. Here are some resources for learning more:

Embedding Silverlight Content in a Wordpress Blog

Thanks to people sharing their code, this one is easy. There’s a plugin for WordPress that allows you to embed your application in a blog post very easily. You can get the plug in Here. Thanks to Tim Heuer for this great plugin.

Embedding the app in this blog post is this easy (enclose this in brackets):

silverlight: http://www.inveigledsoftware.com/wp-content/files/silverlight/Hello.xap

Here’s the result:

Embedding Silverlight Content Using the Silverlight Streaming Service

I haven’t uploaded anything to the Silverlight Streaming Service but it’s currently free (and may remain so if you don’t mind some advertising).

Embedding content deployed to the streaming service involves using an iframe like so:

This ends up looking like this:

frameborder="0" width="258" height="100" scrolling="no" >

Using Git and OpenSSH for Windows Development

bg — Sat, 10 Oct 2009 13:57:24 +0000

I have a linux server I’m hosting over at Linode that I use to host this blog along with a git repository for my development projects. I found that there are many guides on configuring git for use with your own remote repositories on linux, but getting things set up on windows was a little different.

A few notes:

I’m using Windows Vista, though the set up should be very similar (if not the same) for XP or Windows 7.
I won’t cover installing git on the server, since there are already many resources on that around the web. If you’re running one of the Debian linux families it’s as simple as sudo apt-get install git
I also won’t cover how to generate a key for use with openssh, but you can find instructions here: Public key authentication

Configuring OpenSSH:

First you need to download and install Msysgit. I’m using version Git-1.6.4-preview20090730.exe. During the installation I accepted all of the defaults. You can choose other options, but be sure to select OpenSSH as your SSH executable.

If you don’t have an ssh authentication key for working with your server yet, generate your key and upload the public key to the server. There are instructions here: OpenSSH Public Key Authentication

Now you want to configure your OpenSSH so that it’s easy to work with the server. You’ll need to create a new directory to hold the configuration files. If you used the default installation path for msysgit, open the folder C:\Program Files\Git\etc and create a new folder inside of it named “ssh”. Vista requires admin authentication to write to this folder, so you’ll see the UAC prompts if you have that turned on. Now you should have a ssh configuration folder here: C:\Program Files\Git\etc\ssh.

I found that it’s much more convenient to use OpenSSH if you create a config file to hold all of the server settings. That way when you access the server you can use a convenient name like “linode” instead of the ip address. Run Notepad or another text editor as admin (required on Vista so we can save it to the ssh directory). The contents of the file should look like this (fill in the information in [brackets] with your own server information):

Host [yourhostname]
HostName [serverIpAddress]
User [serverLoginName]
Port [sshPort]
IdentityFile [privateKeyPath]

yourhostname:
     this can be any name you want to use when you access the server via ssh
serverIpAddress:
     the ip address of the server where your git repository is located
serverLoginName:
     the user name you use to access your server via ssh
sshPort:
     the port your server is using for ssh (This is not required if you are using the default port)
privateKeyPath:
     the path to the private key file you generated previously (likely called id_rsa or something similar). If the path has any spaces in it, you need to enclose it in quotes.

Save the file in your ssh directory with the name “ssh_config”. Be sure the filename does not have an extension (notepad tends to append .txt – you don’t want that).

Now you should be able to test your open ssh setup. Open Git Bash (part of msysgit) and type:

ssh [yourhostname]

and you should be logged into your server. If you private key was password protected, you’ll be prompted for the password. The only issue I had initially was that the path to my private key had a space in it, but once I added quotes around the path, it all went smoothly.

Setting Up a Project

There are two steps to setting up a project for use with git. First you need to create a folder on the server that will act as the git repository for your project. You can choose whatever path you prefer, but it should not be in a public folder. Create the folder you want to use as the repository on the server and then in the command prompt type:

git --bare init

It’s that easy to set up the server side, now for the windows project. If you’re using Visual Studio, go ahead and create a project and let Visual Studio put in in a folder for you. If you already have a project set up, you can skip that step. Now you’ll want to tell Git to ignore some of the build folders and Resharper stuff if you’re using that. You do that by using Notepad or another text editor to create a file inside the project folder named .gitignore. Here’s what mine looks like:

obj
bin
_ReSharper.*
*.csproj.user
*.resharper.user
*.resharper
*.suo
*.cache
*~
*.swp

If you’re using some other development tools, these files may vary. Full documentation of the gitignore syntax is available on the man page. Now open a Git Bash prompt and navigate to the folder where your project is on the windows box. Once you’re inside the folder, initialize it as a git repository:

git --bare init

In order to sync the repository with the server, you’ll need to add a remote origin. In order to do that you’ll need the [yourHostName] you used from the ssh_config file above and the path to the folder you are using on the server (that you initialized with git –bare init). Enter yourHostName without the brackets. Add the connection by using git remote add:

git remote add origin ssh://[yourHostName]/pathToTheServerFolder

Now all that’s left is to add your project to the git repository and push the files to the server:

git add .
git commit -m "initial commit"
git push origin master

To pull files from the server you’ll use:

git pull origin master

There’s much more to using git, but that should get you started!

Git resources:

A tutorial introduction to git

Silverlight Development: IE Cannot Display the web page

bg — Wed, 07 Oct 2009 05:36:34 +0000

I’ve been playing around with Silverlight 3 on Vista and having problems getting the test pages to display in IE 8. IE had the very helpful message “Internet Explorer cannot display the page”.

Thanks to Vijay Kodali I was able to find the answer.

Go to c:\Windows\System32\drivers\etc\ and open the hosts file. You have to open it as admin to be able to save it, so the easiest thing to do is to click the start button and right click on Notepad to Run as Administrator. Then open the file via the file menu and you’ll be able to save.

Look for the line with “::1 localhost” and change it to “:::1 localhost” by adding an extra “:” before the 1. That fixed it on my machine.

Thanks Vijay!

Rewriting a location in Nginx

bg — Wed, 07 Oct 2009 04:15:03 +0000

For some reason I had a tough time finding this one, so for my own future use and in case it helps anyone else, here’s how you rewrite a url inside an nginx config file.

Calling the old url OldUrl and the url to map to newUrl, here it is:

server {
   listen 80;
   server_name siteName;

    ... (other configuration)

    location oldUrl
    {
         rewrite oldUrl
         newUrl permanent;
     }
}

Not that hard, but hard to find

Setting up and Testing Php on Nginx

bg — Sat, 08 Aug 2009 14:34:41 +0000

In the previous article, we set up Nginx with Ruby Enterprise Edition and Passenger support. Now we need to get php running if we want to run wordpress or drupal or other php-based sites. We’ll also add mysql so we have a database back end for these sites

Installing mysql:

This is pretty simple, do the installation:

sudo aptitude install mysql-server mysql-client libmysqlclient15-dev

You will be asked to supply a root password. Make sure you store it so it doesn’t get lost.

Since this is a production server, it should be secured:

sudo mysql_secure_installation

Setting up Php:

First the installation:

sudo aptitude install php5-cgi php5-mysql

Note that if you need to access the php.ini file, it will be located here: /etc/php5/cgi/php.ini

Now we need a few scripts and configuration files. I got these from here, but I’ll post the contents here for completeness.

First the init script:

sudo nano /etc/init.d/php-fastcgi

Copy and paste this in the file:

#! /bin/sh
### BEGIN INIT INFO
# Provides: php-fastcgi
# Required-Start: $all
# Required-Stop: $all
# Default-Start: 2 3 4 5
# Default-Stop: 0 1 6
# Short-Description: Start and stop php-cgi in external FASTCGI mode
# Description: Start and stop php-cgi in external FASTCGI mode
### END INIT INFO

# Author: Kurt Zankl <[EMAIL PROTECTED]>

# Do NOT "set -e"

PATH=/sbin:/usr/sbin:/bin:/usr/bin
DESC="php-cgi in external FASTCGI mode"
NAME=php-fastcgi
DAEMON=/usr/bin/php-cgi
PIDFILE=/var/run/$NAME.pid
SCRIPTNAME=/etc/init.d/$NAME
PHP_CONFIG_FILE=/etc/php5/cgi/php.ini

# Exit if the package is not installed
[ -x "$DAEMON" ] || exit 0

# Read configuration variable file if it is present
[ -r /etc/default/$NAME ] &amp;&amp; . /etc/default/$NAME

# Load the VERBOSE setting and other rcS variables
. /lib/init/vars.sh

# Define LSB log_* functions.
# Depend on lsb-base (>= 3.0-6) to ensure that this file is present.
. /lib/lsb/init-functions

# If the daemon is not enabled, give the user a warning and then exit,
# unless we are stopping the daemon
if [ "$START" != "yes" -a "$1" != "stop" ]; then
log_warning_msg "To enable $NAME, edit /etc/default/$NAME and set START=yes"
exit 0
fi

# Process configuration
export PHP_FCGI_CHILDREN PHP_FCGI_MAX_REQUESTS
DAEMON_ARGS="-q -b $FCGI_HOST:$FCGI_PORT -c $PHP_CONFIG_FILE"

do_start()
{
# Return
# 0 if daemon has been started
# 1 if daemon was already running
# 2 if daemon could not be started
start-stop-daemon --start --quiet --pidfile $PIDFILE --exec $DAEMON --test > /dev/null \
|| return 1
start-stop-daemon --start --quiet --pidfile $PIDFILE --exec $DAEMON \
--background --make-pidfile --chuid $EXEC_AS_USER --startas $DAEMON -- \
$DAEMON_ARGS \
|| return 2
}

do_stop()
{
# Return
# 0 if daemon has been stopped
# 1 if daemon was already stopped
# 2 if daemon could not be stopped
# other if a failure occurred
start-stop-daemon --stop --quiet --retry=TERM/30/KILL/5 --pidfile $PIDFILE > /dev/null # --name $DAEMON
RETVAL="$?"
[ "$RETVAL" = 2 ] &amp;&amp; return 2
# Wait for children to finish too if this is a daemon that forks
# and if the daemon is only ever run from this initscript.
# If the above conditions are not satisfied then add some other code
# that waits for the process to drop all resources that could be
# needed by services started subsequently. A last resort is to
# sleep for some time.
start-stop-daemon --stop --quiet --oknodo --retry=0/30/KILL/5 --exec $DAEMON
[ "$?" = 2 ] &amp;&amp; return 2
# Many daemons donâ^À^Ùt delete their pidfiles when they exit.
rm -f $PIDFILE
return "$RETVAL"
}
case "$1" in
start)
[ "$VERBOSE" != no ] &amp;&amp; log_daemon_msg "Starting $DESC" "$NAME"
do_start
case "$?" in
0|1) [ "$VERBOSE" != no ] &amp;&amp; log_end_msg 0 ;;
2) [ "$VERBOSE" != no ] &amp;&amp; log_end_msg 1 ;;
esac
;;
stop)
[ "$VERBOSE" != no ] &amp;&amp; log_daemon_msg "Stopping $DESC" "$NAME"
do_stop
case "$?" in
0|1) [ "$VERBOSE" != no ] &amp;&amp; log_end_msg 0 ;;
2) [ "$VERBOSE" != no ] &amp;&amp; log_end_msg 1 ;;
esac
;;
restart|force-reload)
log_daemon_msg "Restarting $DESC" "$NAME"
do_stop
case "$?" in
0|1)
do_start
case "$?" in
0) log_end_msg 0 ;;
1) log_end_msg 1 ;; # Old process is still running
*) log_end_msg 1 ;; # Failed to start
esac
;;
*)
# Failed to stop
log_end_msg 1
;;
esac
;;
*)
echo "Usage: $SCRIPTNAME {start|stop|restart|force-reload}" >&amp;2
exit 3
;;
esac

Now the defaults:

sudo nano /etc/default/php-fastcgi

Copy and paste this into the file:

START=yes

# Which user runs PHP? (default: www-data)

EXEC_AS_USER=www-data

# Host and TCP port for FASTCGI-Listener (default: localhost:9000)

FCGI_HOST=localhost
FCGI_PORT=10005

# Environment variables, which are processed by PHP

PHP_FCGI_CHILDREN=4
PHP_FCGI_MAX_REQUESTS=1000

Note that we’re running php as the www-data user, which is how we configured Nginx.

And now the configuration:

sudo mkdir /etc/nginx
sudo nano /etc/nginx/fcgi.conf

Copy and paste this into the file:

fastcgi_param QUERY_STRING $query_string;
fastcgi_param REQUEST_METHOD $request_method;
fastcgi_param CONTENT_TYPE $content_type;
fastcgi_param CONTENT_LENGTH $content_length;

fastcgi_param SCRIPT_NAME $fastcgi_script_name;
fastcgi_param REQUEST_URI $request_uri;
fastcgi_param DOCUMENT_URI $document_uri;
fastcgi_param DOCUMENT_ROOT $document_root;
fastcgi_param SERVER_PROTOCOL $server_protocol;

fastcgi_param GATEWAY_INTERFACE CGI/1.1;
fastcgi_param SERVER_SOFTWARE nginx/$nginx_version;

fastcgi_param REMOTE_ADDR $remote_addr;
fastcgi_param REMOTE_PORT $remote_port;
fastcgi_param SERVER_ADDR $server_addr;
fastcgi_param SERVER_PORT $server_port;
fastcgi_param SERVER_NAME $server_name;

# PHP only, required if PHP was built with --enable-force-cgi-redirect
fastcgi_param REDIRECT_STATUS 200;

Make the init script executable and start it:

sudo chmod +x /etc/init.d/php-fastcgi
sudo /etc/init.d/php-fastcgi start

Testing php:

Verify that it is running:

sudo ps ax | grep php

Now we want to make sure it starts on reboot:

sudo update-rc.d php-fastcgi defaults 21 23

Just to be sure, test the reboot:

sudo reboot
sudo ps ax | grep php

Make a php info test site:

Often it is useful to be able to view the output of phpinfo(), but it is not something you want to have available on the internet all the time for security reasons. To solve this problem, I made a site with just the phpinfo file that I can enable/disable with scripts.

First, we need to set up our sites directory. People often put their sites in their home directories or in /public_html or various other configurations.

Substitute the path to your sites root folder for “pathToSitesRoot” and your domain name for “yourDomainName”, both without the quotes. Depending on where you want your sites root folder, you may have to set some permissions to make this work.

Make the directory:

mkdir "pathToSitesRoot"
mkdir "pathToSitesRoot"/php."yourDomainName".com/public
mkdir "pathToSitesRoot"/php."yourDomainName".com/log

Now make the file that will display the php information:

nano "pathToSitesRoot"/php."yourDomainName".com/public/index.php

Add this one line to the file and save it:

<?php echo phpinfo(); ?>

Now set up a host for the site in the Nginx sites-available folder:

sudo nano /usr/local/nginx/sites-available/php."yourDomainName".com

Copy and paste this into the file (adjusting your domain name and path to your sites where applicable):

server {
   listen 80;
   server_name php."yourDomainName".com;

   access_log "pathToSitesRoot"/php."yourDomainName".com/log/access.log;
   error_log "pathToSitesRoot"/php."yourDomainName".com/log/error.log;

    location / {
     root "pathToSitesRoot"/php."yourDomainName".com/public;
     index index.html index.htm index.php;

    }

    # .php and .php5 sent to php5
    location ~ .*\.php[345]?$ {
      include /etc/nginx/fcgi.conf;
      fastcgi_pass 127.0.0.1:10005;
      fastcgi_index index.php;
      fastcgi_param SCRIPT_FILENAME "pathToSitesRoot"/php."yourDomainName".com/public$fastcgi_script_name;
    }
}

Now to test, enable the site in Nginx:

sudo ln -s /usr/local/nginx/sites-available/php."yourDomainName".com /usr/local/nginx/sites-enabled/php."yourDomainName".com

Now restart Nginx to enable the site:

sudo /etc/init.d/nginx restart

You should be able to browse in your web browser to http://php.”yourDomainName”.com and see the php info page. It will tell you what you have installed and the version numbers. I’ve often found this helpful when troubleshooting problems with WordPress and Drupal.

To make it easy to enable and disable the site, create a few scripts. I prefer to store them under my user folder:

cd ~
mkdir scripts
cd scripts

First the enable script:

nano enablephp

Copy and paste this into the file (your domain name where applicable):

# !/bin/sh

ln -s /usr/local/nginx/sites-available/php."yourDomainName".com /usr/local/nginx/sites-enabled/php."yourDomainName".com

/etc/init.d/nginx restart

Now the disable script:

nano disablephp

Copy and paste this into the file (substituting your domain name where applicable):

#! /bin/sh

rm /usr/local/nginx/sites-enabled/php.inveigledsoftware.com
/etc/init.d/nginx restart

Now make the scripts executable:

chmod +x enablephp
chmod +x disablephp

Now you can enable the site with sudo enablephp and disable it with sudo disablephp. Be sure to always execute disablephp when you are done examining the php information to prevent broadcasting your installation information on the internet.

Now with mysql and php running you are ready to install php-based applications like Drupal or WordPress.