| To better understand attribute translation, it's helpful to look at an example. The following translator is Pound Conditional (Poco) markup, a syntax that's somewhat similar to ASP or PHP. You create the attribute translator by performing the following steps: - Creating the tagspec tag
- Creating the icon
- Creating the attribute translator
Creating the tagspec tag The first step in making this translator work properly is to create a tagspec tag for Poco markup, which prevents Dreamweaver from parsing the untranslated Poco statements. To create the tagspec tag: 1. | Create a new blank file.
| 2. | Enter the following:
<tagspec tag_name="poco" start_string="<#" end_string="#>" detect_in_attribute="true"  icon="poco.gif" icon_width="17" icon_height="15"></tagspec>
| 3. | Save the file as poco.xml in the Configuration/ThirdPartyTags folder.
|
Creating the icon Next, you create the icon for Poco tags. To create the icon: 1. | Create an image file that is 18 x 18 pixels for the Poco tags icon.
| 2. | Save the file as poco.gif in the Configuration/ThirdPartyTags folder.
|
Creating the attribute translator You create an HTML file that contains the functions necessary for the attribute translator. To create the HTML file: 1. | Create a new blank file.
| 2. | Enter the following:
<html> <head> <title>Conditional Translator</title> <meta http-equiv="Content-Type" content="text/html; charset="> <script language="JavaScript"> /************************************************************* * This translator handles the following statement syntaxes: * * <# if (condition) then foo else bar #> * * <# if (condition) then att="foo" else att="bar" #> * * <# if (condition) then att1="foo" att2="jinkies" * * att3="jeepers" else att1="bar" att2="zoinks" #> * * * * It does not handle statements with no else clause. * *************************************************************/ var count = 1; function translateMarkup(docNameStr, siteRootStr, inStr){ var count = 1; // Counter to ensure unique mmTranslatedValues var outStr = inStr; // String that will be manipulated var spacer = ""; // String to manage space between encoded attributes var start = inStr.indexOf('<# if'); // 1st instance of Pound Conditional code // Declared but not initalized. // var attAndValue; // Boolean indicating whether the attribute is part of // the conditional statement var trueStart; // The beginning of the true case var falseStart; // The beginning of the false case var trueValue; // The HTML that would render in the true case var attName; // The name of the attribute that is being' // set conditionally. var equalSign; // The position of the equal sign just to the // left of the <#, if there is one var transAtt; // The entire translated attribute var transValue; // The value that must be URL-encoded var back3FromStart; // Three characters back from the start position // (used to find equal sign to the left of <# var tokens; // An array of all the attributes set in the true case var end; // The end of the current conditional statement. // As long as there's still a <# conditional that hasn't been // translated while (start != -1){ back3FromStart = start-3; end = outStr.indexOf(' #>',start); equalSign = outStr.indexOf('="<# if',back3FromStart); attAndValue = (equalSign != -1)?false:true; trueStart = outStr.indexOf('then', start); falseStart = outStr.indexOf(' else', start); trueValue = outStr.substring(trueStart+5, falseStart); tokens = dreamweaver.getTokens(trueValue,' '); // If attAndValue is false, find out what attribute you're // translating by backing up from the equal sign to the // first space. The substring between the space and the // equal sign is the attribute. if (!attAndValue){ for (var i=equalSign; i > 0; i--){ if (outStr.charAt(i) == " "){ attName = outStr.substring(i+1,equalSign); break; } } transValue = attName + '="' + trueValue + '"'; transAtt = ' mmTranslatedValue' + count + '="' + escape(transValue) + '"'; outStr = outStr.substring(0,end+4) + transAtt + outStr.substring(end+4); // If attAndValue is true, and tokens is greater than // 1, then trueValue is a series of attribute/value // pairs, not just one. In that case, each attribute/value // pair must be encoded separately and then added back // together to make the translated value. }else if (tokens.length > 1){ transAtt = ' mmTranslatedValue' + count + '="' for (var j=0; j < tokens.length; j++){ tokens[j] = escape(tokens[j]); if (j>0){ spacer=" "; } transAtt += spacer + tokens[j]; } transAtt += '"'; outStr = outStr.substring(0,end+3) + transAtt + outStr.substring(end+3) // If attAndValue is true and tokens is not greater // than 1, then trueValue is a single attribute/value pair. // This is the simplest case, where all that is necessary is // to encode trueValue. }else{ transValue = trueValue; transAtt = ' mmTranslatedValue' + count + '="' + escape(transValue) + '"' outStr = outStr.substring(0,end+3) + transAtt +1 outStr.substring(end+3); } // Increment the counter so that the next instance // of mmTranslatedValue will have a unique name, and // then find the next <# conditional in the code. count++; start = outStr.indexOf('<# if',end); } // Return the translated string. return outStr } function getTranslatorInfo(){ returnArray = new Array(7); returnArray[0] = "Pound_Conditional"; // The translatorClass returnArray[1] = "Pound Conditional Translator"; // The title returnArray[2] = "2"; // The number of extensions returnArray[3] = "html"; // The first extension returnArray[4] = "htm"; // The second extension returnArray[5] = "1"; // The number of expressions returnArray[6] = "<#"; // The first expression returnArray[7] = "byString"; // returnArray[8] = "50"; // return returnArray } </script> </head> <body> </body> </html>
| 3. | Save the file as Poco.htm in the Configuration/Translators folder.
|
|
