Over the last several blog entries, we have been examining the role of the SketchFlow component of Expression Blend Ultimate. If you’ve been reading along, you have learned how to create a prototype project, define reusable content via “component screens”, incorporate interactivity with behaviors and animations, and other details of interest.
This entry will examine how to package up your prototype in a format which can be distributed to stakeholders using the SketchFlow Player. As you know, the whole point of building a prototypes is to capture user feedback during the early phases of a software effort.
You have seen that when you run your SketchFlow prototype using the Blend IDE, the SketchFlow play will launch automatically. However, what are you to do when you want to ship the prototype to an interested stakeholder who does not have a copy of Expression Blend? Thankfully, it is possible to create a standalone player which can be sent to a client by activating the File | Package SketchFlow Project menu option:
Once you activate this menu option, simply specify a location and name for the generated player. Since we have created a Silverlight SketchFlow prototype, our generated file set consists of an HTML file and XAP binary (as well as an ASP.NET web page). The client can simply double click on the HTML file to view the prototype in their browser.
If you were to package a WPF SketchFlow prototype, you would end up with an Windows executable file (*.exe).
Once you have gathered and documented client feedback, modified your prototype accordantly, and received any necessary sign-off, you can convert your SketchFlow prototype to a ‘real’ Silverlight or WPF project. The first step would be to save a copy of the current prototype via the File | Save Copy of Project menu option.
Be aware that there is (sadly) no automatic ‘Convert prototype to Production’ button in the Blend IDE. When you wish to strip out the prototyping-centric aspects of the code base, you must do so manually. While the Blend User Guide provides step-by-step details of how to convert Silverlight and WPF prototypes to a production body of code, allow me to describe the process here.
The first step you must take to transform a prototype to a production application is to modify the *.csproj file of the project in your solution which contains your App.xaml and App.xaml.cs files. For the current example, this would be the OnlineStoreApp.csproj file. Open this file in a simple text editor, and completely delete the following XML elements:
Once you have done so, save and close the file. Now, open the *.csproj for the secondary project of your solution which contains the prototype screens (in this example would be OnlineStoreAppScreens.csproj). Locate and delete these same two lines of XML and once again save the file when you are finished.
Open your modified solution back into the Blend IDE, and use the Project tab to delete the Microsoft.Expression.Prototypeing.Runtime.dll assembly:
Now, using the Project | Add Reference menu option of the Blend IDE, add a reference to the Silverlight 4.0 System.Windows.Controls.Navigation.dll assembly, located by default under the C:\Program Files\Microsoft SDKs\Silverlight\v3.0\Libraries\Client folder.
As you might be guessing, delete the Microsoft.Expression.Prototypeing.Runtime.dll assembly and add the System.Windows.Controls.Navigation.dll assembly for the secondary project (again, OnlineStoreAppScreens.csproj in this example) as well.
Now, open your App.xaml.cs file for editing. You’ll notice an assembly level attribute at the top of your code file right before the declaration of the App class type. Delete it completely:
As well, locate the current implementation of the Startup event handler. Delete (or comment out) the current line of code, and replace it with the following, substituting the name of the XAML file (Screen_1.xaml) with whichever XAML resource you wish to display upon startup. As well, change the name of the project (/OnlineStoreApp.Screens) with the name of the project containing the individual screens:
At this point, your project will no longer use the SketchFlow player. Thus, if you run the Silverlight application, it will load into a browser just like a typically XAP file would do. The only other bit of clean up you might wish to do is to swap out the SketchFlow styles with your own, however, I’ll leave that detail to you! Here is the final result of our transformation.
That wraps up our look at the SketchFlow project type of Expression Blend. See you next time and happy coding.