Home arrow JavaScript arrow Page 2 - Building the Behavioral Layer of an SMTP Client with Prototype
JAVASCRIPT

Building the Behavioral Layer of an SMTP Client with Prototype


Looking for new and productive ways to use the robust features that come packaged with the Prototype JavaScript library? Then look no further, since this set of articles might be what you're searching for.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 1
October 01, 2007
TABLE OF CONTENTS:
  1. · Building the Behavioral Layer of an SMTP Client with Prototype
  2. · Listing the presentation and structural modules of the SMTP client
  3. · Using the Prototype JavaScript library
  4. · Listing the full source code for the SMTP client

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Building the Behavioral Layer of an SMTP Client with Prototype - Listing the presentation and structural modules of the SMTP client
(Page 2 of 4 )

A natural step before I proceed to defining the JavaScript functions that comprise the behavior layer of this SMTP client consists of listing the complete client-side code of the application as it appeared in the first part of the series.

As usual, the purpose of doing this is to refresh your memory of the signatures of the different application modules developed so far. Here is how they looked originally: 

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

As you'll possibly recall from the preceding article of the series, the above (X)HTML file is responsible for displaying the corresponding user interface of the SMTP client. This interface is used for entering relevant data, such as the recipient's email address, the subject and text of the message, and the carbon copies and blind carbon copies that will be sent to additional receivers as well.

The signature of the previous file is very easy to grasp, therefore let's not waste more time reviewing topics that were covered in the first part of the series. Instead, let's move on and see how to create the JavaScript functions that will send email via AJAX and turn the different controls of the user interface into fully-functional elements.

To learn how this group of JavaScript functions will be created, please click on the link below and read the next 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 1 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials