views:

244

answers:

0

This is a complex problem and it deserves a long explanation.

Let's say that I have a picture of a high level workflow/sitemap of a web site: http://home.everestkc.net/radoslav/Question/High_Level_Workflow.png

Basically there is a main flow and some alternative paths with various number of pages/images in each case.

In essence I want to create a smart WPF demo application representing a web site that will allow users to auto progress through the web application or screenshots, based on the selection of menu items that will fill out the forms (satisfying criteria for navigation) and after a delay, simulate pressing a submit button and advance to the next page in a workflow.

I would like to use WPF 4 or Silverlight 4 to create interactive navigation and to visualize this workflow using either of these approaches:

1.(Simpler version) Use Images or Screenshots of web pages (.png or .jpg) as the background images on HTML pages by creating various clickable "hotspots" so the user can navigate using the image hotspots. I believe I could use a web control within a WPF application and load images using an or tag/control with an image map . As an alternative I would use the background image, overplayed it with a transparent image. I would need to have some metadata describing these images and how they are inter related with each other and how to progress thought the workflow (unidirectional, bidirectional, self-reflective)

2.(Complex, Interactive) If I have a real web application with pages in a workflow as depicted in the above picture I would like a WPF application to examine/crawl the Web application (which can provide some special metadata information to be used by WPF’s contained web control and WPF code) at run time and discover the navigation connections and directions of navigation links and to allow a user to fill the forms and click on various action elements on web pages which causes navigation to the next web page in a particular path or to cause a page refresh, Ajax call etc.. It would be cool if I would hover over a navigation link (depicted in the above picture as yellow and white connection arrows) and I could see what would be needed to advance to the next page (what fields are required, validation criteria etc). That information could again be provided by as a special metadata by the web application that will recognize this WPF crawler. Let’s say that this metadata could be expressed via oData Microosft protocol.

In both of these cases I would like to have an birds eye view from above and side and to be able to fly to a specific page and position the camera view right in front of desired page. Then that page would allow mechanisms for interacting with it (using metadata auto fillers). I would like to be able to advance through pages by having a special menu (part of navigation metadata) and selecting a special menu item (which will automatically fill out the fields which satisfy validation criteria for a particular navigation (E.g I can have 3 navigation possibilities on a page and I can select to auto populate search form that once filled will let me advance to the next page. Second navigation possibility would be a login form, etc.)

Basically I want to create a smart demo of a web site that will allow users to auto progress through the web application or screenshots, based on selection of menu items that will fill out the forms and after a delay simulate pressing a submit button and advance to the next page in a workflow.

Please advice on what direction I should go. Are there any open source applications that do something similar (anything similar I described)? Are there any commercial applications in WPF that attempt to do a birds eye view of some connected elements? I am aware that there is http://www.codeplex.com/familyshow which is 2D application and connects various elements.

Thanks, Rad