Workflow real-time visualizer

Question

Hi,
 I'm planning to implement a workflow visualizer which aim would be to render the evolution of scenarios running on the Azure.

Before doing so, I thought it would be wise to ask if such a thing already exist or is planned to be released either within the Cloud WF or within another products.
I couldn't find any on the net but we never know.

Thanx,

--mike

Answer 1

Hello, do you mean you want to get a screenshot of the Visual Studio's workflow designer? Well, if it is a predefined workflow, I think you can just open the workflow in your local Visual Studio, create a screenshot, and include the image to your web role. If you want to generate a workflow dynamically, and then create a visualizer based on the workflow, you can refer to the sample on http://www.masteringbiztalk.com/blogs/jon/PermaLink,guid,28601754-c305-4597-a0a6-48f32be1eddb.aspx. This sample hosts the .NET 3.5 workflow designer on the server side, and renders a dynamic workflow. It then creates a screenshot, and use an http handler to render the image on the web page.

To make this sample work in Windows Azure, you need to perform a few modifications.

First, enable full trust on your web role.

Second, copy the wfimages folder (and the web.config inside it) to your web role. You don't want to use your main web.config because you don't want to use the WFImageHandler on all png files.

Third, modify the web.config inside the wfimages folder to support the new IIS 7 configuration. Add the following section:

      <system.webServer>

            <handlers>

                  <add name="WFImageHandler" path="*.png" verb="*" type="WorkflowVisibilityControl.WFImageHandler,WorkflowVisibilityControl"/>

            </handlers>

      </system.webServer>

Fourth, some GDI features (which the WF 3.5 designer uses) may result in OutOfMemoryException when running in Windows Azure. So you may need to install a hot fix from http://support.microsoft.com/kb/970350/.

Anyway, I would suggest you to wait for WF 4 (we will support .NET 4 shortly after it RTMs). Workflow 4 offers a new WPF based designer, which doesn't require GDI at all. It also gives you a much better developer experience. You can use the same idea as the sample to work with the new designer: host the designer on the server side, and create a screenshot to render it inside a web page. You can even host the new designer inside an XBAP to provider interactivities (actually you can already do that today with WF 4 Beta 2 since XBAP runs on the client side).

---

Lante, shanaolanxing This posting is provided "AS IS" with no warranties, and confers no rights.

Answer 2

Thanx.

More than screenshots, I'd like to create an interactive realtime visualizer.

My first thought was to graphically render the workflow on the fly from some kind of XML representation of the workflow (like for bpel engines).
I guess such realtime representation exist or will exist with the new version of WF4 right?
If not it could be easily created by the invoked services themselves.

When is the release of WF4 planned for?

Answer 3

If you indeed want an interactive designer, you will definitely want to look at some client side solutions.

The best client side solution provided by Microsoft is Silverlight, but unfortunately, currently there's no existing products that is capable of rendering a workflow designer.

XBAP is capable of rendering WPF contents (WF4 designer uses WPF). So that's also an option. But XBAP requires the client to install .NET Framework (at least the client profile).

The last solution is ActiveX. The WF 3.5 designer can be rendered as an ActiveX control (actually a Windows Forms Control). This also requires the client to install .NET Framework. Also, if you update to WF 4, this solution will no longer work. You can refer to http://msdn.microsoft.com/en-us/library/aa480213.aspx to see how to host WF 3.5 designer inside a Windows Forms Control.

WF 4 will be released together with .NET 4 in early 2010.

---

Lante, shanaolanxing This posting is provided "AS IS" with no warranties, and confers no rights.

Answer 4

I was going for Silverlight indeed. Would need some automatic layout algorithms though ...
Is WF generating a realtime textual representation of the workflow?

Answer 5

It is very difficult to build a full scale Silverlight Workflow designer. Can you use XBAP instead? With XBAP, you can host the WF 4 designer directly in the client application with only a few lines of code, and since the application runs on the client, it works even today. The only disadvantage is the user must install .NET 4.0 Beta.

---

Lante, shanaolanxing This posting is provided "AS IS" with no warranties, and confers no rights.

Answer 6

The .Net 4.0 constraint might be a no go statement.
I don't want to create a designer btw. Just a visualizer with few user interactivity.

The hardest part would be to find/create an automatic layout algorithm to ease the rendering of the workflow.
Any idea where I could find such software?

Answer 7

I'm not aware if there are any samples on the web. For the layout part, yes, it can be very difficult to create a nice auto-layout algorithm. If you use UISpy to inspect the WF4 designer, you will find it is very complex...

Anyway, here're some general ideas: In Silverlight, you can customize the template of a Button to serve as an activity (so that you can use it as a normal Button to add interactivity). In the ControlTemplate, you set the alignment of the container Panel (Such as a Grid) to Center rather than Stretch, and add some margin in its content, so the Panel will automatically take the size of its content plus the margin, and you don't need to manually calculate the size. Do not explicitly set any sizes.

The root container can be a StackPanel, so it is easier for you to position activities contained in a sequence. Use margins to reserve some space between each elements.

The most tricky part is how to position branches and sub activites. If it's a simple sequence without any branches, you can just stack each element in a StackPanel. If, however, branches are required, you will need to put sub StackPanels inside the root one. Depends on what activity it is, StackPanel may not be enough. Anyway, Canvas is the last panel to use, because you will have to manually calculate the position of each element... Use other panels whenever possible.

You may also need to create a custom class to represent each activity, and use data binding to render different activities. Since Silverlight doesn't support DataTemplateSelector, you will even have to write more code to distinguish different activities...

This will not be a simple task. So if you can, I suggest you to use XBAP to hose the built-in designer. The .NET client profile (not the full .NET Framework) is only about 30 MB, which is not very large for the end user to install.

---

Lante, shanaolanxing This posting is provided "AS IS" with no warranties, and confers no rights.