Building the Behavioral Layer of an SMTP Client with Prototype - Listing the full source code for the SMTP client
(Page 4 of 4 )
As I promised at the end of the section that you just read, this final section of the tutorial is entirely dedicated to showing the complete client-side code of this SMTP client application, this time including the group of JavaScript functions that you learned previously.
This being said, here the corresponding code listing. Take a look at it:
<!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>
<script language="javascript" src="prototype-1.4.0.js"></script>
<script language="javascript">
// attach handler to window object
Event.observe(window,'load',initializeEmailClient,false);
// initialize email application
function initializeEmailClient(){
Event.observe($('resetbutton'),'click',clearMessageField,false);
Event.observe('mailform','submit',sendEmail);
}
// reset 'message' field to send email
function clearMessageField(){
Field.clear($('message'));
}
// send http request
function sendEmail(e){
var params='to='+$F('to')+'&subject='+$F('subject')+'&cc='+$F
('cc')+'&bcc='+$F('bcc')+'&message='+escape($F('message'));
var xmlobj=new Ajax.Updater('state','send_email.php',{method:
'get',parameters: params});
// prevent form from submitting
Event.stop(e);
}
</script>
</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>
All right, now that I have shown you the complete client-side code that belongs to this Prototype-based SMTP client, I believe that you'll easily be able to introduce your own modifications to the source code to adapt the application to your personal requirements.
Final thoughts
In this second installment of the series, I demonstrated how to use the robust capabilities of the Prototype library to develop some useful JavaScript functions for sending email via a PHP file located on the web server. These functions also allowed you to assign specific behaviors to different buttons of the user interface, turning it into a fully-functional front-end.
However, I saved the best for last. In the final part of the series I'm going to show you how to create the PHP script that really sends email according to the parameters supplied by the user. Are you going to miss it? I hope not!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
