DreamweaverFAQ.com
Search the site!Search DWfaq.com | Print This PagePrinter Friendly Page
Current: Default | Default: Vino


DreamweaverFAQ.com » Tutorials » Extensions » Making A Simple, Useful Extension


The Making of a Simple, but Useful Dreamweaver Extension

Creating the HTML file. Part 2 - The JavaScript.

The interface is done at this stage and should look something like this.

Now we need to add the script that will give it some functionality. This script will go into the body of the document, just above our form.

Our JavaScript Code What it does.
<script language="JavaScript"> Opening script tag. "This is a JavaScript", it says.
function objectTag(form) {
The objectTag function is built into the Dreamweaver API and, when executed, will insert whatever it returns into a HTML document. We want the results of our script to be inserted into a HTML document so this is the perfect function for our purposes.
var emailcc="";
var emailbody="";
var email="";
var emailsubject="";
var mailtext="";
Declare the variables we're going to use. There's one for each text input field in our form. We're not giving them a value just yet. The value is whatever is between the quotes and we've left it empty for the moment.
if (document.emailform.linktext.value != ""){
mailtext=document.emailform.linktext.value;
}
else {mailtext=''; }
If the value of linktext field in the form called emailform in this document isn't empty, then set the value of our "linktext" variable to whatever was inputted into that field by the user. If nothing was entered, leave it blank. This will be the text for the link when it's viewed in a browser.
if (document.emailform.emailtext.value != ""){
email='\?to\=' + document.emailform.emailtext.value;
}
else {email=''; }
If the value of emailtext field in the form called emailform in this document isn't empty, then set the value of our "email" variable to whatever was inputted into that field by the user preceded with "?to=". If nothing was entered, leave it blank. This will be the recipients email in our mailto link. You'll notice in the script that ? and = are preceded with a backslash. These characters are reserved in JavaScript and must be "escaped" if they are to be used in a string. The backslash is the JavaScript escape character.
if (document.emailform.subtext.value != ""){
emailsubject='\&subject\=' + escape(document.emailform.subtext.value);
}
else {emailsubject=''; }
If the value of subtext field in the form called emailform in this document isn't empty, then set the value of our "emailsubject" variable to whatever was inputted into that field by the user preceded with "&subject=". If nothing was entered, leave it blank. This will be the subject in our mailto link. escape( ) is a JavaScript function that converts any reserved or special characters to hex code and we use it here in case we need spaces in our subject. Unless spaces are encoded they will break our URL. See URL encoding)
if (document.emailform.cctext.value != ""){
emailcc='\&cc\=' + document.emailform.cctext.value;
}
else {emailcc=''; }
If the value of cctext field in the form called emailform in this document isn't empty, then set the value of our "emailcc" variable to whatever was inputted into that field by the user preceded with "&cc=". If nothing was entered, leave it blank. This will be the Cc email in our mailto link.
if (document.emailform.bodytext.value != ""){
emailbody='\&body\=' + escape(document.emailform.bodytext.value);
}
else {emailbody=''; }
If the value of bodytext field in the form called emailform in this document isn't empty, then set the value of our "emailbody" variable to whatever was inputted into that field by the user preceded with "&body=". If nothing was entered, leave it blank. This will be the body text in our mailto link. (escape( ) is a JavaScript function that converts any reserved or special characters to hex code and we use it here in case we need spaces or carraige returns in our body text. Unless spaces are encoded they will break our URL.)
if (document.emailform.emailtext.value != ""){
return ('<A HREF=\"mailto:' + email + emailsubject + emailcc + emailbody +'\">' + mailtext + '</A>');
}
else {
return('');
}
If the email field in the form wasn't left blank, Insert the code into the browser. If a field is empty it will be ignored. If not it will be entered into the mailto link with it's prefix. e.g. &cc=.
}
</script>
Close our script.

The finished document should look something like this.

If you copied the finished document to your dreamweaver/configuration/objects/common folder now, the extension would work just fine. But it would be much nicer if we could install it through Macromedia's extension manager. To do this we just need two more files, a GIF file for our icon and a .mxi file. Let's do the GIF file next.

::This page last modified 8/13/2013 at 04:37::

Copyright © 2001-2019 DreamweaverFAQ.com All Rights Reserved.
All brands, trademarks, tutorials, extensions, code, and articles are the property of their respective owners.
A production of Site Drive Inc.
Legal Notice | Privacy Policy | Disclaimer & Notice