Building the Behavioral Layer of an SMTP Client with Prototype - Listing the presentation and structural modules of the SMTP client
(Page 2 of 4 )
A natural step before I proceed to defining the JavaScript functions that comprise the behavior layer of this SMTP client consists of listing the complete client-side code of the application as it appeared in the first part of the series.
As usual, the purpose of doing this is to refresh your memory of the signatures of the different application modules developed so far. Here is how they looked originally:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Prototype-based SMTP Client</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 24px Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
}
p{
font: bold 12px Arial, Helvetica, sans-serif;
color: #000;
padding-right: 100px;
text-align: right;
}
textarea{
width: 400px;
height: 300px;
padding: 2px;
font: normal 12px Arial, Helvetica, sans-serif;
color: #000;
}
#maincontainer{
width: 600px;
height: 550px;
margin-left: auto;
margin-right: auto;
background: #f5ebb1;
border: 1px solid #000;
}
#state{
font: bold 12px Arial, Helvetica, sans-serif;
color: #00f;
padding: 10px 0 10px 10px;
}
.textbox{
width: 400px;
padding: 2px;
font: normal 12px Arial, Helvetica, sans-serif;
color: #000;
}
.formbutton{
font: normal 12px Arial, Helvetica, sans-serif;
color: #000;
}
</style>
</head>
<body>
<h1>Prototype-based SMTP Client</h1>
<div id="maincontainer">
<div id="state">STATUS: COMPOSING MESSAGE...</div>
<form id="mailform">
<p>To: <input type="text" id="to" title="enter email address of
recipient" class="textbox" /></p>
<p>Subject: <input type="text" id="subject" title="enter the
subject of your message" class="textbox" /></p>
<p>Cc: <input type="text" id="cc" class="textbox" /></p>
<p>Bcc: <input type="text" id="bcc" class="textbox" /></p>
<p><textarea name="message" title="Type here the text of your
message" id="message"></textarea></p>
<p><input type="submit" value="Send Message" class="formbutton"
title="Send Message"/>
<input type="reset" value="Clear All Fields" class="formbutton"
title="Clear All Fields" />
<input type="button" value="Clear Message" class="formbutton"
title="Clear Message" id="resetbutton"/></p>
</form>
</div>
</body>
</html>
As you'll possibly recall from the preceding article of the series, the above (X)HTML file is responsible for displaying the corresponding user interface of the SMTP client. This interface is used for entering relevant data, such as the recipient's email address, the subject and text of the message, and the carbon copies and blind carbon copies that will be sent to additional receivers as well.
The signature of the previous file is very easy to grasp, therefore let's not waste more time reviewing topics that were covered in the first part of the series. Instead, let's move on and see how to create the JavaScript functions that will send email via AJAX and turn the different controls of the user interface into fully-functional elements.
To learn how this group of JavaScript functions will be created, please click on the link below and read the next section.
Next: Using the Prototype JavaScript library >>
More JavaScript Articles
More By Alejandro Gervasio
