Practical
Learning: Introducing Web Design
The form by itself means nothing. It is made useful
by populating it with objects named web controls, or simply, controls.
There are many of them, used for different reasons. Web design partly
consists of deciding what web control(s) to add to a form. This is based
on the job requirements.
You can programmatically add a control using code or
visually add it using an application. To programmatically add a control,
type its tag between the opening <form> and the closing
</form> tags.
To visually add a control, you use the Toolbox.
A web control is a graphical object that allows the user to interact with a web
page. Because there are many controls for various purposes, their
insertion to an application and their configuration are left to the computer programmer.
The Toolbox is the accessory that provides most of the controls used in an
application. The regular controls recognized by HTML are listed in a section
labeled HTML:
The controls used on an ASP.NET application are listed in a section labeled
Standard:
By default, the Toolbox is positioned on the left side of the IDE. To change
that position, you can drag its title bar away and dock it to another side of
the IDE. The Toolbox also uses a default width to show the items on it. If the
width is too small or too large for you, you can change it. To do this, position
the mouse to its right border and drag left or right.
When Microsoft Visual Web Developer 2008 Express
Edition is installed, it adds the
buttons in a somewhat random order. In the beginning, this can make it difficult to find a
particular control when you need it. If you find it more convenient, you
can arrange the list of controls in any order of your choice. You have two
main options:
In order to make a web control available to your
visitors, you must add it to your web page. To add a control to your
application:
If you want to add a certain control many many
times,
before selecting it on the Toolbox, press and hold Ctrl. Then
click it in
the Toolbox. This permanently selects the control. Every time you
draw on the form, the control would be added. Once you have added the
desired
number of this control, on the Toolbox, click the Pointer button
to
dismiss the control.
You can create HTML, Active Server
Pages, or ASP.NET applications. If you create an HTML-only application, you may
not need web controls because HTML can only create them but cannot process them.
To process web controls, you would need to include a script to your application. Even
then, you must use a web server to handle the interaction with your visitors.
If you create an Active Server Pages application and you add
ASP pages to it, you can (should) use the controls of the HTML section of the
Toolbox. The HTML controls are defined in the System.Web.UI.HtmlControls
namespace of the System.Web.dll assembly. To programmatically add an HTML
control, create its HTML tag in the <form></form> section. Here are
examples:
<%@ Page Language="VB" %>
<html>
<head>
<style>
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
color: #000000;
font-size: 10pt;
background-color: #FFFFFF }
hr { color=#000080 }
.toptitle {
color: #000080;
font-family: 'Times New Roman', Garamond, Georgia, Serif;
text-align: center;
font-size: 24pt;
font-weight: bold;
text-decoration: none }
.housetitle {
color: #0000FF;
font-family: Georgia, Times New Roman, Courier New;
font-size: 16pt;
font-weight: bold;
text-decoration: none }
.names {
font-family: Verdana;
font-size: 10pt }
</style>
<title>Grier Summer Camp</title>
</head>
<body>
<p class='toptitle'>Grier Summer Camp</p>
<p class='housetitle'>Registration</p>
<p>Please use this form to register.</p>
<form>
<table border="0" width="320">
<tr>
<td width="100" class="names">First Name:</td>
<td><input type="text" name="txtFirstName" size="10"></td>
</tr>
<tr>
<td width="100" class="names">Last Name:</td>
<td><input type="text" name="txtLastName" size="10"></td>
</tr>
<tr>
<td width="100" valign="top" class="names">Full Name:</td>
<td><input type="text"
name="txtFullName"
size="21">
<input type="submit" value="Submit it">
</td>
</tr>
</table>
</form>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<hr color="#FF0000">
</td>
</tr>
<tr>
<td width="100%"
align="center"
style="font-family: Verdana; font-size: 10pt">
Copyright © 2009 Grier Summer Camp
</td>
</tr>
</table>
</body>
</html>
This would produce:
Notice that the form on this page is equipped with a
button. This also indicates that the user is supposed to provide some
information and click this button.
If you create an ASP.NET Application, you can (should) use
the controls in the Standard section of the Toolbox. The controls
you will use in your ASP.NET applications are defined in the System.Web.UI.WebControls
namespace of the System.Web.dll assembly.
To programmatically add a control, start a tag with
<asp:
This is followed by the name of the object. For example, to create a button, you would
start the tag with
<asp:Button>
Of course, the tag must be closed
as it is traditionally done in HTML:
<asp:Button></asp:Button>.
A control you add to your web page would be configured to
help the user interact with your web site. For example, you may want a visitor
to place an order on a web page, submit a credit card number, and get a receipt.
To process this type of transaction, you would have to validate some values at
various levels. Some processing can be done on the computer that the visitor is
using. This computer is referred to as a client. Some other processing can/must be
performed only after the user has submitted some values. This type of processing
is done at the server.
After adding an ASP.NET control to a web page, you must specify where
its value(s) would be processed. This is done by using the Runat
attribute. It can have one of two values: client or server. Here
is an example:
<asp:Button Runat="server"></asp:Button>
When the user clicks the final button (the button
used to collect information from the form and send it), it is
assumed that the information on the form is sent to you (actually to the
server, but you are in charge of it). HTML allows you to specify how this
information would be sent. To support this, the <form> tag
is equipped with an attribute named method. This attribute can be
assigned one of two values: get or post.
In the <form> tag, you can add the method
attribute and assign the get (or GET, this is
not case-sensitive) value to it. Here is an example:
<form method="get">
<table border="0" width="320">
<tr>
<td width="100" class="names">First Name:</td>
<td><input type="text" name="txtFirstName" size="10"></td>
</tr>
<tr>
<td width="100" class="names">Last Name:</td>
<td><input type="text" name="txtLastName" size="10"></td>
</tr>
<tr>
<td width="100" valign="top" class="names">Full Name:</td>
<td><input type="text"
name="txtFullName"
size="21">
<input type="submit" value="Submit it">
</td>
</tr>
</table>
</form>
If you do this, the information that is being sent would
display in the address bar, starting with a question mark. Here is an
example:
 
Notice that, in the address bar, after the address
of the web page, there is a question mark, followed by the name of each
control and that name is assigned the value that was given.
If you use GET as the method to send data, the information
being carried should not exceed 2048 characters (if we consider that each
character uses a byte).
An alternative is to assign post (or POST) to the
method
attribute. This would be done as follows:
<form method="post">
<table border="0" width="320">
<tr>
<td width="100" class="names">First Name:</td>
<td><input type="text" name="txtFirstName" size="10"></td>
</tr>
<tr>
<td width="100" class="names">Last Name:</td>
<td><input type="text" name="txtLastName" size="10"></td>
</tr>
<tr>
<td width="100" valign="top" class="names">Full Name:</td>
<td><input type="text"
name="txtFullName"
size="21">
<input type="submit" value="Submit it">
</td>
</tr>
</table>
</form>
In this case, the information is sent directly to the
server through a protocol (in this case, HTTP) and would not
appear in the address bar of the browser.
If you use POST as the method to send data, the information
being carried can be as large as the user/visitor's computer memory
(RAM) can afford.
Once the information from a form reaches the server,
it must be processed. In other words, you must specify how this
information would be dealt with. This is usually done by specifying the file
that includes the code used to process the information that was sent. A regular file in this
case would have the .aspx extension. In reality, this does not have to be a
separate file: you can use the same web page that collects information
from the user, include the code used to process that information, and let
the page deal with its own code.
To specify the file used to process information from a
form, the <form> tag is equipped with an attribute called action.
You can assign the name of the file to this attribute, as a string. This
can be done as follows:
<form method="post" action="index.aspx">
<table border="0" width="320">
<tr>
<td width="100" class="names">First Name:</td>
<td><input type="text" name="txtFirstName" size="10"></td>
</tr>
<tr>
<td width="100" class="names">Last Name:</td>
<td><input type="text" name="txtLastName" size="10"></td>
</tr>
<tr>
<td width="100" valign="top" class="names">Full Name:</td>
<td><input type="text"
name="txtFullName"
size="21">
<input type="submit" value="Submit it">
</td>
</tr>
</table>
</form>
As with all HTML attributes, the position of ACTION
is not important. That is, it can be positioned before or after another
attribute. Here is an example:
<%@ Page Language="VB" %>
<html>
<head>
<style>
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
color: #000000;
font-size: 10pt;
background-color: #FFFFFF }
hr { color=#000080 }
.toptitle {
color: #000080;
font-family: 'Times New Roman', Garamond, Georgia, Serif;
text-align: center;
font-size: 24pt;
font-weight: bold;
text-decoration: none }
.housetitle {
color: #0000FF;
font-family: Georgia, Times New Roman, Courier New;
font-size: 16pt;
font-weight: bold;
text-decoration: none }
.names {
font-family: Verdana;
font-size: 10pt }
</style>
<title>Grier Summer Camp</title>
</head>
<body>
<p class='toptitle'>Grier Summer Camp</p>
<p class='housetitle'>Registration</p>
<p>Please use this form to register.</p>
<form action="index.aspx" method="post">
<table border="0" width="320">
<tr>
<td width="100" class="names">First Name:</td>
<td><input type="text" name="txtFirstName" size="10"></td>
</tr>
<tr>
<td width="100" class="names">Last Name:</td>
<td><input type="text" name="txtLastName" size="10"></td>
</tr>
<tr>
<td width="100" valign="top" class="names">Full Name:</td>
<td><input type="text"
name="txtFullName"
size="21">
<input type="submit" value="Submit it">
</td>
</tr>
</table>
</form>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<hr color="#FF0000">
</td>
</tr>
<tr>
<td width="100%"
align="center"
style="font-family: Verdana; font-size: 10pt">
Copyright © 2009 Grier Summer Camp
</td>
</tr>
</table>
</body>
</html>
When writing code for your web pages that contain web controls, you always need
a way to identify each control so you can refer to it. To support this, in HTML,
every tag used to create a control has an attribute named id. To
identify a control, assign a string to this attribute. Here are examples:
<form>
<table border="0" width="320">
<tr>
<td width="100" class="names">First Name:</td>
<td><input id="txtFirstName"></td>
</tr>
<tr>
<td width="100" class="names">Last Name:</td>
<td><input id="txtLastName"></td>
</tr>
<tr>
<td width="100" valign="top" class="names">Full Name:</td>
<td><input id="txtFullName"></td>
</tr>
</table>
</form>
For an ASP.NET control, this can be done as follows:
<asp:Button id="button" Runat="server"></asp:Button>
If you add a control from the HTML or the Web Forms section
of the Toolbox, it would automatically receive a default identifier. To change
it, select the control on the form. In the Properties window, click (ID)
and type the desired identifier.
Some controls are text-based. That is, they are meant to display or
sometimes request text from the user. For such controls, this text is
referred to as caption while it is simply called text for some others.
This property is not available for all controls.
If a control displays text, then it has a Text property in the Properties window. After adding such a control to a form, its
Text field may hold a string, such as its HTML name; that's the case for
a Button. At design time, to change the text of the control, click its Text field
in the Properties window and type the desired value. For most controls, there are no strict rules to follow for this text.
To specify the text of a control in your code, assign the
desired string to the text attribute of the control's tag. Here are examples:
<form>
<table border="0" width="320">
<tr>
<td width="100" class="names">First Name:</td>
<td><input type="text" id="txtFirstName"></td>
</tr>
<tr>
<td width="100" class="names">Last Name:</td>
<td><input type="text" id="txtLastName"></td>
</tr>
<tr>
<td width="100" valign="top" class="names">Full Name:</td>
<td><input type="text" id="txtFullName"></td>
</tr>
</table>
</form>
For an ASP.NET control, this can be done as follows:
<asp:Button id="btnSend" text="Send Now" Runat="server"></asp:Button>
Everything you know about
Cascading Style Sheet (CSS) formatting can be applied
to web controls. In fact, ASP.NET heavily depends on it to control the positions
of its web controls.
As seen in Lesson 4, there are three main ways CSS is used in a web page. To apply
it on a control, you create a style attribute in the HTML tag and assign
the necessary values to it. It would start as follows:
<asp:Button id="btnSend" text="Send Now" style="" Runat="server"></asp:Button>
This can be referred to as inline formatting because it affects only the tag in which
the style is created. If you use this technique, each (HTML or ASP.NET) tag must
have its own style.
What goes inside of the double-quotes of the style attribute depends on what
formatting you want to apply. If you are manually creating your web page, you
can then specify the necessary style. If you are using Microsoft Visual Web
Developer 2008 Express Edition
and creating a form, every time you add a web control to your form, the
control automatically receives a style attribute with the primary values that
the studio judged necessary. To change some of the styles of the control, after
clicking it on the form, you can change their values in the Properties window.
The Properties window doesn't display all possible styles that can be applied to
a given web control. If a certain style is not available, you can open the HTML
code of the form and type the desired style in the style attribute. You must
respect the rules of Cascading Style Sheet when adding a style.
The second technique used to apply Cascading Style Sheet to your web page
consists of creating the necessary styles in the <head> tag of the
HTML file.
This can be referred to as file level style because the style created in the
head section affects or can be applied to any tag of the page. If you use this
technique, each (HTML or ASP.NET) tag that is tied to the HTML tag defined, such
as <body> in this case would be affected.
As you probably know already, Cascading Style Sheet
also supports a type of pseudo-object-oriented-programming where you
create classes and define their characteristics using existing CSS
keywords.
The third technique used to integrate CSS in your web
page consists of creating a separate CSS file and referencing it in your
(HTML, ASP, or ASP.NET) web page.
If you are using Microsoft Visual Web Developer 2008
Express Edition to create
your ASP.NET application, it provides its own and very useful editor,
referred to as the Code Editor. To display the code editor, after creating
a new ASP.NET Application, in the bottom section of the window, you can click
the Source button. This would display the HTML code that holds
the regular HTML tags associated with the form.
An ASP.NET file
is primarily a normal text file with an .aspx extension. Therefore,
when you create an ASP.NET Application, Microsoft Visual Web Developer 2008
Express Edition creates a form whose file has the .aspx extension. This is one of the
files you would customize in accordance with you particular type of
application.
The Code Editor is divided in four sections.
The top section of the Code Editor displays the tabs of
the web pages. Each tab represents a file that contains code. To add a
new file to the project, on the main menu, you can click File -> New
File or the
Website menu item and select an option. If you use the
File -> New File... menu item to create a new file, you can add it
to any project of your choice, including the current one. To do this, you
would have to save the file and select a folder. If you create the file
using the Website menu group, you would be prompted to enter a name for
it. You can also open a file that belongs to another project or even
doesn't belong to another project at all.
Once a file is opened, the Code Editor displays its
tab using the file's name and its extension. As implied in the previous
description, you could be working on files that belong to different
projects and the label that the tab displays doesn't indicate whose
project or folder the file belongs to. To know the folder in which the
file was created, you can position the mouse on its tab. A tool tip would
displays the path of the file:
To access
one of the files currently opened, you can click its corresponding tab. By default, the
tabs display in the order their files were created, added to the
project, or opened, from left to right. If you do not like that arrangement, click and
drag a tab either left or right beyond the next tab.
The top-left section of the Code Editor displays a
combo box named Object. As its name indicates, the Object combo box holds a
list of the objects (classes and structures) that are used in the current
project. You can display the list if you click the arrow of the combo box:
To select an item from the list, you can click it.
The top-right section of the Code Editor displays a
combo box named Event as its tool tip displays:
The content of the Events combo box depends on the item that
is currently selected in the object combo box. This means that, before
accessing the members of a particular object, you must first select that
object in the Object combo box. Then, when you click the arrow of the
Event combo box, the members of only that object display. If you select an
item in the Event combo box, the
Code Editor jumps to its code and positions the caret there.
To manage its contents, the Code Editor uses some techniques to
display its code. Colors are used to differentiate categories of words or lines
of text. The colors used are highly customizable. To change the
colors, on the main menu, you can click Tools -> Options... In the Options
dialog box, you can click Fonts and Colors. To set the color
of a category, in the Display
Items section, click the category. In the Item Foreground combo box, select the
desired color. If you want the words of the category to have a colored
background, click the arrow of the Item Background combo box and select one:
In both cases, the combo boxes display a fixed list of
colors. If you want more colors, you can click a Custom button to display the
Color dialog box that allows you to "create" a color.
When using a form, there is a bar under the form and
it displays two buttons: Design and Source. The Design button allows you to
display the design view of a form. With this view, you can visually add
HTML and/or web controls to a form.
The Source button allows you to access code related to
the form and its contents. You can use this view to write new code or to
maintain existing sections. If you programmatically add a control, when
you click the Design button, it would show on the form.
Application programming primarily consists of populating a
web form with objects called web controls. These controls are what the
users of your pages use to interact with the computer. As the application
developer, one of your jobs will consist of selecting the necessary objects, adding
them to your page, and then configuring their behavior.
If a control is displaying on the screen and you are designing it, this is referred to as
Design Time. This means that you have the ability to manipulate the control. You can
visually set the control’s appearance, its location, its size, and other necessary or
available characteristics. The design view is usually the most used and the easiest because
you can glance at a control, have a realistic display of the control and configure its
properties. The visual design is the technique that allows you to visually add a control
and manipulate its display. This is the most common, the most regularly used, and the
easiest technique. The other technique you will be using to control a window is with code,
writing the program. This is done by typing commands or instructions using the keyboard.
This is considered, or referred to, as Run Time.
A web form can be made of various web objects
that allow a user or visitor to submit values to a server. While
interacting with a web page, a user can click a button, type in a
control or select a value from a list. These and many other actions
cause the web control to create messages and thus fire events.
Because there are different types of messages that a control can
send and various controls can send the same or different messages,
each control must be able to "decide" when to send a
message and specify what that message.
Although there are different means of
implementing an event, there are two main ways you can initiate its
code. If the control has a default event and if you double-click it,
the studio would initiate the default event and open the Code
Editor. The cursor would be positioned in the body of the event,
ready to receive your instructions. Alternatively, while displaying
a form, you can click the HTML button. In the Object combo box,
select an object. In the Event combo box, select the desired event.
In the previous lesson, we saw that you could integrate
JavaScript code your web page. This code runs on the user's computer while
interacting with your web page. For example, if a user is filling out a form on
your web page, before that form can be sent to your server, you can validate it
and assist the user in filling it out to make sure it is right before submitting
it.
To take local action in response to the user performing a
task, such as clicking a button or navigating among the web controls on your
page, you can use the OnClientClick property. For example, you can assign
a call to the alert() function of the JavaScript language. Here is an
exemple:
<asp:Button
ID="btnShowIt"
runat="server"
OnClientClick="javascript:window:alert('Your time sheet has been received');"
Text="Received"></asp:Button>
The alert() function is used to create a message that
displays only an OK button and you don't expect a particular feedback from the
user. If you want the user to make a decision, you can call the confirm()
method of the window object of JavaScript. Here is an example:
<asp:Button ID="btnMsgBox"
runat="server"
OnClientClick="return confirm('Are you OK?');"
Text="Message Box" />
A call to confirm() displays a message box equipped
with a message, an icon, a Yes, and a No buttons.
|
Introduction to Web Forms and Web Controls
Subscribe to:
Post Comments (Atom)
Related Scripting
No comments:
Post a Comment