Home arrow JavaScript arrow Page 4 - 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
Poor Best
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 full source code for the SMTP client
(Page 4 of 4 )

As I promised at the end of the section that you just read, this final section of the tutorial is entirely dedicated to showing the complete client-side code of this SMTP client application, this time including the group of JavaScript functions that you learned previously.

This being said, here the corresponding code listing. Take a look at it:

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

<script language="javascript" src="prototype-1.4.0.js"></script>

<script language="javascript">

 // attach handler to window object

  Event.observe(window,'load',initializeEmailClient,false);

 // initialize email application

  function initializeEmailClient(){

    Event.observe($('resetbutton'),'click',clearMessageField,false);

    Event.observe('mailform','submit',sendEmail);

 }

 // reset 'message' field to send email

 function clearMessageField(){

   Field.clear($('message'));

 }

 // send http request

    function sendEmail(e){

  var params='to='+$F('to')+'&subject='+$F('subject')+'&cc='+$F
('cc')+'&bcc='+$F('bcc')+'&message='+escape($F('message'));

  var xmlobj=new Ajax.Updater('state','send_email.php',{method:
'get',parameters: params});

 // prevent form from submitting

    Event.stop(e);

 }

</script>

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

All right, now that I have shown you the complete client-side code that belongs to this Prototype-based SMTP client, I believe that you'll easily be able to introduce your own modifications to the source code to adapt the application to your personal requirements.

Final thoughts

In this second installment of the series, I demonstrated how to use the robust capabilities of the Prototype library to develop some useful JavaScript functions for sending email via a PHP file located on the web server. These functions also allowed you to assign specific behaviors to different buttons of the user interface, turning it into a fully-functional front-end.

However, I saved the best for last. In the final part of the series I'm going to show you how to create the PHP script that really sends email according to the parameters supplied by the user. Are you going to miss it? I hope not!


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.

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
Find More JavaScript Tutorials

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 10 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials