A simple behavior example in Dreamweaver

To understand how behaviors work and how you can create one, it’s helpful to look at an example. The Configuration/Behaviors/Actions folder inside the Dreamweaver application folder contains examples; however, many are very complex. This example is simpler so that you can learn about creating behaviors. Start with the simple Action file Call JavaScript.htm (along with its counterpart, Call JavaScript.js, which contains all the JavaScript functions).

To create the behavior, you create an extension, create the HTML files to browse, and test the behavior.

Create the behavior extension

The following code presents a relatively simple example. The code checks the brand of the browser. The code opens one page if the brand is Netscape Navigator and another if the brand is Microsoft Internet Explorer. This code can easily be expanded to check for other brands such as Opera and WebTV and modified to perform actions other than going to URLs.

  1. Create a new blank file.

  2. Add the following to the file:

     <!DOCTYPE HTML SYSTEM "-//Adobe//DWExtension layout-engine 10.0//dialog"> 
    <html> 
    <head> 
    <title>behavior "Check Browser Brand"</title> 
    <meta http-equiv="Content-Type" content="text/html"> 
    <script language="JavaScript"> 
     
    // The function that will be inserted into the 
    // HEAD of the user's document 
    function checkBrowserBrand(netscapeURL,explorerURL) { 
        if (navigator.appName == "Netscape") { 
            if (netscapeURL) location.href = netscapeURL; 
        }else if (navigator.appName == "Microsoft Internet Explorer") { 
            if (explorerURL) location.href = explorerURL; 
        } 
    } 
     
    //******************* API ********************** 
     
    function canAcceptBehavior(){ 
        return true; 
    } 
     
    // Return the name of the function to be inserted into 
    // the HEAD of the user's document 
    function behaviorFunction(){ 
            return "checkBrowserBrand"; 
    } 
     
    // Create the function call that will be inserted 
    // with the event handler 
    function applyBehavior() { 
        var nsURL = escape(document.theForm.nsURL.value); 
        var ieURL = escape(document.theForm.ieURL.value); 
        if (nsURL && ieURL) { 
            return "checkBrowserBrand(\'" + nsURL + "\',\'" + ieURL + "\')"; 
        }else{ 
            return "Please enter URLs in both fields." 
        } 
    } 
     
    // Extract the arguments from the function call 
    // in the event handler and repopulate the 
    // parameters form 
    function inspectBehavior(fnCall){ 
        var argArray = getTokens(fnCall, "()',"); 
        var nsURL = unescape(argArray[1]); 
        var ieURL = unescape(argArray[2]); 
        document.theForm.nsURL.value = nsURL; 
        document.theForm.ieURL.value = ieURL; 
    } 
     
    //***************** LOCAL FUNCTIONS ****************** 
      
    // Put the pointer in the first text field 
    // and select the contents, if any 
    function initializeUI(){ 
        document.theForm.nsURL.focus(); 
        document.theForm.nsURL.select(); 
    } 
     
    // Let the user browse to the Navigator and 
    // IE URLs 
    function browseForURLs(whichButton){ 
        var theURL = dreamweaver.browseForFileURL(); 
        if (whichButton == "nsURL"){ 
            document.theForm.nsURL.value = theURL; 
        }else{ 
            document.theForm.ieURL.value = theURL; 
        } 
    } 
     
    //*************** END OF JAVASCRIPT ***************** 
    </script> 
    </head> 
    <body> 
    <form method="post" action="" name="theForm"> 
    <table border="0" cellpadding="8"> 
    <tr> 
    <td nowrap="nowrap">&nbsp;&nbsp;Go to this URL if the browser is ¬ 
        Netscape Navigator:<br> 
    <input type="text" name="nsURL" size="50" value=""> &nbsp; 
    <input type="button" name="nsBrowse" value="Browse..." ¬ 
        onClick="browseForURLs('nsURL')"></td> 
    </tr> 
    <tr> 
    <td nowrap="nowrap">&nbsp;&nbsp;Go to this URL is the browser is ¬ 
        Microsoft Internet Explorer:<br> 
    <input type="text" name="ieURL" size="50" value=""> &nbsp; 
    <input type="button" name="ieBrowse" value="Browse..." ¬ 
        onClick="browseForURLs('ieURL')"></td> 
    </tr> 
    </table> 
    </form> 
    </body> 
    </html>
  3. Save the file as Configuration/Behaviors/Actions/BrowserDependentURL.htm.

Create the HTML files to browse (deprecated)

Create the HTML files to browse, the file to go to if the browser is Internet Explorer, and the file to go to if the browser is Netscape Navigator.

  1. Create a file with the following content:

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 
    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
    <title>Internet Explorer Only</title> 
    </head> 
     
    <body> 
    This is the page to go to if you are using Internet Explorer. 
    </body> 
    </html>
  2. Save the file as iecontent.htm in a site on your computer.

  3. Create another file with the following content:

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 
    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
    <title>Netscape Navigator content</title> 
    </head> 
     
    <body> 
    This is the page to go to if you are using Netscape Navigator. 
    </body> 
    </html>
  4. Save the file as netscapecontent.htm in the same folder as the iecontent.htm file.

  5. Restart Dreamweaver.

  6. Create an HTML file with the following content:

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 
    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
    <title>Which browser</title> 
    </head> 
     
    <body> 
    </body> 
    </html>
  7. Save the file as whichbrowser.htm in the same folder as the iecontent.htm file.

  8. Click the Plus (+) button on the Behaviors panel and select the Check Browser Band behavior.

  9. Click the Browse button next to the Go to the URL option and select the netscapecontent.htm file, if the browser is Netscape Navigator. If the browser is Internet Explorer, select the iecontent.htm file.

  10. Click OK.

Dreamweaver adds the specified JavaScript to the whichbrowser.htm file, so that the file appears as follows:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>Which browser</title> 
<script language="JavaScript" type="text/JavaScript"> 
<!-- 
function checkBrowserBrand(netscapeURL,explorerURL) { 
    if (navigator.appName == "Netscape") { 
        if (netscapeURL) location.href = netscapeURL; 
    }else if (navigator.appName == "Microsoft Internet Explorer") { 
        if (explorerURL) location.href = explorerURL; 
    } 
} 
 //--> 
</script> 
</head> 
 
<body onLoad="checkBrowserBrand('netscaptecontent.htm','iecontent.htm')"> 
</body> 
</html>

Test the behavior

  1. View the file whichbrowser.htm in your browser.

  2. Depending on which browser you are using, either iecontent.htm or netscapecontent.htm appears.