electric beach

Christian Schormann

Thursday, August 26, 2010

Deep Linking Into A SketchFlow Prototype

A few times, we have been asked how to use a URL to directly navigate to a given sub-page of a SketchFlow prototype. My colleague Chuck Hays from the SketchFlow team posted an answer to this question here, on the Expression forums. Many thanks to Chuck, who kindly answers an amazing number of customer questions.

The solutions is pretty simple:

When your prototype starts up, you can check for the URL used to navigate to the prototype. You can then parse this URL and navigate to a particular page of the prototype.

This has to be done in code, and I’d like to point out that this is not a supported technique.

A SketchFlow prototype consists of two projects. One contains the SketchFlow player, the other contains your actual prototype. Normally, you never modify the player project, but in this case, you do :)

If your prototype solution is called “TestPrototype”, then the player project will be called “TestPrototype” as well, while the project that contains your screens will be called “TestPrototypeScreens”.

In the player project, find the file “App.xaml.cs”. It will look like this:

   1: public App()

   2: {

   3:       this.Startup += this.Application_Startup;

   4:       this.Exit += this.Application_Exit;

   5:       this.UnhandledException += this.Application_UnhandledException;


   7:       InitializeComponent();

   8: }


  10: private void Application_Startup(object sender, StartupEventArgs e)

  11: {

  12:       this.RootVisual = new Microsoft.Expression.Prototyping.Workspace.PlayerWindow();

  13: }

What this code does is simple: It hooks up the startup event handler in the app constructor. Then, it instantiates the SketchFlow player and sets it to be the root visual of the app.

With the changes to this code that I’ll show you in a moment, in order to navigate to a specific page, we can use URLs using a hash-mark notation, for example:


The part of this URI that we will be using to navigate is the part after the hash mark, i.e. TestScreens.TestPage. For the sample code I’ll show you in a second, this must be the exact namespace.classname of the screen you want to navigate to. You could certainly add code that allows for simpler names if you so choose.

Here’s the modified version of the App.xaml.cs code:

   1: private void Application_Startup(object sender, StartupEventArgs e)

   2: {

   3:       var rv = new Microsoft.Expression.Prototyping.Workspace.PlayerWindow();

   4:       this.RootVisual = rv;

   5:       rv.Loaded += new RoutedEventHandler(rv_Loaded);

   6: }


   8: void rv_Loaded(object sender, RoutedEventArgs e)

   9: {

  10:       // Parse Uri

  11:       var page = Application.Current.Host.NavigationState;

  12:       if(!string.IsNullOrWhiteSpace(page))

  13:       {

  14:           Microsoft.Expression.Prototyping.Services.PlayerContext.Instance.ActiveNavigationViewModel.NavigateToScreen(page, false); 

  15:       }

  16: }

In the Application startup handler, we hooked up an event handler to the root visual to notify us when the player is done loading.

In this event handler, we parse the URI that was used to start the player (this is really easy, because the Application object kindly gives us access to the SilverlightHost, which in turn gives us access to exactly the part of the startup URI that we care about in the NavigationState property: The part of the URI right behind the hash mark).

Once we have the URI part after the has mark, we can use it to navigate to the desired page. As I wrote earlier, we assume that you use the namespace.classname of the target screen, which we can directly use to navigate the player, via the slightly convoluted long code line shown in the sample.

Please note that this is sample code without all proper error checking, and that this relies on the current implementation of the SketchFlow player to work.

Many thanks again to Chuck Hays for creating and posting this sample in the first place.

posted by cs at 00:38  

No Comments

No comments yet.

RSS feed for comments on this post. TrackBack URI

Sorry, the comment form is closed at this time.

Powered by WordPress