Developer

Choose your layout weapon in .NET

Learn about the two layout managers in Visual Studio .NET 2003, FlowLayout and GridLayout, and how you can assign them to a page.

Page layout is a constant sore spot between programmers and graphic designers. The separation of content with the usage of cascading style sheets (CSS) helps page layout, but browser support is slow to react. Most application developers worry more about application performance, coding, and so on, rather than about page layout, and they don't see the merits of CSS. Microsoft seems to recognize this by providing layout options for ASP.NET pages in its Visual Studio .NET IDE.

Layout manager

If you work with Java, you're probably familiar with its AWT library's many layout managers. Visual Studio's layout options are analogous to these layout managers. Visual Studio .NET 2003 provides two such layout managers:

  • FlowLayout: Items are arranged on the page in the order the developer adds them; that is, their position is side by side as the developer adds them. The developer may not drag the components to other places on the page; there's no control over placement. This is the standard behavior of a Web page, and many developers may find it comforting. Developers often use HTML tables to control layout.
  • GridLayout: Items are placed on the page at the exact location where it is added by the developer. Developers utilize CSS to pinpoint the page location, giving the developer full control over layout/appearance.

A layout is assigned to a page via its properties.

Choosing a layout

The properties of an ASP.NET Web form allow the developer to designate the layout. The default is GridLayout, but you can easily change this. Note: The Visual Studio .NET IDE allows the grid to turn on or off (displayed) via the property window as well (when GridLayout is utilized).

Let's take a look at a page format using the two layouts. Our first page uses the default GridLayout behavior to place Label, TextBox, and Button controls on the form. The developer arranges the components (using the mouse) as they're dropped on the page workspace. The resulting page HTML appears next:

<%@ Page language="c#" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML><HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body ms_positioning="GridLayout">
<form id="Form1" method="post" runat="server">
<asp:Label id="Label1" runat="server"
Width="64px"
style="Z-INDEX: 101; LEFT: 128px; POSITION: absolute; TOP: 152px"
Font-Bold="True">Test:</asp:Label>
<asp:TextBox id="TextBox1"
style="Z-INDEX: 102; LEFT: 200px; POSITION: absolute; TOP: 152px"
runat="server"></asp:TextBox>
<asp:Button id="Button1"
style="Z-INDEX: 103; LEFT: 168px; POSITION: absolute; TOP: 200px"
runat="server"
Width="128px" Text="Click Me!"></asp:Button>
</form></body></HTML>

The first noticeable aspect is the inclusion of the ms_positioning attribute in the opening HTML body element; it's assigned the value of GridLayout. At this moment, this attribute is used only for pages using the GridLayout, but it's open for future use (it's available with the HTML div element as well).

Also, notice the HTML includes style attributes (CSS) for each page element, which signals where they're to appear on the page. The GridLayout treats the page like a grid of horizontal and vertical lines, and the intersecting points are used to place controls on the page via CSS. This places strict control in the developer's hands, but the layout details (CSS) are maintained by the Visual Studio .NET IDE. The other choice puts the onus on the developer.

The following is the same page, yet rendered with the FlowLayout model:

<%@ Page language="c#" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML><HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD><body>
<form id="Form1" method="post" runat="server">
<asp:Label id="Label1" runat="server" Width="64px" Font-Bold="True">Test:</asp:Label>
<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>
<asp:Button id="Button1" runat="server" Width="128px" Text="Click Me!"></asp:Button>
</form></body></HTML>

The first thing you notice is the absence of a layout qualifier within the opening body element in the HTML source. The FlowLayout model uses the standard HTML layout, so it isn't necessary. The three controls appear on the page in the order the developer places them. The resulting page isn't attractive, as the controls appear side by side. A novice developer may choose to control the layout via the old method of HTML tables but may still use CSS. A developer can apply a CSS style sheet to the page, so the developer may control formatting and layout; however, this requires more work.

The GridLayout is the default, but you may need to change this on a per-project basis via the project's properties. The properties window contains a Designer Defaults setting, and it allows you to designate the default layout mode for pages created within that project. The available options are Grid and Flow.

Which one is better?

When you're making your layout choice, the obvious distinction is control. The FlowLayout model allows you to control page appearance, but GridLayout hands this to the IDE when placing items on a page. You may directly edit the HTML generated by Visual Studio .NET, but this can be time-consuming.

One note of caution is abstaining from switching from one layout model to another in the middle of development. The results can be unpredictable and sometimes disastrous. I had a project with a document formatted using a custom-developed CSS. The form was erroneously changed from FlowLayout to GridLayout, and errant characters began to appear within the page's HTML source. The IDE's CSS generator conflicted with the previously used custom sheet. The behavior can be difficult to reproduce, so please use caution in the process.

TechRepublic's free .NET newsletter, delivered each Wednesday, contains useful tips and coding examples on topics such as Web services, ASP.NET, ADO.NET, and Visual Studio .NET. Automatically sign up today!

About Tony Patton

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

Editor's Picks

Free Newsletters, In your Inbox