Building an SMTP Client with Prototype - Listing the complete client-side code for the SMTP application
(Page 4 of 4 )
Quite possibly, one of the most interesting parts of an article that shows how to develop a certain web application is the one that shows its full source code. Below I listed the complete client-side code that corresponds to this Prototype-driven SMTP client, so you can copy it and paste it into your favorite text editor. Eventually you may want to introduce your own improvements.
The entire code listing looks like this:
<!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>
That's all the client-side code required to display on your browser the user interface that you saw in the beginning of this article. Of course, there's plenty of room here to tweak the CSS styles and markup shown in this tutorial to suit your personal needs.
Final thoughts
In this first installment of the series, I showed you how to create the simple front end that belongs to this SMTP application. Nevertheless, you'll have noticed that the Prototype library hasn't been used, since no JavaScript code has been defined yet.
Well, if you feel rather disappointed, I've got good news for you. In the next part of the series, I'm going to teach you how to take advantage of the numerous functions and classes that come bundled with Prototype to turn this SMTP client into a fully-functional piece of code. You won't want to miss it!
| 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. |
