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:
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
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.
Comments
Anonymous
January 20, 2007
Looks awesome. Can you tell us what to expect if we're currently using the Pro version of VS 2005? i.e. Upgrade advice, should we install Orcas on the same machine, etc. Thanks.Anonymous
January 20, 2007
Yes, you will be able to install Orcas on the same machine as Whidbey (VS 2005). I don't know exact feature set of the VS 2007 Pro, but normally it does not become smaller from version to version. However, you may not need VS 2005 as Orcas will be able to target 2.0, 3.0 or 3.5 .NET frameworks.Anonymous
January 20, 2007
Can the split view be used with dual monitors?Anonymous
January 20, 2007
No, you can't drag design view to one monitor and source view to another, it is a single window frame in VS IDE. It is possible to stretch IDE window so it spans two monitors though.Anonymous
January 20, 2007
Great work! What about the speed when switching between different views? Would it be somewhat slower than earlier? or same? Thanks, VivekAnonymous
January 20, 2007
It should be practically instant except first switch when designer is getting loaded for the first time. I am planning to blog in more details how split view works, but effectively view switch does not exist anymore, it is just a window resize. So when you are in source, designer is still semi-active and provides CSS tools, for example. When you are making changes in Design view, they are reflected in the Source practically immediately. Design view is essentially split view with Source hidden.Anonymous
January 21, 2007
Dear Dr. Arkhipov, how - and if - ruler, grid and an extensive set of visual aids for control editing and positioning improves and differentiates from what NetBeans offers with "Matisse"?Anonymous
January 22, 2007
How about a tool or "go to" function that would show you what css files/entries are affecting a particular control?Anonymous
January 22, 2007
Wicked! Nice way to start off my morning. Please keep the excitement going strong with VS.NET!Anonymous
January 22, 2007
Is Visual Studio Orcas going to be a new version of VS or will it be a free ugrade to VS 2005?Anonymous
January 22, 2007
Hi Mikhail, congratulations!! great job!! Do you have any clue of when it will be released? (I know it's with Orcas)Anonymous
January 22, 2007
ok, you can't drag the design view to one monitor and the source view to another. but can you still drag the other different views to your second monitor? will Orcas also have wpfe designer integration? keep up the great work!Anonymous
January 22, 2007
To Bill Glosser: you typically can see all applied styles and the way the are applied in the CSS properties. We may add a goto function, we haven't shipped yet ;-) To Peter: Orcas is the next major version of Visual Studio. To Diego: there is no official public date yet...Anonymous
January 22, 2007
I'm a little bit worried when you say "...when you are in source, designer is still semi-active..." Wouldn't VS be "lighter" if you could disable it altogether? Sure, it will make switching between source and designer faster, but I NEVER use the designer, so why force me to use system resources on the designer? I found VS2005 to be very sluggish compared to VS2003. I realize that them you put new stuff into an application, it gets heavier, but the difference was huge. At least on the computers I run VS on, and they are not that old. I guess what I am saying is... New cool stuff - great. But give the option to disable stuff (or not install parts).Anonymous
January 22, 2007
As a rule of thumb, I avoid absolute possible as much as possible. Does the new designer take this into consideration?Anonymous
January 22, 2007
How about a split view with browser previews? It would be nice to have a split screen preview to compare in IE, FF, and other installed browsers.Anonymous
January 22, 2007
Can I run web application developed with Orcas in Windows 2003?Anonymous
January 22, 2007
Does February CTP work on Windows Vista? Keep up the good work!Anonymous
January 22, 2007
To Mads: if you never switch to Design or Split view, the designer never gets loaded so you won't have to pay any memory or CPU tax. To Eddy Young: you don't have to use absolute positioning if you don't want to. There are great CSS tools and good table editor. However, many users who only develop for Intranet have been complaining about missing easy control positioning as in VS 2003. Therefore we are trying to provide tools for both camps :-) To Lolo: of course, they are just Web apps, they run in any browser on any platrofm. To Mikael: Yes it does. However, CTPs are provided as both VM and standard setup, so you can just run VM if you wish.Anonymous
January 23, 2007
The comment has been removedAnonymous
January 23, 2007
To Jeremy: Of couse not, FrontPage designer never had problems with markup formatting :-). Formatting changes were specific to IE-based designer, as I explained back then here: http://blogs.msdn.com/mikhailarkhipov/archive/2004/05/16/132886.aspx In fact, we are now able to remove Whidbey code that managed formatting preservation.Anonymous
January 23, 2007
The comment has been removedAnonymous
January 23, 2007
To Mark Petersen: I believe we are talking about different things. What I mean is that FP-based designer does not reformat markup that you typed in. Generation of new elements is a different aspect. Do you think new Expression Web designer still generates IE-specific markup? I'd like to hear examples as I would like to see this fixed before we ship Orcas. Nothing in my team goals says to promote IE-specific features. In fact, we have been trying to make VS more standard compliant.Anonymous
January 24, 2007
Do you support Zoom in the Design view along with your rulers, grids, etc?Anonymous
January 24, 2007
Thanks, Mikhail, for the quick reply to my post (and providing this blog in the first place). Your explanation of the markup reformat issue in earlier VS releases was very informative. I'm excited by the new web designer features slated for Orcas. Also, I'm glad to hear that you are making an effort for VS to be more standards compliant. The more standards compliant VS is (as well as ASP.NET, IE), the easier our jobs will be as developers to support multiple browsers.Anonymous
January 24, 2007
Where are the horizontal scrollbars on your posting, to show me the full screenshots? Maybe I should buy a wide-screen monitor now :-).Anonymous
January 28, 2007
Good work and congrats!Anonymous
February 12, 2007
*** SUPPORT MULTIPLE MONITORS *** *** DOWN WITH CRIPPLEWARE *** *** GO FOR THE MARK OF EXCELLENCE ***Anonymous
February 26, 2007
I absolutely hate the web designer in VS 2005. We developed a ton of apps in VS 2003 all using absolute positioning, including displaying the grid, snap to grid and the ability to use the arrow keys to finely position objects. From what I see in Orca, you are reinstating that functionality. Is that correct? It's essential that MSoft realizes that contemporary web page design must enable absolute positioning, so that we are able to more accurately mimic windows design. So, are you going to put back the grid display, snap and arrow positioning that you removed from 2005? KAnonymous
February 26, 2007
Yes, some of the absolute positioning functionality is coming back, you will be able to use grid and snap.Anonymous
February 26, 2007
Thanks, my friend. I assume when you say, "use grid", you mean that there will be pixel displays again, like VS2003? Hopefully, Orca will also provide object group positioning... ;) Another question, though - In VS2003 WebForms, you could use the mouse to select a group of controls and reposition them. I've searched and searched and searched, but I can't find how to do that in VS2005 WebForms.
- Can it be done?
- Will it be put back into Orca? For those who are interested: I figured out how to do arrow positioning (Tools > Options > Environment > Keyboard > Edit.MoveControlDown/Up, etc., but it doesn't snap, it moves a pixel at a time. But at least it's a way to get some accuracy. Change to Global. Thanks, K
- Anonymous
February 26, 2007
- No
- No Unfortunately, new designer does not support multiple selection.
Anonymous
February 27, 2007
My friend, In a day and age where even the most elementary designers allow mouse selection and block movement of groups of objects, I'm disappointed that the new designer would lack this fundamental function. Every designer on the planet of worth, including most MSoft Office products, supports group selection - if the Orca designer is going to allow absolute object positioning, you have to provide some method to select multiple objects so that they can be quickly and efficiently moved... Currently, in VS2005, you can click into a panel and click Ctrl-A to select the objects within that div or panel, but when I try to move them as a block or deselect an individual object using Ctrl-Left click, the designer voids the entire group selection. Perhaps a compromise solution would be to at least allow groups of objects inside another object (or, if it's a problem, limit it to objects inside a panel) to be selected via Ctrl-A and moved as a group? That way, I could select a group, then deselect those objects I don't want to move, and move the remainder. Otherwise, the amount of design time necessary to position objects could increase dramatically. Also, of course, the new designer would, I assume, include group positioning (right/left align, commmon spacing and son on), so that will help. Regards, KAnonymous
February 27, 2007
This is true in Windows development. However, in Web development control positioning is done primarily using divs/CSS or tables. This works better when page should work in different browsers with different screen resolutions. Absolute positioning does not work well with master pages or server controls which may generate different HTML under different conditions potentially breaking page layout since absolute positioning does not work relative to the page or browser window and rather works off the nearest positioning container, which is not necessarily document body or nearest div. Some page elements may end up hidden if browser window is smaller than the element positions. Table based layout works better in that sense. New designer primarily oriented towards CSS/div and table based layout as they are most commontly used ways to lay out pages. It does support absolute positioning, but it is not primary layout tool. Multiple selection is supported from CSS and style management tools.Anonymous
March 01, 2007
The reality is that browsers should all use the same standards and we, as developers, shouldn't be penalized by removing important functionality just so the designer can work with all browsers. We've had nothing but praise for the user-friendliness of our absolutely-positioned solutions. Web development is done with CSS and DIV - yes, that's true, but the next object is typically a panel on the DIV. Then, on that panel, are all the absolutely-positioned controls. The result is a Window-like solution that our users love. Absolute positioning worked perfectly fine in VS2003 and allowed group object selection. This is a designer, Mikhail, and it should offer every convenience possible to developers. Absolute positioning is a standards-based function in web pages, so it should be fully supported in order to encourage more Windows-only designers to consider using WebForms as a method of data delivery. That means not only should there be grids and snap, but further group selection, object alignment and so on. Why go half way with the new designer, Mikhail? What you say works better is your opinion, not mine. To say that page elements end up hidden if the browser window is smaller than the elements is not an effective argument. A small window hides DIVs, tables and everything else, so that really has nothing to do with absolute vs. relative positioning. KAnonymous
March 08, 2007
The comment has been removedAnonymous
March 13, 2007
The comment has been removedAnonymous
March 13, 2007
The comment has been removedAnonymous
March 13, 2007
The comment has been removedAnonymous
March 14, 2007
Peter, I went to the site: http://weblogs.asp.net/cazzu/archive/2004/08/25/LosingComponents.aspx but the images do not display. Can you arrange for them to display so that I can clearly understand all your concerns? ThanksAnonymous
March 14, 2007
The comment has been removedAnonymous
March 15, 2007
The comment has been removedAnonymous
March 16, 2007
The comment has been removed