Prototype-based email application JAVASCRIPT Ajax Tutorials ::: Navioo.com

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.

Introduction

You may have already heard about the neat capabilities that come bundled with the popular Prototype JavaScript library. They're particularly useful in those cases where a specific web application needs to use the functionality provided by AJAX to trigger HTTP requests to the web server without page reloads.

Prototype facilitates working with XML HTTP request objects via its proprietary AJAX.Updater class (among others, by the way). This class can be used in conjunction with a few intuitive parameters for more than just fetching files that are located on the server in the background. It can also be used for receiving the respective response, either as plain text or formatted as XML.

Therefore, over the course of this three-part series, I'm going to show you how to develop a highly expansible SMTP client application for sending email by using the "AJAX.Updater" class that was mentioned above.

Of course, in this situation, one of the strongest benefits offered by this Prototype-based email application rests on its ability to handle easily the SMTP client via a simple, intuitive web-based user interface. This interface can be improved and expanded if you want to add more features to the core program.

Hopefully, by the time you finish reading this series, you should be equipped with a solid background in how to use some of the most robust AJAX classes that come integrated with the Prototype JavaScript library. You will also know hot to implement its popular $ and $F functions, since they will be used intensively during the development of the SMTP client application.

All right, now that you know the objectives of this group of educational tutorials, let's learn together how to create this expandable SMTP client application with Prototype. Let's begin now!

The first step involved in the creation of this Prototype-based SMTP client consists logically of defining the look and feel that this application is going to have.

Since the program that I plan to develop in this series must be capable of sending email to a specified recipient, in addition to working with carbon copies (CC) and blind carbon copies (BCC), the application's visual appearance will look similar to the image below:

As you can see, the previous screen shot illustrates in a clear fashion how the front-end of this SMTP client is going to look. As I said earlier, the user interface that corresponds to this application must provide users with the ability to enter a recipient's email address and to specify additional receivers. As shown in the image above, the front end will include the form fields required for entering all this data.

Okay, at this moment I'm pretty sure that the above picture should give you a clear idea of how the visual appearance of this SMTP client application will be created. However, this section of the article would be rather incomplete if I don't show you the corresponding CSS styles that provide the email application with the look and feel that you saw in the previous screen shot.

Having said that, here is the list of CSS rules that precisely define the visual appearance corresponding to this Prototype-based SMTP client. Have a look at it, please:

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>

As you can see, this straightforward set of CSS styles shouldn't give you any problems as far as understanding how it fits into the schema imposed by this SMTP application.

Basically, aside from styling some common elements of the web document where the application is going to work, such as <h1> headers, text areas and paragraphs, I included a "maincontainer" selector. As you may have guessed, this selector will be responsible for housing the respective web form, which is handy for entering the email address of the eventual recipient, the data corresponding to additional receivers and the text of the message to be submitted. This process sounds pretty logical, right?

Well, at this stage hopefully you learned how the group of CSS styles that were shown previously does its business, with reference to defining the pertinent visual appearance of this expandable SMTP client. Nonetheless, the styles would be rather disconnected from the application's overall context if I don't define its corresponding structural markup.

Therefore, in the upcoming section of this tutorial I'll define the (X)HTML code that corresponds to the front-end of this SMTP client, certainly a procedure that will be very easy to follow.

To see how this task will be performed, please click on the link that appears below and keep reading.

Now I will build the basic structural markup corresponding to this Prototype-based SMTP client, in this way completing the definition of its friendly user interface.

Below I included the respective (X)HTML code that defines the basic structure of this email application. Have a look at the following code listing, please:

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

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

Since the definition of the above (X)HTML file is very easy to follow, I won't bore you explaining irrelevant details. The only thing worth stressing here with reference to the signature of the previous file is the inclusion of a regular web form for letting users enter the email address of a specific recipient, the respective message's subject, and of course the text of the message in question.

This online form will also allow you to easily specify whether the message will be sent to additional receivers. For this reason, it will include two extra fields to be used for entering the email addresses corresponding to receivers of carbon copies and blind carbon copies respectively. Quite simple, isn't it?

Okay, now that you know how the structural markup of this Prototype-based SMTP application has been created, it's time to see how this code can be integrated into the set of CSS styles that you learned in the previous section. Doing so will give you a much better idea of how the presentational and structural modules that comprise this email application fit each other.

Wan to see how this process will be achieved? All right, go ahead and read the following section.

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!

JAVASCRIPT » Ajax Tutorials

Prototype-based email application