How to Build a Web Form for a One-Page Web Application - How to use flow layout

By default, you develop web forms in flow layout. When you use flow layout, the text and controls you add to a form are positioned from left to right and from top to bottom. Because of that, the position of the controls can change when the form is displayed depending on the size of the browser window and the resolution of the display.

To understand how flow layout works, figure 2-6 shows the beginning of a version of the Future Value form that doesn’t use a table to align its text and controls. To create this form, I started by typing the text for the heading directly into the form. Then, I pressed the Enter key twice to add space between the heading and the text and controls that follow it. Next, I typed the text that identifies the first control, I pressed the space bar twice to add some space after the text, and I added a drop-down list. When I added the drop-down list, it was placed immediately to the right of the text and spaces. I used similar techniques to enter the remaining text and text box.

Finally, I formatted the heading at the top of the form. To do that, I selected the text and then used the controls in the Formatting toolbar to change the font size to “x-large”, to make the heading bold, and to change its color to blue.

You can see the result in the aspx code in this figure. Notice that the special code   was inserted for each space between the text and the controls that follow. In addition, a Br element is inserted for each line break. To apply the formatting to the heading, a Span element is used with a Class attribute that names a style class. Although you can’t see it here, this style class is defined within the Head element for the page, and it specifies the font size, color, and weight.

The beginning of the Future Value form created using flow layout

The aspx code for the Future Value form

  <form id="form1" runat="server">
  <div>
      <span class="style1">401K Future Value Calculator</span><br />
      <br />
      Monthly investment&nbsp;&nbsp;
      <asp:DropDownList ID="DropDownList1" runat="server">
      </asp:DropDownList>
      <br />
      Annual interest rate&nbsp;&nbsp;
      <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
  </div>
  </form>

How to use flow layout

1. When you add controls to a form in flow layout, they will appear one after the other, from left to right and from top to bottom. Flow layout is the default for web forms in Visual Studio 2008.
   
2. To make it easier to work with a form in Design view, Visual Studio 2008 places a border around the area defined by the Div tags. 
    
3. To insert a space after a control, use the space bar. The special code &nbsp; is inserted into the aspx file. 
    
4. To insert a line break after a control, press Enter. A <br /> tag is inserted into the aspx file. 
    
5. To insert literal text, type it directly into the designer window. Then, you can use the controls in the Formatting toolbar and the commands in the Format menu to change the font or font size; apply bold, italics, or underlining; or apply foreground or background color. 
    
6. When you apply formatting to literal text, Visual Studio creates a style class and applies that class to the text. Then, you can apply the same class to other literal text. See chapter 5 for more information. 
    
7. To align text and controls when you use flow layout, you normally use tables as described in the next figure.

--------------------------------------------Figure 2-6   How to use flow layout

Next: How to add a table to a form >>
 

More ASP.NET Articles
More By Murach Publishing

Comments On: How to Build a Web Form for a One-Page Web Application

>>> Be the FIRST to comment on this article!

Buy this book...

This article is an excerpt from chapter two of Murach's ASP.NET 3.5 Web Programming with VB 2008, written by Anne Boehm (Murach, 2008; ISBN: 1890774472). Check it out today at your favorite bookstore. Buy this book now.