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!