We’re going to teach everyone how to build a Blueprint to build a Web Application that loads annotations.
A little background for those of you reading this through a kick, digg, reddit, or other link -- my company, Atalasoft, builds a .Net toolkit for imaging called DotImage. Part of the toolkit focuses on WebControls and annotations for images. I don’t wish to advertise DotImage here (“Why the heck not???” my marketing guys may ask), but if you see something in the screenshots that are not native to .Net, you will be able to find where they came from… if you’re curious.
Now, back to the Blueprints.
If anyone read my previous entry about Blueprints, once you get past the Fish references, you’ll see that I was very excited about Blueprints, but disappointed about the lack of instructions. The team at Microsoft, headed by Michael Lehman, have done a great job with the new screencasts, and following them makes building a Blueprint a piece of cake.
I don’t intend to rehash what Michael says in the screencasts, but instead put many of the pieces together. One of my major frustrations with providing support is people who don’t try. Blueprints is going to be my way of remote teaching. Sure, many people will copy the code without understanding what’s going on, but maybe there will be one or two who reach enlightenment.
Before we begin building a Blueprint, there are some necessities to get out of the way.
- Some aspects of the Blueprints require Visual Studio 2008 SP1. Go get it.
- Install the Blueprints Manager
- Your life will be easier if you add the following registry key:
- In HKLM\Software\Microsoft\Blueprints, add a string value EnableDeveloperFeatures with a value of true. This will allow you to delete Blueprints from the manager if you are just testing them, or if you make changes (which don’t always “take”, in my experience). As of November 22nd, Michael was still debating about making this straight out enabled or continuing to leave it as a “developer” feature.
Now, on to building.
Step 1 – Which comes first, the chicken or the egg?
Ultimately, I want to build a Blueprint that unfolds a Web Application. So, do I build the Web App first, or unfold the Blueprint Factory into a new solution? Either one – it’s my choice. For these purposes, I’m going to build the Web Application parts first.
Opening Visual Studio 2008 (with SP1 installed), I’m going to create a new ASP.Net Web Application. My project opens with the Source view of my Default.aspx page. I’ll set up the project with my references, and I’ll tweak the design view a little bit.
One of the specific problems DotImage customers face when building this type of project is not knowing what properties to set in the design view. I’ll go ahead and set them now, too.
-- For DotImage customers following along, I’m setting the WebAnnotationViewer’s AutoLinkThumbnailViewer to True, the WebThumbnailViewer’s ShowAnnotations to True, and setting the ViewerID property of the WebThumbnailViewer to the WebAnnotationViewer’s ID.
The point, though, is I can set as much or as little as I want here. I could build the whole project if I wanted to, but since some items coming up are more customizable, I’ll give directions for those items through the Blueprint. For now, this is as far as I’m going to go with my Web Application.
Step 2 – Configuring the Blueprint
I’m going to leave my Web Application alone for a moment (after saving my work), and unfold the Microsoft Blueprints Factory into my solution. After the factory unfolds, the Configuration Editor opens:
I’ve filled in some details, but we’ll be coming back to this editor later on.
After closing the editor, the Workflow for the Blueprints Factory opens. There are six activities listed in the workflow (well, five, really – the last one is who to call for support. And I did email Michael with questions, and he was very nice and helpful). I’m going to ignore the activities, as I feel I am familiar enough with them now to proceed without referencing them.
In order to put my Web Application into a Blueprint, I need to create a template from it. Clicking File –> Export Template… will launch the Wizard. I select Project Template, choose my Web Application in the drop down box, and click next. I uncheck the Auto import, and click Finish. Honestly, I could have created the template prior to unfolding the Blueprint Factory, but rather than searching for it, the window with the zip file I need opens up directly. I drag the newly-created zip file to the templates folder in the Blueprint Factory in my solution.
Now, I select “Edit Configuration…” from the Blueprints menu (which can be found by right-clicking on the BlueprintFactory in the Solution Explorer. On the configuration tab, I switch the template drop-down from Auto-generated to User supplied, and type in the name of my zip file in the template:
Now, if I had completely set up my entire Web Application exactly as I wanted, I could build this solution, which would build my Blueprint for me, but there are more details I need to set up first. Also, if I wanted, I could remove the Web Application from my solution altogether, but I’m going to leave it so I remember what I’m doing.
Step 3 – Writing the Workflow
For all the details that are left out, I’m going to include instructions. Because some steps are dependant on others, it would make sense to force people to call the base steps first – adding a Blueprints Workflow Process will make this easiest.
Right-click on the BlueprintFactory in the Solution Explorer, and choose “Add WF-Process…” from the Blueprints menu. A new project is added to you solution, with the special file project.workflow.xoml. This is going to be the Workflow of Activities for someone to follow when they unfold our WebLoadAnnotations Blueprint.
-- When I first opened the XOML file, I did not have the toolbox controls as Michael did in his screencast. To add them, right-click on the Toolbox and select “Choose Items…”. Filtering by Blueprints will let you quickly find the controls you need to add.
Having built this particular Web Annotations project numerous times, I already know some of the dependant steps. I’m going to use the SequenceActivity and Parallel controls from the Windows Workflow 3.0 toolbox to structure my dependencies, and then the BlueprintProcessActivity will be the actual activity.
- Each BlueprintProcessActivity must have a surrounding SequenceActivity, but more than one BlueprintProcessActivity can be inside a single SequenceActivity.
- Two BlueprintProcessActivities in the same SequenceActivity will be dependant in a top-down linear fashion, unless…
- BlueprintProcessActivities in a Parallel will not be dependant to each other, but will be dependant to any BlueprintProcessActivities in the same SequenceActivity prior to the parallel.
Maybe it would be better to illustrate this…
In this workflow, I’ve left the overview (as it’s always nice to have an introduction with details). Then, the user can choose to pursue the AddFolders or AddCode activities. If the choose AddFolders, they can then go to SetWebConfig or AddFiles. With each BlueprintProcessActivity, there is a ShortDescription property – this is what will show up in your Blueprint’s Workflow. Also, you can associated a document to open in your workflow. For example, I’m going to associate a new file, AddCode.mht with the AddCode activity. The BlueprintFactory has a set of empty files under doctemplates that you can use. When I finish making changes to that file, I’ll add it to the content/workflow folder in the BlueprintFactory.
For the SetWebConfig activity, I’ll take advantage of the KnowledgeBase article already written about the subject, by putting the link to the webpage in the activity’s details. I’ll fill in the remaining missing documents I want, and rewrite the provided Overview to be more specific to my Blueprint.
Once the Workflow is finished, I’ll go to my project dependencies (right-click on the Solution in the Solution Explorer), and set my BlueprintFactory dependent on the WorkFlowProcess project.
All that’s left now is to build the solution. The Blueprints will be automatically installed into the Blueprints Manager.
Step 4 – All done. Let’s see what’s happening…
Since spell check can only catch so much, I’m going to run through what I’ve built. First, I’ll open a new instance of Visual Studio, and instead of creating a new project or solution, I’ll go straight to the Blueprints Manager:
There’s the new Blueprint, and the Overview file I changed is showing in the Manager itself. I’ll unfold, and because I do not currently have anything open, the manager will automatically prompt me to begin a new project. I’ll select Other Project Types –> Visual Studio Solutions –> Blank Solutions. However, I could select anything, and the Blueprint will unfold into it. If I already had a solution open, it would add my Blueprint to it.
The manager then asks me to Specify the Project Name. By default, it will be the name I set up in my configuration editor.
And, voila. My Web Application has unfolded itself from its template, including the references I added to the project. My Activites are showing with their dependencies:
And I can step through the workflow to accomplish my tasks. Notice how the Setup Web.Config and Add Files to Folders are enabled once Add Folders to App is checked off:

For those of you who want the Blueprints I just built, the zip file is available. Copy the file to your desktop, then point to it using the Blueprints Manager –> Update –> Add File. As an alternative, you can set up the RSS feed -- in the Blueprints Manager --> Update --> Add Feed... and paste this URL:
http://www.atalasoft.com/cs/files/folders/blueprints/rss.aspx
Wow, over 1,600 words for all this. That wasn’t too hard, was it?