Sapphire: New Web Form designer in Visual Studio Orcas.

Today is a huge day in my life. Today we integrated Sapphire project (as well as a lot of other new features) into the Visual Studio Orcas mainline. Sapphire project goal was to replace old, IE-based designer by a new one that is based on FrontPage technologies. It is the same set of components that Microsoft Expression Web is based on.

Work to integrate new designer began little more than two years ago, in November 2004. Yes, almost a full year before even VS 2005 shipped. The project took quite a long time since FrontPage designer has never been a component before so a lot of time went into rearchitecturing and separation of key components from the rest of the code. Then there was a massive amount of work to change Visual Studio code to incorporate new designer and provide it with all the services it required. Then a quite some amount of new code was written to make VS work with Split view and CSS editing tools. Visual Studio provides its own project system, HTML and CSS source editors and does not use those pieces that SharePoint Designer or Expression Web employ.

Also, we wanted to be sure that almost all the functionality that worked in Whidbey still works in Orcas and hence we spent a lot of time making sure our existing automated tests pass. We are still working on fixing issues in lower priority cases, but all important scenarios should work.

You will be able to download and play with the new features in the February CTP of the Visual Studio Orcas.

So here is what you get in Orcas:

 1. New designer based on the same technology as Expression Web.
 2. Extensive CSS tools.
 3. Support for nested master pages.
 4. Split view.
 5. Ability to access all tools that ASP.NET controls provide in Source view.
 6. Intellisense and validation in <style> blocks.
 7. Support for master pages in web.config.
 8. Significantly improved performance of view switching.
 9. Unified undo/redo stack that remembers operation is all views.
 
 
Here is how Visual Studio Orcas Web development tools look like:

VS Orcas Web Tools

In the center there is a new designer in a Split view with the Visual Studio source editor. You can see how selection is synchronized between Design and Source panes. At the left side you can see Apply Style and Manage Styles task panes. At the right side there is familiar Properties window as well as new CSS Properties panel. At the top there is new Style Application toolbar.

You can also split views vertically which useful when you work on widescreen monitors:

CSS Tools are available in Source view when it is synchronized with the design view (more about view synchronization in the next blog post):

ASP.NET control properties, builders, wizards and events tab are available in Source view as well

New designer provides ruler, grid and an extensive set of visual aids for control editing and positioning

There are also a lot of new options. CSS options panel allows you to define which attributes or styling the designer should be using

CSS Tools Options

But wait, there is more! There also significant improvements in JScript intellisense, client script breakpoints management, AJAX support, Web Application projects, ability to specify version of the framework to compile for - but they warrant separate blog entries so I am planning to blog about each feature in more details in the upcoming weeks. I am sure there are going to be posts about new Orcas functionality in ScottGu's blog as well as in our team blog.