| 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 perform the following steps: - Creating the behavior extension
- Creating the HTML files to browse
- Testing the behavior
Creating the behavior extension The following code presents a relatively simple example. It checks the brand of the browser and goes to 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. To create the behavior extension: 1. | Create a new blank file.
| 2. | Add the following to the file:
<!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine 5.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"> Go to this URL if the browser is Netscape Navigator:<br> <input type="text" name="nsURL" size="50" value=""> <input type="button" name="nsBrowse" value="Browse..." onClick="browseForURLs('nsURL')"></td> </tr> <tr> <td nowrap="nowrap"> Go to this URL is the browser is Microsoft Internet  Explorer:<br> <input type="text" name="ieURL" size="50" value=""> <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.
|
Creating the HTML files to browse Next, you 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. To create the HTML files to browse: 1. | Create a new 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 new 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 directory as the iecontent.htm file.
| 5. | Restart Dreamweaver.
| 6. | Create a new 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 directory 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 if the browser is Netscape Navigator text box, and select the netscapecontent.htm file.
| 10. | Click the Browse button next to the Go to the URL if the browser is Internet Explorer text box, and select the iecontent.htm file.
| 11. | 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>
|
Testing the behavior Finally, you can test the behavior. To test the behavior: 1. | View the file whichbrowser.htm in your browser.
Depending on which browser you are using, either iecontent.htm or netscapecontent.htm appears.
|
|
