Adobe 38040334 Extending Dreamweaver
Adobe 38040334 - Dreamweaver CS3 - PC Manual
 |
UPC - 883919090467
View all Adobe 38040334 manuals
Add to My Manuals
Save this manual to your list of manuals |
Adobe 38040334 manual content summary:
- Adobe 38040334 | Extending Dreamweaver - Page 1
ADOBE® DREAMWEAVER® CS3 EXTENDING DREAMWEAVER - Adobe 38040334 | Extending Dreamweaver - Page 2
Adobe® Dreamweaver® CS3 Extending Dreamweaver for Windows® and Macintosh If this guide is distributed with software that includes an end user agreement, this guide . GIF(sm) is a Service Mark property of CompuServe Incorporated. Inc. (www.nellymoser.com). Flash CS3 video is powered by On2 TrueMotion - Adobe 38040334 | Extending Dreamweaver - Page 3
Dreamweaver 3 Conventions used in this guide 3 Chapter 2: Customizing Dreamweaver Ways to customize Dreamweaver 5 Customizing Dreamweaver in extensions 80 Adding Flash content to Dreamweaver 88 Chapter 6: The Dreamweaver Document Object Model Which document DOM 91 The Dreamweaver DOM 91 - Adobe 38040334 | Extending Dreamweaver - Page 4
Chapter 9: Commands How commands work 126 Adding commands to the Commands menu 127 A simple command example 127 The commands API functions 133 Chapter 10: Menus and menu commands About the menus.xml file 137 Changing menus and menu commands 143 Menu commands 146 A simple menu command example - Adobe 38040334 | Extending Dreamweaver - Page 5
224 Chapter 16: Behaviors How Behaviors work 231 A simple behavior example 232 The behaviors API functions 236 Chapter 17: Server behaviors Dreamweaver architecture 244 A simple server behavior example 245 How the server behavior API functions are called 247 The server behavior API 248 Server - Adobe 38040334 | Extending Dreamweaver - Page 6
vi A simple attribute translator example 334 A simple block/tag translator example 337 The data translator API functions 341 Chapter 23: C-level extensibility How integrating C functions works 345 C-level extensibility and the JavaScript interpreter 347 Data types 347 The C-level API 348 File - Adobe 38040334 | Extending Dreamweaver - Page 7
Chapter 1: Introduction This guide describes the Adobe® Dreamweaver® CS3 framework and application programming interface (API) that lets you build extensions to Dreamweaver. It provides information about how each type of extension works; the API functions that Dreamweaver calls to implement the - Adobe 38040334 | Extending Dreamweaver - Page 8
www.adobe.com/go/downloads. 2 Log on to the Adobe Exchange website at http://www.adobe.com/go/exchange. 3 From the available extensions, select one that you want to use. Click the Download link to download the extension package. 4 Save the extension package in the Dreamweaver/Downloaded Extensions - Adobe 38040334 | Extending Dreamweaver - Page 9
Dreamweaver extensibility newsgroup. You can access the Adobe website for this newsgroup at http://www.adobe.com/support/dreamweaver/extend/form/. What's new in Dreamweaver Dreamweaver CS3 two or more lines. Due to margin limits in this guide's format, what is otherwise a continuous line of code must - Adobe 38040334 | Extending Dreamweaver - Page 10
The following naming conventions are used in this guide: • You The developer who is responsible for writing extensions • The user The person using Dreamweaver • The visitor The person who views the web page that the user created DREAMWEAVER CS3 4 Extending Dreamweaver - Adobe 38040334 | Extending Dreamweaver - Page 11
Adobe Dreamweaver CS3 extensions, you can customize Dreamweaver in many ways, which lets you work in a manner that's familiar, comfortable, and efficient for you. Ways to customize Dreamweaver There are several general approaches to customizing Dreamweaver in the Document window's Design view. - Adobe 38040334 | Extending Dreamweaver - Page 12
DREAMWEAVER CS3 6 Extending Dreamweaver • "Customizing the appearance of dialog boxes" on page 6 • "Changing New and selecting an item from the Basic Page, Dynamic Page, or Other categories, Dreamweaver bases the new document on the appropriate default document in this folder. To change what - Adobe 38040334 | Extending Dreamweaver - Page 13
DREAMWEAVER CS3 7 Extending Dreamweaver 4 On your hard disk, find the appropriate HTM file in the Configuration/Objects, Configuration/Commands, or Configuration/Behaviors folder. 5 Make a copy of the file somewhere other than the Configuration folder. 6 Open the copy in Dreamweaver, edit the form, - Adobe 38040334 | Extending Dreamweaver - Page 14
DREAMWEAVER CS3 8 Extending Dreamweaver For example, for JPEG files, enter the following: JPG,JPEG,JFIF:JPEG Image Files 4 Save the file. 5 Restart Dreamweaver. To see the changes, select File > Open, and click the pop-up menu of file types. Customizing the interpretation of third-party tags Server- - Adobe 38040334 | Extending Dreamweaver - Page 15
DREAMWEAVER CS3 9 Extending Dreamweaver The following information describes the attributes and valid HTML code, and that it can appear anywhere in an HTML file. The HTML validator in Dreamweaver ignores tags that are specified as marker_model. However, the validator doesn't ignore the contents of - Adobe 38040334 | Extending Dreamweaver - Page 16
DREAMWEAVER CS3 10 Extending Dreamweaver • end_string specifies a delimiter that marks the end of a string in the Design view The way that custom tags appear in the Design view of the Document window depends on the values of the tag_type and render_contents attributes of the tagspec tag. If the value - Adobe 38040334 | Extending Dreamweaver - Page 17
DREAMWEAVER CS3 11 Extending Dreamweaver This is a paragraph that includes an instance of the files, and you can add other file types to the list of types that Dreamweaver does not rewrite. Dreamweaver encodes certain special characters by replacing them with numerical values when you enter them - Adobe 38040334 | Extending Dreamweaver - Page 18
DREAMWEAVER CS3 12 Extending Dreamweaver • Fix Invalidly Nested And Unclosed Tags • Remove Extra Library/Application Support/Adobe/Dreamweaver 9/Configuration Note: To install extensions that all users can use in a multiuser operating system, you must be logged in as Administrator (Windows) or - Adobe 38040334 | Extending Dreamweaver - Page 19
DREAMWEAVER CS3 13 Extending Dreamweaver copy the file from the Dreamweaver Configuration folder to the corresponding location required. Description Container tag that holds a list of items that Dreamweaver should treat as deleted. Attributes None. Contents This tag must contain one - Adobe 38040334 | Extending Dreamweaver - Page 20
DREAMWEAVER CS3 14 Extending Dreamweaver Attributes name The name attribute specifies the path to the configuration file, relative to the Configuration folder. In Windows as TEXT). When you download a file with the given filename extension on the Macintosh, Dreamweaver assigns the specified creator - Adobe 38040334 | Extending Dreamweaver - Page 21
DREAMWEAVER CS3 15 Extending Dreamweaver Extensible document types in Dreamweaver XML provides a rich system for defining complex documents and data structures. Dreamweaver .xml, contains the document type definitions provided by Adobe: Document type Server model Internal type ASP.NET - Adobe 38040334 | Extending Dreamweaver - Page 22
DREAMWEAVER CS3 16 Extending Dreamweaver Document type Server model ASP JavaScript Template ASP new document type, you can either add your entry to the document definition file that Adobe provides (MMDocumentTypes.xml) or add a custom definition file to the Configuration/DocumentTypes folder. - Adobe 38040334 | Extending Dreamweaver - Page 23
DREAMWEAVER CS3 17 Extending Dreamweaver - Adobe 38040334 | Extending Dreamweaver - Page 24
Yes The file extension that is associated with the document type on Windows. You specify multiple file extensions by using a comma- separated list. The first extension in the list is the extension that Dreamweaver uses when the user saves a documenttype docu- ment. If two nonserver model - Adobe 38040334 | Extending Dreamweaver - Page 25
DREAMWEAVER CS3 19 Extending Dreamweaver Element Type Tag title (subtag) Attribute description (subtag) Required so HTML tags can be specified. Note: When the user saves a new document, Dreamweaver examines the list of extensions for the current platform that are associated with the document - Adobe 38040334 | Extending Dreamweaver - Page 26
Settings\username\Application Data\Adobe\Dreamweaver 9\Configuration Note: In Windows XP, this folder may be inside a hidden folder. Mac OS X platforms use the following location: hard disk:Users/username/Library/Application Support/Adobe/Dreamweaver 9/Configuration If Dreamweaver cannot find the - Adobe 38040334 | Extending Dreamweaver - Page 27
DREAMWEAVER CS3 21 Extending Dreamweaver To add a new document type: 1 Make a backup copy of the Extensions.txt file in the Configuration folder. 2 Open Extensions.txt in Dreamweaver or a text editor. 3 Add a new line for each new file type. In capital letters, enter the filename extensions that the - Adobe 38040334 | Extending Dreamweaver - Page 28
DREAMWEAVER CS3 22 Extending Dreamweaver In these examples, myJSPDocType/Description is a unique Configuration/Strings folder and loads these unique strings. Rules for document type definition files Dreamweaver lets document types that are associated with a server model share file extensions. For - Adobe 38040334 | Extending Dreamweaver - Page 29
DREAMWEAVER CS3 23 Extending Dreamweaver claim an ASP document and if their respective canRecognizeDocument() functions return equal values, Dreamweaver assigns the document to ASP-JS (because, alphabetically, ASP-JS is first). If Dreamweaver window, and the position and size of the Document window. - Adobe 38040334 | Extending Dreamweaver - Page 30
CS3 24 Extending Dreamweaver Example Description Specifies the Document window's initial position and size. Attributes rect, maximize • rect specifies the position and size of the Document window - Adobe 38040334 | Extending Dreamweaver - Page 31
DREAMWEAVER CS3 25 Extending Dreamweaver • dock is a string value that specifies to which edge of the application frame to dock the panel group. This attribute is ignored on the Macintosh - Adobe 38040334 | Extending Dreamweaver - Page 32
DREAMWEAVER CS3 26 Extending Dreamweaver Example - Adobe 38040334 | Extending Dreamweaver - Page 33
DREAMWEAVER CS3 27 Extending Dreamweaver Software Dreamweaver Flex Builder ID 101-110 1 1 Panel Library Properties Properties • visibleTab is a Boolean value: true if the tab and the panel should be visible; false otherwise. - Adobe 38040334 | Extending Dreamweaver - Page 34
DREAMWEAVER CS3 28 Extending Dreamweaver - Adobe 38040334 | Extending Dreamweaver - Page 35
DREAMWEAVER CS3 29 Extending Dreamweaver Filename fr.xml fr-ca.xml fr-ch.xml it.xml it-mac.xml ja.xml nl-be.xml zh-cn.xml Windows platform French (France) French (Canada) French (Switzerland) Italian (Italy) Italian (Switzerland) N/A Japanese Dutch (Belgium) French (Belgium) Chinese (PRC) Chinese - Adobe 38040334 | Extending Dreamweaver - Page 36
DREAMWEAVER CS3 30 Extending Dreamweaver 5 Switch the keyboard layout to the U.S. keyboard (through your computer's the operating system). 6 Start the Dreamweaver Keyboard Shortcut Editor by selecting Edit > Keyboard Shortcuts. 7 Click the third image button in the upper right of the dialog box to - Adobe 38040334 | Extending Dreamweaver - Page 37
Chapter 3: Customizing Code view Adobe Dreamweaver CS3 uses two devices in Code view that help you enter code quickly and make your code readable and accurate. These two devices are code hints and code coloring. In addition, Dreamweaver validates your code for the target browsers that you specify - Adobe 38040334 | Extending Dreamweaver - Page 38
DREAMWEAVER CS3 32 Extending Dreamweaver After Dreamweaver loads the contents of a code hints file, you to add or modify a Code Hints menu, see "Code Functions" in the Dreamweaver API Reference. Dreamweaver cannot express some types of Code Hints menus through the XML file or the JavaScript - Adobe 38040334 | Extending Dreamweaver - Page 39
DREAMWEAVER CS3 33 Extending Dreamweaver Tag Library Editor ]]> - Adobe 38040334 | Extending Dreamweaver - Page 40
DREAMWEAVER CS3 34 Extending Dreamweaver - Adobe 38040334 | Extending Dreamweaver - Page 41
DREAMWEAVER CS3 35 Extending Dreamweaver Spry. across tags, instead of opening each tag.vtm file and adding the Spry attribute list, Dreamweaver has a new xml format for attribute groups (for example: spry:region, spry:repeat) - Adobe 38040334 | Extending Dreamweaver - Page 42
DREAMWEAVER CS3 36 Extending Dreamweaver Example - Adobe 38040334 | Extending Dreamweaver - Page 43
DREAMWEAVER CS3 37 Extending Dreamweaver Example Description Each menugroup tag corresponds to a type of menu. You can see the menu types that Dreamweaver defines by selecting the Code Hints category from the Preferences dialog box. Select Preferences from the Edit menu to - Adobe 38040334 | Extending Dreamweaver - Page 44
DREAMWEAVER CS3 38 Extending Dreamweaver Example Tag Library Editor.]]> Description This tag describes a single pop-up menu. Dreamweaver opens the - Adobe 38040334 | Extending Dreamweaver - Page 45
DREAMWEAVER CS3 39 Extending Dreamweaver Attributes label, value, {icon}, {texticon} • The label attribute is the string that Dreamweaver displays in the pop-up menu. • The value attribute is the string that Dreamweaver inserts in the document when you select the command. When the user selects the - Adobe 38040334 | Extending Dreamweaver - Page 46
DREAMWEAVER CS3 40 Extending Dreamweaver • The pattern attribute specifies the name of the function methods for a Code Hints pop-up menu. When you type a method name in Code view, Dreamweaver opens a menu of method prototypes that provides a list of parameters for the method and tracks the sequence - Adobe 38040334 | Extending Dreamweaver - Page 47
DREAMWEAVER CS3 41 Extending Dreamweaver • The pattern attribute specifies the name of the method and is required. • The type attribute specifies the data type. The following data types are supported: • enumerated (the default), which indicates a list of nested to display. - Adobe 38040334 | Extending Dreamweaver - Page 48
DREAMWEAVER CS3 42 Extending Dreamweaver • The label attribute specifies the name to display. This is required. • The type attribute specifies the data type. The following data types are supported: • enumerated (the default), which indicates a list of nested optionparammenuitem to display. • - Adobe 38040334 | Extending Dreamweaver - Page 49
DREAMWEAVER CS3 43 Extending Dreamweaver Attributes label, value, icon, datatype • The label a URL, relative to the Configuration folder. Contents None. Container The menu tag. Code coloring Dreamweaver lets you customize or extend the code coloring schemes that you see in Code view so that - Adobe 38040334 | Extending Dreamweaver - Page 50
DREAMWEAVER CS3 44 Extending Dreamweaver Dreamweaver provides the JavaScript function dreamweaver.reloadCodeColoring(), which enables you to reload code coloring XML files that might have been edited manually. For more information on this function, see the Dreamweaver API Reference. To update a code - Adobe 38040334 | Extending Dreamweaver - Page 51
DREAMWEAVER CS3 45 Extending Dreamweaver The following excerpt from the CodeColoring.xml file illustrates the hierarchy of tags in a code coloring scheme file, and it also illustrates the relationship between the code coloring styles file and the code coloring scheme file: Notice that the - Adobe 38040334 | Extending Dreamweaver - Page 52
DREAMWEAVER CS3 46 Extending Dreamweaver Attributes name, id, priority, doctypes • name="scheme_name" A string that assigns a name to the scheme. Dreamweaver shows the scheme name in the Edit Coloring Scheme dialog box. Dreamweaver shows a combination of scheme name and field name, such as HTML - Adobe 38040334 | Extending Dreamweaver - Page 53
DREAMWEAVER CS3 47 Extending Dreamweaver Attributes canNest, doctypes, id, name, scheme • canNest Specifies whether you can nest this code coloring scheme. Document types are defined in the Dreamweaver Configuration/Document Types/MMDocumentTypes.xml file. • id="id_string" Required when scheme=" - Adobe 38040334 | Extending Dreamweaver - Page 54
DREAMWEAVER CS3 48 Extending Dreamweaver Description Contains a text string that represents the delimiter of the end of a character. You must specify the charStart and charEnd tags in pairs. Multiple - Adobe 38040334 | Extending Dreamweaver - Page 55
DREAMWEAVER CS3 49 Extending Dreamweaver Attributes name, id • name="cssImport_name" A string that assigns a name to the CSS @import function. • id="id_string" Required. An identifier string that maps color and style - Adobe 38040334 | Extending Dreamweaver - Page 56
DREAMWEAVER CS3 50 Extending Dreamweaver Example for tags in a scheme. Attributes name, id • name="display_name" A string that Dreamweaver displays in the code color editor. • id="id_string" Required. An identifier string that - Adobe 38040334 | Extending Dreamweaver - Page 57
DREAMWEAVER CS3 51 Extending Dreamweaver Attributes name, id • name="cssSelector_name" A string that assigns a name " /> Description Identifies keywords that define a function. Dreamweaver uses these keywords to perform code navigation. Multiple functionKeyword tags are - Adobe 38040334 | Extending Dreamweaver - Page 58
DREAMWEAVER CS3 52 Extending Dreamweaver Description A list of characters, each of which Dreamweaver can recognize as the first character in an identifier. Attributes name, id • name="idChar1_name" A string that assigns a name to the list of identifier characters. • id=" - Adobe 38040334 | Extending Dreamweaver - Page 59
DREAMWEAVER CS3 53 Extending Dreamweaver Example No Description Specifies whether markup tags should be ignored. Values are Yes and No; the default is Yes. Set to No - Adobe 38040334 | Extending Dreamweaver - Page 60
DREAMWEAVER CS3 54 Extending Dreamweaver Contents Example break case Description An empty tag that specifies numbers - Adobe 38040334 | Extending Dreamweaver - Page 61
DREAMWEAVER CS3 55 Extending Dreamweaver • escape The character or string Representative text that appears in the Preview window of the Edit Coloring Scheme dialog box. characters that define a regular search pattern using supported wildcard characters. Multiple searchPattern tags are allowed. - Adobe 38040334 | Extending Dreamweaver - Page 62
DREAMWEAVER CS3 56 Extending Dreamweaver Description These tags contain a text string that represents the delimiter of the start of . An identifier string that maps color and style to this syntax item. • name="display_name" A string that Dreamweaver displays in the code color editor. - Adobe 38040334 | Extending Dreamweaver - Page 63
DREAMWEAVER CS3 57 Extending Dreamweaver • taglibrary="tag_library_id" The identifier of the tag library to Do not confuse the blockStart.scheme attribute with the scheme tag. innerText This value tells Dreamweaver to color the block delimiters the same as the default text of the scheme inside them - Adobe 38040334 | Extending Dreamweaver - Page 64
DREAMWEAVER CS3 58 Extending Dreamweaver outerTag The outerTag value specifies that both the blockStart and blockEnd tags are complete tags and that Dreamweaver code // comment if (true) window.alert("Hello, World"); Example - Adobe 38040334 | Extending Dreamweaver - Page 65
X keywords X X To make the process of defining schemes more flexible, Dreamweaver lets you specify wildcard and escape characters. Wildcard characters The following is a list of wildcard characters that Dreamweaver supports, along with the strings to specify them and descriptions of their usage - Adobe 38040334 | Extending Dreamweaver - Page 66
DREAMWEAVER CS3 60 Extending Dreamweaver Wildcard Wildcard Wildcard with escape character Optional whitespace Required whitespace . Escape characters The following is a list of escape characters that Dreamweaver supports, along with the strings to specify them and descriptions of their usage - Adobe 38040334 | Extending Dreamweaver - Page 67
DREAMWEAVER CS3 61 Extending Dreamweaver ]]> Assuming the optional white space wildcard strings (\s*) are a single space character, which Dreamweaver generates automatically, then the data string is 26 characters long, plus a wildcard - Adobe 38040334 | Extending Dreamweaver - Page 68
and you later edit the colors or styles by using the Preferences dialog box. Note: Adobe recommends that you create backup copies of all XML files before you make changes. You should verify all manual changes before you edit color and style settings using the Preferences dialog box. Data will be - Adobe 38040334 | Extending Dreamweaver - Page 69
DREAMWEAVER CS3 63 Extending Dreamweaver To edit styles for a scheme using the Code Coloring category in setting. When you click OK, Dreamweaver reloads all code coloring changes automatically. Code coloring examples The following code coloring examples illustrate the code coloring schemes for a - Adobe 38040334 | Extending Dreamweaver - Page 70
DREAMWEAVER CS3 64 Extending Dreamweaver - Adobe 38040334 | Extending Dreamweaver - Page 71
DREAMWEAVER CS3 65 Extending Dreamweaver JavaScript code coloring No Yes - Adobe 38040334 | Extending Dreamweaver - Page 72
DREAMWEAVER CS3 66 Extending Dreamweaver text for the JavaScript scheme illustrates the JavaScript code coloring scheme as document in Code view, Dreamweaver automatically validates that the document user selected. Dreamweaver underlines errors with a wavy red line. Dreamweaver also has a - Adobe 38040334 | Extending Dreamweaver - Page 73
DREAMWEAVER CS3 67 Extending Dreamweaver Dreamweaver stores browser profiles in the Browser Profile folder inside the Dreamweaver Configuration Explorer version 6.0 is Internet_Explorer_6.0.txt. To support target browser checking for CSS, Dreamweaver stores CSS profile information for a browser - Adobe 38040334 | Extending Dreamweaver - Page 74
DREAMWEAVER CS3 68 Extending Dreamweaver supported" Specifies the level of support for the property. If not specified, "supported" is assumed. If you specify a support level other than "supported" and omit the message attribute, Dreamweaver - Adobe 38040334 | Extending Dreamweaver - Page 75
DREAMWEAVER CS3 69 Extending Dreamweaver • message="message_string" The message attribute defines a message string that Dreamweaver displays when it finds the property value in a document. If the message attribute is omitted, Dreamweaver displays a message string of "value_name is not supported." - Adobe 38040334 | Extending Dreamweaver - Page 76
Typically, you create an Adobe Dreamweaver CS3 extension to perform one of the following types of tasks: • to automatically open or close windows, open or close documents, change keyboard shortcuts, and more • Connecting to data sources, which lets Dreamweaver users create dynamic, data-driven - Adobe 38040334 | Extending Dreamweaver - Page 77
DREAMWEAVER CS3 71 Extending Dreamweaver Types of Dreamweaver extensions The following list describes the types of Dreamweaver extensions that are documented in this guide Dreamweaver Dreamweaver. You can also use the Results Window Dreamweaver Dreamweaver Dreamweaver the Dreamweaver Behaviors Dreamweaver - Adobe 38040334 | Extending Dreamweaver - Page 78
the files in the proper folder for Dreamweaver to recognize them. For example, if you create a Property inspector extension, you save the files in the Configuration/Inspectors folder. If you download and install an extension from the Adobe Exchange website (www.adobe.com/go/exchange), the Extension - Adobe 38040334 | Extending Dreamweaver - Page 79
DREAMWEAVER CS3 73 Extending Dreamweaver Configuration/Shared/Common/Scripts folder structure For more information about the Shared folder, see "The Shared folder" on page 364. Multiuser Configuration folders For the multiuser operating systems of Windows XP, Windows 2000, and Macintosh OS X, - Adobe 38040334 | Extending Dreamweaver - Page 80
DREAMWEAVER CS3 74 Extending Dreamweaver Reloading extensions If you make a change to an extension while you are working in Dreamweaver, you can reload the extensions so that Dreamweaver recognizes the change. To reload extensions 1 Control-click (Windows) or Option-click (Macintosh) the Categories - Adobe 38040334 | Extending Dreamweaver - Page 81
DREAMWEAVER CS3 75 Extending Dreamweaver • Executes the procedures Note: If any JavaScript code in your extension file contains the string "", the JavaScript interpreter reads the string as an ending script tag and reports an unterminated string literal error. To avoid this problem, break - Adobe 38040334 | Extending Dreamweaver - Page 82
DREAMWEAVER CS3 76 Extending Dreamweaver Localizing an extension Use the following techniques to make it when you did Y. Try not to do Y!"/> Now your JavaScript files can refer to - Adobe 38040334 | Extending Dreamweaver - Page 83
DREAMWEAVER CS3 77 Extending Dreamweaver - Adobe 38040334 | Extending Dreamweaver - Page 84
extensions work effectively within the Adobe Dreamweaver CS3 user interface (UI) and that can automate the formatting while letting users manually input the new, updated values for image repetitive task that the extension performs. Dreamweaver supports HTML and JavaScript form elements as the - Adobe 38040334 | Extending Dreamweaver - Page 85
DREAMWEAVER CS3 79 Extending Dreamweaver When you design an extension, you should determine what UI, aligned left. • For readable code, assign logical names to your text boxes. If you use Dreamweaver to create your extension UI, you can use the Property inspector or the Quick Tag Editor to assign - Adobe 38040334 | Extending Dreamweaver - Page 86
DREAMWEAVER CS3 80 Extending Dreamweaver The Base Property inspector as it appears in Design view Using custom UI controls in extensions In addition to the standard HTML form elements, Dreamweaver supports custom controls to help you create flexible, professional-looking interfaces, as described in - Adobe 38040334 | Extending Dreamweaver - Page 87
DREAMWEAVER CS3 81 Extending Dreamweaver Dreamweaver adds the following custom attributes for "or you entered a value"); } } function commandButtons() { return new Array("OK", "getAlert()", "Cancel", "window.close()"); } - Adobe 38040334 | Extending Dreamweaver - Page 88
DREAMWEAVER CS3 82 Extending Dreamweaver editText="Editable Text"> Baseball Football Soccer 3 Save the file as EditableSelectTest.htm in the Dreamweaver Configuration/Commands folder - Adobe 38040334 | Extending Dreamweaver - Page 89
DREAMWEAVER CS3 83 Extending Dreamweaver The following figure shows an advanced Recordset dialog box that uses a database tree control and a variable grid control: Adding a database tree control The database tree - Adobe 38040334 | Extending Dreamweaver - Page 90
DREAMWEAVER CS3 84 Extending Dreamweaver You can change the connection attribute to retrieve selected data and display it in the tree. You can use the DBTreeControl attribute as a JavaScript wrapper - Adobe 38040334 | Extending Dreamweaver - Page 91
DREAMWEAVER CS3 85 Extending Dreamweaver Adding tree controls Tree controls display data in a a database tree control" on page 83, no association with a database is required. The Dreamweaver Keyboard Shortcuts editor uses the tree control, as shown in the following figure: Creating a tree - Adobe 38040334 | Extending Dreamweaver - Page 92
DREAMWEAVER CS3 86 Extending Dreamweaver MM:TREECOLUMN tags have the following attributes: Attribute name name value width align state Description Name of the column String to appear in column header Width of the column in pixels (percentage not supported); default is 100 Optional. Specifies - Adobe 38040334 | Extending Dreamweaver - Page 93
DREAMWEAVER CS3 87 Extending Dreamweaver Manipulating content within a tree control Tree controls and the nodes within them are implemented as HTML tags. They are parsed by Dreamweaver such as text, check box, and button, Dreamweaver supports mmcolorbutton, an additional input type in extensions. - Adobe 38040334 | Extending Dreamweaver - Page 94
DREAMWEAVER CS3 88 Extending Dreamweaver In this example, when the user changes the value value for that color. Adding Flash content to Dreamweaver Flash content (SWF files) can display in the Dreamweaver interface either as part of an object or command. This Flash support is especially useful if you - Adobe 38040334 | Extending Dreamweaver - Page 95
DREAMWEAVER CS3 89 Extending Dreamweaver - Adobe 38040334 | Extending Dreamweaver - Page 96
Document Object Model In Adobe Dreamweaver CS3, the Document Object Model (DOM) is a critically important structure for extension builders. It lets you access and manipulate elements within a user's document and within the - Adobe 38040334 | Extending Dreamweaver - Page 97
methods, and events that the Dreamweaver DOM supports. Some properties are read-only when they are accessed as properties of a specific object. A bullet (•) indicates properties that are read-only when they are used in the listed context. Object window Properties navigator • document • innerWidth - Adobe 38040334 | Extending Dreamweaver - Page 98
DREAMWEAVER CS3 92 Extending Dreamweaver Object document all tags/ elements form layer image button reset submit checkbox radio Properties Methods Events forms • (an array of form objects) images • (an array - Adobe 38040334 | Extending Dreamweaver - Page 99
DREAMWEAVER CS3 93 Extending Dreamweaver Object Properties Methods for all tags: blur() (Windows only) focus() (Windows only) onBlur (Windows only) onChange onFocus (Windows only) option In addition to the object that are supported in Dreamweaver. A bullet (•) marks read-only properties. - Adobe 38040334 | Extending Dreamweaver - Page 100
DREAMWEAVER CS3 94 Extending Dreamweaver Property or method nodeType • parentNode • parentWindow • childNodes • previousSibling • Node.DOCUMENT_NODE null The JavaScript object that corresponds to the document's parent window. (This property is defined in the Microsoft Internet Explorer 4.0 DOM, - Adobe 38040334 | Extending Dreamweaver - Page 101
DREAMWEAVER CS3 95 Extending Dreamweaver Property or method nodeType • parentNode • childNodes • previousSibling • . (This property is not included in DOM Level 1; it was added to Dreamweaver 3 to support attribute translation.) Does not return a value. Sets the specified attribute to the - Adobe 38040334 | Extending Dreamweaver - Page 102
DREAMWEAVER CS3 96 Extending Dreamweaver Property or method getElementsByAttributeName(attrName) hasChildNodes() (This property is not included in DOM Level 1; it was added to Dreamweaver 3 to support attribute translation.) Properties and methods of text objects Each contiguous block of text - Adobe 38040334 | Extending Dreamweaver - Page 103
the form "versionNumber.releaseNumber.buildNumber [languageCode] (platform)". As an example, the value of the appVersion property for the Swedish Windows version of Dreamweaver CS3 is "8.0.XXXX [se] (Win32)"; the value for the English Macintosh version is "8.0.XXXX [en] (MacPPC)". Note: You can find - Adobe 38040334 | Extending Dreamweaver - Page 104
DREAMWEAVER CS3 98 Extending Dreamweaver The site object The site object has no properties. For information about the methods of the site object, see the Dreamweaver API Reference. - Adobe 38040334 | Extending Dreamweaver - Page 105
Chapter 7: Insert bar objects In Adobe Dreamweaver CS3, objects insert specific strings of code into a to set specific attributes. Objects reside in the Configuration/Objects folder inside the Dreamweaver application folder. The Objects subfolders are grouped according to their location on the - Adobe 38040334 | Extending Dreamweaver - Page 106
DREAMWEAVER CS3 100 Extending Dreamweaver • The HTML file that defines what is inserted into a only the HTML to insert, without body and head tags. For more information, see "Customizing Dreamweaver" on the Adobe Support Center. • The 18 x 18 pixel image that appears on the Insert bar • Additions - Adobe 38040334 | Extending Dreamweaver - Page 107
DREAMWEAVER CS3 101 Extending Dreamweaver - Adobe 38040334 | Extending Dreamweaver - Page 108
DREAMWEAVER CS3 102 Extending Dreamweaver Example - Adobe 38040334 | Extending Dreamweaver - Page 109
DREAMWEAVER CS3 103 Extending Dreamweaver Attributes id, image, checked, {showIf}, {enabled}, {command}, {file}, {tag}, { image="image_path" Description This attribute specifies the path, relative to the Dreamweaver Configuration folder, to the icon file that appears on the Insert bar. The icon - Adobe 38040334 | Extending Dreamweaver - Page 110
DREAMWEAVER CS3 104 Extending Dreamweaver Example canDrag="false" showIf="enabler" Description This attribute specifies that this button should appear on the Insert bar only if the given Dreamweaver enabler is a true value. If you do not specify showIf, the button always appears. The possible - Adobe 38040334 | Extending Dreamweaver - Page 111
DREAMWEAVER CS3 105 Extending Dreamweaver Example checked="_View_Layout" command="API_function" Description Instead of referring Dreamweaver to an HTML file that contains the code to insert, you use this tag to specify a command that Dreamweaver performs when the button is clicked. Example command=" - Adobe 38040334 | Extending Dreamweaver - Page 112
DREAMWEAVER CS3 106 Extending Dreamweaver Modifying the Insert bar You can move objects from one category to another, rename categories, and completely remove objects from the panel. To make the changes appear in the Insert bar, you must either restart Dreamweaver or reload extensions. For - Adobe 38040334 | Extending Dreamweaver - Page 113
DREAMWEAVER CS3 107 Extending Dreamweaver To create a new category: 1 Save a backup copy of insertbar. Insert bar. To make the changes appear in the Insert bar, you must either restart Dreamweaver or reload extensions. For information on reloading extensions, see "Reloading extensions" on page 74. - Adobe 38040334 | Extending Dreamweaver - Page 114
DREAMWEAVER CS3 108 Extending Dreamweaver A simple insert object example This example adds an object , look at the Bold, Emphasis, and Heading object files to see similar functionality, where Dreamweaver wraps a tag around selected text. You will perform the following steps to create the strike - Adobe 38040334 | Extending Dreamweaver - Page 115
DREAMWEAVER CS3 109 Extending Dreamweaver To that this function works only for supported tags (see dom.applyCharacterMarkup() in the Dreamweaver API Reference). For other tags Format", "Tags Upper Case", "") == 'TRUE'); // Manually wrap tags around selection. if (upCaseTag){ dom.source.wrapSelection - Adobe 38040334 | Extending Dreamweaver - Page 116
DREAMWEAVER CS3 110 Extending Dreamweaver To separate the HTML object definition file from the supporting JavaScript functions: 1 Create a new blank file. 2 Paste all the JavaScript functions into the file. 3 Remove the functions from Strikethrough.htm, and add the JavaScript filename - Adobe 38040334 | Extending Dreamweaver - Page 117
DREAMWEAVER CS3 111 Extending Dreamweaver This line image and file attributes simply tell Dreamweaver the location of the supporting files, as shown here: < ("Source Format", "Tags Upper Case", "") == 'TRUE'); // Manually wrap tags around selection. if (upCaseTag){ dom.source.wrapSelection(' - Adobe 38040334 | Extending Dreamweaver - Page 118
DREAMWEAVER CS3 112 Extending Dreamweaver Note: Because dom.applyCharacterMarkup() doesn't support font color changes, you need to find the appropriate API function for font color changes. (For more information, see dom.applyFontMarkup() in the Dreamweaver API Reference). 2 Save the file as - Adobe 38040334 | Extending Dreamweaver - Page 119
OK to perform the objectTag() function, which adds the strike-through: DREAMWEAVER CS3 113 Extending Dreamweaver Building an Insert bar pop-up menu The Dreamweaver Insert bar introduces a new organization for objects and now supports pop-up menus to help organize objects into smaller groups, as - Adobe 38040334 | Extending Dreamweaver - Page 120
DREAMWEAVER CS3 114 Extending Dreamweaver API FUNCTIONS function isDOMRequired() { // Return false, indicating that this object is available in Code view. return false; } function objectTag() { // Manually wrap tags around selection. var dom = dw.getDocumentDOM(); if (dw.getFocus() == 'textView' - Adobe 38040334 | Extending Dreamweaver - Page 121
DREAMWEAVER CS3 115 Extending Dreamweaver The insertbar tag defines the beginning of all the Insert bar contents. 2 After that line, add a new category tag for the Editorial category you want - Adobe 38040334 | Extending Dreamweaver - Page 122
DREAMWEAVER CS3 116 Extending Dreamweaver To test the new pop-up menu: 1 Reload extensions. For information on display the Object dialog box. Arguments None. Returns Dreamweaver expects a Boolean value. Example The following code tells Dreamweaver to check to see that the document contains a - Adobe 38040334 | Extending Dreamweaver - Page 123
DREAMWEAVER CS3 117 Extending Dreamweaver displayHelp() Description If you define this function, it displays a Help button below the OK and Cancel buttons in the Parameters dialog box. This function is called when the user clicks the Help button. Arguments None. Returns Dreamweaver expects nothing. - Adobe 38040334 | Extending Dreamweaver - Page 124
DREAMWEAVER CS3 118 Extending Dreamweaver If none of these conditions apply, use the objectTag() function. Arguments None. Returns Dreamweaver left to the reader } return errMsg; manually before the return statement, so doing nothing in this case is not equivalent to clicking Cancel. In Dreamweaver - Adobe 38040334 | Extending Dreamweaver - Page 125
DREAMWEAVER CS3 119 Extending Dreamweaver Arguments None. Returns Dreamweaver expects the string to insert into the value of the platform argument is either "macintosh" or "windows", depending on the user's platform. Returns Dreamweaver expects a string of the form "widthInPixels,heightInPixels". The - Adobe 38040334 | Extending Dreamweaver - Page 126
Chapter 8: Browser compatibility check issues API In Adobe Dreamweaver CS3, the browser compatibility check (BCC) feature the name to display in the Results panel when the Issue is detected. 6 Dreamweaver calls the getIssueDescription function for each Issue to determine the text to display in the - Adobe 38040334 | Extending Dreamweaver - Page 127
DREAMWEAVER CS3 121 Extending Dreamweaver Sequence of events 1 Dreamweaver parses the styles that apply to the current document, whether defined inline, in the head, or in an external stylesheet, as the affected browser would read them. 2 Dreamweaver calls the findIssue() function in each Issue file - Adobe 38040334 | Extending Dreamweaver - Page 128
colgroup or col // tag in this table, we have a problem node. don't // bother looking further. props = window.getDeclaredStyle(allcol[x]); property = ""; definedStyles.length = 0; for ( ; } function getConfidenceLevel(){ //DETCON 4 return issueUtils.CONFIDENCE_HIGH; } DREAMWEAVER CS3 122 Extending - Adobe 38040334 | Extending Dreamweaver - Page 129
buttons.length; i++){ props = window.getDeclaredStyle(buttons[i]); if (props.cssFloat == "left" || props.cssFloat == "right"){ issueNodes.push(buttons[i]); } } return issueNodes; } getAffectedBrowserProfiles() Availability Dreamweaver CS3. Description Provides Dreamweaver with a list of browsers for - Adobe 38040334 | Extending Dreamweaver - Page 130
(). Example function getAffectedBrowsers(){ return new Array("IE/Win 5.0", "IE/Win 5.5", "IE/Win 6.0"); } getIssueID() Availability Dreamweaver CS3. Description Provides Dreamweaver with a unique ID for the issue. Arguments None. Returns A string with a unique issue identifier. - Adobe 38040334 | Extending Dreamweaver - Page 131
the name or a short description of the issue. Example function getIssueName(){ return "The Expanding Box Problem"; } getIssueDescription() Availability Dreamweaver CS3. Description Provides Dreamweaver with a detailed description of the issue. Arguments None. Returns A string containing the name or - Adobe 38040334 | Extending Dreamweaver - Page 132
Chapter 9: Commands Adobe Dreamweaver CS3 commands can perform almost any kind of edit to a user's current value, the procedure can continue. 2 The user selects a command from the menu. 3 Dreamweaver calls the receiveArguments() function, if defined, in the selected command file to let the command - Adobe 38040334 | Extending Dreamweaver - Page 133
the associated code. The dialog box remains visible until one of the scripts in the command calls the window.close() function. Adding commands to the Commands menu Dreamweaver automatically adds any files that are inside the Configuration/Commands folder to the bottom of the Commands menu. To - Adobe 38040334 | Extending Dreamweaver - Page 134
DREAMWEAVER CS3 128 Extending Dreamweaver 2 Add the following code to the file to create the form: - Adobe 38040334 | Extending Dreamweaver - Page 135
DREAMWEAVER CS3 129 Extending Dreamweaver • "Linking functions to the OK and Cancel buttons" on page should be active and when it should be dimmed. When a user clicks the Commands menu, Dreamweaver calls the canAcceptCommand() function for each menu item to determine whether it should be enabled. If - Adobe 38040334 | Extending Dreamweaver - Page 136
DREAMWEAVER CS3 130 Extending Dreamweaver The next part of the return statement (&& (theSelNode.nodeType == Node.TEXT_NODE) checks to see if the selected the end of the file, add the following code: function commandButtons() { return new Array("OK", "changeCase()", "Cancel", "window.close()"); } - Adobe 38040334 | Extending Dreamweaver - Page 137
what to do when the user clicks them. The commandButtons() function tells Dreamweaver to call changeCase() when the user clicks OK and to call window.close() when the user clicks Cancel. Letting the user specify uppercase or lowercase When the user clicks a menu item, the extension needs a mechanism - Adobe 38040334 | Extending Dreamweaver - Page 138
DREAMWEAVER CS3 132 Extending Dreamweaver } if (uorl == 'u'){ theDocEl.outerHTML = theWholeDoc.substring(0,theSel[0]) + selText.toUpperCase() selection back to where it was when you started theDOM.setSelection(theSel[0],theSel[1]); window.close(); // close extension UI } 3 Save the file as Change - Adobe 38040334 | Extending Dreamweaver - Page 139
DREAMWEAVER CS3 133 Extending Dreamweaver Testing the extension After you place the files in the Commands folder, you can test the extension. To test the extension: 1 Restart Dreamweaver or reload extensions. For information on reloading extensions, see "Reloading extensions" on page 74. The Change - Adobe 38040334 | Extending Dreamweaver - Page 140
DREAMWEAVER CS3 134 Extending Dreamweaver commandButtons() Description This function defines the buttons : function commandButtons(){ return new Array("OK" , "doCommand()" , "Cancel" , ¬ "window.close()" , "Help" , "showHelp()"); } isDOMRequired() Description This function determines whether the - Adobe 38040334 | Extending Dreamweaver - Page 141
DREAMWEAVER CS3 135 Extending Dreamweaver Returns Dreamweaver expects nothing. windowDimensions() Description This function sets specific dimensions for the Parameters dialog box. If this function is not defined, the window dimensions are computed automatically. Note: Do not define this function - Adobe 38040334 | Extending Dreamweaver - Page 142
Chapter 10: Menus and menu commands Adobe Dreamweaver CS3 creates all its menus from the structure defined in the menus.xml file in the Dreamweaver Configuration/Menus folder. You can rearrange, rename, and remove menu commands by editing the menus.xml file. You can also add, change, and remove - Adobe 38040334 | Extending Dreamweaver - Page 143
DREAMWEAVER CS3 137 Extending Dreamweaver About the menus.xml file The menus.xml file of menus-for example, there's a main menu bar, a separate Site panel menu bar (which appears only on Windows, not the Macintosh), and a menu bar for each context menu. Each menu bar contains one or more menus - Adobe 38040334 | Extending Dreamweaver - Page 144
DREAMWEAVER CS3 138 Extending Dreamweaver Description Provides information about a menu or submenu to appear in the Dreamweaver menu from Adobe), letter is the command's access key (mnemonic), for Windows only. • id Used by Dreamweaver to identify the item. This ID must be unique - Adobe 38040334 | Extending Dreamweaver - Page 145
DREAMWEAVER CS3 139 Extending Dreamweaver • app The name of the application in which the menu command is available. Not currently used. • key The keyboard shortcut for the command, if any. Use the following strings to specify modifier keys: • Cmd specifies the Control key (Windows) or Command key ( - Adobe 38040334 | Extending Dreamweaver - Page 146
DREAMWEAVER CS3 140 Extending Dreamweaver • showIf Specifies that the menuitem should appear only if the given Dreamweaver enabler has value true. The possible enablers are: _SERVERMODEL_ASP, _SERVERMODEL_ASPNET, _SERVERMODEL_JSP, _SERVERMODEL_CFML (for all versions of ColdFusion), - Adobe 38040334 | Extending Dreamweaver - Page 147
DREAMWEAVER CS3 141 Extending Dreamweaver • platform Indicates that the shortcut list should appear only on both platforms. • file The path to a file containing the JavaScript code that Dreamweaver executes when you use the keyboard shortcut. The file attribute overrides the command attribute. You - Adobe 38040334 | Extending Dreamweaver - Page 148
DREAMWEAVER CS3 142 Extending Dreamweaver Example - Adobe 38040334 | Extending Dreamweaver - Page 149
DREAMWEAVER CS3 143 Extending Dreamweaver Description Contains the key combination to activate the tool. Attributes {name}, key, id • name A localized version of the action. • key The key combination used - Adobe 38040334 | Extending Dreamweaver - Page 150
DREAMWEAVER CS3 144 Extending Dreamweaver You can move items into or out of context menus using the same procedure as for other menus. For information, see "About the menus.xml file" on page 137. To move a menu command: 1 Quit Dreamweaver. 2 Make a backup copy of the menus.xml file. 3 Open menus.xml - Adobe 38040334 | Extending Dreamweaver - Page 151
DREAMWEAVER CS3 145 Extending Dreamweaver open it in Dreamweaver.) 4 Look at the Keyboard Shortcut Matrix (available from the Dreamweaver Support Center at http://www.adobe.com/go/ . Note: You can use the same keyboard shortcut for a Windows-only menu command and for a Macintosh-only menu command. - Adobe 38040334 | Extending Dreamweaver - Page 152
DREAMWEAVER CS3 146 Extending Dreamweaver • Server behaviors (listed in the Plus (+) pop-up menu on commands. Contains the functions required by the menu command. Note: If you add custom menu commands to Dreamweaver, add them at the top level of the Menus folder or create a subfolder. The MM folder - Adobe 38040334 | Extending Dreamweaver - Page 153
DREAMWEAVER CS3 147 Extending Dreamweaver Modifying the Commands menu You can add certain kinds of contexts, however, command is used interchangeably with menu item to mean any item that appears in a Dreamweaver menu, no matter what it does or how it's implemented. To create new commands that are - Adobe 38040334 | Extending Dreamweaver - Page 154
dialog box. Dreamweaver executes event handlers that are associated with the fields as the user encounters them. 10 The user Dreamweaver executes the code that is associated with the clicked button. 12 The dialog box remains visible until one of the scripts in the menu commands file calls the window - Adobe 38040334 | Extending Dreamweaver - Page 155
DREAMWEAVER CS3 149 Extending Dreamweaver - Adobe 38040334 | Extending Dreamweaver - Page 156
DREAMWEAVER CS3 150 Extending Dreamweaver receiveArguments() Dreamweaver calls the receiveArguments() function to process ". The dw.undo() function undoes the previous step that the user performed in the document window, dialog box, or panel that has focus. The dw.redo() function redoes the last - Adobe 38040334 | Extending Dreamweaver - Page 157
DREAMWEAVER CS3 151 Extending Dreamweaver The setMenuText() function looks like the following example code: function setMenuText() { and Redo menu items, you must save the MyMenu.htm command file in the Dreamweaver Configuration/Menus folder or a subfolder that you create. The location of the file - Adobe 38040334 | Extending Dreamweaver - Page 158
DREAMWEAVER CS3 152 Extending Dreamweaver The first menuitem tag defines the default menu item No Browsers code. Writing the JavaScript code Because the first menuitem tag contains the dynamic attribute, Dreamweaver calls the getDynamicContent() function in the PIB_Dynamic.js file, which is shown in - Adobe 38040334 | Extending Dreamweaver - Page 159
DREAMWEAVER CS3 153 Extending Dreamweaver The getDynamicContent() function calls the dw. havePreviewTarget() The havePreviewTarget() function is a user-defined function that returns the value true if Dreamweaver has a valid target to display in the browser. A valid target is a document or - Adobe 38040334 | Extending Dreamweaver - Page 160
DREAMWEAVER CS3 154 Extending Dreamweaver else if (site.getFocus() != 'none') { var selFiles = site.getSelection(); if (selFiles.length > 0) { var i; bHavePreviewTarget = true; for (i = 0; i < selFiles.length; i++) { var selFile = selFiles[i]; // For server connections, the - Adobe 38040334 | Extending Dreamweaver - Page 161
DREAMWEAVER CS3 155 Extending Dreamweaver The havePreviewTarget() function sets the value true. Finally, the function returns the value stored in bHavePreviewTarget. receiveArguments() Dreamweaver calls the receiveArguments() function to let the command process any arguments that pass - Adobe 38040334 | Extending Dreamweaver - Page 162
DREAMWEAVER CS3 156 Extending Dreamweaver } window.confirm(MSG_NoSecondaryBrowserDefined); } // If the user clicked OK, show the prefs dialog with the browser panel. if (result) dw.showPreferencesDialog('browsers'); } } } The function first sets the variable whichBrowser to the value that Dreamweaver - Adobe 38040334 | Extending Dreamweaver - Page 163
DREAMWEAVER CS3 157 Extending Dreamweaver After variables are initialized, the receiveArguments() function calls the user-defined function Note: The arguments attribute is ignored for dynamic menu items. Returns Dreamweaver expects a Boolean value: true if the item should be enabled; false otherwise. - Adobe 38040334 | Extending Dreamweaver - Page 164
DREAMWEAVER CS3 158 Extending Dreamweaver commandButtons() Description Defines the buttons that appear on the : function commandButtons(){ return new Array("OK" , "doCommand()" , "Cancel" , ¬ "window.close()" , "Help" , "showHelp()"); } getDynamicContent() Description Retrieves the content for the - Adobe 38040334 | Extending Dreamweaver - Page 165
DREAMWEAVER CS3 159 Extending Dreamweaver isCommandChecked() Description Determines whether to display a check mark next to the menu command. Note: The arguments attribute is ignored for dynamic menu items. Returns Dreamweaver expects a Boolean value: true if a check mark should appear next to the - Adobe 38040334 | Extending Dreamweaver - Page 166
DREAMWEAVER CS3 160 Extending Dreamweaver Note: The arguments attribute is ignored for dynamic menu items. Returns Dreamweaver expects nothing. Example function receiveArguments() for the Parameters dialog box. If this function is not defined, the window dimensions are computed automatically. - Adobe 38040334 | Extending Dreamweaver - Page 167
DREAMWEAVER CS3 161 Extending Dreamweaver Note: Do not define this function unless you want a dialog box that is larger than 640 x 480 pixels. Arguments platform The value of the platform argument is either "macintosh" or "windows", depending on the user's platform. Returns Dreamweaver expects a - Adobe 38040334 | Extending Dreamweaver - Page 168
Chapter 11: Toolbars You can create a toolbar for Adobe Dreamweaver CS3 simply by creating a file that defines the toolbar and placing that file in the Configuration/Toolbars folder. Within a toolbar file, you can define items such - Adobe 38040334 | Extending Dreamweaver - Page 169
items either through the item attributes or through a command file. Adobe-authored toolbar command files are stored in the Toolbars/MM folder. top or bottom of the frame window. In the Dreamweaver workspace, which integrates all the Dreamweaver document windows within a single parent frame, you - Adobe 38040334 | Extending Dreamweaver - Page 170
DREAMWEAVER CS3 164 Extending Dreamweaver 1 For each toolbar control item, Dreamweaver determines whether the file attribute exists. 2 If the file attribute exists, Dreamweaver calls the canAcceptCommand() function to determine whether it should enable the control in the current context of the - Adobe 38040334 | Extending Dreamweaver - Page 171
DREAMWEAVER CS3 165 Extending Dreamweaver The tooltip attribute causes Dreamweaver to display Document Title in a tooltip Writing the JavaScript code When the user interacts with the text box, it causes Dreamweaver to invoke the EditTitle.htm command file in the Toolbars/MM folder. This file - Adobe 38040334 | Extending Dreamweaver - Page 172
DREAMWEAVER CS3 166 Extending Dreamweaver function getCurrentValue() { var the Toolbars/MM folder. The MM folder is reserved for Adobe files. Create another folder inside the Toolbars folder, and abbreviated excerpt from the toolbars.xml file, illustrates the hierarchy of tags in the toolbar file - Adobe 38040334 | Extending Dreamweaver - Page 173
DREAMWEAVER CS3 167 Extending Dreamweaver - Adobe 38040334 | Extending Dreamweaver - Page 174
DREAMWEAVER CS3 168 Extending Dreamweaver • below The toolbar appears at the beginning of the row immediately below the toolbar that the relativeTo attribute specifies. Dreamweaver is not initially docked to the window; it floats above the document. Dreamweaver automatically places the toolbar so it - Adobe 38040334 | Extending Dreamweaver - Page 175
DREAMWEAVER CS3 169 Extending Dreamweaver Description Defines a single toolbar item. Toolbar items include ColdFusion, ASP, or JSP. If you do not specify showIf, the item always appears. Dreamweaver checks this property whenever the item's enabler runs; that is, according to the value of - Adobe 38040334 | Extending Dreamweaver - Page 176
DREAMWEAVER CS3 170 Extending Dreamweaver Description Inserts a separator at the current location in when you click it. It looks and acts the same as the Reference button on the Dreamweaver toolbar. Attributes id, image, tooltip, command, {showIf}, {disabledImage}, {overImage}, {label}, - Adobe 38040334 | Extending Dreamweaver - Page 177
DREAMWEAVER CS3 171 Extending Dreamweaver Example - Adobe 38040334 | Extending Dreamweaver - Page 178
DREAMWEAVER CS3 172 Extending Dreamweaver Radio buttons act the same as the Code view, Design view, and Code and Design view buttons on the Dreamweaver document toolbar. Attributes id, image, tooltip, checked, command, {showIf}, {disabledImage}, {overImage}, {label}, {file}, {domRequired}, {enabled - Adobe 38040334 | Extending Dreamweaver - Page 179
DREAMWEAVER CS3 173 Extending Dreamweaver Example - Adobe 38040334 | Extending Dreamweaver - Page 180
DREAMWEAVER CS3 174 Extending Dreamweaver Contents None. Container The toolbar tag or the toolbarset tag. Example a new color. This panel looks and acts the same as the color picker on the Dreamweaver Property inspector. You can specify a different icon to replace the default icon. Attributes id, - Adobe 38040334 | Extending Dreamweaver - Page 181
.gif" colorRect="0 12 16 16" tooltip="Text Color" domRequired="false" file="Toolbars/mine/colorExample.htm" update="onSelChange"/> DREAMWEAVER CS3 175 Extending Dreamweaver Item tag attributes The attributes for toolbar item tags have the following meanings: id="unique_id" Required. The id - Adobe 38040334 | Extending Dreamweaver - Page 182
DREAMWEAVER CS3 176 Extending Dreamweaver image="image_path" This attribute is required for buttons, check buttons folder, of the icon file that displays on the button. The icon can be in any format that Dreamweaver can render, but typically it is a GIF or JPEG file format. If an icon is specified - Adobe 38040334 | Extending Dreamweaver - Page 183
DREAMWEAVER CS3 177 Extending Dreamweaver width="number" Optional. This attribute applies only to text box, pop-up menu, and combo box items by specifying the width of the item in pixels. If you do not specify the width attribute, Dreamweaver uses a reasonable default width. Example width="150" - Adobe 38040334 | Extending Dreamweaver - Page 184
DREAMWEAVER CS3 178 Extending Dreamweaver enabled="script" Optional. As with menus, the script returns This attribute is required for pop-up menus, combo boxes, text boxes, and color pickers. Dreamweaver ignores the value attribute for other types of items. To determine what value to display for pop - Adobe 38040334 | Extending Dreamweaver - Page 185
DREAMWEAVER CS3 179 Extending Dreamweaver • onViewChange executes whenever the user switches focus the receiveArguments() function in a toolbar command file. If you do not specify the arguments attribute, Dreamweaver passes the ID of the toolbar item. In addition, pop-up menus, combo boxes, text - Adobe 38040334 | Extending Dreamweaver - Page 186
/redo.gif" disabledImage="Toolbars/images/MM/redo_dis.gif" tooltip="Redo" file="Menus/MM/Edit_Clipboard.htm" arguments="'redo'" update="onEveryIdle"/> DREAMWEAVER CS3 180 Extending Dreamweaver The toolbar command API functions In many cases where you specify a script for an attribute, you can also - Adobe 38040334 | Extending Dreamweaver - Page 187
DREAMWEAVER CS3 181 Extending Dreamweaver Example function canAcceptCommand() { return (dw.getDocumentDOM() != null); } getCurrentValue() Availability Dreamweaver MX. Description Returns the current value to display in the item. Dreamweaver calls the getCurrentValue() function for pop-up menus, - Adobe 38040334 | Extending Dreamweaver - Page 188
DREAMWEAVER CS3 182 Extending Dreamweaver The name getDynamicContent() is a misnomer because this function should be can reuse menu commands files. In the menu commands file, Dreamweaver ignores the getDynamicContent() function because the menu item is not marked as dynamic. Arguments None. Returns - Adobe 38040334 | Extending Dreamweaver - Page 189
DREAMWEAVER CS3 183 Extending Dreamweaver Returns Dreamweaver expects a string that contains a menu ID, which is defined in { menuID = 'DWBrowseOptionsPopup'; } } return menuID; } getUpdateFrequency() Availability Dreamweaver MX. Description Specifies how often to run the handlers for the enabled, - Adobe 38040334 | Extending Dreamweaver - Page 190
DREAMWEAVER CS3 184 Extending Dreamweaver Arguments None. Returns Dreamweaver expects a string that contains a comma-separated list pop-up menu. If the selected item in the menu has an ID attached, Dreamweaver passes that ID to the isCommandChecked() function instead of the value. For combo boxes, - Adobe 38040334 | Extending Dreamweaver - Page 191
DREAMWEAVER CS3 185 Extending Dreamweaver function isCommandChecked() { var bChecked = false; var style = arguments[0]; var textFormat = dw. this function returns a true value or if the function is not defined, Dreamweaver assumes that the command requires a valid DOM and synchronizes the Code view - Adobe 38040334 | Extending Dreamweaver - Page 192
DREAMWEAVER CS3 186 Extending Dreamweaver receiveArguments() Availability Dreamweaver MX. Description Processes any arguments that up menu. If the selected item in the pop-up menu has an ID attached, Dreamweaver passes that ID to the receiveArguments() function instead of the value. For combo boxes, - Adobe 38040334 | Extending Dreamweaver - Page 193
Example function showif() { var retval = false; var dom = dw.getDocumentDOM(); if(dom) { var view = dom.getView(); if(view == 'design') { retval = true; } } return retval; } DREAMWEAVER CS3 187 Extending Dreamweaver - Adobe 38040334 | Extending Dreamweaver - Page 194
Chapter 12: Reports Adobe Dreamweaver CS3 supports two types of reports: site reports and stand-alone reports. Site reports You use the reports API to create custom site reports or modify the set of prewritten reports that come with Dreamweaver. You can access site reports only through the - Adobe 38040334 | Extending Dreamweaver - Page 195
DREAMWEAVER CS3 189 Extending Dreamweaver How site reports work 1 Reports are accessible through the Site > Reports command. or the user clicks the Stop button in the bottom of the window. Dreamweaver displays the name of each file being processed and the number of files that remain to be - Adobe 38040334 | Extending Dreamweaver - Page 196
DREAMWEAVER CS3 190 Extending Dreamweaver List Images 3 At the file as List Images.js in the Configuration/Reports/HTML Reports folder. Writing the JavaScript code Dreamweaver includes the Reports.js file. You can call any of the functions in Reports.js. However, you - Adobe 38040334 | Extending Dreamweaver - Page 197
DREAMWEAVER CS3 191 Extending Dreamweaver reportItem(REP_ITEM_CUSTOM, fileURL, imgfilename, curDOM.nodeToSourceViewOffsets(tagList[i])); } } } 2 Save the file as List Images.js in the Configuration/Reports/HTML Reports folder. Stand-alone reports You can use the results window API to create a - Adobe 38040334 | Extending Dreamweaver - Page 198
DREAMWEAVER CS3 192 Extending Dreamweaver You create this extension by performing the following steps: 1 "Creating the dialog box UI" on page 192 2 "Writing the JavaScript code" on page 192 This - Adobe 38040334 | Extending Dreamweaver - Page 199
DREAMWEAVER CS3 193 Extending Dreamweaver { // Get the name of the source file. imgfilename = add buttons to dialog function commandButtons() { return new Array("OK", "stdaloneresultwin()", "Cancel", "window.close()"); } 2 Save the file as Listimages.js in the Configuration/Commands folder. The - Adobe 38040334 | Extending Dreamweaver - Page 200
DREAMWEAVER CS3 194 Extending Dreamweaver beginReporting() Availability Dreamweaver 4. Description This function is called at the path to the folder the user selected" (for example, "Folder:c:temp"). Returns Dreamweaver expects a Boolean value: true if the report runs successfully; false if target is - Adobe 38040334 | Extending Dreamweaver - Page 201
DREAMWEAVER CS3 195 Extending Dreamweaver Returns Dreamweaver expects an array that contains an even number value of the platform argument is either "macintosh" or "windows", depending on the user's platform. Returns Dreamweaver expects a string of the form "widthInPixels,heightInPixels". The - Adobe 38040334 | Extending Dreamweaver - Page 202
DREAMWEAVER CS3 196 Extending Dreamweaver Example The following instance of the windowDimensions() function sets the dimensions of the Parameters dialog box to 648 x 520 pixels: function windowDimensions(){ return "648,520"; } - Adobe 38040334 | Extending Dreamweaver - Page 203
Chapter 13: Tag libraries and editors Adobe Dreamweaver CS3 users can use tag editors to insert new tags, edit existing tags, and access reference information about tags. Dreamweaver comes with editors for the following languages: HTML, ASP.NET, CFML, JRun, and JSP. You can customize tag editors - Adobe 38040334 | Extending Dreamweaver - Page 204
how Dreamweaver organizes the VTML files by markup language: Macromedia HomeSite from Adobe users can recognize the VTML file structure, but Dreamweaver does the Dreamweaver VTML files are not used in the graphical user interface (GUI) rendering process. The following example illustrates the - Adobe 38040334 | Extending Dreamweaver - Page 205
DREAMWEAVER CS3 199 Extending Dreamweaver The taglibrary tag groups one or more tags into a tag library. When you import tags or create a new set of tags, you can group them - Adobe 38040334 | Extending Dreamweaver - Page 206
DREAMWEAVER CS3 200 Extending Dreamweaver Is the taglibrary.prefix defined? No Yes Is the tagref.prefix defined? Yes Yes Resulting tag prefix tagref.prefix tagref.prefix To define tags, Dreamweaver uses a modified version of the VTML file format. The following example demonstrates all the - Adobe 38040334 | Extending Dreamweaver - Page 207
DREAMWEAVER CS3 201 Extending Dreamweaver Attribute Description Mandatory/optional tagformat.nlbeforecontents The so they can easily access their most important tags. The TagLibraries.vtm files support the use of the taglibrary.tagchooser attribute, which points to the TagChooser.xml files - Adobe 38040334 | Extending Dreamweaver - Page 208
DREAMWEAVER CS3 202 Extending Dreamweaver - Adobe 38040334 | Extending Dreamweaver - Page 209
DREAMWEAVER CS3 203 Extending Dreamweaver Tag category.reference category.icon category.id Description hypothetical ColdFusion tag designed to extract the current temperature from a weather database, to illustrate the steps necessary to create a new tag editor. The attributes for the cfweather - Adobe 38040334 | Extending Dreamweaver - Page 210
and Settings\\Application Data\Adobe\¬ Dreamweaver 9\Configuration Note: In Windows XP, this folder may be inside a hidden folder. For Mac OS X platforms: :Users::Library:Application Support:Adobe:¬ Dreamweaver 9:Configuration If Dreamweaver cannot find the TagLibraries - Adobe 38040334 | Extending Dreamweaver - Page 211
DREAMWEAVER CS3 205 Extending Dreamweaver < in the Configuration/Taglibraries/CFML folder. Using the tag definition file, Dreamweaver can perform code hinting, code completion, and tag formatting functionality for - Adobe 38040334 | Extending Dreamweaver - Page 212
DREAMWEAVER CS3 206 Extending Dreamweaver function initializeUI() { // define two arrays for the 2 Verify that the tag editor is working by performing the following steps: a Launch Dreamweaver. b Type cfweather in Code view. c Right click on the tag. d Select Edit Tag cfweather from - Adobe 38040334 | Extending Dreamweaver - Page 213
DREAMWEAVER CS3 207 Extending Dreamweaver Adding a tag to Tag Chooser To add the cfweather tag to of an implementation, see "Creating a tag editor UI" on page 205. inspectTag() Availability Dreamweaver MX. Description The function is called when the tag editor first appears. The function receives as - Adobe 38040334 | Extending Dreamweaver - Page 214
DREAMWEAVER CS3 208 Extending Dreamweaver If the editor contains a text field for editing object. Arguments tag • The tag argument is the DOM node of the tag being edited. Returns Dreamweaver expects nothing. Example Continuing the cfweather example, in the following code, if the user changes the ZIP - Adobe 38040334 | Extending Dreamweaver - Page 215
function applyTag(tag) { tag.zip = document.forms[0].zip.value } DREAMWEAVER CS3 209 Extending Dreamweaver - Adobe 38040334 | Extending Dreamweaver - Page 216
Chapter 14: Property inspectors The Property inspector is perhaps the most familiar floating panel in the Adobe Dreamweaver CS3 interface. It is indispensable for defining, reviewing, and changing the name, size, appearance, and other attributes of the selection as well as for launching internal - Adobe 38040334 | Extending Dreamweaver - Page 217
DREAMWEAVER CS3 211 Extending Dreamweaver • The serverModel element specifies that Dreamweaver should load this Property inspector only this inspector should be used only when no others can inspect the selection; 10 indicates that this inspector takes precedence over all others that can inspect the - Adobe 38040334 | Extending Dreamweaver - Page 218
DREAMWEAVER CS3 212 Extending Dreamweaver 3 For the first tag that has one or more inspectors, Dreamweaver calls each inspector's canInspectSelection() function. If this function returns the value false, Dreamweaver no longer considers the inspector a candidate for inspecting the selection. 4 If - Adobe 38040334 | Extending Dreamweaver - Page 219
DREAMWEAVER CS3 213 Extending Dreamweaver 4 To specify what appears in the Property inspector, add the following between the opening and closing body tags: - Adobe 38040334 | Extending Dreamweaver - Page 220
DREAMWEAVER CS3 214 Extending Dreamweaver function inspectSelection(){ // Get the DOM of the current document. var theDOM = dw.getDocumentDOM(); // Get the selected node. var theObj = theDOM.getSelectedNode(); // Get the value of - Adobe 38040334 | Extending Dreamweaver - Page 221
DREAMWEAVER CS3 215 Extending Dreamweaver 5 Save the file as marquee.js in the Configuration/ /Inspectors. In general, you can save images for Property inspectors in any format that Dreamweaver supports. Testing the Property inspector Finally, you can test the Property inspector. To test the Property - Adobe 38040334 | Extending Dreamweaver - Page 222
DREAMWEAVER CS3 216 Extending Dreamweaver Example The following instance of the canInspectSelection() function returns a true value if the selection contains the CLASSID attribute, and the value of that attribute is "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" (the class ID for Adobe Flash Player): - Adobe 38040334 | Extending Dreamweaver - Page 223
function inspectSelection(){ var dom = dreamweaver.getDocumentDOM(); var theObj = dom.getSelectedNode(); document.forms[0].keywords.value = theObj.getAttribute("content"); } DREAMWEAVER CS3 217 Extending Dreamweaver - Adobe 38040334 | Extending Dreamweaver - Page 224
files that reside in the Configuration/Floaters folder inside the Adobe Dreamweaver CS3 application folder. The body section of a floating panel file Dreamweaver has several built-in floating panels that are accessible from the Window menu. (These built-in panels are part of the core Dreamweaver - Adobe 38040334 | Extending Dreamweaver - Page 225
between the opening and closing body tags in the document when it is clicked.) Floating panels support two special events on the body tag: onShow() and onHide(). 5 When the user quits Dreamweaver, the current visibility, position, and tab grouping of the floating panel are saved. The next time - Adobe 38040334 | Extending Dreamweaver - Page 226
DREAMWEAVER CS3 220 Extending Dreamweaver A simple floating panel example In this example, you create a Script Editor extension that creates a floating panel to display the JavaScript code that underlies a selected script - Adobe 38040334 | Extending Dreamweaver - Page 227
DREAMWEAVER CS3 221 Extending Dreamweaver visibility: visible"> - Adobe 38040334 | Extending Dreamweaver - Page 228
DREAMWEAVER CS3 222 Extending Dreamweaver The selectionChanged() function first calls the dw.getDocumentDOM() function to get the Document Object Model (DOM) for the user's document. It then calls the getSelectedNode() - Adobe 38040334 | Extending Dreamweaver - Page 229
DREAMWEAVER CS3 223 Extending Dreamweaver if (theNode.nodeType == Node.ELEMENT_NODE && ¬ theNode.tagName == "SCRIPT"){ document. it visible. The most obvious place from which to invoke the Script Editor is from the Window menu, which is defined in the menus.xml file. You need to create the menuitem - Adobe 38040334 | Extending Dreamweaver - Page 230
DREAMWEAVER CS3 224 Extending Dreamweaver If you select a script marker in Design view for the current document and then select the Script Editor menu item, Dreamweaver of the functions in this section operate only on the Windows operating system. The description of the function indicates whether - Adobe 38040334 | Extending Dreamweaver - Page 231
DREAMWEAVER CS3 225 Extending Dreamweaver documentEdited() Description This function is called when the floating if you require it because its existence impacts performance. Arguments None. Returns Dreamweaver expects nothing. Example The following example of the documentEdited() function scans the - Adobe 38040334 | Extending Dreamweaver - Page 232
DREAMWEAVER CS3 226 Extending Dreamweaver Example getDockingSide() { return dock_side = "left top"; } initialPosition() Description panel appears, it should be 420 pixels from the left and 20 pixels from the top in Windows, and 390 pixels from the left side of the screen and 20 pixels from the top - Adobe 38040334 | Extending Dreamweaver - Page 233
DREAMWEAVER CS3 227 Extending Dreamweaver function initialTabs(){ return "scriptEditor"; } isATarget() Availability Dreamweaver MX (Windows only). Description Specifies whether other panels can dock to this floating panel. If the isATarget() function is not specified, Dreamweaver prevents other - Adobe 38040334 | Extending Dreamweaver - Page 234
DREAMWEAVER CS3 228 Extending Dreamweaver Returns Dreamweaver expects a Boolean value: true if the user can absolutely require it because its existence impacts performance. Arguments None. Returns Dreamweaver expects nothing. Example The following example of selectionChanged() shows a different - Adobe 38040334 | Extending Dreamweaver - Page 235
DREAMWEAVER CS3 229 Extending Dreamweaver To help avoid performance penalties, use the setTimeout() function. As in the browsers, the setTimeout() function takes two arguments: the JavaScript to be called and - Adobe 38040334 | Extending Dreamweaver - Page 236
). The browser determines which HTML elements accept which events. Files that list events that each browser supports are stored in the Configuration/Behaviors/Events folder within the Adobe Dreamweaver CS3 application folder. Actions are the part of a behavior that you can control; when you write - Adobe 38040334 | Extending Dreamweaver - Page 237
DREAMWEAVER CS3 231 Extending Dreamweaver How Behaviors work When a user selects an HTML element in a Dreamweaver document and clicks the Plus (+) button on the Behaviors panel, the following events occur: 1 Dreamweaver onMouseOver="window.status='This is a link'; return true"). But if Dreamweaver - Adobe 38040334 | Extending Dreamweaver - Page 238
DREAMWEAVER CS3 232 Extending Dreamweaver To get around this limitation, set the document.MM_returnValue variable to the desired return value within the string that the behaviorFunction() function returns. This setting causes Dreamweaver to insert return document.MM_returnValue at the end of the - Adobe 38040334 | Extending Dreamweaver - Page 239
DREAMWEAVER CS3 233 Extending Dreamweaver function canAcceptBehavior(){ return true; } // Return the name of the to the Navigator and // IE URLs function browseForURLs(whichButton){ var theURL = dreamweaver.browseForFileURL(); if (whichButton == "nsURL"){ document.theForm.nsURL.value = theURL; - Adobe 38040334 | Extending Dreamweaver - Page 240
DREAMWEAVER CS3 234 Extending Dreamweaver Go to this URL if the browser is ¬ - Adobe 38040334 | Extending Dreamweaver - Page 241
DREAMWEAVER CS3 235 Extending Dreamweaver - Adobe 38040334 | Extending Dreamweaver - Page 242
DREAMWEAVER CS3 236 Extending Dreamweaver //--> - Adobe 38040334 | Extending Dreamweaver - Page 243
DREAMWEAVER CS3 237 Extending Dreamweaver Example The following example of the applyBehavior() function returns a call to the MM_openBrWindow() function and passes user-specified parameters (the height and width of the window; whether the window should have scroll bars, a toolbar, a location bar, - Adobe 38040334 | Extending Dreamweaver - Page 244
DREAMWEAVER CS3 238 Extending Dreamweaver The following example is equivalent to the preceding behaviorFunction() declaration and is the method used to declare the behaviorFunction() function in all behaviors that come with Dreamweaver: function MM_popupMsg(theMsg){ //v1.0 alert(theMsg); } function - Adobe 38040334 | Extending Dreamweaver - Page 245
DREAMWEAVER CS3 239 Extending Dreamweaver displayHelp() Description If this function is defined, a Help button appears below the OK and Cancel buttons in the Parameters dialog box. This function is called when the user clicks the Help button. Arguments None. Returns Dreamweaver expects nothing. - Adobe 38040334 | Extending Dreamweaver - Page 246
DREAMWEAVER CS3 240 Extending Dreamweaver This argument is the string that the applyBehavior() function returns. Returns Dreamweaver is downloaded from or window, and the list of window 10 arguments: function identifyBehaviorArguments(fnCallStr) { var listOfArgTypes; var itemArray = dreamweaver - Adobe 38040334 | Extending Dreamweaver - Page 247
DREAMWEAVER CS3 241 Extending Dreamweaver // reference, a dependent URL, and perhaps a property value // such as "show" (); return document.MM_returnValue;"', and you add a new behavior from the behavior menu, Dreamweaver calls inspectBehavior() as soon as the new behavior UI pops up, and passes an - Adobe 38040334 | Extending Dreamweaver - Page 248
DREAMWEAVER CS3 242 Extending Dreamweaver Note: For more information about the unescQuotes() function platform The value of the argument is either "macintosh" or "windows", depending on the user's platform. Returns Dreamweaver expects a string of the form "widthInPixels,heightInPixels". The returned - Adobe 38040334 | Extending Dreamweaver - Page 249
Server behaviors Adobe Dreamweaver CS3 provides Data Manager functions" in the Dreamweaver API Reference. Dreamweaver currently supports server behaviors extensions that add an extension, use the dwscripts.applySB() function to instruct Dreamweaver to read the EDML files, retrieve the components of - Adobe 38040334 | Extending Dreamweaver - Page 250
DREAMWEAVER CS3 244 Extending Dreamweaver Participants Your server behaviors extension inserts code blocks into the user's a Dreamweaver-specific extension, Dreamweaver creates several files (EDML and HTML script files) that support inserting the server behavior code into a Dreamweaver document - Adobe 38040334 | Extending Dreamweaver - Page 251
DREAMWEAVER CS3 245 Extending Dreamweaver Participant files A participant represents a single code block on the page, such as a server tag, an HTML tag, or an attribute. A participant file must be listed in a group file to be available to a Dreamweaver document author. Several group files can use a - Adobe 38040334 | Extending Dreamweaver - Page 252
DREAMWEAVER CS3 246 Extending Dreamweaver • "Creating the dynamic page document" on page 246 • "Defining new server behavior: Note: If the Server Behaviors panel is not open and visible, select the Window > Server Behaviors menu option. 1 In the Server Behaviors panel, select the Plus (+) button, - Adobe 38040334 | Extending Dreamweaver - Page 253
DREAMWEAVER CS3 247 Extending Dreamweaver • A script file: Hello World.htm Note: If you are working in a Behaviors panel shows the Dynamic Attribute block and the Dynamic Textfield. To correct this problem, the analyzeServerBehavior() functions need to delete all but one of these redundant server - Adobe 38040334 | Extending Dreamweaver - Page 254
DREAMWEAVER CS3 248 Extending Dreamweaver If you do not want a file that is in the is not a number, Boolean value, or string is lost. When the user uses the Paste command, Dreamweaver unpacks the contents of the Clipboard and generates a new server behavior object. The new object is identical - Adobe 38040334 | Extending Dreamweaver - Page 255
DREAMWEAVER CS3 249 Extending Dreamweaver One purpose of the analyzeServerBehavior() function is to finish point appears in the Server Behaviors panel, which alerts the user that a problem exists. Similarly, when the analyzeServerBehavior() function is called for DynamicText2, the function - Adobe 38040334 | Extending Dreamweaver - Page 256
DREAMWEAVER CS3 250 Extending Dreamweaver canApplyServerBehavior() Availability Dreamweaver UltraDev 1. Description Determines whether a behavior can be applied. Dreamweaver calls this function before the Server Behaviors dialog box appears. If this function returns a true value, the Server - Adobe 38040334 | Extending Dreamweaver - Page 257
DREAMWEAVER CS3 251 Extending Dreamweaver deleteServerBehavior() Availability Dreamweaver UltraDev 1. Description Removes the function is called when the user clicks the Help button. Arguments None. Returns Dreamweaver expects nothing. Example // the following instance of displayHelp() opens // in a - Adobe 38040334 | Extending Dreamweaver - Page 258
DREAMWEAVER CS3 252 Extending Dreamweaver The four required properties are incomplete, participants, title, and selectedNode. You can set additional properties as necessary. For more information, see "dwscripts.findSBs()" on page 253 and dreamweaver.getParticipants() in the Dreamweaver API Reference - Adobe 38040334 | Extending Dreamweaver - Page 259
DREAMWEAVER CS3 253 Extending Dreamweaver Arguments behavior The behavior JavaScript object represents the behavior. Returns Dreamweaver expects a Boolean value: true if the behavior pastes successfully from the Clipboard; false otherwise. Server behavior implementation functions These functions can - Adobe 38040334 | Extending Dreamweaver - Page 260
DREAMWEAVER CS3 254 Extending Dreamweaver Description Inserts or updates runtime code for the server behavior. Dreamweaver). Description Deletes all the participants of the sbObj server behavior instance. The entire participant is deleted, unless the EDML file indicates special delete instructions - Adobe 38040334 | Extending Dreamweaver - Page 261
DREAMWEAVER CS3 255 Extending Dreamweaver Example The following example deletes all the participants of are working with legacy server behaviors, see the earlier versions of the Extending Dreamweaver manuals. Regular expressions You must understand regular expressions as they are implemented in - Adobe 38040334 | Extending Dreamweaver - Page 262
DREAMWEAVER CS3 256 Extending Dreamweaver - Adobe 38040334 | Extending Dreamweaver - Page 263
server behavior processing the current server behavior targets. For Dreamweaver CS3, the version number is 9. If no version is specified, Dreamweaver assumes version 7. For this release of Dreamweaver, all groups and participants that the Server Behavior Builder creates have the version attribute - Adobe 38040334 | Extending Dreamweaver - Page 264
DREAMWEAVER CS3 258 Extending Dreamweaver Required No. Value The value is the exact name (without , the Repeat Region server behavior is designed for the standard Recordset.htm data source. If Dreamweaver is extended to support a new type of data source (such as a COM object), you can set dataSource - Adobe 38040334 | Extending Dreamweaver - Page 265
DREAMWEAVER CS3 259 Extending Dreamweaver Parent group Type Attribute. Required No. Value The value is a unique string that determines which group to apply, as shown in the following example: - Adobe 38040334 | Extending Dreamweaver - Page 266
DREAMWEAVER CS3 260 Extending Dreamweaver Description This tag contains an array of groupParticipant declarations. Parent group Type Block tag. Required Yes. attributes The following items are valid attributes - Adobe 38040334 | Extending Dreamweaver - Page 267
DREAMWEAVER CS3 261 Extending Dreamweaver Required Yes (at least one). attributes The following items are valid attributes of the groupParticipant tag. name Description This attribute names a particular participant to - Adobe 38040334 | Extending Dreamweaver - Page 268
server behavior processing the current server behavior targets. For Dreamweaver CS3, the version number is 9. If no version is specified, Dreamweaver assumes version 7. For this release of Dreamweaver, all groups and participants that the Server Behavior Builder creates have the version attribute - Adobe 38040334 | Extending Dreamweaver - Page 269
DREAMWEAVER CS3 263 Extending Dreamweaver Type Attribute. Required No. Description This tag is a simple search string that is used for performance reasons. It cannot be a regular expression. If the - Adobe 38040334 | Extending Dreamweaver - Page 270
DREAMWEAVER CS3 264 Extending Dreamweaver Value The value is the text to insert in the document. If and repeating code blocks, see "Adding Custom Server Behaviors" in Getting Started with Dreamweaver. attributes The following items are valid attributes of the insertText tag. location - Adobe 38040334 | Extending Dreamweaver - Page 271
DREAMWEAVER CS3 265 Extending Dreamweaver • The replaceSelection value replaces the current selection with the text. If there is no selection, it inserts the text at the end of the body - Adobe 38040334 | Extending Dreamweaver - Page 272
DREAMWEAVER CS3 266 Extending Dreamweaver Value The tagtype_Tag value is a user-specified name for the node parameter that passes with the parameter object to the dwscripts.applySB() function. For example, - Adobe 38040334 | Extending Dreamweaver - Page 273
DREAMWEAVER CS3 267 Extending Dreamweaver Type Attribute. Required Yes. Values directive, tag+tagName, tag+*, comment, text • The directive value searches all server directives (server-specific tags). For ASP and JSP, - Adobe 38040334 | Extending Dreamweaver - Page 274
DREAMWEAVER CS3 268 Extending Dreamweaver Type Block tag. Required Yes. Values searchString, /regularExpression/, • The searchString value is a simple search string that is case-sensitive. It cannot be used to - Adobe 38040334 | Extending Dreamweaver - Page 275
DREAMWEAVER CS3 269 Extending Dreamweaver The parameter names should match the ones that are specified in the insertion text and the update parameters. Parent searchPattern Type Attribute. Required Yes. Values - Adobe 38040334 | Extending Dreamweaver - Page 276
DREAMWEAVER CS3 270 Extending Dreamweaver This example indicates that only the value of the ACTION attribute of FORM tags should be searched. If that attribute is not defined, the tag - Adobe 38040334 | Extending Dreamweaver - Page 277
DREAMWEAVER CS3 271 Extending Dreamweaver Description This optional advanced feature lets you update the participant precisely. Without this tag, the participant is updated automatically by replacing the entire participant - Adobe 38040334 | Extending Dreamweaver - Page 278
DREAMWEAVER CS3 272 Extending Dreamweaver /(\b)\w+(\.Field\.Items)/ /(\bItems\(")\w+("\))/ The literal parentheses, as well as other special regular expression characters, are escaped by - Adobe 38040334 | Extending Dreamweaver - Page 279
DREAMWEAVER CS3 273 Extending Dreamweaver Values The value is the exact name of a parameter that is used in the insertion text. In the following example, if the insertion text contains - Adobe 38040334 | Extending Dreamweaver - Page 280
DREAMWEAVER CS3 274 Extending Dreamweaver • The attribute+attribName value, when applied to tags, removes only the Required Yes. Description This tag contains a list of translation instructions where each instruction indicates where to search for the participant and what to do with the - Adobe 38040334 | Extending Dreamweaver - Page 281
DREAMWEAVER CS3 275 Extending Dreamweaver Type Block tag. Required No. Description This tag contains a single translation instruction that includes the location for the participant, what type of translation to perform, and the content that should replace the participant text. Parent - Adobe 38040334 | Extending Dreamweaver - Page 282
DREAMWEAVER CS3 276 Extending Dreamweaver Required No. translationType Description This attribute indicates the type if you specify dynamic data, any data that is translated should behave the same as Dreamweaver dynamic data; that is, it should have the dynamic data placeholder look in the Design - Adobe 38040334 | Extending Dreamweaver - Page 283
DREAMWEAVER CS3 277 Extending Dreamweaver Description This optional tag can be inserted at the beginning of the translation section. This tag lets certain other - Adobe 38040334 | Extending Dreamweaver - Page 284
DREAMWEAVER CS3 278 Extending Dreamweaver Required Yes (at least one). Values The attributeName="attributeValue" specification sets an attribute to a value. Typically, the attribute name is fixed, and the value contains - Adobe 38040334 | Extending Dreamweaver - Page 285
DREAMWEAVER CS3 279 Extending Dreamweaver Values The tagName value is a valid tag name; it should match a search patterns In order to update or delete server behaviors, you must provide a way for Dreamweaver to find each instance in a document. This requires a quickSearch tag and at least one - Adobe 38040334 | Extending Dreamweaver - Page 286
DREAMWEAVER CS3 280 Extending Dreamweaver The search string is defined as a regular expression by starting and ending with a slash (/) and is followed by i, which means that it is not case- - Adobe 38040334 | Extending Dreamweaver - Page 287
DREAMWEAVER CS3 281 Extending Dreamweaver Test The following example inserts two - Adobe 38040334 | Extending Dreamweaver - Page 288
DREAMWEAVER CS3 282 Extending Dreamweaver Now there are two identical instances of each participant, which is allowed within the HTML. They are matched by the order in which they occur in the document. The following example shows a matching problem resolution Dreamweaver supports the following - Adobe 38040334 | Extending Dreamweaver - Page 289
DREAMWEAVER CS3 283 Extending Dreamweaver In resolving a searchPatterns tag, Dreamweaver uses the following algorithm: 1 Look for the fixing, and so on occurs in the C layer. In the C layer, Dreamweaver internally splits the document into directives (straight text) and tags (parsed into an - Adobe 38040334 | Extending Dreamweaver - Page 290
DREAMWEAVER CS3 284 Extending Dreamweaver The search patterns fail because they are looking for a parenthesis is deleted, the resulting tag is Link Text, which no longer appears as a link in Dreamweaver. It might be preferable to delete only the attribute value, which is done by adding the - Adobe 38040334 | Extending Dreamweaver - Page 291
DREAMWEAVER CS3 285 Extending Dreamweaver Avoiding conflicts with share-in-memory JavaScript files If several HTML files reference a particular JavaScript file, Dreamweaver loads the JavaScript into a central location where the HTML files can share the same JavaScript source. These files contain the - Adobe 38040334 | Extending Dreamweaver - Page 292
Adobe Dreamweaver CS3 Data Sources API functions let you add data sources, which appear in the Plus (+) menu in the Bindings panel (for related information, see the function dreamweaver.dbi.getDataSources() in the Dreamweaver the supporting JavaScript files. Defines the code that Dreamweaver inserts - Adobe 38040334 | Extending Dreamweaver - Page 293
DREAMWEAVER CS3 287 Extending Dreamweaver The following steps describe the process that is involved in adding dynamic data: 1 When the user clicks the Plus (+) menu in the Bindings panel, a pop-up menu appears. To determine the contents of the menu, Dreamweaver first looks for a DataSources.xml file - Adobe 38040334 | Extending Dreamweaver - Page 294
DREAMWEAVER CS3 288 Extending Dreamweaver Dreamweaver calls the inspectDynamicDataRef() function to convert also tells Dreamweaver where to find the supporting JavaScript files for the data source implementation. When a user clicks on the Bindings Plus (+) menu, Dreamweaver searches the DataSources - Adobe 38040334 | Extending Dreamweaver - Page 295
DREAMWEAVER CS3 289 Extending Dreamweaver To create the data source definition file: 1 Create a new blank file source, the name of the supporting script files, and the code for the working Dreamweaver document, you need to specify the JavaScript functions for Dreamweaver to provide the user with the - Adobe 38040334 | Extending Dreamweaver - Page 296
DREAMWEAVER CS3 290 Extending Dreamweaver To create the JavaScript file: 1 Create a new blank file. 2 Enter the following: GLOBALS VARS var MyDatasource_FILENAME = "REQ_D.gif"; var DATASOURCELEAF_FILENAME = "DSL_D.gif"; API function addDynamicSource() { - Adobe 38040334 | Extending Dreamweaver - Page 297
DREAMWEAVER CS3 291 Extending Dreamweaver } } return retList; } function generateDynamicSourceBindings(sourceName) { var retVal = new Array(); var siteURL = dw.getSiteRoot(); // For localized object name... if (sourceName != "MyDatasource") { sourceName = "MyDatasource"; } if (siteURL.length) { - Adobe 38040334 | Extending Dreamweaver - Page 298
DREAMWEAVER CS3 292 Extending Dreamweaver { retArray[0] = params.sourceName; retArray[1] = params.bindingName; } } return retArray; } function work" on page 126). The command definition file tells Dreamweaver the location of the supporting implementation JavaScript files as well as the form for the - Adobe 38040334 | Extending Dreamweaver - Page 299
DREAMWEAVER CS3 293 Extending Dreamweaver - Adobe 38040334 | Extending Dreamweaver - Page 300
DREAMWEAVER CS3 294 Extending Dreamweaver 3 Save the file as MyDatasource_Variable.js in the Configuration/Commands folder. Testing the new data source You can now open Dreamweaver (or restart it if you already have it open), and open a ColdFusion file or create a new one. To test your new data - Adobe 38040334 | Extending Dreamweaver - Page 301
DREAMWEAVER CS3 295 Extending Dreamweaver 4 Drag the variable to your document, and Dreamweaver inserts the appropriate code and also generate and inspect dynamic data objects. addDynamicSource() Availability Dreamweaver UltraDev 1. Description This function adds a dynamic data source. Because - Adobe 38040334 | Extending Dreamweaver - Page 302
DREAMWEAVER CS3 296 Extending Dreamweaver Description Dreamweaver calls this function when a user selects a data source in the tree and clicks the Minus (-) button. For example, in Dreamweaver, if the selection is a recordset or command, the deleteDynamicSource() function calls the dw. - Adobe 38040334 | Extending Dreamweaver - Page 303
DREAMWEAVER CS3 297 Extending Dreamweaver Description This function is called when the user double-clicks data source file has an implementation of the findDynamicSources() function. When Dreamweaver refreshes the tree, Dreamweaver reads through all the files in the DataSources folder and calls the - Adobe 38040334 | Extending Dreamweaver - Page 304
DREAMWEAVER CS3 298 Extending Dreamweaver generateDynamicDataRef() Availability Dreamweaver UltraDev 1. Description This function the name of the top-level node whose children you want to return. Returns Dreamweaver expects an array of JavaScript objects where each object can have as many as four - Adobe 38040334 | Extending Dreamweaver - Page 305
DREAMWEAVER CS3 299 Extending Dreamweaver Note: A JavaScript class that defines these properties exists in the DataSourceClass.js file, which is located in the Configuration/Shared/Common/Scripts folder. inspectDynamicDataRef() Availability Dreamweaver UltraDev 1. Description This function - Adobe 38040334 | Extending Dreamweaver - Page 306
Server formats "Data sources" on page 286, discusses how Adobe Dreamweaver CS3 inserts dynamic data into a user's document by adding a is the formatted dynamic data that is finally inserted in the user's document. Dreamweaver users can format data with built-in formats, create new formats that are - Adobe 38040334 | Extending Dreamweaver - Page 307
DREAMWEAVER CS3 301 Extending Dreamweaver How data formatting works All format files reside in the Configuration/ServerFormats/currentServerModel folder. Each subfolder contains one XML file and multiple HTML files. The Formats.xml file describes all the choices in the Format menu. Dreamweaver - Adobe 38040334 | Extending Dreamweaver - Page 308
DREAMWEAVER CS3 302 Extending Dreamweaver The Edit Format List Plus (+) menu If you do not want a . The deleteFormat() function removes the support scripts from the document. • When the user clicks the Plus (+) button in the Edit Format List dialog box, Dreamweaver displays a menu that contains all - Adobe 38040334 | Extending Dreamweaver - Page 309
DREAMWEAVER CS3 303 Extending Dreamweaver The server formats API functions The server formats API consists of the following data formatting functions. applyFormat() Availability Dreamweaver UltraDev 1. Description This function can edit a user's document by adding a format function declaration to it - Adobe 38040334 | Extending Dreamweaver - Page 310
DREAMWEAVER CS3 304 Extending Dreamweaver Returns Dreamweaver expects the format object, if the function text box in the Dynamic Data or the Dynamic Text dialog box or in the Bindings panel, Dreamweaver makes two changes to the user's document: It adds the appropriate format function before the HTML - Adobe 38040334 | Extending Dreamweaver - Page 311
DREAMWEAVER CS3 305 Extending Dreamweaver • The format argument is a JavaScript object that describes . The object has a JavaScript property for each attribute of the corresponding format tag. Returns Dreamweaver expects the new value for the dynamic data object. If an error occurs, the function - Adobe 38040334 | Extending Dreamweaver - Page 312
20: Components Adobe Dreamweaver CS3 supports the creation of many of the most popular types of components. In addition, Dreamweaver lets you Dreamweaver, the Components panel assists them in using available web services, JavaBeans, and CFCs. Components from recent technologies (such as web services - Adobe 38040334 | Extending Dreamweaver - Page 313
supports web services but not JavaBeans. Macromedia ColdFusion also supports web services and CFCs. When you add a new component type to the Components panel, it must be server-model specific. For example, if a Dreamweaver the appropriate server models. 2 Add instructions, known as setup steps, which - Adobe 38040334 | Extending Dreamweaver - Page 314
DREAMWEAVER CS3 308 Extending Dreamweaver Components panel files The Configuration/Components folder has a subfolder for each implemented server model. Component files are stored in the Configuration/Components/server-model/ComponentType folder. You can add other server models and supporting server - Adobe 38040334 | Extending Dreamweaver - Page 315
so that the information is readily available as you create the extension. Dreamweaver can browse added components and display nodes in the component tree. The Components panel provides drag-and-drop support and keyboard support in Code view. Populating the tree control Use the ComponentRec property - Adobe 38040334 | Extending Dreamweaver - Page 316
DREAMWEAVER CS3 310 Extending Dreamweaver Property name Description Required/Optional toolTipText Tooltip text of the parentComponentRec argument is the componentRec object of the parent. If it is omitted, Dreamweaver expects a list of ComponentRec objects for the root node. Returns An array - Adobe 38040334 | Extending Dreamweaver - Page 317
DREAMWEAVER CS3 311 Extending Dreamweaver getContextMenuId() Availability Dreamweaver static or dynamic. Shortcut keys (accelerator keys) are supported. Arguments None. Returns A string defining the Context Menu options for the Components panel for web services associated with the ASP.NET/C# server - Adobe 38040334 | Extending Dreamweaver - Page 318
DREAMWEAVER CS3 312 Extending Dreamweaver for a common web service: function getCodeViewDropCode(componentRec) Dreamweaver MX. Description Dreamweaver calls this function if the setupStepsCompleted() function returns zero or a positive integer. This function controls the server-side setup instructions - Adobe 38040334 | Extending Dreamweaver - Page 319
DREAMWEAVER CS3 313 Extending Dreamweaver This function returns an array of the strings for Dreamweaver • For each step, the text instructions, which can include any HTML markup that as "dw.browseDocument('http://www.adobe.com')": • An "Event:SetCurSite set the Remote Development Service (RDS) user - Adobe 38040334 | Extending Dreamweaver - Page 320
DREAMWEAVER CS3 314 Extending Dreamweaver var someSteps = new Array(); someSteps.push(MM. that all the necessary steps are complete, so the instruction list does not appear. handleDesignViewDrop() Availability Dreamweaver MX. Description Handles the drop operation when the user - Adobe 38040334 | Extending Dreamweaver - Page 321
DREAMWEAVER CS3 315 Extending Dreamweaver • The toolTipText property is optional tool tip text for the property is a Boolean value that indicates whether the tree node item is expandable: if true, Dreamweaver displays the Plus (+) and Minus (-) buttons for the tree node item; if false, the - Adobe 38040334 | Extending Dreamweaver - Page 322
DREAMWEAVER CS3 316 Extending Dreamweaver • The isCodeViewDraggable property is a Boolean value that indicates whether the tree node item return true; } } } return false; } toolbarControls() Availability Dreamweaver MX. Description Every component type returns a list of toolBarButtonRec objects, - Adobe 38040334 | Extending Dreamweaver - Page 323
DREAMWEAVER CS3 317 Extending Dreamweaver Property name toolStyle enabled command menuId Description Left /right JavaScript code that returns a Boolean value (true or false). The enablers are called when the following conditions exist: • When the dreamweaver.serverComponents.refresh() function is - Adobe 38040334 | Extending Dreamweaver - Page 324
DREAMWEAVER CS3 318 Extending Dreamweaver plusButton.image = PLUSDROPBUTTONUP; plusButton.pressedImage = PLUSDROPBUTTONDOWN; plusButton.disabledImage = .push(deployWServiceButton); } //add the rebuild proxy button for windows only. //bug 45552: if(navigator.platform.charAt(0) !="M") - Adobe 38040334 | Extending Dreamweaver - Page 325
the server model API. Adobe Dreamweaver CS3 asks new users to identify server models when they first start Dreamweaver. For cases when the with Dreamweaver. (For information regarding creating new document types that are supported by your server model, see "Extensible document types in Dreamweaver" - Adobe 38040334 | Extending Dreamweaver - Page 326
argument is the Adobe document object, which is returned by the dreamweaver.getDocumentDOM() function. Returns Dreamweaver expects an integer example, the ASP server model supports .asp and .htm file extensions. This function returns an array of strings, and Dreamweaver uses these strings to populate - Adobe 38040334 | Extending Dreamweaver - Page 327
declarations. Extension developers can use this map to generate language-specific code blocks that Dreamweaver drops on the page (based on the appropriate server model for the page) when the user drags and drops a Web Services method, for example. For examples of how to write this function, see the - Adobe 38040334 | Extending Dreamweaver - Page 328
currently selected site if no user document is currently selected. Arguments None. Returns Dreamweaver expects a string that represents the supported file extensions. getServerInfo() Availability Dreamweaver MX. Description This function returns a JavaScript object that can be accessed from within - Adobe 38040334 | Extending Dreamweaver - Page 329
DREAMWEAVER CS3 323 Extending Dreamweaver Note: The Default Scripting Language list exists only in Dreamweaver 4 and earlier. For Dreamweaver MX and later, the Site Definition dialog box does not list supported scripting languages, nor does Dreamweaver use the getServerLanguages() function. - Adobe 38040334 | Extending Dreamweaver - Page 330
DREAMWEAVER CS3 324 Extending Dreamweaver Returns Dreamweaver expects an array of objects where each object contains Dreamweaver expects a string, such as "ASP_JS". getServerSupportsCharset() Availability Dreamweaver MX. Description This function returns a true value if the current server supports - Adobe 38040334 | Extending Dreamweaver - Page 331
DREAMWEAVER CS3 325 Extending Dreamweaver Arguments metaCharSetString The metaCharSetString argument is a string that holds the value of the document's "charset=" attribute. Returns Dreamweaver expects a Boolean value. getVersionArray() Availability Dreamweaver UltraDev 1, deprecated in Dreamweaver - Adobe 38040334 | Extending Dreamweaver - Page 332
markup-server-side includes, conditional JavaScript statements, or other code such as PHP3, JSP, CFML, or ASP-into code that Adobe Dreamweaver CS3 can read and display. In Dreamweaver, you can translate attributes within tags as well as entire tags or blocks of code. All data translators-block/tag - Adobe 38040334 | Extending Dreamweaver - Page 333
DREAMWEAVER CS3 327 Extending Dreamweaver Note: To prevent JavaScript errors from interfering with startup, errors in any translator file are reported only after all translators are loaded. For more information on debugging translators, see "Finding bugs in your translator" on page 333. Dreamweaver - Adobe 38040334 | Extending Dreamweaver - Page 334
" in Using Dreamweaver. When Dreamweaver handles preserving the original server markup, the translator generates a valid attribute value that can be viewed in the Document window. (If you use server markup only for attributes that do not have a uservisible effect, you do not need a translator - Adobe 38040334 | Extending Dreamweaver - Page 335
DREAMWEAVER CS3 329 Extending Dreamweaver Inspecting translated attributes When server markup specifies a single attribute and the attribute is represented in a Property inspector, Dreamweaver a particular attribute, Dreamweaver displays the translated value in the Document window. You must decide - Adobe 38040334 | Extending Dreamweaver - Page 336
DREAMWEAVER CS3 330 Extending Dreamweaver • The tagNameOrType value is a string that identifies TARGET="_top" HREF="/products/">products] [services] [support] [about us] [ - Adobe 38040334 | Extending Dreamweaver - Page 337
DREAMWEAVER CS3 331 Extending Dreamweaver Creating Property inspectors for locked content After you create or one of the conditions in a conditional statement). Inspecting translated content is a unique problem for several reasons: • The user might want to change the properties of the translated - Adobe 38040334 | Extending Dreamweaver - Page 338
DREAMWEAVER CS3 332 Extending Dreamweaver function inspectSelection() { var currentDOM = dw.getDocumentDOM(); var currSelection = currentDOM against making changes in a locked region. You can avoid this problem by changing the original markup and retranslating. The Property inspector for translated - Adobe 38040334 | Extending Dreamweaver - Page 339
function: function commandButtons(){ return new Array( "OK","translateMarkup(dreamweaver.¬ getDocumentPath('document'), dreamweaver.getSiteRoot(), ¬ dreamweaver.getDocumentDOM().documentElement.outerHTML); ¬ window.close()", "Cancel", "window.close()"); } 3 At the end of the translateMarkup - Adobe 38040334 | Extending Dreamweaver - Page 340
DREAMWEAVER CS3 334 Extending Dreamweaver A simple attribute translator example To better understand attribute 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 - Adobe 38040334 | Extending Dreamweaver - Page 341
DREAMWEAVER CS3 335 Extending Dreamweaver Conditional Translator * This translator handles the following statement syntaxes: * * - Adobe 38040334 | Extending Dreamweaver - Page 342
else', start); trueValue = outStr.substring(trueStart+5, falseStart); tokens = dreamweaver.getTokens(trueValue,' '); // If attAndValue is false, find out what count escape(transValue) + '"'; outStr = outStr.substring(0,end+3) + transAtt + ¬ outStr.substring(end+3); } DREAMWEAVER CS3 336 Extending - Adobe 38040334 | Extending Dreamweaver - Page 343
DREAMWEAVER CS3 337 Extending Dreamweaver // Increment the counter so that the next instance // of mmTranslatedValue will have a unique name, and // then find the next - Adobe 38040334 | Extending Dreamweaver - Page 344
DREAMWEAVER CS3 338 Extending Dreamweaver * The getTranslatorInfo() function provides information * * about the translator, including its class and name, * * the types of documents that are likely to contain the * * markup to - Adobe 38040334 | Extending Dreamweaver - Page 345
DREAMWEAVER CS3 339 Extending Dreamweaver outStr = outStr + replCode; // Copy everything after the KENT tag. var image = getImage(); // The location of the image on the local disk. var depFiles = dreamweaver.getSiteRoot() + image; // The IMG tag that will be inserted between the lock tags. var - Adobe 38040334 | Extending Dreamweaver - Page 346
DREAMWEAVER CS3 340 Extending Dreamweaver var hour = today.getUTCHours(); // The current hour in GMT, based on the // 24-hour clock. var SFhour = hour - 8; // The time in San Francisco, based on the // 24-hour clock. var platform = navigator.platform; // User's platform. All Windows >= 10 && - Adobe 38040334 | Extending Dreamweaver - Page 347
DREAMWEAVER CS3 341 Extending Dreamweaver }else{ imageRef = "images/kent_hardAtWorkOnWin.jpg"; } }else{ imageRef = "images/kent_sleeping section describes the functions used to define translators for Dreamweaver. getTranslatorInfo() Description This function provides information about the translator - Adobe 38040334 | Extending Dreamweaver - Page 348
= "htm"; transArray[4] = "stm"; transArray[5] = "html"; transArray[6] = "shtml"; transArray[7] = "2"; transArray[8] = " - Adobe 38040334 | Extending Dreamweaver - Page 349
DREAMWEAVER CS3 343 Extending Dreamweaver Description Dreamweaver performs two translation passes. The first pass goes through all the translators and calls the C function translateASP(), which is contained in a dynamic link library (DLL) (Windows) or a code library (Macintosh) called ASPTrans: - Adobe 38040334 | Extending Dreamweaver - Page 350
DREAMWEAVER CS3 344 Extending Dreamweaver function translateMarkup(docName, siteRoot, docContent){ var translatedString = ""; if ( . liveDataTranslateMarkup() Availability Dreamweaver UltraDev 1. Description This function translates documents when users are using the Live Data window. When the user - Adobe 38040334 | Extending Dreamweaver - Page 351
extensibility The C-level extensibility mechanism lets you implement Adobe Dreamweaver CS3 extensibility files using a combination of JavaScript and Dreamweaver object that inserts the contents of a userspecified file into the current document. Because client-side JavaScript does not provide support - Adobe 38040334 | Extending Dreamweaver - Page 352
DREAMWEAVER CS3 346 Extending Dreamweaver The readContentsOfFile() function accepts a list with the JavaScript interpreter by including a MM_Init() function in your library. When Dreamweaver loads the library at startup, it calls the MM_Init() function to get the following - Adobe 38040334 | Extending Dreamweaver - Page 353
DREAMWEAVER CS3 347 Extending Dreamweaver void MM_Init() { JS_DefineFunction("readContentsOfFile", readContentsOfFile, 1); } Your library must include exactly one instance of the following macro: /* MM_STATE is a macro that expands to some definitions that are * needed to interact with Dreamweaver. - Adobe 38040334 | Extending Dreamweaver - Page 354
DREAMWEAVER CS3 348 Extending Dreamweaver typedef struct jsval jsval An opaque data structure that argument is case-sensitive. Typically, this function is called from the MM_Init() function, which Dreamweaver calls during startup. Arguments char *name, JSNative call, unsigned int nargs • The name - Adobe 38040334 | Extending Dreamweaver - Page 355
DREAMWEAVER CS3 349 Extending Dreamweaver • The nargs argument is the number of arguments that the function expects to receive. Returns A Boolean value: JS_TRUE indicates success; JS_FALSE indicates failure. char *JS_ValueToString() - Adobe 38040334 | Extending Dreamweaver - Page 356
DREAMWEAVER CS3 350 Extending Dreamweaver Arguments JSContext *cx, jsval v, double *dp • The cx argument is the opaque JSContext pointer that passes to the JavaScript function. • The v argument is the JSVal - Adobe 38040334 | Extending Dreamweaver - Page 357
DREAMWEAVER CS3 351 Extending Dreamweaver Arguments JSContext *cx, char *bytes, size_t sz, jsval *vp • The cx argument is the opaque JSContext pointer that passes to the JavaScript function. • The bytes - Adobe 38040334 | Extending Dreamweaver - Page 358
DREAMWEAVER CS3 352 Extending Dreamweaver Arguments lv The lv argument is the long integer value that you want to convert to a JSVal structure. Returns A JSVal structure that contains the integer - Adobe 38040334 | Extending Dreamweaver - Page 359
DREAMWEAVER CS3 353 Extending Dreamweaver • The v argument is an optional pointer to the jsvals to be stored in the array. If the return value is not null, v is an array - Adobe 38040334 | Extending Dreamweaver - Page 360
DREAMWEAVER CS3 354 Extending Dreamweaver • The index argument is an integer index into the array. The first element is index 0, and the last element is index (length - 1). • The v argument is a - Adobe 38040334 | Extending Dreamweaver - Page 361
call and redirects it to the user Configuration folder. For example, in Windows 2000 or Windows XP, if the user asks for file:///C|/Program Files/Adobe/ Adobe Dreamweaver CS3/Configuration/Objects/Common/Table.htm, Dreamweaver searches for a Table.htm file in the C:\Documents and Settings\username - Adobe 38040334 | Extending Dreamweaver - Page 362
of files to the Snippets panel list. If a C-level extension calls the MM_ConfigFileExists() function for the file:///c|Program Files/Adobe /Adobe Dreamweaver CS3/Configuration/Snippets/javascript/onepixelborder.csn URL, it returns a value of false. Likewise, if a JavaScript extension tries to call - Adobe 38040334 | Extending Dreamweaver - Page 363
URL. Returns A Boolean value: JS_TRUE indicates success; JS_FALSE indicates failure. Example char *dwConfig = "file:///c|/Program Files/Adobe/Adobe Dreamweaver CS3/ Configuration/Extensions.txt"; int fileno = 0; if(MM_ConfigFileExists(dwConfig)) { fileno = MM_OpenConfigFile(dwConfig, "read"); } int - Adobe 38040334 | Extending Dreamweaver - Page 364
Returns -1 if the file cannot be found or does not exist. Example char *dwConfig = "file:///c|/Program Files/Adobe/Adobe Dreamweaver CS3/ Configuration/Extensions.txt"; int = fileno; if(MM_ConfigFileExists(dwConfig)) { fileno = MM_OpenConfigFile(dwConfig, "read"); } JSBool MM_GetConfigFileAttributes - Adobe 38040334 | Extending Dreamweaver - Page 365
does not exist or an error occurs while getting the attributes. Example char dwConfig = "file:///c|/Program Files/Adobe/Adobe Dreamweaver CS3/ Configuration/Extensions.txt"; unsigned long attrs; unsigned long filesize; unsigned long modtime; unsigned long createtime; MM_GetConfigAttributes(dwConfig - Adobe 38040334 | Extending Dreamweaver - Page 366
success; JS_FALSE indicates failure. Example char *dwConfig = "file:///c|/Program Files/Adobe/Adobe Dreamweaver CS3 /Configuration/Extensions.txt"; MM_CreateConfigFolder(dwConfig); JSBool MM_RemoveConfigFolder() Availability Dreamweaver MX. Description This function removes the folder and its files - Adobe 38040334 | Extending Dreamweaver - Page 367
Example char dwConfig = "file:///c:|Program Files/Adobe/Adobe Dreamweaver CS3 /Configuration/Objects/insertbar.xml"; MM_DeleteConfigFile(dwConfig); files, located in the Dreamweaver-application-folder/ Tutorial_assets/Extending folder as archives for both the Macintosh and Windows platforms: • The - Adobe 38040334 | Extending Dreamweaver - Page 368
DREAMWEAVER CS3 362 Extending Dreamweaver • The Sample.mak makefile lets you build the Sample.c source 1 Create a folder called JSExtensions in the Configuration folder within the Dreamweaver application folder. 2 Copy Sample.dll (Windows) or Sample.bundle (Macintosh) to the JSExtensions folder. 3 In - Adobe 38040334 | Extending Dreamweaver - Page 369
DREAMWEAVER CS3 363 Extending Dreamweaver 5 Save the file and restart Dreamweaver. To execute the computeSum() function, select Insert > HTML > Horizontal Rule. A dialog box that contains the number 4 (the result of computing the sum of 2 plus 2) appears. - Adobe 38040334 | Extending Dreamweaver - Page 370
folder's subfolders, and you can add custom common utilities to the ones already provided by Adobe Dreamweaver CS3. The multiple user Configuration folders installed for users on Windows XP, Windows 2000, and Mac OS X platforms also contain a Shared folder for individual customizations. For example - Adobe 38040334 | Extending Dreamweaver - Page 371
DREAMWEAVER CS3 365 Extending Dreamweaver The Common folder The Common folder has shared scripts and a base class used by CompilerASPNetCSharp and CompilerASPNVBNet but could be extended to support other compilers. Contains functions that define the return structure for "findDynamicSources()" on - Adobe 38040334 | Extending Dreamweaver - Page 372
link, add an extension to a filename, generate error messages, set Flash attributes, check a link for Flash object, and so on. Contains functions to insert Adobe Fireworks CS3 HTML code into Dreamweaver documents. Functions check whether current document is a Fireworks document, insert Fireworks - Adobe 38040334 | Extending Dreamweaver - Page 373
DREAMWEAVER CS3 367 Extending Dreamweaver File sbUtils.js setText.js sortTable.js Description Contains shared functions for use within Adobe server behaviors. The dwscripts class in the Configuration/Shared/Common/Scripts folder contains more general purpose utilities. Contains functions to escape - Adobe 38040334 | Extending Dreamweaver - Page 374
.js menuItem.js niceName.js quickString.js DREAMWEAVER CS3 368 Extending Dreamweaver Description Contains two functions, createDateID() and into a document at the insertion point. Also contains the supporting functions getHigherBlockTag() and arrContains(). The getHigherBlockTag() function gets - Adobe 38040334 | Extending Dreamweaver - Page 375
DREAMWEAVER CS3 369 Extending Dreamweaver File string.js TemplateUtils.js UI.js Description Contains a in your extension. • Fireworks The Fireworks folder has the supporting files for Fireworks integration. • UltraDev Dreamweaver maintains this folder primarily for backward compatibility, and it - Adobe 38040334 | Extending Dreamweaver - Page 376
DREAMWEAVER CS3 370 Extending Dreamweaver LIST_LINKS = new ListControl('linkPath'); and LIST_TARGETS = new ListControl('linkTarget'); With the new listControl declarations, Hyperlink.js defines two new ListControl objects. The code in the - Adobe 38040334 | Extending Dreamweaver - Page 377
123 menu commands 157 objects 116 Property inspector 215 reports 193 results window 191 server behavior 248 server formats 303 server model 319 tag editor check issues API 120 browser compatibility, detecting 120 browser profiles css-support tag 67 property tag 67 value tag 68 button object 91 button - Adobe 38040334 | Extending Dreamweaver - Page 378
177 Colors.xml file 44 combobox tag 173 command attribute 105, 179 command extensions, about 71 commandButtons() 134, 158, 194 commands adding Flash SWF files 88 adding to menus 127 menu commands 136 sample code 127 toolbar 163 user experience 126 commands API functions canAcceptCommand() 133 - Adobe 38040334 | Extending Dreamweaver - Page 379
91 conventions, in this guide 3 copyServerBehavior() 250 cssImport tag coloring 49 cssSelector tag, code coloring 49 css-support tag, code validation 67 cssValue tag, code coloring Object Model about 90 DOM Level 1 specification 91 Dreamweaver 91 tree structure 90 document types about 72 definition - Adobe 38040334 | Extending Dreamweaver - Page 380
XML 76 toolbars.xml 162 XML 91 findDynamicSources() 297 findIssue() 123 findSBs() 253 findServerBehaviors() 251 Flash SWF files, displaying in Dreamweaver 88 floating panel API functions displayHelp() 224 documentEdited() 225 getDockingSide() 225 initialPosition() 226 initialTabs() 226 isATarget - Adobe 38040334 | Extending Dreamweaver - Page 381
375 getCurrentValue() 165, 181 getDockingSide() 225 getDynamicContent() 158, 181 getElementsByAttributeName property 94, 96 getElementsByTagName() for document objects 93 for tag objects 94 getFileExtensions() 320 getIssueID() 124 getIssueName() 125 getLanguageSignatures() 321 getMenuID() 182 - Adobe 38040334 | Extending Dreamweaver - Page 382
of document objects 93 of tag objects 94 of text objects 96 number object 91 numbers tag, code coloring 54 O object object 91 objects adding Flash SWF files 88 adding to Insert bar 107 components of 99 creating 99 how files work 107 objects API functions canInsertObject() 116 displayHelp() 117 - Adobe 38040334 | Extending Dreamweaver - Page 383
stand-alone reports 191 windowDimensions() 195 reset object 91 resizeTo() 91 results window API 191 S sampleText tag, code coloring 55 scheme block delimiter coloring 57 () 325 server models about 319 extensions, about 72 service component, adding 308 setAttribute() 94 setInterval() 91 setMenuText - Adobe 38040334 | Extending Dreamweaver - Page 384
178 value tag, code validation 68 variable grid controls 84 VBScript 230 version attribute 262 vline 210 W W3C 91 whereToSearch attribute 275 width attribute 177 window object 91 window.close() 91 windowDimensions() in behavior actions 242 - Adobe 38040334 | Extending Dreamweaver - Page 385
379 in commands API 135 in menu commands 160 in objects API 119 in reports API 195 workspace about 163 layouts, customizing 23 X XML structure 256 tree view 91 XML files about 91 CodeHints.xml 32 Formats.xml 301 insertbar.xml 107 menus.xml 137 MMDocumentTypes.xml 15 SpryCodeHints.xml 33 string 76
-
1 -
2 -
3 -
4 -
5 -
6 -
7 -
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
-
37
-
38
-
39
-
40
-
41
-
42
-
43
-
44
-
45
-
46
-
47
-
48
-
49
-
50
-
51
-
52
-
53
-
54
-
55
-
56
-
57
-
58
-
59
-
60
-
61
-
62
-
63
-
64
-
65
-
66
-
67
-
68
-
69
-
70
-
71
-
72
-
73
-
74
-
75
-
76
-
77
-
78
-
79
-
80
-
81
-
82
-
83
-
84
-
85
-
86
-
87
-
88
-
89
-
90
-
91
-
92
-
93
-
94
-
95
-
96
-
97
-
98
-
99
-
100
-
101
-
102
-
103
-
104
-
105
-
106
-
107
-
108
-
109
-
110
-
111
-
112
-
113
-
114
-
115
-
116
-
117
-
118
-
119
-
120
-
121
-
122
-
123
-
124
-
125
-
126
-
127
-
128
-
129
-
130
-
131
-
132
-
133
-
134
-
135
-
136
-
137
-
138
-
139
-
140
-
141
-
142
-
143
-
144
-
145
-
146
-
147
-
148
-
149
-
150
-
151
-
152
-
153
-
154
-
155
-
156
-
157
-
158
-
159
-
160
-
161
-
162
-
163
-
164
-
165
-
166
-
167
-
168
-
169
-
170
-
171
-
172
-
173
-
174
-
175
-
176
-
177
-
178
-
179
-
180
-
181
-
182
-
183
-
184
-
185
-
186
-
187
-
188
-
189
-
190
-
191
-
192
-
193
-
194
-
195
-
196
-
197
-
198
-
199
-
200
-
201
-
202
-
203
-
204
-
205
-
206
-
207
-
208
-
209
-
210
-
211
-
212
-
213
-
214
-
215
-
216
-
217
-
218
-
219
-
220
-
221
-
222
-
223
-
224
-
225
-
226
-
227
-
228
-
229
-
230
-
231
-
232
-
233
-
234
-
235
-
236
-
237
-
238
-
239
-
240
-
241
-
242
-
243
-
244
-
245
-
246
-
247
-
248
-
249
-
250
-
251
-
252
-
253
-
254
-
255
-
256
-
257
-
258
-
259
-
260
-
261
-
262
-
263
-
264
-
265
-
266
-
267
-
268
-
269
-
270
-
271
-
272
-
273
-
274
-
275
-
276
-
277
-
278
-
279
-
280
-
281
-
282
-
283
-
284
-
285
-
286
-
287
-
288
-
289
-
290
-
291
-
292
-
293
-
294
-
295
-
296
-
297
-
298
-
299
-
300
-
301
-
302
-
303
-
304
-
305
-
306
-
307
-
308
-
309
-
310
-
311
-
312
-
313
-
314
-
315
-
316
-
317
-
318
-
319
-
320
-
321
-
322
-
323
-
324
-
325
-
326
-
327
-
328
-
329
-
330
-
331
-
332
-
333
-
334
-
335
-
336
-
337
-
338
-
339
-
340
-
341
-
342
-
343
-
344
-
345
-
346
-
347
-
348
-
349
-
350
-
351
-
352
-
353
-
354
-
355
-
356
-
357
-
358
-
359
-
360
-
361
-
362
-
363
-
364
-
365
-
366
-
367
-
368
-
369
-
370
-
371
-
372
-
373
-
374
-
375
-
376
-
377
-
378
-
379
-
380
-
381
-
382
-
383
-
384
-
385
 |
 |
EXTENDING DREAMWEAVER
ADOBE
®
DREAMWEAVER
®
CS
3