Well!  I hope the New Year finds all of you well. I've been off the blog cycle for a few weeks enjoying some R&R.  But, as they say, back to the rock pile.

The last handful of posts talked about SketchFlow from a high level.  You recall I walked you through a number of the core tools (Map panel, animation editor, etc).

Now that we have that background, we will build our own prototype from the ground up!  In this post, we will create the initial project and examine the starter code.

Let's create a custom SketchFlow prototype application which models some typical screens one might see in an online sales application. Begin by creating a new Silverlight SketchFlow Application named OnlineStoreApp from the New Project dialog box:

Upon creation, you will see that you are provided with a single screen (named Screen 1) configured as the prototype startup screen. Using the SketchFlow Map panel, rename this initial screen to MainScreen by right clicking on the map node and selecting the Rename option:

A SketchFlow project is organized a bit differently than a typical WPF or Silverlight application. Activate your Projects panel and notice that your Solution contains two related projects. The first project (named OnlineAppStore) contains the overall application logic represented by the App.xaml and App.xaml.cs source files. In addition, this project references several Expression Blend SketchFlow assemblies (all prefixed with Microsoft.Expression):

The second project (named OnlineAppStoreScreens) references the same prototyping assemblies, and will be the location for each screen you add to your application via the Map panel. Currently, you can see your MainScreen present and accounted for. In addition, this project will define a few additional items of interest:

• SketchStyles.xaml: A XAML file which contains styles for the SketchFlow UI elements.
• Sketch.Flow: This XML document contains data which is read by the Map panel to display nodes and their connections. You will typically not need to directly edit this file as it will be updated automatically when working with the SketchFlow IDE.
• A Fonts folder which stores a few SketchFlow font types used by the supplied styles.

The following figure shows the breakdown of this second project.

The SketchFlow styles will be applied automatically when you make use of the prototyping controls in your Assets Library. However, if you are curious, you can view each of these styles by examining the Resources panel.

OK, now we have our project. In my next post, we will examine the role of "component screens". In a nutshell, this aspect of a SketchFlow prototype allows you to build a common UI which will be shared among a number of Window (WPF) or UserControl (Silverlight or WPF) objects. As you will see, component screens allow you to easily capture navigation menus, as well as any sort of repeatable UI content.

See you next week.