Home arrow JavaScript arrow Page 3 - Building an SMTP Client with Prototype
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
Rating: 2 stars2 stars2 stars2 stars2 stars / 6
September 26, 2007
TABLE OF CONTENTS:
  1. · Building an SMTP Client with Prototype
  2. · Defining the front end of the Prototype-driven SMTP client application
  3. · Defining the SMTP client's structural markup
  4. · Listing the complete client-side code for the SMTP application

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Building an SMTP Client with Prototype - Defining the SMTP client's structural markup
(Page 3 of 4 )

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

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

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

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.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 4 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials