Wile Adobe dreamweaver CS5 Bible phần 10 ppt

1178 Part VII: Extending Dreamweaver Caution Adobe strongly cautions programmers against using documentEdited() and selectionChanged() unless these functions are absolutely necessary. Because they constantly monitor the document, both func- tions can have an adverse effect on performance if implemented. Adobe suggests that programmers incor- porate the setTimeout() method to temporarily pause these functions so that the user can continue to interact with the program. n Within the Dreamweaver API are two pairs of methods and a single function that relate L to floating panels as follows:getHideAllFloaters(): Reads the state of the Show/ Hide Floating Panel menu option to determine if all floating panels should be hidden ( true) or shown (false) setHideAllFloaters() L : Sets the Show/Hide Floating panel to a particular state, to Hide ( true) or Show (false) getFloaterVisibility(floaterName) L : Reads whether the given floating panel is currently displayed and frontmost ( true) or hidden (false) setFloaterVisibility(floaterName,isVisible) L : Brings the named floating panel forward if the isVisible argument is true toggleFloater(floaterName) L : Toggles the visibility state of the given floating panel between hiding and bringing to the front Floating panels have a great deal of potential with their flexible interface and constant onscreen presence. The example shown in Figure 33-7, PalettePicker from WebAssist, interfaces with Adobe Kuler to access color themes. Figure33-7 The custom floater, PalettePicker by WebAssist, displays color themes created for Adobe Kuler. 1179 Chapter 33: Customizing Dreamweaver Developing Translators For any markup tag to be depicted in the Document window — whether it’s <b> for bold or a cus- tom third-party tag such as Tango’s <@cols> — it must be translated. Dreamweaver’s built-in ren- dering system translates all the standard HTML code, along with a few special custom tags such as those for ASP and ColdFusion. However, to display any other custom tags, or those that perform special functions such as server-side includes, the tag developer must build a custom translator. As part of its expansion efforts, Dreamweaver supports custom translators. This enhancement enables programs that output nonstandard HTML to be displayed onscreen integrated with the regu- lar code. One of Dreamweaver’s main claims to fame is its capability to accept code without rewriting it. With Dreamweaver translators, you can visually insert, show, and edit your custom code. Here’s a brief overview of how translators work: 1. When Dreamweaver starts, all the properly coded translators in the Dreamweaver CS5\ Configuration\Translators folder are initialized. 2. If a document is loaded with nonstandard HTML, the code is checked against the installed translators. 3. The translators are enabled. Note With the exception of the SSI translator, all translators are automatically active all the time — no preference setting determines their availability. n 4. The code is processed with the translator and temporarily converted to a format accept- able to Dreamweaver. 5. Dreamweaver renders the code onscreen. 6. If a change is made to the page, Dreamweaver retranslates the document and refreshes the screen. 7. When the page is saved, the temporary translation is discarded, and the original code, with any modifications, is stored. Developers continue to break new ground with the use of translators. Some translators that have been developed so far include those for the following: Server-side includes: L Standard with Dreamweaver, the SSI translator effortlessly inserts, at design time, files that you normally don’t see until delivered by the Web server. (To learn more about SSI, see Chapter 29.) XSSI: L The Extended Server-Side Include (XSSI) extension, developed by Webmonkey authors Alx Ladygo, Nadav Savio, and Taylor for Adobe, includes a translator that brings the Apache-served code right into the Document window. Tango: L Developed by Pervasive Software, the Tango translator compensates for dif- ferences between database-oriented code and standard HTML. Additionally, Tango includes a manually controlled Sample Data translator that enables the Web designer to view the page complete with an example database. 1180 Part VII: Extending Dreamweaver Translator functions Like other Dreamweaver extensions, such as behaviors and commands, translators are HTML files with JavaScript. Translators have no user interface. Other than deciding when to invoke it, you have no parameters to set or options from which to choose. All the pertinent code is in a script located in the <head> of the translator, which, along with any necessary support routines, includes two essential JavaScript functions: getTranslatorInfo() and translateMarkup(). Any other Dreamweaver JavaScript API functions not specific to behaviors can be used in a trans- lator as well. Note Because of the limitations of JavaScript, much of the heart of custom translation is handled by specially writ- ten C-level extensions. These compiled code libraries enhance Dreamweaver’s capabilities so that new data types can be integrated. C-level extensions are covered in the “Extending C-Level Libraries” section later in this chapter. n The getTranslatorInfo() function The getTranslatorInfo() function simply sets up and returns an array of text strings that are read by Dreamweaver during initialization. The structure of the array is relatively rigid. The number of array elements is specified when the Array variable is declared, and a particular text string must correspond to the proper array ele- ment. The array order is as follows: translatorClass: L The translator’s unique name used in JavaScript functions. The name has to begin with a letter and can contain alphanumeric characters as well as hyphens or underscores. title: L The title listed in the menu and the Translation category. This text string can be no longer than 40 characters. nExtensions: L The number of file extensions, such as .cfml, to follow. This declaration tells Dreamweaver how to read the next portion of the array. If this value is set to 0, all files are acceptable. extension: L The actual file extension without the leading period. nRegExps: L The number of regular expressions to be declared. Should this value be equal to 0, the array is closed. RegExps: L The regular expression to be searched for by Dreamweaver. runDefault: L Specifies when the translator executes (always, never, or conditionally). 1181 Chapter 33: Customizing Dreamweaver The number of array elements — and thus, the detail of the function — depends entirely on the translator. Here, for example, is the code for getTranslatorInfo() from Live Picture’s transla- tor, where a file must have a particular <meta> tag to be translated: function getTranslatorInfo(){ returnArray = new Array( 5 ); returnArray[0] = “FPX”; // translatorClass returnArray[1] = “Flashpix Image Translator”; // title returnArray[2] = “0”; // number of extensions returnArray[3] = “1”; // number of expressions returnArray[4] = “<meta http-equiv=\”refresh\” content=\”0;url=http://”; return returnArray; } By comparison, the standard SSI translator’s getTranslatorInfo() function has 10 array ele- ments, and Webmonkey’s XSSI has 17. The translateMarkup() function Although the getTranslatorInfo() function initializes the translator, the translateMarkup() function actually does the work. As noted earlier, most translators rely on a custom C-level extension to handle the inner workings of the function, but translateMarkup() provides the JavaScript shell. The translateMarkup() function takes three arguments, which must be declared, but whose actual values are provided by Dreamweaver: docName L : The file URL for the file to be translated. siteRoot L : The site root of the file to be translated. Should the file be outside the cur- rent site, the value would be empty. docContent L : A text string with the code for the page to be translated. Typically, the docContent text string is parsed using either JavaScript or a C-level extension within the translateMarkup() function that returns the translated document. Dreamweaver then displays this translated document. Here’s an excerpt of the translateMarkup() function from the ColdFusion translator: function translateMarkup(docNameStr, siteRootStr, inStr) { var outStr = “”; // translate if (inStr.indexOf(“<cf”) != -1 || inStr.indexOf(“<CF”) != -1) { var TM = new TranslationManager(TRANSLATOR_CLASS, SERVER_MODEL_FOLDER, “”); TM.serverModelAlwaysCheckTag = myAlwaysCheckTag; TM.serverModelAlwaysCheckAttribute = myAlwaysCheckAttribute; 1182 Part VII: Extending Dreamweaver var split = TranslationManager.splitBody(inStr); outStr = TM.translate(split.inStr); if (outStr != “”) outStr = split.preInStr + outStr + split.postInStr; } return outStr; } In this example, notice that the translated document in the form of outStr is built by creating a TranslationManager object named TM and then calling this object’s translate() method: TM.translate(split.inStr). Locking code Translations are generally intended for onscreen presentation only. Although there’s no rule pro- hibiting translated content from being written out to disk, most applications need the original content to run. To protect the original content, Dreamweaver includes a special locking tag. This XML tag pair, <MM:BeginLock> <MM:EndLock>, stops the enclosed content (the translation) from being edited, while simultaneously storing a copy of the original content in a special format. The <MM:BeginLock> tag has several attributes: translatorClass L : The identifying name of the translator as specified in getTranslatorInfo(). type L : The type or tag name for the markup to be translated. depFiles L : A comma-separated list of any files on which the locked content depends. If any of these dependent files are altered, the page is retranslated. orig L : A text string with the original markup before translation. The text string is encoded to include four standard HTML characters: < L becomes %3C; > L becomes %3E; “ L becomes %22; % L becomes %25; To see how the special locking tag works, look at an example taken from the Tango Sample Data translator. Tango uses what are called meta tags, which begin with an @ sign, such as the <@TOTALROWS> tag. The Tango Sample Data translator replaces a result drawn from a database with a specified sample value. The original code is: <@TOTALROWS samptotalrows=23> 1183 Chapter 33: Customizing Dreamweaver After the code is translated, Dreamweaver refreshes the screen with the following code: <MM:BeginLock translatorClass=”TANGO_SAMPLEDATA” type =”@TOTALROWS” orig=”%3C@TOTALROWS samptotalrows=23%3E”>23<MM:EndLock> The 23 in bold is the actual translated content that appears in Dreamweaver’s Document window. Note You don’t actually see the locking code, even if you open the Code inspector when a page is translated. To view the code, select the translated item, copy it, and then paste it in another text application, or use the Paste As HTML feature to see the results in Dreamweaver. n Extending C-Level Libraries All programs have their limits. Most limitations are intentional and serve to focus the tool for a particular use. Some limitations are accepted because of programming budgets — for both money and time — with the hope that the boundaries can be exceeded in the next version. With Dreamweaver, one small section of those high, sharply defined walls has been replaced with a doorway: C-level extensions. With the proper programming acumen, you can customize Dreamweaver to add the capabilities you need. As with most modern computer programs, the core of Dreamweaver is coded in C and C++, both low-level languages that execute much faster than any noncompiled language, such as JavaScript. Because C is a compiled language, you can’t just drop in a function with a few lines of code and expect it to work — it has to be integrated into the program. The only possible way to add sig- nificant functionality is through another compiled component called a library. With the C-level extensions capability, Dreamweaver enables the incorporation of these libraries, known as DLLs (Dynamic Link Libraries) on Windows systems and as CFMs (Code Fragment Managers) on Macintosh systems. One excellent example of the extended library is DWfile. This C-level extension is used by sev- eral Dreamweaver partners, including RealNetworks and iCat, to perform tasks outside the capa- bilities of JavaScript — namely, reading and writing external text files. By adding that one library, Dreamweaver can now work with the support files necessary to power a wide range of associated programs. DWfile is described in detail in the following section. C-level extensions are also used in combination with Dreamweaver’s translator feature. As dis- cussed earlier in this chapter, translators handle the chore of temporarily converting nonstandard code to HTML that Dreamweaver can present onscreen — while maintaining the original code in the file. Much of this functionality isn’t impossible for JavaScript; the conversion would be too slow to be effective. C-level extensions are definitely the way to go when looking for a powerful solution. 1184 Part VII: Extending Dreamweaver Note A discussion of programming in C or C++, as required by C-level extensions, is beyond the scope of this book. Developers are encouraged to scour the Dreamweaver Support Center for relevant information: www.adobe .com/support/dreamweaver/. n Calling C-level extensions C-level extensions, properly stored in the Dreamweaver CS5\Configuration\JSExtensions folder, are read into Dreamweaver during initialization when the program first starts. The routines contained within the custom libraries are accessed through JavaScript functions in commands, behaviors, objects, translators, and other Dreamweaver extensions. Take a look at how Adobe’s C-level extension DWfile is used. DWfile has 14 main functions: copy() L : Copies a file from one file URL (the first argument) to another (the second argument). DWfile.copy() can be used to copy any type of file, not just text files. createFolder() L : Creates a folder, given a file URL. listFolder() L : Lists the contents of a specified folder in an array. This function takes two arguments: the file URL of the desired folder (required) and a keyword, either “files” (which returns just filenames) or “directories” (which returns just direc- tory names). If the keyword argument is not used, you get both files and directories. exists() L : Checks to see if a specified filename exists. This function takes one argu- ment, the filename. getAttributes() L : Returns the attributes of a specified file or folder. Possible attri- butes are R (read-only), D (directory), H (hidden), and S (system file or folder). setAttributes() L : Sets the attributes of a specified file. getCreationDate() L : Returns the date when the file was initially created. getCreationDateObj() L : Returns the JavaScript object that represents the date when the file was initially created. getModificationDate() L : Returns the date a specified file or folder was last modified. getModificationDateObj() L : Returns the JavaScript object that represents the date a specified file or folder was last modified. getSize() L : Gets the size of a specified file. read() L : Reads a text file into a string for examination. This function also takes one argument, the filename. write() L : Outputs a string to a text file. This function has three arguments; the first two — the name of the file to be created and the string to be written — are required. The third, the mode, must be the word append. This argument, if used, causes the string to be added to the end of the existing text file; otherwise, the file is overwritten. remove() L : Places the referenced file in the Recycling Bin (Windows) or Trash (Macintosh) without requesting confirmation. 1185 Chapter 33: Customizing Dreamweaver The following JavaScript function, which could be included in any Dreamweaver extension, uses DWfile to determine whether theFile, named in a passed argument, exists. If it does, the con- tents are read and presented in an alert box; if theFile doesn’t exist, the function creates it and outputs a brief message. function fileWork(theFile) { var isFile = DWfile.exists(theFile); // does theFile exist? if (isFile) { alert(DWfile.read(theFile)); // yes: display it in an alert box } else { // no: create it and display msg DWfile.write(theFile,”File Created by DWfile”); } } Note how the C-level extension name, DWfile, is used to call the library and its internal func- tions. After the library has been initialized, it can be addressed as any other internal function, and its routines are simply called as methods of the function using JavaScript dot notation, such as DWfile.exists(theFile). Building C-level extensions You must follow strict guidelines to enable Dreamweaver to recognize a C-level extension. Specifically, you must include two files in the library, and you must declare each function for cor- rect interpretation by Dreamweaver’s JavaScript interpreter. Adobe engineers have developed a C-Level Extension API in the form of a C header, mm_jsapi.h, that contains definitions for more than 20 data types and functions. To insert mm_jsapi.h in your custom library, add the following statement: #include “mm_jsapi.h” Tip You can find the latest version of mm_jsapi.h on the Dreamweaver Exchange, which you can get to by choosing Help ➪ Dreamweaver Exchange in Dreamweaver or by loading the URL www.adobe.com/ exchange/dreamweaver in your browser. n After you’ve included the JavaScript API header, you declare a specific macro, MM_STATE. This macro, contained within the mm_jsapi.h header, holds definitions necessary for the integration of the C-level extension into Dreamweaver’s JavaScript API. You must define MM_STATE only once. Each library can be composed of numerous functions available to be called from within Dreamweaver. For Dreamweaver’s JavaScript interpreter to recognize the functions, each one must be declared in a special function, JS_DefineFunction(), defined in the library. All the JS_DefineFunction() functions are contained in the MM_Init() function. The syntax for JS_DefineFunction() is as follows: JS_DefineFunction(jsName, call, nArgs) 1186 Part VII: Extending Dreamweaver where jsName is the JavaScript name for the function, call is a pointer to a C-level function, and nArgs is the number of arguments that the function can expect. For example, the MM_ Init() function for DWfile might appear as follows: void MM_Init() { JS_DefineFunction(“exist”, exist, 1); JS_DefineFunction(“read”, exist, 1); JS_DefineFunction(“write”, exist, 2); } Because MM_Init() depends on definitions included in the C header mm_jsapi.h, it must be called after the header is included. Tip If you’re building cross-platform C-level extensions, consider using Metrowerks’ CodeWarrior integrated development environment. CodeWarrior can edit, compile, and debug C, C++, and even Java or Pascal for both Windows and Macintosh operating systems. Perhaps most important, Adobe engineers used CodeWarrior to test C-level extensions. n Customizing Your Tag Libraries Previous versions of Dreamweaver required you to manually edit the sourceformat.txt file to change code formatting, including tag case, attributes, indentation, and line wrapping. Dreamweaver gives you a well-designed dialog box called the Tag Library editor to make all those changes for you. You can use that editor to customize every single tag you place in Dreamweaver, and you can even add additional tags if you’re using a proprietary server or design XML files with commonly used tag sets. All tag-related attributes and color code settings are stored in a tag database (the Tag Library), which is manipulated through the Tag Library Editor. Click the Tag Library Editor link in Preferences or choose Edit ➪ Tag Libraries. Editing tag libraries, tags, and attributes To edit the properties for a tag library, follow these steps: 1. Choose Edit ➪ Tag Libraries to open the Tag Library Editor dialog box, and select the tag library whose properties you want to set, as shown in Figure 33-8. 2. In the Used In list box, choose every type of document that should use the selected tag library. Note that the tags in the selected library are available only in the document types you’ve chosen. 1187 Chapter 33: Customizing Dreamweaver Figure33-8 You use the Tag Library Editor to customize Dreamweaver’s tag libraries. 3. If the tags in the selected tag library require a prefix, enter this prefix in the Tag Prefix field. The Tag Prefix box enables you to add a prefix to the beginning of every tag in that particular library. For example, if you developed a tag library for XSL documents, you add xsl: as the tag prefix to add the prefix to the beginning of every tag. 4. When you are finished, click OK to close the Tag Library Editor dialog box. To edit a tag in a tag library, follow these steps: 1. Choose Edit ➪ Tag Libraries. In the Tag Library Editor dialog box, open a tag library and select the tag you want to edit. 2. Set your desired Tag Format options: Line Breaks: L Changing the line breaks option changes where Dreamweaver places line breaks in your code. Choose between four options: No Line Breaks; Before And After Tag; Before, Inside, After; and After Tag Only. This option is great for prevent- ing line breaks after <td> tags and before </td> tags to ensure that no unwanted whitespace shows up in your code. [...]... standard Dreamweaver server behaviors Finally, you look at ways to extend Dreamweaver s core functionality with the Server Behavior Builder 1193 In This Chapter Using server behaviors Altering applied server behaviors Working with Dreamweaver s server behaviors Adding new server behaviors Crafting custom server behaviors Part VII: Extending Dreamweaver Understanding Server Behaviors In contrast to Dreamweaver s... used A custom translator often requires a C-level extension L You can use the Tag Library Editor to customize your Dreamweaver tag libraries In the next chapter, you learn how to create and use Dreamweaver server behaviors 1191 Handling Server Behaviors S erver behaviors are the heart of Dreamweaver, the essential engine that puts the dynamic in dynamic Web applications Server behaviors insert server-model–specific... appear in any other standard Dreamweaver menu by altering the menus.xml file L 1190 Dreamweaver includes a full range of customizable features: objects, behaviors, commands, third-party tags, Property inspectors, and translators You can even extend the program’s core feature set with the C-Level Extensibility option To make it easy to work with XML and other non-HTML tags, Dreamweaver enables you to... non-HTML tags, Dreamweaver enables you to create custom tags complete with individual icons or highlighted content Chapter 33: Customizing Dreamweaver L Attributes for third-party tags are viewable ​  ​ nd modifiable ​  ​ y creating a custom —a —b Property inspector L Dreamweaver s C-Level Extensibility feature enables C and C++ programmers to add new core functionality to a program L Tags from server-side... new tag library Summary Dreamweaver s commitment to professional Web site authoring is most evident when you examine the program’s customization capabilities Virtually every Web site production house can benefit from some degree of personalization ​  ​ nd some clients absolutely require it As you —a examine the ways in which you can make your productive life easier by extending Dreamweaver, keep the... permanent, click OK To discard your deletions, click Cancel 1189 Part VII: Extending Dreamweaver Caution After you click that OK button, your deletions are permanent You cannot undo them, so ponder deeply before clicking that mouse or you could be forced to reinstall! n Importing a DTD or schema to create a new tag library Dreamweaver enables you to create a new tag library by importing tags from an existing... has a section of code before the opening tag, and a smaller block of code after the closing tag Dreamweaver automatically places the code in the proper place ​  ​ nd code placement is very —a important on the server side ​  ​ hen any of its standard server behaviors are used Dreamweaver —w includes more than 25 standard server behaviors; the exact number varies for each server model Figure 34-1... chapter Each section provides step-by-step explanations about completing the pertinent dialog box 1195 Part VII: Extending Dreamweaver Removing an existing server behavior is simple Select the entry for the server behavior in the Server Behaviors panel and click the Remove (–) button Dreamweaver immediately removes all the associated code without requesting confirmation Caution With JavaScript behaviors,... Insert Record server behavior, follow these steps: 1 From the Server Behaviors panel, click the Add (+) button and select Insert Record The Insert Record dialog box appears, as shown in Figure 34 -10 Figure 34 -10 Users may add new data directly to a connected data source 2 From the Insert Record dialog box, choose the connection from the drop-down list If you need to establish a new connection, click... from the drop-down list 5 Select the data table you want to modify from the Table list 1207 Part VII: Extending Dreamweaver Figure 34-12 Maintain an up-to-date data source with the Delete Record server behavior, shown here for a PHP page 6 Select the key field from the Primary Key Column list Dreamweaver attempts to detect whether the field is a number type and if it is, selects the Numeric option 7 . information: www .adobe .com/support /dreamweaver/ . n Calling C-level extensions C-level extensions, properly stored in the Dreamweaver CS5 ConfigurationJSExtensions folder, are read into Dreamweaver. version of mm_jsapi.h on the Dreamweaver Exchange, which you can get to by choosing Help ➪ Dreamweaver Exchange in Dreamweaver or by loading the URL www .adobe. com/ exchange /dreamweaver in your browser interfaces with Adobe Kuler to access color themes. Figure33-7 The custom floater, PalettePicker by WebAssist, displays color themes created for Adobe Kuler. 1179 Chapter 33: Customizing Dreamweaver Developing