Visual Studio "Orcas" Web Designer Integrated into Main

This weekend was a really exciting one for the VS Web Tools team.  On Saturday they checked in their new HTML and ASP.NET WYSIWYG designer into Visual Studio.  This designer is a major, major improvement over previous HTML designers within Visual Studio, and will be a shared component used by both Visual Studio and Expression Web Designer going forward. 

Among other things, the new HTML designer provides:

  • Split View Support (the ability to have both HTML Source and WYSIWYG design open simultaneously)
  • Extremely rich CSS support (CSS property window, CSS inheritance viewer, CSS preview, and CSS manager)
  • Dramatically improved view switching performance (moving from source->html design mode is now nearly instantaneous)
  • Support for control designers within source view (property builders, event wire-up and wizards now work in source view)
  • Richer ruler and layout support (better yet, values can be automatically stored in external CSS files)
  • Designer support for nested master pages

Below is a screen-shot with a lot of the new features in action:

We actually began working on the new designer in November 2004 - almost a year before VS 2005 shipped (there was a lot of work todo!).  Mikhail Arkhipov was the dev manager who led and architected the work.  You can learn more about the project and see some initial screen-shots of the new designer in his blog post here.

I'm planning to record some videos over the next few weeks that show off the new HTML designer as well as other cool new "Orcas" features.  The next "Orcas" CTP will also contain the new designer (and a ton of other new features) to try out yourself.

Hope you enjoy it,

Scott

Published Monday, January 22, 2007 7:37 AM by ScottGu
Filed under: ,

Comments

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Monday, January 22, 2007 10:54 AM by Colin Ramsay

Presumably Microsoft is shipping an ultra-high resolution monitor with each copy of Orcas then? You have a *lot* of panels open in that screenshot!

Good improvements though. This will encourage people to use the HTML view in tandem with the designer so that they can be more aware of what code changes their actions are action making.

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Monday, January 22, 2007 10:59 AM by Stebet

Great news Scott. I can't wait to start using this new editor.

One thing i keep waiting for is proper multi-monitor support in Visual Studio though. That split view could work incredibly well with two monitors if it was supported. Source View of the page on one screen and WYSIWIG view on the other. Are you aware if any work regarding multi-monitor support has taken place with Visual Studio?

A man can dream.... :)

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Monday, January 22, 2007 11:03 AM by xtoff

thats a great news :)

I only wish for full IntelliSence support...

# Intellisense in databinding?

Monday, January 22, 2007 11:15 AM by onovotny

Does Orcas finally provide IntelliSense in the databinding expressions?

The two features that would greatly help databinding to Objects (linq objects or custom objects) in ASP.Net from a designer perspective are IntelliSense (no more of this generic Eval/Bind thing....lets have strong typing and being able to traverse an object model in a binding expression (which is easier with intellisense and strong typed items.

Essentially, rather than having to do ((MyType)Container.DataItem).MyProperty.SomethingElse  -- or a sub-datasource as ((Order)Container.DataItem).Details -- the items should already be strongly typed.  And with intellisense support, it's even easier.

--Oren

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Monday, January 22, 2007 11:17 AM by Alessandro

I suppose the new designer is sharing some code with the Expression Web Designer, am I right? I like very much EWD and having it integrated into VS would be great!

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Monday, January 22, 2007 12:12 PM by El Bruno

Hi Scott ... great news !!!

Any idea when this new editor will be available (for betatesters) in any CTP or Beta ??

Thanks in advance

Bye from Spain

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Monday, January 22, 2007 12:13 PM by Sahil Malik

This is incredible. I am especially happy to see an integration between expression & VS. Now it'd be nice if SharePoint Designer did the same, but hey.

So this isn't a part of the Jan CTP right? This'll be a part of the next Orcas CTP.

I am super excited that Orcas is finally beginning to take shape.

SM

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Monday, January 22, 2007 12:28 PM by rajbk

Scott,

This is great stuff but is there anything being done to improve build speeds of asp.net projects. I realize that both aspx and code behind are being built when using Web Site Projects in a "Full rebuild" scenario.

Still, VS 2005/7 should be smart enough to see files that have not been changed and try NOT to build them - if they have been built already. In addition, maybe, this should be extended to Web deployment projects too.

Yes, I have already read your tips on this ;-)

Thanks,

Raj

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Monday, January 22, 2007 12:58 PM by TropicalDude

I heard the other day a new update from a refactoring tool (don't remember the name) that mentions new asp.net css related refactoring simple but sounds useful, does Orcas will have CSS or asp.net related refactoring?

Thanks

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Monday, January 22, 2007 1:09 PM by Marcos

I'm with Stebet on the multi-monitor support. It would be great if the Code and Design windows could be split from their usual stacked above/below configuration. For instance, with the code on one monitor and the design on another.

And just better multi-monitor support overall. It seems most developers now use at least two monitors.

It's nice to see the Web Expression style stuff in Orcas. I had a look at Expression and was suitably impressed. I may even give up Topstyle one of these days.

Marcos

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Monday, January 22, 2007 1:32 PM by Todd Taylor

Once these improvements are available in a final release, I'm going to have problems coming-up with a reason to keep Dreamweaver around ;)

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Monday, January 22, 2007 2:37 PM by Jacob

Wow! Split-view is a great feature!  Adding the ability to detach either the HTML edit window or the designer window from the main window would be awesome for those in a mult-monitor environment!

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Monday, January 22, 2007 2:42 PM by Mike

I have a few questions:

1. I played with Expression Web today, and I was amazed (in a negative way) to see the JavaScript that it outputs for some 'dynamic' buttons. Also shocking was the use of comments in the source to add behavior to the designer. Please tell me we will not start seeing this in Visual Studio!

2. I have been using Firebug a lot, an add on for Firefox. It allows me to alter the source for a web page with a real time preview IN THE ACTUAL BROWSER. Nothing can beat that kind of preview right? So is that how the new designer works?

Thanks!

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Monday, January 22, 2007 3:16 PM by Speednet

WOW!!!!  I can't wait to get my hands on that split screen mode.

I agree with Ron, having Intellisense and XHTML validation support for properties implemented as child controls would fill in the last missing gap.

I recently stumbled into this when I posted about the issue in the asp.net Visual Studio forums.  (I had not run into this issue until recently.)

Currently the only way to get validation and Intellisense is to nest server controls instead of child control properties.  I would like to develop my controls and use child control properties ala GridView.

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Monday, January 22, 2007 4:10 PM by Colin Bowern

Congrats to the team on moving things forward with web design.

I would like to remind the team not to lose sight of the work being done on Sharepoint Designer, Expression Web, and even Windows Live Writer.  It would be a shame to see divergence on core bits such as the HTML editor and various tools that could be shared across the applications.  Did you know that Windows Live Writer doesn't emit proper XHTML?  It sounds crazy because we see so much advancement in web standards in other Microsoft tools (I know it's a free tool, but you're in the same eco-system where you should be able to access each others developments).  Keeping the core in sync will makes for great collaboration when your web designers and developers share similar (but different enough to be tailored to their needs) environments.

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Monday, January 22, 2007 4:18 PM by Michael

>>Designer support for nested master pages

Thank You.

Michael

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Monday, January 22, 2007 4:22 PM by Thacker

All of this sounds nice.  Not taking anything away from the people who invested their passion nor from Microsoft who has invested the resources, but these design views are easily accommodated using Firefox and a few plug-ins, both commercial and free, a good style sheet editor and running the in-development process via localhost while using other assorted browsers/user agents simultaneously to check performance and rendering.

The improved Intellisense functionality sounds tremendous.

I hope to hell that 1% of identical resources have been invested into Orcas to produce true compliant control adapters and not advertised "pseudo" compliant control adapters, either internal or add-on.  ASP.NET could be the best platform out there, now and years to come.  That means meeting the basics out of the shoot -- tab order, shortcut keys, captions, true device independence, etc., -- with the flexibility for the developer/designer to utilize and assign such based upon the demographics of the project, e.g., being able to assign tab index and access key values directly into the database or XML file for the datagrid and menu adapters.

When this animal comes out of the shoot again, I hope to hell that it is the big mean ass bull that it is being promoted as being and not some old Jersey cow with a new shiny bell around her neck.

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Monday, January 22, 2007 4:54 PM by .NET Junkie

There are two things I'd like Orcas to improve concerning working with Skin files. First I’d like to have IntelliSense in skin files and second the possibility to have code blocks like with aspx files with data binding. Something like: <%# Eval("Name").ToString().Replace("red", "green") %>.

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Monday, January 22, 2007 5:32 PM by Ryan Ternier

Scott,

Thanks for another great post! I'm excited for this next phase of visual studio's evolution.

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Monday, January 22, 2007 6:35 PM by Rick Strahl

Awesome! Same engine as Expression right so it's not based on MSHTML and thus works faster? I've been using Expression for a while now and love it, except for it's lack of decent ASP.NET support.

How about the JavaScript tools in the Orcas build?

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Monday, January 22, 2007 6:41 PM by MarkC

I am glad you guys are working on a better CSS-oriented editor but I have to agree with earlier comments that this looks really cluttered and very unintuitive.

I use the Firebug extension to Firefox for all my editing now. It's ability to view the inheritance tree and tweak CSS settings in real time are better than anything else I have seen.  I would love to see something like that in VS.

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Monday, January 22, 2007 8:22 PM by Johannes Hansen

Hi Scott... That sounds awesome! Can't wait for you guys to release orcas! Hurry up! :)

Btw, are there any features "missing" in the new designer? I don't have any specific feature in mind, but is the new designer missing any features compared to the old one?

Keep up your awesome work!

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Monday, January 22, 2007 10:12 PM by Marco Napoli

Will AJAX be built in into Orcas?

Thanks

Peace in Christ

Marco Napoli

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Monday, January 22, 2007 11:00 PM by Brennan Stehling

Now that is just mean. ;) It is so hard to wait for features like this.

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Tuesday, January 23, 2007 1:48 AM by Nilesh

hi Scott,

The changes in the desiner has been very good as compared to earlier releases of  VS 2003. But there was a minor issue.While using the web site administration tool for editing web.config files the intellisence used to get disabled due to namespace addition. Has this problem been taken care off in this new realease?

Regards,

Nilesh

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Tuesday, January 23, 2007 8:35 AM by Steve

This is all good - I really didn't want to depend upon Expression to do my programming work after spending the $$$ on VS

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Tuesday, January 23, 2007 8:36 AM by Sam Stange

It makes we wonder what you are working on right now, since you started this work in 2004!

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Tuesday, January 23, 2007 8:51 AM by sdlg

orcas is the visual studio that I've sought after for years now!  having started with dreamweaver I hated the lack of real design support in VS...

but it's 2007 and designer support is becoming more prevalent in your products.  YIPEE!

I'm glad that the orcas team has added elements that dreamweaver has had for about a decade.  Good stuff, keep it up.

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Tuesday, January 23, 2007 12:49 PM by kyle paul

Im loving these improvements to the html editor and wysiwyg designer. They are definitely some of the worst pieces of VS. Cant wait for the release. Cheers

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Tuesday, January 23, 2007 1:48 PM by Ryan

To get a jump on the interface, a new site just popped up called LearnExpression.com.  It's from the same group that built LearnVisualStudio.Net.

I do agree with the earlier posting about multiple monitor support.  Even Bill has 3 monitors on his desk!

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Tuesday, January 23, 2007 2:52 PM by Mani

Visual Studio Visual Web Designer and HTML Editor has been the worst pieces of  VS, I am happy to hear this big improvement and I can't wait to see that in action.

thanks.

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Wednesday, January 24, 2007 2:26 AM by Jeremy Suriel

I'm really happy to hear that this will integrate into VS.  I'm not too crazy about the existing web designer.  And since I have yet to catch up on Expressions but feel right at home in VS2005, makes things that much easier...

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Wednesday, January 24, 2007 2:18 PM by Mikael Söderström

Will there be a WPF/E designer in Visual Studio "Orcas"?

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Thursday, January 25, 2007 4:01 AM by ScottGu

Hi Uwe,

We typically use "Camtasia" to record videos.  I've found it pretty easy to use and it seems to work really well.

Hope this helps,

Scott

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Friday, January 26, 2007 9:11 AM by Matt

I'm surprised you don't use Windows Media Encoder to record your screen captures.

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Friday, January 26, 2007 9:46 AM by Nathanael Jones

Will the new designer resolve "~/css/1.css" paths correctly? Expression Web wouldn't recognize external css or script files that used tilde notation. Images worked as long as <asp:Image was used (I think..), although paths in html elements with runat=server set failed.

For the present (with VS2005), how can I reference an external CSS file without breaking design-time support? URL rewriting requires that ~/ paths are used.

I am using Themes whenever possible to make this a non-issue, but there are places where it is necessary. Also, for some reason, design-time support breaks if I use 'Theme=' instead of 'Stylesheet=".

Thanks,

Nathanael Jones

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Tuesday, January 30, 2007 11:49 AM by Josh Stodola

Two monitors side by side?  What a headache.  Try a slick 22" widescreen LCD - works like a dream for me.

# Who can help me with .httpaccess ?

Tuesday, February 6, 2007 4:24 AM by JackyMooll

Who can help me with .httpaccess ?

where i can fined full information about .httpaccess file syntaxis?

# re: Visual Studio "Orcas" Web Designer Integrated into Main

Tuesday, March 6, 2007 3:40 AM by Shakil Ahmed

Good to see new Imporovment of IDE.Great people Great work.