Developing for Windows

New blog for Windows 8 app developers

Brandon LeBlanc — Tue, 01 May 2012 21:33:02 GMT

I am posting this on behalf of Ian LeGrow, Partner Group Program Manager here in Windows.

As you may have heard, we now have a new Windows 8 app developer blog to help you build Metro style apps on our new Windows 8 platform.

In the new blog, we share our learning and converse with you as you enter the new world of Windows Metro style app development. The blog complements the Windows Dev Center and community forums, and you’ll see a lot of pointers to content and samples to help you get going. We talk about our experiences building the platform and building apps, pitfalls to avoid, tips and tricks, why we made certain choices in the platform, and anything else we can pass along to help you create amazing apps.

Developers, testers, and program managers from the Windows development team are posting to this blog regularly from now through the release of Windows 8 and beyond. We already have several great posts that you can check out for info on topics ranging from using the Live SDK in your apps to async patterns to ways to improve the performance of your apps, and much more.

Come join us in the conversation on the Windows 8 app developer blog. We hope to see you there.

Trigger-Start Services Recipe

Yochay Kiriaty — Thu, 24 Mar 2011 21:23:01 GMT

Windows services enable code to run in the background, even if no user is logged on. These background services provide a lot of useful functionality while minimizing interference with the user’s desktop.

Services have been around for a long time and have proven to be quite useful. Many application developers, OEMs, and IT organizations use services. On a typical system, this can result in a large number of services running at a given time. For example, my machine has about 110 services running right now. This large number of services is due to multiple beta products, different users, multiple desktop and everything running together at the same time.

Running this many services can lengthen Windows startup time, increase the machine’s attack surface, takes a toll on memory, CPU, and power usage. While developers may have machines that can handle loads like these, my machine is a powerful enough (8G of RAM, 4 cores…) so I don’t really care, consumers probably do.

If you are developing Windows services, be sure to write them in the most efficient way possible. The service should run only when it needs to be running. You could write an on-demand service that can be started and stopped by applications that need it, or configure the service as a delayed auto-start service. “Windows Services Enhancements” by Kenny Kerr covers these useful features, among others.

However, Windows 7 and Windows Server 2008 R2provide a new mechanism for making sure services run only when needed. It is called Trigger-Started Service (TSS). Basically, TSS tells the operating system to start the service under certain conditions, such as when specific devices or types of devices are plugged into the computer, or when a computer is added or removed from a domain. Additional criteria are specified in the services documentation.

So what is the problem?

There is already good documentation for creating or enabling services to run like this, and it’s quite easy to do in C++. However, while there are several examples and code snippets for doing the same thing in managed code, none of these implementations provides a general purpose, easy-to-reuse solution that doesn’t, in most cases, ultimately require a lot of interoperability code to be written or modified.

The Windows 7 Trigger-Start Services Recipe gives managed code developers an easier way to write TSS.

In the recipe, you’ll find the Win7TriggerStartRecipe assembly, which provides a clean .NET interface that can be used to communicate with Windows Service Control Manager (SCM) to configure a service as a TSS. The SCM is a large tool, as it includes the Win 32 API, a command line interface, and reflects some of its functionality in the Windows Control Panel. You will use its API to configure services to use TSS.

Usually, a service is configured to work as a TSS immediately after the service is installed. Since the recommended method of installing a .NET service is to use installutil.exe, bundled with the .NET framework, and this requires that the service have an Installer-derived class, the best place to use the trigger start assembly will be in an AfterInstall handler in the ServiceInstaller implementation. However, it can be used by any application with administrative privileges to register any service.

To use the recipe, you’ll first need to add a reference to the Win7TriggerStartRecipe assembly in your project and then add the following Using statement:

using WindowsRecipes.TriggerStartServices;

Before you can start working, you need to double check that underlying operating system supports this feature. To do so, call the static method IsSupported in the TriggerStart class. This is currently supported only on Windows 7 and Windows Server 2008 R2.

Next, create an instance of the TriggerStart class. You can use one of the three constructors, passing a reference to a specific service implementation to link (bind) the required service to the TriggerStart manager.

After that, you can add (or remove) triggers as necessary from the Triggers collection, and then register these changes with the SCM by calling CommitChangesToService. The following code registers a service to start when a generic USB Drive is plugged into the PC.

        1: try

       2: {

       3:     if (!TriggerStart.IsSupported)

       4:     {

       5:         Console.WriteLine("The current system does not support trigger-start services.");

       6:         return;

       7:     }

       8:     //Without error checking and logging, the following lines of code are 

       9:     //everything necessary to register a service

    TriggerStart ts = new TriggerStart(this.USBServiceInstaller.ServiceName);

  

    //Add a trigger that tells the SCM to start the service when USB device plugged in

    Guid Guid_USBDevice = new Guid("53f56307-b6bf-11d0-94f2-00a0c91efb8b");

    const string DeviceName = @"USBSTOR\GenDisk";

  

    ts.Triggers.Add(

                new DeviceInterfaceArrivalTrigger(

                        ServiceTriggerAction.ServiceStart,

                        Guid_USBDevice,DeviceName));

    ts.Triggers.Add(

                new DeviceInterfaceArrivalTrigger(

                        ServiceTriggerAction.ServiceStop, 

                        Guid_USBDevice, 

                        DeviceName));

                                

    //Commit our changes (this registers these triggers with the SCM)

    ts.CommitChangesToService();

  

    Console.WriteLine("Trigger registration successful.  

                       To manually confirm this, type 'sc qtriggerinfo " 

                       + this.USBServiceInstaller.ServiceName + "'.");

}

catch (Exception ex)

{

    Console.WriteLine("Registering the service for trigger starting failed:");

    Console.WriteLine(ex.Message);

}

As you can see from the above code, after checking that TSS is supported, you create a new instance of the TriggerStart class, passing a specific service implementation – this.USBServiceInstaller.ServiceName.

Next you define a GUID that is associated with a USB device, and provide a DeviceName. Then add specific triggers like DeviceInterfaceArrivalTrigger, passing a specific trigger action like ServiceTriggerAction.ServiceStart that starts the service when a generic USB storage device is plugged into the computer USB port. The DeviceInterfaceArrivalTrigger activates when the specified device or type of device is connected to the system or on startup if the device is already connected. You will need to specify the DeviceInterfaceClass GUID that identifies the class of device you are looking for, and at least one Hardware ID or Compatible ID that identifies a list of matching device names to watch for.

The next trigger defines the stop condition when the USB key is pulled out, as there is no need to continue running the service if the USB is not plugged in and the service will start again the next time you plug in a generic USB storage device.

Lastly, you need to call the CommitChangesToService method, to save any changes to the service configuration.

That’s all there is to it. Again, when first associated with a service, the Triggers collection contains any triggers currently associated with the service. Modify this collection as necessary, commit the changes, and you’re done.

DeviceInterfaceArrivalTrigger, is just one of many triggers that you can use, here is a list of the implemented triggers in this recipe:

DomainEventTrigger: This trigger activates when the computer joins or leaves a domain. All you need to do is specify which action in the constructor or by using the EventType member.
FirewallEventTrigger: This trigger activates when one of a group of specified ports is opened or closed on the firewall. You’ll start by specifying a list of the ports (FirewallPort) you’re interested in monitoring by using the Ports member. You’ll then specify whether you’d like the trigger to activate when they open or close with the EventType member. The FirewallPort structure contains optional ServiceName and ServicePath members if you’d like to specify the service listening in on the event.
GroupPolicyEventTrigger: This simple trigger fires when changes are made to group policy. The trigger simply needs to specify whether to monitor user or machine policy through the EventType member.
IPAddressAvailabilityTrigger: This trigger fires when the computer joins its first network, or leaves its last network. You specify which by using the EventType member.
CustomEventTrigger: This trigger mostly exists for the assembly to be able to modify services with existing triggers of this type. You can use it to add your own custom trigger, but because the expected data is unknown unmanaged data provided by a specified Events for Windows (EFW) provider, you’ll need to marshal it yourself. Still, if the data is easily marshaled, you may find this helpful for adding your own custom triggers.

If you want to understand how the recipe works, please download and review the recipe code and documentation

Here is a short video by Kate Gregory, explaining this in great detail.

Follow Yochay on Twitter

(Post edited by Barbara Alban)

Windows Restart and Recovery Recipe

Yochay Kiriaty — Mon, 21 Mar 2011 21:13:24 GMT

Vista introduced two closely related features: Application Restart and Application Recovery. These features are designed to eliminate much of the pain caused by the unexpected termination of your application, whether as a result of an unhandled exception, a “hard hang,” or any other crash.

Application Recovery applies to applications that have a “document” or any other in-memory information that might be lost when the application closes unexpectedly. Application Restart applies to all applications, whether they might have unsaved data or not, and to more unexpected closes, including a DLL update or a system reboot. Today, a large number of applications such as Windows Office (Microsoft Word and friends) use these features. Even if something does go wrong (and when it comes to software, it is most likely that at some point something will go wrong), the application together with the operating system can provide a seamless recovery path that makes the user feel a little less frustrated.

Basically, any Windows application can register with the operating system for restart and, optionally, for recovery.

To register for restart, the application provides a command line argument that will inform the application it is restarting. A restarted application that uses recovery can look in the known location for recovery data when it is restarted, and reload the unsaved data.
To register for recovery, the application provides a callback function. The operating system will call this function on a separate thread (remember, your main thread just threw an exception) if the application crashes or hangs. The callback function can save any unsaved data in a known location. It cannot access the UI thread, which is no longer running. Do note that the call back function can’t run forever. The operating system will not permit it to run more than few seconds.

All this sounds great; what is the problem?

The native Win32 API calls to register for restart and for recovery are fairly simple to use. The Windows API Code Pack includes a managed wrapper for the both recovery and restart functionality.

However, the problem most developers experience is the degree of freedom allowed regarding the recovery method. Since the API requires a callback that the operating system calls when something bad happens to your application, developers can write out their unsaved data in any way they choose, and anywhere.

While writing a file to the hard drive is an obvious choice, some might decide to add records to a database, upload a file to a network location, send an email message, print something, add an event to the event log, and so on. Since the application is in an unknown state during the recovery callback, these are actually poor choices. If you are looking to implement the recovery callback, you should choose a solution that is fast (quick code execution), and that relies on the bare minimum of available resources. Therefore writing to the hard drive is probably your best choice.

Once the decision is made to write a file to the hard drive, more questions arise. What folder should be used? Many developers use “the current directory” – which works great during development, but once the application is deployed and installed under Program Files (for example), the Windows UAC will prevent your application from writing to that folder through yet another exception on your recovery callback method… “The AppData (%AppData%) folder for the user is a much better choice.” – Not the ideal situation.

But there are yet more questions; for example, what file format should be used? What should the file be named? How can the restarting application find the file if the filename is not hardcoded to be the same every time? What will happen if two instances, with different data, require restart at the same time – how will they each save their own data separately and find their own data on restart? Fortunately, we have a recipe for developers who need to cook this into their code.

The Windows Restart and Recovery Recipe includes a library that solves all of the above mentioned problems for both managed (.NET) and native (C++) implementations. The recipe includes code samples that show how to use the library, and documentation explaining in detail how the library works.

Our goal was to make using the Restart and Recovery features super easy and accessible.

For example: The recipe is provided as a .NET assembly - WindowsRecipes.RestartManager. Projects that use the recipe must add a reference to the assembly. There is one class - RestartRecoveryHelper, with two methods, CheckForRestart and RegisterForRestartAndRecovery. Next, you’ll need to point to your data model class; any class that is serializable, using the Serializable attribute, can be used as data to be saved. Then all you need to do is simply call the RegisterForRestartAndRecovery method like the following snippet.

doc = new SampleDocument();

// initialize doc as required

rrh = new WindowsRecipes.RestartManager.RestartRecoveryHelper<SampleDocument>();

SampleDocument recovereddoc = rrh.CheckForRestart();

if (recovereddoc != null)

    doc = recovereddoc;

    //use contents of doc to set values of controls on the form

rrh.RegisterForRestartAndRecovery("TestHarness",doc,WindowsRecipes.RestartManager.FileType.Xml);

This code includes registering to the recovery method as well as recovering from previous unexpected application terminations.

The SampleDocument is a serializable class we use just for demo purposes. Next we create the helper class – RestartRecoveryHelper, that can handle the specific SampleDocument class type. You can create any number of such files for any data object that you want to save, or you can create one big nested data object. Both are valid, as long as the object is serializable.

Next we check to see if the application was restarted due to an unexpected termination. If so, we then retrieve the data that was saved before the application terminated and use it in our application logic. For example, we can use the recovered data to set values on a few controls. This completes the recovery part.

Now we want to register the app to restart and recovery in case it crashes again. Simply call the RegisterForRestartAndRecovery method by passing a string as the name of the app, the doc as the data object to save, and the file type to save.

The recipe takes care of everything for you. The temporary recovery files are saved in the Roaming Application Data folder usually located at “C:\Users\<your user name>\AppData\Roaming”. The file names are guaranteed to be unique, the format is up to you, binary or XML. This way, we can make sure that a given application can handle multiple users and multiple crashes. Once recovered, the files are removed.

Here is a short video by Kate Gregory, explaining this in great detail. You can also watch a video showing the native APIs.

If you are interested, you can read more about this in the Windows Restart and Recovery Recipe and download the code and documentation.

I want to thank Kate Gregory for her help with this recipe.

Follow Yochay on Twitter

(Post edited by Barbara Alban)

Tasks.Show A Windows 7 Developers Resource

Yochay Kiriaty — Fri, 25 Feb 2011 03:32:58 GMT

Are you still using yellow sticky notes to remember tasks on your to-do list? Did you ever need an easy, light and quick way to manage your to-do list? Well we have a solution for you. Tasks.Show is a simple Windows application that lets you manage your to-do list in an easy and intuitive manner. Simply create a new task, assign it to a project, give it a deadline, and you are set.

Tasks.Show is a developer resource application, where you get the full source code of a complete and fully functional application that is using Windows 7 unique features like Windows Touch and the Windows Taskbar.

Tasks.Show provides you with a visual representation of how busy you are. Tasks display on a timeline according to project and size, and estimated amount of work. The timeline view at the bottom of the screen also gives you sense of how your to-do list looks over time, and just how busy you are?

Integrated with Windows to easily manage your tasks

Use Ctrl + Alt + T from anywhere in Windows, even if you are a different application, to activate Tasks.Show and start entering a new task. Use special keywords while typing to place a given task in the right order and assign it a deadline. Use Windows Touch to easily interact with different tasks, sliding between tasks, assigning tasks to a project with a flick of your fingers. The application also interacts with Windows 7 Taskbar, allowing you to easily switch to your more important tasks or create new tasks directly from the Windows 7 Tasks.Show Taskbar icon.

Installing

You can download the full MSI package (the installer). The installer installs the Tasks.Show application for you to use.

Working with Visual Studio

You can download the complete source code of the application. Make sure you install Tasks.Show before you run the application from Visual Studio. This way the installer sets up all the registry settings to allow your application to work with the Taskbar.

The Visual Studio solution includes only two projects:

Tasks.Show.Data.VS2010 – Holds the data model for the application, basically all the tasks and any related date
Tasks.Show.VS2010 – Holds the main WPF application

Windows 7 Recipe – Taskbar Single Instance

Yochay Kiriaty — Wed, 23 Feb 2011 19:25:38 GMT

It has been a while since I posted anything on the Windows 7 for Developer blog, but it is good to be back. This is about the first of four recipes we are releasing in the upcoming weeks; the others will be about Restart and Recovery, Trigger Start Services, and Library Watcher.

The purpose of this blog is to share a library we created specifically for the Windows 7 Taskbar scenario. The Windows 7 Taskbar includes many new features, one of which is the Taskbar Jump-List that allows users to perform various application-related tasks without ever switching to the application window. By now, there are many applications that uses the Taskbar—Office 2010, IE9, other browsers, Messenger, and Microsoft Zune, among many other Microsoft and non-Microsoft applications.

The taskbar jump list task is nothing but a simple command line call. The API lets you specify a command line type string with any number of arguments you want to pass. The Windows shell simply executes this command line and, in most cases, launches another instance of the application. You can read more about Developing for the Windows 7 Taskbar – Jump into Jump Lists – Part 1, Part 2, and Part 3.

However, some applications use the Windows 7 Taskbar jump list tasks as “commands” to the application to change the application status. For example, Windows Media Player surfaces a few tasks (Resume Previous Play List is one example) that, when the user activates them, instead of launching a second instance of media player, they execute the task itself. Windows Live Messenger exposes few tasks that let you control your availability status as illustrated in the following figure

Windows Live Messenger allows users to change their status without switching to the application.

The Taskbar Single Instance Recipe allows developers to easily develop applications that use Messenger-like tasks that change the state of the currently running instance, allowing it to react to incoming state-change notifications and act accordingly.

This blog shows you how to use the Windows 7 Taskbar Single Instance recipe. If you are interested in how the library works you’ll have to download the library and its documentation. You can download the native C++ implementation, or .NET one.

Some technical background

The Windows 7 Taskbar jump list tasks API is simple. All you need to do is populate a list of IShellItems or IShellLinks. Each entry contains a “command” line with an optional argument. However, it should be noted that simply activating an IShellItem or an IShellLink from the Windows 7 Taskbar results in a new process being launched (usually seen by the user as a new instance of the application). If the shell link references your own executable, then activating it would result in the launching of a new instance of your process. Sometimes this is the required result (for example, when opening a new document in a new Notepad window). However we may want to use the Taskbar tasks to affect our current instance's state (for example, by changing the status of a messenger application).

Just to be clear, every time you click a Windows 7 jump list task, Windows creates a new process and runs the command line. There is no API for you to “communicate” through the Windows 7 Taskbar jump list tasks. In order to “communicate” with your application from the Taskbar jump list tasks, you’ll need to run some code in your application that upon application startup checks if the application is already running and, if it is running, notifies the currently executing application instance of the required task clicked by the user, and then closes the new instance that was just created.

This would usually involve some sort of synchronization object to check if an instance is already running (for example, a Mutex) and a communication mechanism to perform the notification itself. Basically, this is an implementation of a singleton pattern.

The code for accomplishing this task is usually quite similar for many application types, and is usually written over and over again. Therefore, the goal of the Taskbar Single Instance recipe is to provide a simple, reusable code library for both native code and managed code developers that, on the one hand, can be easily used with default settings, but also can be easily customized and extended if required on the other hand.

You can download the recipe code and documentation to fully understand how to implement the singleton pattern and see some examples. For now, let’s focus on how to use the library.

What Does the Recipe Do to My Applications?

Now that we understand the problem, let’s see the solution in action and then dive into the actual code. When you run any of the samples in the recipe and use the jump list tasks to change the status of the application, you’ll notice that the currently running application changes it status, but you will not see a second instance of the application launch. To see what happens behind the scenes you’ll need to use Process Explorer (part of System Internals). With this tool, you are able to see each process in your system. New processes are highlighted in green for few seconds, and processes that are being closed are highlighted in red.

With that in mind let’s review how the taskbar singleton recipe works. Our starting point is an application that is already running. As you can see from the following figure, the small top window is our sample application, and the bigger window is Process Explorer. In the box outlined in red, you can see two separate lines of the WpfSample.exe process. One is highlighted in yellow – this is our main process or the running application as you can see in the small green Window1 at the top of the figure.

The second WpfSample.exe process, highlighted in green, is the new process that was created as a result of pressing the jump list “Online” task to change the application status from its previous state to “Online.” As you can see, Windows launched a second instance of the application, but you can’t see it in the window – the application is not visible yet.

Next, the recipe kicks in and will “send” the Online message from the newly created instance of the application to the already existing one. Then the recipe will make sure the newly created instance is terminated. As you can see from the following figure, the second line is highlighted in red, and the process is terminated.

I Am Convinced; How Can I Use This?

The SingleInstanceManager class is the key class for using the recipe's code. In order to use the recipe, create an instance of the SingleInstanceManager using the static Initialize() method. This method accepts an object of type SingleInstanceManagerSetup that can be used to customize the behavior of the SingleInstanceManager. If you don’t customize, the SingleInstanceManager will use the default value provided in this blog. At a minimum, this setup object should be given an application ID that will be used to identify the application as a single instance.

The SingleInstanceManager supports both Managed and Native code. The samples I’ll be showing are in native (C++ code).

        1: SingleInstanceManagerSetup simSetup(L"MyApp");

       2: g_SIM = SingleInstanceManager::Initialize(&simSetup);

       3:  

       4: /* Your application code here */

       5:  

       6: // Free memory

       7: delete g_SIM;

As long as the SingleInstanceManager object is kept alive, no other instance of the application will be executed in parallel to the first instance. If and when you try to launch a second application instance, by default the process of the second application will exit before executing any of you application code. If you prefer, you can set up the SingleInstanceManager to throw an exception instead of exiting the process (see section "Additional Configuration Options").

Accepting Notifications from Other Application Instances

In order to receive incoming arguments from additional launched application instances, you need to specify an arguments handler when creating the SingleInstanceManagerSetup object.

       1: void ArgsHandler(LPCWSTR* pArguments, DWORD dwLength, LPVOID pContext)

       2: {

       3:     // Handle incoming arguments

       4: }

       5:  

       6: int _tmain(int argc, _TCHAR* argv[])

       7: {

       8:     // The NULL argument is the context passed to the handler (e.g. an object

       9:     // instance to call one of it's methods).

      10:     SingleInstanceManagerSetup simSetup(L"MyApp", ArgsHandler, NULL);

      11:     g_SIM = SingleInstanceManager::Initialize(&simSetup);

      12:  

      13:     /* Your application code here */

      14:  

      15:     // free memory

      16:     delete g_SIM;

      17:     return 0;

      18: }

By default, whenever trying to initialize a SingleInstanceManager object in a second process (as part of launching a new instance of an application) while the first application’s instance already exists, the command line arguments of the second instance will be sent to the first instance which will be notified of the arguments by the handler it has configured. The arguments sent to the first instance can be customized via the setup object (see section "Additional Configuration Options"). This setup object gives you full control over the how the parameters are being sent between applications, as well as other notifications.

Additional Configuration Options

The SingleInstanceManager behavior can be customized via various properties of the setup object (SingleInstanceManagerSetup). These properties are outlined in this section. Note that in Native C++, these properties are accessible via "Set…()" and "Get…()" methods and can also be set via the class constructor.

The ApplicationId property is used to identify an application and is used as the key by which the application's single instance will be identified. Note that an application ID is unique to each logged on user (that is, if two application instances are running under different users on the same machine, the application IDs will not match). The ApplicationId is the only mandatory property when constructing a SingleInstanceManagerSetup object.
The ArgumentsHandler property is used to specify a handler method to receive notifications of incoming arguments (for an example, see section "Accepting Notifications from other Application Instances").
The Context property is available only in native code, and is used to specify a context object to be passed to the arguments handler.

       1: void ArgsHandler(LPCWSTR* pArguments, DWORD dwLength, LPVOID pContext)

       2: {

       3:     MyClass *pClass = (MyClass *) pContext;

       4:     pClass->SomeMethod(...);    // Handle incoming arguments

       5: }

       6:  

       7: int _tmain(int argc, _TCHAR* argv[])

       8: {

       9:     MyClass *pClass = new MyClass();

      10:     SingleInstanceManagerSetup simSetup(L"MyApp", ArgsHandler, pClass);

      11:     g_SIM = SingleInstanceManager::Initialize(&simSetup);

      12:  

      13:     // Your application code here

      14:  

      15:     delete g_SIM;

      16:     delete pClass;

      17:     return 0;

      18: }

The TerminationOption property allows the user to choose a course of action in cases where an application instance is already running and the current instance needs to be closed (after notifying the original instance of the arguments). The enum allows two possible values:

Exit (default) – Exit the current process without returning to the user code. The managed code calls "System.Environment.Exit()" and the native code calls "ExitProcess()", and both use the specified exit code in the ExitCode property.
Throw –Throws an exception indicating that another application instance is already running. The user is then able to catch the exception and exit gracefully.

The ExitCode property allows specifying the exit code to be used in case the TerminationOption property is set to "Exit" and an application instance is already running. The default value is 0.
The ArgumentsProvider property allows you to override the default response for the arguments passed to the first application instance. By default, the arguments passed are the command line arguments of the current process, which uses "Environment.GetCommandLineArgs()" for managed code and "GetCommandLineW()" and "CommandLineToArgvW()" for native code.
The Factory property allows the user to customize the argument delivery strategy that is used by the SingleInstanceManager. By default, the "RemotingStrategyFactory" is used for managed code and "NamedPipeStrategyFactory" is used for native code. These factory objects produce "RemotingStrategy" strategy objects and "NamedPipeStrategy" strategy objects respectively.

The delivery strategy factory is the class used by the SingleInstanceManager to both:

Notify the original application instance of the command line arguments, if this application instance is not the first one
Receive notification of incoming command line arguments from other application instances if the current instance is the first one

The specific strategy implementation contains all the logic and code that is required to enable the communication between the two processes. If the default supplied strategy does not meet the user's needs, the user can supply another implementation that can be easily plugged in.

The ArgumentsHandlerInvoker is the object used by the SingleInstanceManager to invoke the registered argument handler. By default, the handler is invoked on the thread pool in managed code and directly on the incoming thread in native codeInstance Notification Option
The InstanceNotificationOption property is used to determine the behavior when the first application instance is launched under elevated security rights (that is, run as administrator), and the second instance is not an administrator. This enum has two options:

NotifyAnyway (default) – Notifies the original application instance anyway.
NotifyOnlyIfAdmin – Notifies the first application instance only if the second application instance is also run as an administrator.

The DeliveryFailureNotification is used to provide the SingleInstanceManager with a callback method if the delivery of the arguments from the second process to the first one was unsuccessful.

Follow Yochay on Twitter

(Post edited by Barbara Alban)

Flashcards.Show Version 2 for the Desktop, Browser, and Windows Phone

Yochay Kiriaty — Thu, 17 Feb 2011 19:32:23 GMT

The Flashcards.show application has been around for few months now. It is mostly used as a developer’s reference and demo for showing specific and cool Windows 7 features. While the first version of the Flashcards let you create all kinds of decks and then consume these cards in the form of games, you could not share any of the great cards you created with anyone else except by sending the deck file itself via email..

Figure 1: Flashcards.Show in “Game” mode

With that in mind, we started working on Flashcards.Show version 2. Our goal was to enable seamless and easy sharing of decks among users across different computers. The idea was simple, upload the deck to the cloud, and let the user send a message to whomever the user wants to share the deck with. That message will include a link for the receiving party to click on to launch a web browser and run a Silverlight application that can “play” the shared deck. The Silverlight application dynamically downloads the shared deck and displays that single deck just as it would be displayed on the WPF application. At this point the user can launch any of the 3 games: Learning, Matching, or Memory, with the same user experience as the WPF application.

Figure 2: Flashcards.Show memory game running in IE as Silverlight application

Note: The shared decks have a few limitations. The deck size can’t exceed 5MB and we don’t allow video or audio. All restrictions are functional and not technical. We didn’t want to get into too deep of a development cycle.

So far so good, we have a WPF application that can share decks through the cloud and a Silverlight application that can play these decks. The next logical step was to try and run the Silverlight application on Windows Phone. Since one of Windows Phone development models is Silverlight, there is a good chance the app will run. So we tried. As you can see it works!

Figure 3: Flashcards.Show running on the Windows Phone emulator

The Flashcards.Show application runs on Windows Phone as a Silverlight application and can display the same deck that the WPF application shared with the web Silverlight. The same content and the same games can be played on Windows, on the web running Silverlight, and on Windows Phone.

If you want to download the application, feel free to use the Flashcards.Show ClickOnce install. If you want access to the code, please visit Flashcards on MSDN Code Gallery.

So there you have it – a single application that run on three different platforms backed by Windows Azure as the supporting cloud service. The nice thing about the entire Flashcards.Show implementation is our ability (by design) to share a lot of code and resources between WPF, Silverlight, and Windows Phone.

Figure 4: Flashcards.Show high level architecture

How does it work?

The Flashcards.Show application is built from two main components:

The suite of client applications – WPF for Windows, Silverlight for web, and Windows Phone
The cloud piece, a series of web services running on Windows Azure backed by Azure storage.

In this series of posts, we will NOT explain the cloud part, but will focus on the Silverlight and Windows Phone implementations.

When you download the Flashcard.Show version 2 source code, you will find a single Visual Studio solution file (FlashCardsSolution) that contains 10 different projects:

FlashCards.UI.Phone – Contains the Windows Phone application, including the different pages and resources
FlashCards.UI.SL – Contains the Silverlight application, including the different pages and resources
FlashCards.UI.WPF – Contains the main Windows application, including both modes, Admin and Game
FlashCards.ViewModel.Phone – Contains the View-Model piece of the MVVM architecture that is used in the Windows Phone application
FlashCards.ViewModel.SL – Contains the View-Model piece of the MVVM architecture that is used in the Silverlight application
FlashCards.ViewModel.WPF – Contains the View-Model piece of the MVVM architecture that is used in the Windows application
FlashCardsServices – Contains the Windows Azure project that references the services that are deployed with it
FlashCardsServices.Contracts – Contains the definition of the services use by the various Flashcards.Show applications
FlashCardsServices.Entities – Contains the model of the supporting web services
FlashWCFWebRole – Contains the web services that the different Flashcards.Show applications use

Looking at the above list, you might be asking yourself, what are the duplications between the different ViewModel projects and the UI projects?

To start with, we have to compile for the target platform (Windows, Silverlight, and Windows Phone), you have no other option but to compile to the required target CLR. For a little bit of background, please watch Shawn Burke’s “3-Screen Coding: Sharing code between Windows Phone, Silverlight, and .NET”. This sample, doesnt use the library Shawn is referring to in his talk, but it would sure make our life easier.

However, that doesn’t mean we just have to duplicate code. This is especially true in regards to the ViewModel (part of MVVM) piece of the application. Since all clients basically share the same model, they all have the same logic and display the same games and screen flow. Therefore, as you can see from the figure on the left, the WPF view-model (FlashSards.ViewModel.WPF) is the main view model we are using, and the phone’s view-model (FlashSards.ViewModel.Phone) and Silverlight view-model (FlashSards.ViewModel.SL) simply link to the relevant view model files. As you can see from the image, little arrows indicate that the relevant files are linked (click on the image to the left to see a larger version of it). This shows that we are maintaining a single view-model for all clients.

The UI is a little bit trickier. The difference between Silverlight 3 and WPF 4 runtimes are such that in our case, it is easier to simply rewrite the Silverlight application (remember, we choose to target SL3 to make the porting to Windows Phone easier). The FlashCards.UI.SL is a Silverlight project that mimics a lot of the WPF functionality, but with Silverlight capabilities.

You can still leverage all of your .NET and WPF skills as you write the Silverlight XAML and use data binding. We deliberately targeted Silverlight 3 and not Silverlight 4 because Windows Phone Silverlight runtime is version 3. The reason is simple; we wanted the easiest possible port from Silverlight to Windows Phone. And the outcome was just that, a super easy port from Silverlight to Windows Phone. It took about 3 days to make the Silverlight application run on Windows Phone.

As you can see from the figure to the left, most of the Windows Phone UI project- FlashCards.UI.Phone files are links (including the folders that are collapsed in image #6.). The links point to the Silverlight web application implementation FlashCards.UI.SL.

The files that could not be linked are those under Views. These files include XAML that is directly related to the way we display the specific pages on the phone. The phone’s form-factor is much smaller, and therefore we can fit fewer objects into it. With that in mind the implementation of the XAML was similar but not identical.

Unlike regular C# code, XAML doesn’t support of #ifdef, therefore we had to write new XAML for all the views in the game. But even then we could copy large parts of the already existing XAML.

At this stage I am not going to jump into the details of the implementation, mainly because there are a lot of them. You are more than welcome to download the source code, which includes documentation. You can also watch a short video on C9.

I want to thank Arik Poznanski who helped drive the second phase of Flashcards.show.

Follow Windows Phone announcements on Twitter at WP7DEV

Follow Yochay on Twitter

Get started with free tools, free training, and free Jump Start video course

(Post edited by Barbara Alban)

Canvas Direct Pixel Manipulation

Leon Braginski — Wed, 16 Feb 2011 07:08:08 GMT

In this blog I will talk about the HTML5 Canvas element and direct pixel manipulation. Since Internet Explorer 9 RC just released this is perfect timing. While canvas direct pixel manipulation was always possible, before RC the performance of it was not optimized. So let’s get started!

To demonstrate the concept I have created a “poor mans” picture editor which allows manipulation of an image drawn in the context of the canvas. You can:

remove red, green, blue color channels from the entire picture
remove the selected color
convert a specific color to alpha (make it transparent)
convert the entire picture to B&W

Here’s how it looks (you may recognize this picture as the background for the FishIE sample):

In my “Getting Started with Canvas” I explained how to draw images in the canvas context. I won’t talk about that here. Instead I will jump directly into obtaining raw image data.

The first step is to retrieve the ImageData object from the canvas:

imgData = ctx.getImageData(0,0,WIDTH, HEIGHT);

The CanvasPixelArray field of the ImageData object is an actual raw pixel representation of the image:

var pixels = imgData.data;

Now let’s talk about the format of the pixel array returned by the call above. Each pixel is represented by 4 bytes of data:

1^st byte is Red channel
2^nd byte is Green channel
3^rd byte is Blue channel
4^th byte is Alpha channel

Each color is an integer between 0 and 255. Pixels are processed from left to right, top to bottom and start at index 0. If I have a 6 pixel wide picture as shown below, the red component of the top row pixel in the left most column is index 0 in the array. The red component of the pixel in the second row, second column would be in the position (or index):

6 * 4 + 2 * 4 = 32

Keeping the above facts in mind we can create a generic formula to get the color component for any pixel position:

Red = pixels [(row * 4 * width) + (column * 4)];

Green = pixels [(row * 4 * width) + (column * 4) + 1];

Blue = pixels [(row * 4 * width) + (column * 4) + 2];

Alpha = pixels [(row * 4 * width) + (column * 4) + 3];

Since column is really our X coordinate in relationship to canvas and row is a Y coordinate in relationship to the canvas, I can write following JavaScript code to obtain color of any image pixel with coordinates (tmpxX, tmpY):

var colorOffset = {red: 0, green: 1, blue: 2, alpha: 3};

rNew = imgData.data [ (4 * tmpY * WIDTH) + (4 * tmpX) + colorOffset.red ];

gNew = imgData.data [ (4 * tmpY * WIDTH) + (4 * tmpX) + colorOffset.green];

bNew = imgData.data [ (4 * tmpY * WIDTH) + (4 * tmpX) + colorOffset.blue];

aNew = imgData.data [ (4 * tmpY * WIDTH) + (4 * tmpX) + colorOffset.alpha];

To manipulate colors we have to iterate through each pixel and change the corresponding color component as needed. Here is the loop I use:

for (var i = 0; i < pixels.length; i += 4) {

…

}

The loop above is where all the magic happens. Here is what I do, but of course you can apply any color manipulation you feel like:

1. To remove a specific channel I set the corresponding color channel to 0. For example to remove green color I do:

pixels[i + colorOffset.green] = 0;

2. To remove a custom color, I alter each color channel by decreasing its corresponding value:

pixels [i + colorOffset.red] -= rNew;

pixels [i + colorOffset.green] -= gNew;

pixels [i + colorOffset.blue] -= bNew;

3. To convert the entire image to B&W I set the red, green and blue channels to a brightness value, using the formula found here :

var brightness = 0.2126 * r + 0.7152 * g + 0.0722 * b;

pixels[i + colorOffset.red] = brightness;

pixels[i + colorOffset.green] = brightness;

pixels[i + colorOffset.blue] = brightness;

4. To convert a specific color to alpha (make it transparent or remove it, in other words ), I do two things: I check if color is somewhat similar to the one selected and if yes, I set Alpha channel to 0:

if ( Math.abs (r-rNew) < 10 &&

Math.abs (g-gNew) < 10 &&

Math.abs (b-bNew) < 10

)

pixels[i + colorOffset.alpha] = 0;

Where do you go from here?

The ability to directly access and manipulate raw pixels gives you opportunity to do all kinds of things such as applying various color effects, removing red eye and so on. But this is not all – you can also apply the approach discussed here to manipulate videos. This is a subject of my next blog.

Thank you and I hope you find this helpful.

Download source code.

The Imagine Cup Challenge!

Aseem Datar — Fri, 11 Feb 2011 18:32:14 GMT

Hello everyone!

Today, I would like to challenge you to touch the future of technology !

We’ve launched the Windows 7 Touch challenge to inspire you to change the world. To compete in this challenge, we are inviting you to leverage Windows Touch and build solutions to help people use their PC in a more natural, accessible, and interactive way.

Need some ideas to get started ?

Here are some thoughts and some examples of projects:

Touch-based search and data manipulation for environments where a mouse/keyboard isn’t practical.
Touch solution to assist in accessibility for people with physical and cognitive impairments.
Touch-based user interface/website to readily view public data and assist with decision making (such as crime data, traffic flow or the energy grid).
Touch solutions for social networking and innovative access to local connected communities and markets (such as a farming or education community).
Touch enabled games that teach the benefits of conservation

If you still need a little more inspiration, take a look at the “Imagine Cup Solve This” library and consider helping a global organization create a technology solution.

Imagine Cup 2010 featured a Touch & Tablet Accessibility Award where participants were tasked with creating a new education application that uses Touch & Tablet technology while expanding the possibilities about how a user interacts with their PC. Check out last year’s winning projects:

Team Note-Taker from the U.S: The Note-Taker Project solves issues that students with visual impairment have by combining a custom-designed pan, tilt and zoom camera, and a Tablet PC that supports both pen and multi-touch input. Users simultaneously view live video and take notes on a split-screen interface.

David Hayden turned frustration into motivation, which resulted in an innovative Windows 7 touch solution that won first place at the 2010 Imagine Cup Worldwide Finals.

Team OneView from the U.S: OneView is a Tablet PC application that enables blind and sighted students to collaboratively solve problems. It combines a sketching interface with a synchronized audio-based interface to enable students with different abilities to work together effectively.

Get started on your Windows 7 Touch Challenge entry today and register to compete in the Imagine Cup!

To learn more about the Windows 7 Touch challenge go here

For resources and to get started developing Windows 7 Touch applications visit us here

Good luck!

Keeping an application’s UI responsive with multi-threading

Jerry Joyce — Wed, 26 Jan 2011 23:38:08 GMT

This is not a new topic to be sure, but application responsiveness is a fundamental issue that continues to plague many applications running on the Windows platform. As a developer, I encounter these issues and to some degree I at least understand what is happening and that generally it is the design of the application that is causing them. For the average software consumer however, poor software design leads to frustration and perhaps the perception that their system is somehow to blame.

There is a pretty broad spectrum of non-responsiveness, ranging from jarring or delayed user interface updates to a complete lack of accepting user input where an application’s interface becomes ghosted and shows as “not responding” in Task Manager. Avoiding these problems is conceptually pretty straight forward: separate UI blocking work onto a worker thread. In a Windows application, the user interface thread is the primary thread of the process. This thread is what executes WinMain and processes the message pump for the application’s main window. If some lengthy operation is executing on this thread, no messages are being pumped and the main window becomes non-responsive. The term lengthy is somewhat subjective. Even a short operation can cause responsiveness issues, especially when you consider the cumulative effect of multiple serially executed short operations.

I like to break down the types of operations appropriate for worker threads into two major categories: active and passive. Passive operations are those that are generally transparent to the application user. The user is not necessarily aware that they are occurring. An example of this might be a file browser extracting file properties or creating thumbnail images. Active operations are those that are explicitly invoked by the user. I push this big button and I know that I will be reticulating splines for a while. Both types require some thought about user interface design and the design of the program code. For example, take the file browsing case where there is a list of files displayed. As the user selects different files, the details of those files should be displayed (a passive operation). If the selection is rapidly changing, the details extraction for a previously selected file may still be in progress but the results of that extraction are no longer relevant. This requires your application to be resilient to these types of interactions, perhaps by making the worker threads fire-and-forget or by making them cancellable. For active operations the design should generally allow them to be explicitly cancellable and the interface should provide feedback to the user about their progress.

So how do you as a developer identify when you should be delegating to a worker thread? Well, there are the obvious cases like I called out above, but there are also less obvious cases. Perhaps you are making some Windows API call that seems benign when in fact somewhere down the stack it invokes some I/O. There are tools that can help. The profiler built in to Visual Studio is one possibility, and since performance is such a fundamental issue Microsoft also provides a great toolset specifically for analyzing it at the Windows Performance Analysis Developer Center. In addition you can download the Windows symbols using the Debugging Tools for Windows and the Microsoft symbol server. In many cases, being able to see deep call stacks resulting from a Windows API call can help identify potential candidates for multi-threading.

To help design responsive applications, the Windows API includes a rich surface of multi-threaded APIs and services. Scenarios that I described above as passive are in some cases ideal candidates for the Windows thread pool services. Using the Windows thread pool reduces the amount of thread management required by your app and allows the system to schedule and optimize the execution of your work items. If the thread pool does not meet your needs or perhaps you have requirements that are incompatible with it (for example if need to consume STA COM objects) there are still the base multi-threading APIs and synchronization primitives and wait functions available.

Designing a well behaved app that correctly utilizes worker threads is not trivial, but it is also far from unmanageable. In the end, your users will appreciate the effort even though ironically they may not even be aware of what you have done.

Integrating IE9 Pinning with Microsoft Silverlight

Leon Braginski — Tue, 11 Jan 2011 00:49:30 GMT

After reading my previous blog covering how to integrating IE9 pinning APIs with Adobe Flash, some of you may have wondered if the same fit is possible in Microsoft Silverlight. It certainly is!

To demonstrate the concept of integrating IE9 Pinning APIs with Microsoft Silverlight I have written an application which has exactly the same look, feel, and functionality as my previous Flash example:

Since the application is functionally identical to my Flash example, I will not go over the sample’s features. Instead let’s talk about implementation details.

MSDN provides documentation covering how to interact between HTML and Silverlight managed code here. There are two integration topics which are interesting: calling JavaScript APIs from managed Silverlight code and calling Silverlight managed code from JavaScript. Let’s review these topics separately.

Calling JavaScript APIs from Silverlight

You will need to call JavaScript from Silverlight to add Jump List items or to check if site is running in pinned mode.

Calling a JavaScript API and obtaining its return value is done by using the HtmlPage.Window.Invoke method (you can see a full walkthrough here). This method takes few parameters: a function to invoke and variable list of parameters to pass to the function. Here is the example of my code in Silverlight:

HtmlPage.Window.Invoke("addJumpListItem", itemUrl.Text, itemText.Text )

addJumpListItem is a function declared as follows in the JavaScript:

function addJumpListItem (itemUrl, itemText)

It is also possible to check the value returned from JavaScript function by checking return value of the HtmlPage.Window.Invoke call as follows in Silverlight code:

private Boolean siteMode = false;

siteMode = (Boolean)HtmlPage.Window.Invoke("checkSiteMode");

Of course you have to have corresponding JavaScript function declared as:

function checkSiteMode ()

…which in turn returns either true or false.

Calling Silverlight managed code from JavaScript

You will need to call methods implemented by the managed Silverlight control if you want to execute a specific task when user interacts with the pinned site, such as clicking on the thumbnail bar buttons. While a full walkthrough can be found here, below are the relevant highlights from my example.

Calling Silverlight from JavaScript takes a few more steps:

1. First I have to indicate that my method is scriptable. I do so by applying [ScriptableMember] attribute like so:

[ScriptableMember]

public void getEventFromJavaScript(String str)

2. Next I have to register an instance of the class which contains the getEventFromJavaScript method, accessible for scripting by using the following method:

HtmlPage.RegisterScriptableObject("myapp", this)

Now it is time to make some changes in the JavaScript and HTML files used to host the Silverlight control.

1. First I have to add an onLoad parameter to the Silverlight control. This is done on the HTML page hosting the Silverlight control: <param name="onLoad" value="pluginLoaded" />. You can learn about Silverlight onLoad event here.

2. You will need to add a JavaScript pluginLoaded function to handle the onLoad event and get a reference to the Silverlight control instance:

function pluginLoaded(sender, args) {

slCtl = sender.getHost();

}

3. The last thing left is actually to invoke the Silverlight method like so:

function thumbnailclick(btn) {

if (btn.buttonID == prev)

slCtl.Content.myapp.getEventFromJavaScript("previous");

else if (btn.buttonID == next)

slCtl.Content.myapp.getEventFromJavaScript("next");

}

There are few interesting details I ran into. I wrote the sample using Visual Studio 2010 and Microsoft Silverlight Tools 4 for Visual Studio 2010, which you can get from here. To be able to debug Silverlight applications you need to have Silverlight Developer Runtime 4 installed from here.

When you run the pinning example from your web server, you need to ensure that the correct MIME type is created for *.xap files as discussed here.

A few words about debugging.

1. When you create a Silverlight project in Visual Studio, a test HTML file hosting a Silverlight control will be created for you. However you can’t test pinning by launching a URL from a local drive, nor you can change the generated test HTML file by adding the necessary pinning metatags (since your changes will be ignored).

2. The solution is to copy the test file to your own HTML file (I copied it to a file named SLPinningDemo.html); make all needed modifications in this file and add it to the project. For actual testing and debugging you will need to create a virtual directory on your server and open HTML using http protocol like so: http://leonbrhpmain/sltest/SlPinningDemo.html

3. Since you can’t pin a web site if it is not accessed using HTTP, you can’t use F5 to step though your pinning code when running as actual pinned site (since F5 invokes the test HTML file from the local drive). The solution I have found is as follows:

a. Open the HTML file you created in step 3 above from the web server in IE9 and pin it.

b. Now open pinned application by clicking on the pinned application icon.

c. Attach Visual Studio debugger to all running iexplorer.exe processes (so you don’t have to guess which is a right process to attach to), put a breakpoint in your code and you are ready to debug managed code invoked in the actual pinned site!

Where do you go from here?

Silverlight’s managed code offers rich integration with JavaScript. Unlike Flash, Silverlight can marshal a variable number of parameters of various types to and from JavaScript. You may have noticed that:

function addJumpListItem (itemUrl, itemText)

…takes two separate parameters, so I did not have concatenate and then split multiple parameters in one string as I did in Flash. If you are planning to integrate Silverlight and JavaScript I invite you to thoroughly understand Silverlight /JavaScript marshaling.

Thanks you and I hope you find this post useful!

DOWNLOAD SAMPLE CODE!

Integrating IE9 Pinning with Adobe Flash

Leon Braginski — Wed, 05 Jan 2011 00:38:56 GMT

As you may know Internet Explorer 9 supports desktop integration using pinning. You can learn about pinning from various resources: great article on MSDN, my Windows Summit presentation, Scott’s blog here and of course great demos on ietestdrive.com. Pinning allows web applications to be integrated with Windows and therefore providing user experience such as taskbar integration, jump lists and thumbnail bar button on the task bar preview.

One piece of information missing thus far is how to take advantage of pinned sites directly from Adobe Flash. Taking advantage of pinned sites from Adobe Flash control entails integration of JavaScript pinning APIs implemented by IE9 with ActionScript. Since pinning is only available in IE9, the following will only work when Flash control is hosted in a web page running in IE9. The topic of integrating JavaScript APIs with ActionScript is documented in this kb article. Lets see how we can apply this to IE9 site pinning.

To demonstrate the concept I have created a simple example using Adobe Flex. Adobe Flex allows developers to quickly create rich applications using declarative ActionScript embedded in an MXML file. However the same approach will also work if you are creating a flash movie– FLA file which contains ActionScript. Here is how my example looks, as you can see it is implemented as Flash:

My example implements the following pinned sites features:

1. Overlay icons (shows as a star in this screenshot):

2. Thumbnail bar buttons (back and forward buttons) are shown when you hoover your mouse on top of the site’s icon when site is open in the browser:

3. Jumplist items in custom category (Microsoft.com in the “Custom created items:” category):

In addition, I have included pinning metatags in my sample to define custom favorite icon and custom tasks directly in the index.template.html file.

There are two integration topics which are interesting: calling JavaScript APIs from Action script and calling Action script from JavaScript. Let’s review these topics separately.

Calling JavaScript APIs from ActionScript

You will need to call JavaScript from ActionScript to add jumplist items or to check if site is running in the pinned mode.

Calling a JavaScript API and obtaining its return value is done by using ExternalInterface.call method. This method takes two parameters: a function to call and a parameter to pass to the function. Here is the example of my code in ActionScript:

ExternalInterface.call("addJumpListItem", "init");

addJumpListItem is a function declared as follows in the JavaScript:

function addJumpListItem (param).

It is also possible to check the value returned from JavaScript function by checking return value of the ExternalInterface.call as follows in ActionScript code:

protected var siteMode:Boolean;

siteMode = ExternalInterface.call("checkSiteMode", "");

Of course you have to have corresponding JavaScript function declared as:

function checkSiteMode ()

…which in turn returns either true or false.

Calling ActionScript from JavaScript

You will need to call methods implemented by the Flash control if you want to control do a specific task when user is interactive with the pinned site, such as clicking on the thumbnail bar buttons.

Calling ActionScript from JavaScript takes a few more steps:

1. First I have to register my callback function which JavaScript will call like so:

ExternalInterface.addCallback ("getTextFromJavaScript",

                                getTextFromJavaScript);

2. I have to declare my function as follow:

protected function getTextFromJavaScript(str:String) : void {

…

3. The last step left is to call this function from JavaScript :

function thumbnailclick(btn) {

if (btn.buttonID == prev)

window["LeonTest"].getTextFromJavaScript ("previous");

else if (btn.buttonID == next)

window["LeonTest"].getTextFromJavaScript ("next");

}

“LeonTest” is the ID of the Flash movie passed as a parameter to the Flash player. Usually it is a name of the project, but of course you can change the ID as needed.

There are two interesting details I ran into. When using ActionScript in the declarative MXML, to call an API to setup JavaScript callback:

ExternalInterface.addCallback ("getTextFromJavaScript", getTextFromJavaScript);

The callback needs to be made in the scope of the function. This is why I am calling it in the scope of the handleCreationComplete()function, which is in turn called when application is created.

The other detail is that both the callback function registered with ExternalInterface.addCallback and the JavaScript function called by ExternalInterface.call take only one parameter. This means that if you need to pass multiple parameters, you would need to concatenate them together when you call a function and then split back to the individual parameters. I use this approach when I need to add new jump list item:

protected function addJumpList_clickHandler(event:MouseEvent):void

{

…

ExternalInterface.call("addJumpListItem",

"additem&" + itemUrl.text + "&" + itemText.text);

…

}

As you can see I concatenate the 3 different values (“addItem” string, item’s URL and item’s text) using the & character as a delimiter. I will then split these values in my JavaScript:

function addJumpListItem (param) {

var myValue = param.split ("&");

…

}

Where to go from here?

You may consider improving this for a production by encoding the item’s URL and text to allow both of them to contain & delimiters (with my current approach values won’t be parsed correctly if they contain & delimiters).

You may also improve the code by implementing the rest of the pinning functionality (such as clearing jump list items).

Thank you and I hope you found this blog useful.

DOWNLOAD SAMPLE CODE!

Animating HTML5 Canvas Element

Leon Braginski — Wed, 08 Dec 2010 20:03:25 GMT

Hello everyone, in this blog post I will talk about animation using the HTML5 Canvas element. Canvas is an HTML5 element which is available in IE9 and can be used to create very cool animations.

IETestDrive.com features numerous Canvas animation examples such as FishIE, Mr. Potato Gun and others. I also talked about basic animation techniques for canvas in my Windows Summit 2010 Getting Started with Canvas presentation.

To illustrate different animation techniques I have created a simple canvas animation which allows the user to control the speed, trajectory and rotational velocity of the flying IE logo. You can download sample from this blog. This is how it looks:

I used a Butterfly curve because it looks fun and a parabolic curve because this is something you can use to simulate throwing objects or shooting objects from something like a cannon.

Let’s go through the basic animation steps used to make the IE logo fly on a specific trajectory. These are the steps:

1. I set up an animation loop: setInterval (drawTimeBasedCurve, 16)

2. Animation loop does the following:

a. Calculates X and Y coordinate of the location where I want to render my image

b. Render the image using drawImage Canvas API

c. Clears the canvas

d. Repeat loop

As you can see this is pretty simple. However let’s dig into it further. First, why are we using 16 milliseconds in the setInterval method? To create a 60 FPS animation we need to update the screen 1000 ms/60 FPS which is approximately 16 msec. So calling my draw loop every 16 ms will produce a smooth animation on a monitor with a 60 Hz refresh rate.

However there is more! Canvas can be easily manipulated by applying the transform method. Canvas transform APIs change the coordinate system of the entire canvas and therefor affect everything which is rendered on the canvas after transforms were applied. It is important to note that transforms do not change anything rendered on the canvas, instead it changes a coordinate system of the canvas only, so any graphic rendered AFTER a transform will be affected by different coordinate system changes. IE9 offloads all tranforms to the GPU, which is great for performance.

Let’s see how we can use canvas transforms to add a spinning effect to the image traveling on the specific trajectory.

First look at the default coordinate system shown in black in the figure below. The point (0,0) is in the upper left corner of the screen:

Now if I want to rotate the image around its center to achieve the revolution effect, I have to do following:

1. Move my coordinate system so point (0, 0) is exactly in the middle of the image I want to rotate: ctx.translate (x + imagWidth / 2, y + imgHeight / 2). Once I do it, nothing visually changes on the screen, however the invisible coordinate system used by canvas now looks like Xt and Yt shown in red

2. If I would render my object using old X, Y (from the original coordinate system) the image would move down and right. This is understandable because the new coordinate system (shown in red) moved down and right. To compensate for this, I have to adjust the coordinates to render the image at this new point: ctx.drawImage(img, -imgWidth / 2, -imgHeight / 2, imgWidth, imgHeight). Note with moving the coordinate system to the middle of the screen we have introduced negative Y and X coordinate values which now are visible on the screen.

3. Now if I rotate the coordinate system and render the image at the coordinates calculated in point 2 above, I will cause the coordinate system to look as Xr and Yr shown in green and the image will be rendered exactly in the original center (black rectangle) yet it will show rotated (green rectangle)! And here is the code to do it: ctx.rotate (distanceCurve1);

4. Since canvas transforms applies to the entire canvas, before rendering the image we need to save canvas state and restore it when done , without this each subsequent transform will be applied on top of the previous one introducing a huge mess (give it a try to see what happens):

ctx.save();

ctx.translate (x + imgWidth / 2, y + imgHeight / 2);

ctx.rotate (distanceCurve1);

ctx.drawImage(img, - imgWidth / 2, -imgHeight / 2, imgWidth, imgHeight);

ctx.restore();

The concept below may sound a bit confusing; at least it was for me. Yet once you understand canvas transforms you can do all kinds of things. In fact FishIE sample uses exactly this approach to make fish move in the fish tank.

Now let’s talk about making images fly on a parabolic curve, which is described by this formula:

y = a * x * x.

Since the coordinate system on canvas starts in the upper left corner, negative X and negative Y are off the screen and therefore not visible. Hence using formula above I can only produce half of the parabola as shown here:

Transforms to the rescue! I can easily move my Y axis to the middle of the screen and introduce negative X coordinate by using this transform:

ctx.translate (ctx.canvas.width / 2, 0).

And now I can easily iterate from negative X values to positive X values to create a real parabola:

A one more interesting detail, after each animation loop I paint the background with a .05 alpha channel and therefore create a transparent effect:

ctx.fillStyle = 'rgba(200,200,200,.05)'.

Each loop amplifies this effect and therefor creates a vanishing trail effect.

Where to go from here? You can improve the code by creating an object encapsulating all the animation logic. Then you can create an array of several objects with a different image and send these different images flying all over the screen!

Thank you and I hope you find this blog helpful.

Download code examples here!

Simulating projectile motion with the Animation Manager using C++

Jerry Joyce — Fri, 26 Nov 2010 19:24:28 GMT

In my last post I described the advantages of incorporating animations into Windows applications and gave an overview of the platform support for creating them. In this post I will dive a little deeper into how to achieve some simple animation effects with a native windows application and the Animation Manager.

First, I needed an idea: something that would at least be mildly interesting and would also provide just enough complexity to illustrate some of the animation concepts and how to implement them. I remembered back to the days of the Atari 2600 and one of my favorite games, Human Cannonball. While the sample I ended up creating is far from a full featured game, it does cover what is necessary to simulate a projectile in motion.

First off, here is an outline of how to use the Animation Manager interfaces to accomplish the effect.

Create animation variables. These are instances of IUIAnimationVariable and they are used to provide the coordinates of a projectile along a parabolic curve. In this sample, there is one variable for the horizontal position and one for the vertical position.
Create the transition objects. There are a handful of predefined transitions that can be created using IUIAnimationTransitionLibrary. For this sample, I use a linear transition from the library for the horizontal coordinates. For the vertical coordinates I create a transition based on custom interpolator that applies deceleration to an initial velocity. The transitions are associated with the animation variables from the previous step.
Create the storyboard. The storyboard is composed of the transitions created in the previous step. The transitions are simply added to the storyboard object, which is factoried by the animation manager.
Schedule the storyboard. This begins the process of updating the animation variables over a timeline. Once the storyboard is running, the animation variables are used to retrieve the x and y coordinates where the projectile should be rendered.

Sample Design Overview

The sample can be downloaded here.

There are two primary classes implemented in the sample that perform the bulk of the work: CMainWindow and CProjectileAnimation.

Before describing the details of those two objects I’ll provide an overview of the sample’s design philosophy. First, I typically use a factory create pattern. This means that the objects I define generally have a static method to factory instances. In addition, I prefer to encapsulate the public methods of classes in well-defined contracts. For this I rely on IUnknown derived interfaces. The advantages of this approach are that it requires some up-front thinking about what the contractual requirements are between components and also it uses reference counting semantics, making it easy to manage the lifetime of objects (once the patterns are committed to memory). The disadvantage is that it can sometimes make code look a bit more complicated than it needs to, especially to someone unfamiliar with the pattern. Also, it requires some boilerplate style implementation of QI/AddRef/Release.

CMainWindow

CMainWindow is a simple wrapper over a Win32 HWND. It is responsible for creating the device independent and device dependent animation objects. The device independent objects are created during initialization and kept for the lifetime of the application. These include:

Animation manger. Factories many of the other animation objects like the storyboard and animation variables.
Animation timer. Used to schedule storyboards and update the animation manager.
Transition factory. Creates custom transitions.
Transition library. Creates standard transitions.
D2D factory. Creates various D2D objects, in this case the D2D surface.

In addition to the device independent objects, there are a few device dependent ones managed by CMainWindow. These are created on demand in the render pass (WM_PAINT) and discarded when requested by the animation manager. These include:

HWND render target. The D2D surface where the projectiles are drawn.
Background brush. A simple gradient brush used to fill the client area.
Projectile bitmap. The bitmap that is animated along the parabolic path.

Launching a projectile is accomplished by pressing the spacebar. CMainWindow will launch a projectile along a fixed curve for every press. It maintains an array of active projectiles, which are all updated during the render pass. When a render pass is complete, CMainWindow relies on the animation manager to determine whether another render pass is necessary, and invalidates itself until the animation manager is done with the storyboards for all outstanding projectiles.

CMainWindow also registers itself as an IUIAnimationManagerEventHandler. This allows it to listen for state changes in the animation manager which kick off the invalidation/render cycle.

CProjectileAnimation

CProjectileAnimation is a fairly simple class that encapsulates the logic for creating the storyboard necessary to achieve the projectile effect. For initialization, it requires an IServiceProvider to probe for the various animation services it needs to create the storyboard. Those services are cached by CMainWindow (described above as the device independent objects), which implements IServiceProvider to service those requests.

CProjectileAnimation relies on an implementation of IUIAnimationInterpolator provided by CGravityInterpolator to create the horizontal component of the storyboard. This simple implementation uses a fixed initial velocity and acceleration. The interpolator is used by the animation system to provide incremental values of velocity and position based on time offset from the beginning of the storyboard.

Conclusion

While at first glance it may seem like a lot of work to achieve a fairly trivial animation, I encourage you to download and dissect this sample. I think once you take a look at how I’ve put things together it will be clear that it is really not all that complex, and that there is a lot of functionality and flexibility offered by the Animation Manager.

Enhancing your Windows application experience with animation

Jerry Joyce — Tue, 16 Nov 2010 19:34:18 GMT

An important aspect of any application is the experience provided to its users. With so many similar applications, the user experience can be a key differentiator between your application and the myriad competitors. One approach to differentiating your experience from that of others is through the use of animations. Animations, when applied well, not only create a more immersive experience but can also result in a more usable and intuitive experience. For example, by applying subtle animation techniques to interactive user interface elements users are drawn to them naturally and are not left wondering how to negotiate with your features. In addition, user’s expectations about the application experience are increasing. Users spend lots of hard earned money for modern PC hardware with high octane GPUs and they expect, even if implicitly, that the applications they use will leverage it.

As a Windows developer, you are accustomed to choice when it comes to your development experience. Luckily, the Windows API surface for providing animations is broad. You can apply animation techniques whether you are an old-school native code developer or if you are creating RIAs via Silverlight or HTML or if you prefer the .NET framework and WPF. In addition, all of these techniques can be applied unconditionally. As a developer you don’t have to target the specific capabilities of the underlying hardware. Your application is written in a consistent manner, and the animation abstractions provide the best support they can for whatever capabilities exist. The next sections introduce the various programming methods for leveraging animation support in Windows.

Native

In C++, the animation abstraction is the Windows Animation Manager. It is a set of COM primitives and utility classes built on DirectX and GDI+. If you are unfamiliar with animation concepts, this MSDN article is a great place to start. MSDN of course also has some samples that cover the basic spectrum of the animation concepts. In addition to the basic samples, MSDN also has a great showcase application named Hilo. Among other Windows7 concepts like touch and taskbar integration, Hilo makes great use of animations to improve the user experience.

Silverlight/WPF/XAML

While the implementation details between Silverlight and WPF may not be identical, the animation primitives exposed from both share a common object model and mark-up language (XAML). In fact, if you compare the MSDN animation overviews for both you can see they are strikingly similar (Silverlight/WPF). One of the key advantages that Silverlight and WPF have over native programming is the use of XAML, which provides a declarative syntax for defining animations. This allows for better separation of business logic from presentation technology, and also allows designers and developers to work independently on the same project.

Internet Explorer 9

Internet Explorer 9 provides 2D animation support through the HTML5 canvas element and through 2D transforms using CSS3. Both mechanisms are hardware accelerated, providing extremely fluid experiences. You can start taking advantage of this support by downloading IE9 from Beauty of the Web. For a great demo of canvas animation, check out my favorite - Canvas Pinball.

References

Windows Animation Manager	http://msdn.microsoft.com/en-us/library/dd371981%28VS.85%29.aspx
Windows Animation Overview	http://msdn.microsoft.com/en-us/library/dd317017(v=VS.85).aspx
Windows Animation Samples	http://msdn.microsoft.com/en-us/library/dd940528(v=VS.85).aspx
Hilo: Developing C++ Applications for Windows 7	http://msdn.microsoft.com/en-us/library/ff708696.aspx
Silverlight Animation Overview	http://msdn.microsoft.com/en-us/library/cc189019(VS.95).aspx
WPF Animation Overview	http://msdn.microsoft.com/en-us/library/ms752312.aspx
Internet Explorer 9 Beta Guide: HTML5 Canvas Element	http://msdn.microsoft.com/en-us/ie/ff468705.aspx#_HTML5_canvas
Internet Explorer 9 Beta Guide: CSS3 2D Transforms	http://msdn.microsoft.com/en-us/ie/ff468705.aspx#_CSS3_2D_Transforms
Beauty of the Web	http://www.beautyoftheweb.com/
Canvas Pinball	http://ie.microsoft.com/testdrive/Graphics/CanvasPinball/Default.html

Countdown to PDC10

Aseem Datar — Tue, 26 Oct 2010 23:11:28 GMT

Developers! Developers! Developers – this time at the Redmond Campus!

That’s right, this year the Professional Developers Conference is in Redmond, WA on October 28^th and 29^th 2010. PDC has always been my favorite conference where everyone just gets to “geek out”!

For those of you who are coming to Redmond, fall is one of the best times of the year to be here, and this year’s PDC is sure to get you excited. But for those who couldn’t attend this year, we will bring the action right to your PC via this link. This year’s keynote is going to be delivered by Steve Ballmer and Bob Muglia, so be sure to hit the link above to watch it LIVE.

You can find all the detailed information regarding sessions, speakers and keynotes on the PDC home page. At the highest level, PDC10 has three tracks: Client and Devices, Cloud Services & Framework and Tools with over ten sessions in each track. In addition to these tracks, our friends at Channel 9 also have a ton of exciting live coverage lined up for you, and if that’s not enough, we have some pre-recorded sessions that you can watch on your clock.

Of course, I will be there at the event along with Scott Seiber and Yochay Kiriaty to report on activity. If you’d like to meet up, drop me a tweet @aseemd and I’ll see you there!