ToolKit
LANGUAGES: ALL
ASP.NET VERSIONS: 2.0
Visual Studio 2005 ASP.NET Design View
Explore Some New (and Some Not So New) Design View Features
By Ken McNamee
In the interest of full disclosure, I must admit that I ve never used the Visual Studio ASP.NET Web page Design view if I absolutely, positively, did not need to. I coded everything in source view and saved frequently because if I accidentally hit Design view, Visual Studio.NET might helpfully reformat all my HTML into something completely unreadable. Hate is a strong word, but probably not strong enough when it comes to my feelings about Design view in Visual Studio.NET ... that is, until now.
With Visual Studio 2005, I am finally truly discovering the usefulness and RAD capabilities that a well done HTML page designer can provide.
Smart Tags
If you ve been using the Web page Design view in previous Visual Studio versions, then you ll certainly be comfortable with the Visual Studio 2005 version. Microsoft has carried forward all the features of the prior version, cleaned up the interface, fixed a few annoyances, and added a number of new features.
Probably the most obvious new feature in Design view is the addition of control smart tags, which are a kind of context-sensitive dialog box that provide quick and easy access to properties and designer actions that are most commonly used for that control. Logically, each type of control has its own distinctive smart tag; you can see the smart tag for the menu control in Figure 1. The first item on this smart tag is the Auto Format option, which you can find on many controls that render a user interface. Auto Format pops up a dialog box that allows the developer to choose from a list of themes for that control. It s an especially useful feature if you want to give the control a clean and professional look without being bothered to come up with a design yourself.
Figure 1: The Visual Studio 2005
Design view has added smart tags to controls to provide quick and easy access
to common control-specific tasks. In this example, the smart tag provides
access to the data source property and menu item management dialog box.
The Choose Data Source command allows you to link the control to an existing XmlDataSource or SiteMapDataSource control on the page. Optionally, you can also have the command create a new data source for you. This command is not specific to the Menu control but can be found on all controls that have a DataSourceID property. Depending on the control, you may be able to link it to a SqlDataSource, AccessDataSource, or ObjectDataSource, as well. The new GridView is an example of a control that is most flexible to different types of data sources.
Another option to note here is the Edit Items command, which pops up the Menu Item Editor displayed in Figure 1 and is used to create a static list of menu items. Many controls have similar commands that allow you to statically set up the data for the control if the data is not being dynamically derived from a data source.
Finally, Edit Templates is also a common item you will see on smart tags, but like Choose Data Source it can behave differently depending on the control. Usually, this designer action allows you to add some text or formatting that will be used for each item in the list.
I should say that all of these designer actions are also available via the right-click menu, as well as in the Properties window. However, the smart tag provides a uniquely productive interface that just seems more natural to work with.
Returning Features
One feature I do use frequently in the Visual Studio.NET 2003 Design view is the Style Builder, which you can see in Figure 2. The Style Builder is a dialog box that allows you to build and customize the CSS style for an HTML element using just about any style attribute you can think of and probably several that you never knew existed. Personally, I can never seem to remember the spelling and values of some of those style attributes, so this feature is a real time saver for me. Let s see, is it border-bottom or bottom-border ; is it visibility: hidden or visibility: false ? You get the idea.
Figure 2: The Style Builder dialog
box allows you to build and customize the CSS style for most HTML elements
using just about any style attribute you can think of and probably several
that you never knew existed.
The Document Outline dockable window, shown in Figure 3, is a feature that I also find to be highly useful, especially when I have many nested controls which is something that occurs pretty much all the time. Its basic function is simply to give you a quick overview of the structure of your page, but clicking on an item in the outline will helpfully select it on the design surface or in the source view.
Figure 3: The Document Outline
window is great for giving you an overview of the hierarchical structure or the
HTML elements and controls in your page. It is especially useful when you have
many deeply nested controls.
In addition to the Document Outline, Visual Studio 2005 provides another way to navigate through the structure of your page. In Figure 1, just to the right of the Design and Source buttons at the bottom of the IDE, is a breadcrumbs type of interface that allows you to see which HTML element or control currently has focus, as well as all of its parent elements all the way up to the root tag. You can also click on the tag in that interface or the dropdown box next to it to get other options. Unlike the Document Outline, this feature is new in Visual Studio 2005.
Conclusion
The Design view is just one example of how Visual Studio 2005 is far superior to its predecessors. I can now construct a Web page like I would a Windows Form. I can drag and drop controls onto the Design surface from the Toolbox, move controls around, resize them, and then switch to Source view and see that it hasn t created a bunch of jumbled, inefficient HTML that will take me half an hour to reformat and optimize.
Finally, the Web page Designer feels right to this stubborn source coder.
Ken McNamee is a Senior Software Developer with Vertigo Software, Inc., a leading provider of software development and consulting services on the Microsoft platform. Prior to this, he led a team of developers in re-architecting the Home Shopping Network s e-commerce site, http://www.HSN.com, to 100% ASP.NET with C#. Readers can contact him at [email protected].
