JAVASCRIPT

Building an SMTP Client with Prototype

The Prototype JavaScript library offers its user some interesting capabilities. It's especially useful when you want to build some AJAX functionality into your program. In this three-part article series, you will see how to use the Prototype library to build this kind of functionality into an email (SMTP client) application.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 6

September 26, 2007

TABLE OF CONTENTS:

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">

<head>

<title>Prototype-based SMTP Client</title>

body{

padding: 0;

margin: 0;

background: #fff;

}

h1{

font: bold 24px Arial, Helvetica, sans-serif;

color: #000;

text-align: center;

}

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="state">STATUS: COMPOSING MESSAGE...</div>

<p>Subject: <input type="text" id="subject" title="enter the
subject of your message" class="textbox" /></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.