I was working on some proof of concept web controls this weekend; my team has just started work on a new atlas enable website - we are up against a tight deadline and the designs for the site are most ambitious. I have been thinking about a process to enable a smoother transition from designs to finished pages.
One idea I have been playing with is to cut up the designs into their constituent parts which can then be put into separate web user controls. The pages can then be assembled using these “mock-up” controls – this way, the team and the product owner can easily visualise the overall design. This ensures that the site acts as a living wireframe - a halfway house between a static HTML mock up and a functional prototype - we get the best of both worlds; we get a good holistic overview of the site design and cohesion; while the development team incrementally converts cut-up controls in to working functionality this approach should allow them to start thinking about page behaviours, interactions between the different controls and commonality that may manifest itself in code reuse.
This approach is easy to implement if you’re using ASP. NET user controls because you can simply add an image control and then reference the image that the designer created for that control. Thankfully Visual Studio 2005 has a much improved designed time development experience: user controls no longer appear as grey rectangles simply displaying their ids-they are now rendered much more accurately, which allows the developer to see a much more realistic representation of the page design.
The problem comes when your functionality has to be packaged up in to web server controls rather than web user controls; as you have to programmatically implement the design time view. The idea I had was to render out the image representing the mock-up design of the control rather than trying to accurately construct and render the control in code. Luckily, ControlDesigners are already built into the .NET Framework; these allow you to extend the design mode behaviour of the web server controls by being in control of the HTML that is rendered and displayed on the Visual Studio designed surface.
The next hurdle I came across was how to load and display an image in design time mode. I remembered a comment left by Simon Calvert on a blog post I came across a while ago, which mentioned a method for accessing the web.config within Visual Studio at designed time. The comment mentioned using the IWebApplication interface as a management API to access various project settings. A little bit of digging turned up the GetProjectItemFromUrl method which returns an IProjectItem which will give you the physical path of the object; once you have this all you have to do is create an HTML image tag with src set to the IProjectItem.PhysicalPath property. The code to do this is shown below:
public override string GetDesignTimeHtml()
{
IWebApplication webApp = (IWebApplication)this.Component.Site.GetService(typeof(IWebApplication));
IProjectItem image = webApp.GetProjectItemFromUrl("~/Images/ControlMockUpImage.jpg");
return string.Format("<img src=\"{0}\" />", image.PhysicalPath);
}
With this code in place you can provide a much better design time experience for your development team within Visual Studio 2005.
For more information about ControlDesigners see this ASP.NET 2.0 Quickstart Tutorial.
This blog post was dictated using Windows Vista (Beta 2) Speech Recognition software.