A simple attribute translator example in Dreamweaver

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 creating a tagspec tag, an icon, and an attribute translator.

Create 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.

  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.

For an example of creating the tagspec tag, see the Tags.xml file in the Configuration/ThirdPartyTags folder.

Create the icon

Next, you create the icon for Poco tags.

  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.

Create the attribute translator

You create an HTML file that contains the functions necessary for the attribute translator.

  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 + ¬ 
            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.