Page 2
If you access a third-party website mentioned in this guide, then you do so at your own risk. Macromedia provides these links only as a convenience, and the inclusion of the link does not imply that Macromedia endorses or accepts any responsibility for the content on those third-party sites.
CHAPTER 1 Introduction This book describes the Macromedia Dreamweaver MX 2004 framework and application programming interface (API) that lets you build extensions to Dreamweaver. Extensions typically perform the following types of tasks: • Automating changes to the user’s current document, such as inserting HTML, CFML, or JavaScript;...
To install an extension, use the following procedure: Download and install the Extension Manager, which is available on the Macromedia Downloads website (www.macromedia.com/software/downloads). Log on to the Macromedia Exchange website (www.macromedia.com/exchange).
375. • Integration of Customizing Dreamweaver content. Material formerly available only as a separate document download from the Macromedia website is now integrated into this book. Documentation Changes Extending Dreamweaver MX has been divided into two books: Extending Dreamweaver and the Dreamweaver API Reference.
For information on the new functions that have been added to the Utility API and the JavaScript API, see the Dreamweaver API Reference. Macromedia Press Improve your Dreamweaver skills with books from Macromedia Press. Check out the latest content written by the experts. See www.macromedia.com/go/dw2004_help_mmp. Removed Features In Dreamweaver MX 2004, several features have been removed.
Conventions used in this guide The following typographical conventions are used in this guide: • font indicates code fragments and API literals, including class names, method names, Code function names, type names, scripts, SQL statements, and both HTML and XML tag and attribute names.
PART I Overview Learn the fundamental concepts of the Macromedia Dreamweaver MX 2004 interface and how to customize and extend Dreamweaver to suit your web development needs. These fundamental concepts include the Dreamweaver folders, extension APIs, Dreamweaver interface components, the Dreamweaver Document Object Model (DOM), and Dreamweaver document types.
CHAPTER 2 Extending Dreamweaver The following features of Macromedia Dreamweaver MX 2004 let you create extensions: • An HTML parser (also called a renderer), which makes it possible to design user interfaces (UIs) for extensions using form fields, layers, images, and other HTML elements.
Tag Library and Editor extensions work with the associated tag library files. Tag Library and Editor extensions can modify attributes of existing Tag Dialogs, create new Tag Dialogs, and add tags to the tag library. Tag Library and Editor extension files are stored in the Configuration/ TagLibraries folder.
You can use the files in the Dreamweaver Configuration folder as examples, but these files are generally more complex than the average extension that is available on the Macromedia Exchange website. For more information on the contents of each subfolder within the Configuration folder, see the Configuration_ReadMe.htm file.
Page 24
The Configuration/Shared folder does not correspond to a specific extension type. It is the central repository for utility functions, classes, and images that are used by more than one extension. The files in the Configuration/Shared/Common folder are designed to be useful to a broad range of extensions.
Multiuser Configuration folders For the multiuser operating systems of Windows XP, Windows 2000, and Macintosh OS X, Dreamweaver creates a separate Configuration folder for each user in addition to the Dreamweaver Configuration folder. Any time Dreamweaver or a JavaScript extension writes to the Configuration folder, Dreamweaver automatically writes to the user Configuration folder instead.
How Dreamweaver processes JavaScript in extensions Dreamweaver checks the Configuration/extension_name folder during startup. If it encounters an extension file within the folder, Dreamweaver processes the JavaScript by completing the following steps: • Compiling everything between the beginning and ending tags SCRIPT •...
Displaying Help function, which is part of several extension APIs, causes Dreamweaver to do displayHelp() the following two things when you include it in your extension: • Add a Help button to the interface. • Call when the user clicks the Help button. displayHelp() You must write the body of the function to display Help.
If you create extensions for others users, you must package them according to the guidelines on the Macromedia Exchange website (www.macromedia.com/exchange) under the Help > How to Create an Extension category. After you have written and tested an extension in the Extension Manager, select File >...
The location of the user’s Configuration folder depends on the user’s platform. For Windows 2000 and Windows XP platforms: <drive>:\Documents and Settings\<username>\ ¬ Application Data\Macromedia\Dreamweaver MX 2004\Configuration Note: In Windows XP, this folder may be inside a hidden folder. Customizing Dreamweaver...
Page 30
For Mac OS X platforms: <drive>:Users:<username>:Library:Application Support: ¬ Macromedia:Dreamweaver MX 2004:Configuration Note: To install extensions that all users can use in a multiuser operating system, you must be logged in as Administrator (Windows) or root (Mac OS X). Dreamweaver copies only some of the configuration files into your user Configuration folder the first time you run the application.
About mm_deleted_files.xml tag syntax The mm_deleted_files.xml file contains a structured list of items that describe configuration files that Dreamweaver is to ignore. These items are described by XML tags, which you can edit in a text editor. The following sections describe the syntax of the mm_deleted_files.xml tags. Optional attributes are marked in the attribute lists with curly braces ( );...
Reinstalling and uninstalling Dreamweaver in a multiuser environment After you install Dreamweaver, if you later reinstall it or upgrade to a later version, Dreamweaver automatically makes backup copies of existing user configuration files, so that if you’ve customized those files, you can still access the changes you made. When you uninstall Dreamweaver from a multiuser system (which you can do only if you have administrative privileges), Dreamweaver can remove each user Configuration folder for you.
To change the appearance of a dialog box: In Dreamweaver, select Edit > Preferences, and then select the Code Rewriting category. Unselect the Rename Form Items when Pasting option. Unselecting this option ensures that form items retain their original names when you copy and paste them.
To add new file types to the menu in the File > Open dialog box: Make a backup copy of the Extensions.txt file in the Configuration folder. Open Extensions.txt in Dreamweaver or a text editor. Add a new line for each new file type. In capital letters, enter the filename extensions that the new file type can have, separated by commas;...
Page 35
You can define two kinds of tags using : normal HTML-style tags and string-delimited tagspec tags. String-delimited tags start with one string and end with another string; they’re like empty HTML tags (such as ) in that they don’t surround content and don’t have closing tags. The tag example is a normal HTML-style tag;...
Page 36
• describes what kinds of content the tag can contain and where in an HTML content_model file the tag can appear. Valid values are "block_model" "head_model" "marker_model" "script_model" specifies that the tag can contain block-level elements such as , and block_model that the tag can appear only in the body section or inside other body-content tags such as , or...
Page 37
• specifies simple HTML equivalents for certain ColdFusion form-related equivalent_tag tags. Not intended for use with other tags. • indicates whether the tag has a direct visual effect on the page. For example, the is_visual ColdFusion tag doesn’t specify a value for (so the value defaults to cfgraph is_visual...
Page 38
To change the highlighting color of third-party tags: Select Edit > Preferences, and select the Highlighting category. Click the Third-Party Tags color box to display the color picker. Select a color, and click OK to close the Preferences dialog box. For information about selecting a color, see Dreamweaver Help (Help >...
To turn off Dreamweaver encoding options: Select Edit > Preferences, and select the Code Rewriting category. Deselect either or both Special Characters options. For information on the other Code Rewriting preferences, see Dreamweaver Help (Help > Using Dreamweaver). Working with browser profiles Browser profiles are the files Dreamweaver uses to check your documents when you run a target browser check (see Dreamweaver Help [Help >...
Page 40
The following example shows the syntax for a tag entry: <!ELEMENT htmlTag NAME="tagName "> <!ATTLIST htmlTag unsupportedAttribute1 !Error !msg="The unsupportedAttribute1 attribute of the htmlTag tag is not supported.Try using supportedAttribute1 for a similar effect." supportedAttribute1 supportedAttribute2 (validValue1 |validValue2 |validValue3 ) unsupportedAttribute2 !Error !msg="Don’t ever use the unsupportedAttribute2 attribute of the htmlTag tag!"...
Internet Explorer that has a profile, add any new tags or attributes introduced in the new version, and save it as a profile for the new version. Note: Before you create a browser profile for a new version of a browser, check the Macromedia Exchange for Dreamweaver site at www.macromedia.com/exchange/dreamweaver to see if Macromedia has supplied a browser profile that you can download and install using the Extension Manager.
Changing FTP mappings The FTPExtensionMap.txt file (Windows) and the FTPExtensionMapMac.txt file (Macintosh) map filename extensions to FTP transfer modes (ASCII or BINARY). Each line in each of the two files includes a filename extension (such as GIF) and either the word ASCII or the word BINARY, to indicate which of the two FTP transfer modes should be used when transferring a file with that extension.
Page 43
When Dreamweaver starts, it parses the document type definition files and creates an in-memory database of information regarding all defined document types. Dreamweaver provides an initial document type definition file. This file, named MMDocumentTypes.xml, contains the document type definitions provided by Macromedia: Document type Server model...
Page 44
If you need to create a new document type, you can either add your entry to the document definition file that Macromedia provides (MMDocumentTypes.xml) or add a custom definition file to the Configuration/DocumentTypes folder. Note: The NewDocuments subfolder resides in the Configuration/DocumentTypes folder. This subfolder contains default pages (templates) for each document type.
Page 45
In the previous example, the element identifies the localized strings that loadstring Dreamweaver should use for the title and description for ASP-JS type documents. For more information about localized strings, see “Localized strings” on page The following table describes the tags and attributes that you can use within a document type definition file.
Page 46
Element Type Attribute Required Description A broad classification of how Dreamweaver internaltype treats a file. The identifies internaltype whether the Design view is enabled for this document and handles special cases such as Dreamweaver templates or extensions. The following values are valid: Dynamic (has special display regions) DWExtension...
Page 47
Element Type Attribute Required Description The file extension that is associated with the macfileextension document type on the Macintosh. 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 document.
Page 48
When Dreamweaver starts, it reads all document type definition files and builds a list of valid document types. Dreamweaver treats any entries within the definition files that have nonexistent server models as nonserver model document types. Dreamweaver ignores entries that have bad contents or IDs that are not unique.
Page 49
The location of the user’s Configuration folder depends on the user’s platform. For Windows 2000 and Windows XP platforms: <drive>:\Documents and Settings\<username>\ ¬ Application Data\Macromedia\Dreamweaver MX 2004\Configuration Note: In Windows XP, this folder may be inside a hidden folder. For Mac OS X platforms: <drive>:Users:<username>:Library:Application Support: ¬...
Page 50
MMString <documenttypes> <documenttypes xmlns:MMString="http://www.macromedia.com/schemes/data/string/"> At the location in the document type definition file where you want to provide a localized string, use the directive to define a placeholder for the localized string. You can MMString:loadstring specify this placeholder in one of the following ways: <description>...
Note: String identifiers, such as in the previous example, must be myJSPDocType/Description unique within the application. Dreamweaver, when it starts, parses all XML files within the 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 example: ASP-JS and ASP-VB can claim .asp as their file extension.
Most extensions are built to receive information from the user through a user interface (UI). If you plan to submit your extension for Macromedia certification, you need to follow the guidelines that are available within the Extension Manager files on the Macromedia Exchange website (www.macromedia.com/exchange).
Dreamweaver uses its HTML rendering engine to display extension UIs. Macromedia has improved form-control rendering to more closely match the browsers. To take advantage of the rendering improvements, you must use one of three new...
The following examples show the Base Property inspector without the statement, which DOCTYPE improves form-control rendering, and then with the statement. DOCTYPE The Base Property inspector as it appears in Design view without the DOCTYPE statement. The Base Property inspector as it appears in Design view with the DOCTYPE statement (and after a few adjustments to accommodate the new rendering).
Page 56
As with normal (noneditable) select lists, editable select lists have a property (see selectedIndex “Objects, properties, and methods of the Dreamweaver DOM” on page 68). This property returns -1 if the text box is selected. To read the value of an active editable text box into an extension, read the value of the editText property.
Page 58
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 control has the following attributes: Attribute name Description name Name of the database tree control Width and height, in pixels control.style Type of control...
To add a database tree control to a dialog box, you can use the following sample code with appropriate substitutions for quoted variables: <select name="DBTree" style="width:400px;height:110px" ¬ type="mmdatabasetree" connection="connectionName" noexpandbuttons showHeaders></select> You can change the attribute to retrieve selected data and display it in the tree. connection You can use the attribute as a JavaScript wrapper object for the new tag.
Adding tree controls Tree controls display data in a hierarchical format and let users expand and collapse nodes in the tree. The tag lets you create tree controls for any type of information; unlike the MM:TREECONTROL database tree control that is described in “Adding a database tree control”...
Page 61
Creating a tree control tag creates a tree control and can use one or more tags to add structure, as MM:TREECONTROL described in the following list: • is an empty, optional tag that defines a column in the tree control. MM:TREECOLUMN •...
attributes are described in the following table: MM:TREENODE Attribute name Description Name of the node name value Contains the content for the given node. For more than one column, this is a pipe-delimited string. To specify an empty column, place a single space character before the pipe (|).
//add the new node to the top of the selected node’s children selNode.innerHTML = '<mm:treenode name="item10" value="New item11" ¬ expanded selected>' + selNode.innerHTML; Deleting nodes To delete the currently selected node from the document structure, use the properties. innerHTML outerHTML The following example deletes the entire selected node and any children: var tree = document.myTreeControl;...
Page 65
Save the file again. Next, exit and restart Dreamweaver. Select the Command > My Flash Movie menu option, and your Flash content appears in a Dreamweaver dialog box, as shown in the following figure: This example shows a simple implementation of Dreamweaver’s Flash content support. After you are familiar with building objects and commands as well as more sophisticated forms, you can integrate Flash content into your Dreamweaver extensions for a more dynamic user experience.
Page 66
Chapter 3: User Interfaces for Extensions...
CHAPTER 4 The Dreamweaver Document Object Model In Macromedia Dreamweaver MX 2004, 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 extension file.
Which document DOM? It is important to distinguish between the DOM of the user’s document and the DOM of the extension. The information in this chapter applies to both types of Dreamweaver documents, but the way that you reference each DOM is different. If you are familiar with JavaScript in browsers, you can reference objects in the active document by writing .
Page 69
Object Properties Methods Events document (an array of form getElementsBy TagName() onLoad forms • hasChildNodes() objects) (an array of image images • objects) (an array of layers • LAYER, and absolutely ILAYER, positioned SPAN objects objects by name child • nodeType •...
Page 70
Object Properties Methods Events checkbox In addition to the properties that In addition to the methods onClick radio are available for all tags: that are available for all tags: checked form • blur() focus() password In addition to the properties that In addition to the methods onBlur text...
Properties and methods of the document object The following table details the properties and methods of the object that are taken document from DOM Level 1 and used in Dreamweaver. A bullet (•) marks read-only properties. Property or method Return value nodeType •...
Properties and methods of HTML tag objects Every HTML tag is represented by a JavaScript object. Tags are organized in a tree hierarchy, where tag is a parent of tag , if falls completely within ’s opening and closing tags ( <x>x ).
Property or method Return value getElementsByTagName(tagName) that can be used to step through child tags of NodeList type (for example, , and so on). tagName If the argument is , the function returns all LAYER LAYER tags and all absolutely positioned tags.
Properties and methods of comment objects A JavaScript object represents each HTML comment. The following table details the properties and methods of comment objects that are taken from DOM Level 1 and are used in Dreamweaver. A bullet (•) marks read-only properties. Property or method Return value nodeType •...
Page 75
object has a property called that lets you query the language of dreamweaver systemScript the user’s operating system. Use this property if you need to include special cases in your extension code for localized operating systems, as shown in the following example: if (dreamweaver,systemScript &&...
Page 76
Chapter 4: The Dreamweaver Document Object Model...
CHAPTER 5 Customizing Code View Macromedia Dreamweaver MX 2004 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 and allows you to change default HTML formatting.
The CodeHints.xml file The CodeHints.xml file contains the following entities: • A list of all the menu groups Dreamweaver displays the list of menu groups when you select the Code Hints category from the Preferences dialog box. You can open the Preferences dialog box by selecting Edit >...
Code Hints tags The CodeHints.xml file contains the following tags, which define Code Hints menus. You can use these tags to define additional Code Hints menus. <codehints> Description tag is the root of the file. codehints CodeHints.xml Attributes None. Contents One or more tags.
Page 80
This attribute lets you specify different lists of function names for ASP-JavaScript (ASP-JS), Java Server Pages (JSP), Macromedia ColdFusion, and so on. You can specify the doctypes attribute as a comma-separated list of document type IDs. See the Dreamweaver Configuration/Documenttypes/MMDocumentTypes.xml file for a list of Dreamweaver...
Page 81
• attribute specifies whether the pattern is case-sensitive. The possible casesensitive values for the attribute are , or a subset of the comma-separated casesensitive true false list that you specify for the attribute. The list of document types lets you specify that doctypes the pattern is case-sensitive for some document types but not for others.
Page 82
This attribute lets you specify different lists of function names for ASP-JavaScript (ASP-JS), Java Server Pages (JSP), Macromedia ColdFusion, and so on. You can specify the doctypes attribute as a comma-separated list of document type IDs. For a list of Dreamweaver document types, see the Dreamweaver Configuration/Documenttypes/MMDocumentTypes.xml file.
Container tag. menugroup Example // function example <function pattern="CreateDate(year, month, day)" DOCTYPES="ColdFusion" /> // object method example <function pattern="application.getAttribute(String name)" DOCTYPES="JSP" /> Code coloring Dreamweaver lets you customize or extend the code coloring schemes that you see in Code view so that you can add new keywords to a scheme or add code coloring schemes for new document types.
Page 84
The following excerpt from the Colors.xml file illustrates the hierarchy of tags in a code coloring style file: <codeColors> <colorGroup> <syntaxColor id="CodeColor_HTMLEntity" bold="true" italic="true" /> <syntaxColor id="CodeColor_JavascriptNative" text="#009999" /> <syntaxColor id="CodeColor_JavascriptNumber" text="#FF0000" /> … <tagColor id="CodeColor_HTMLStyle" text="#990099" /> <tagColor id="CodeColor_HTMLTable" text="#009999" />...
Page 85
Notice that the tags in the Colors.xml file assign color and style syntaxColor tagColor values to an string value. The value is then used in the codeColoring.xml file to assign a style to a scheme tag. For example, the tag in the codeColoring.xml excerpt has an defaultTag .
Page 86
<blockEnd> Description Optional. Text values that delimit the end of the text block for this scheme. The blockEnd tags must be paired and the combination must be unique. Values are not evaluated blockStart as case-sensitive. The value can be one character. Multiple instances of this tag are blockEnd allowed.
Page 87
<brackets> Description A list of characters that represent brackets. Attributes name • A string that assigns a name to the list of brackets. name="bracket_name" • Required. An identifier string that maps color and style to this syntax item. id="id_string" Example <brackets name="Bracket"...
Page 88
<commentStart> Description A text string that delimits the start of a comment block. You must specify the commentStart tags in pairs. Multiple … pairs are allowed. commentEnd commentStart /commentEnd Attributes None. Example <commentStart><![CDATA[<%--]]></commentStart> <commentEnd> Description A text string that delimits the end of a comment block. You must specify the commentStart tags in pairs.
Page 89
Example <cssMedia name="@media" id="CodeColor_CSSMedia" /> <cssProperty/> Description An empty tag that indicates CSS rules and holds code coloring attributes. Attributes name • A string that assigns a name to the CSS property. name="cssProperty_name" • Required. An identifier string that maps color and style to this syntax item. id="id_string"...
Page 90
<defaultAttribute> Description Optional. This tag applies only to tag-based syntax (that is, where ). If this tag ignoreTags="No" is present, then all tag attributes are colored according to the style assigned to this tag. If this tag is omitted, then attributes are colored the same as the tag. Attributes name •...
Page 91
<endOfLineComment> Description A text string that delimits the start of a comment that continues until the end of the current line. Multiple … tags are allowed. endOfLineComment /endOfLineComment Attributes None. Example <endOfLineComment><![CDATA[//]]></endOfLineComment> <entity/> Description An empty tag that indicates that HTML special characters should be recognized and hold coloring attributes.
Page 92
<idChar1> Description A list of characters, each of which Dreamweaver can recognize as the first character in an identifier. Attributes name • A string that assigns a name to the list of identifier characters. name="idChar1_name" • Required. An identifier string that maps color and style to this syntax item. id="id_string"...
Page 93
Attributes None. Example <ignoreMMTParams>No</ignoreMMTParams> <ignoreTags> Description Specifies whether markup tags should be ignored. Values are ; the default is . Set to when syntax is for tag markup language that is delimited by . Set to when syntax is < >...
Page 94
<keywords> Description List of keywords for type specified in category attribute. Multiple tags are allowed. keywords Attributes name • A string that assigns a name to the list of keywords. name="keywords_name" • Required. An identifier string that maps color and style to this syntax item. id="id_string"...
Page 95
<regexp> Description Specifies a list of tags. searchPattern Attributes name delimiter escape • A string that assigns a name to the list of search pattern strings. name="stringStart_name" • Required. An identifier string that maps color and style to this syntax item. id="id_string"...
Page 96
<searchPattern> Description A string of characters that define a regular search pattern using supported wildcard characters. Multiple tags are allowed. searchPattern Attributes None. Container tag. regexp Example <searchPattern><![CDATA[(\s*/\e*\\/]]></searchPattern> <stringStart> Description These tags contain a text string that represents the delimiter of the start of a string. You must specify the tags in pairs.
<stringEsc> Description Contains a text string that represents the delimiter of a string escape character. Multiple tags are allowed. stringEsc Attributes None. Example <stringEsc><![CDATA[\]]></stringEsc> <tagGroup> Description This tag groups one or more tags to which you can assign a unique color and style. Attributes name taglibrary...
Page 98
Sample code <!-- #EndEditable --> <p><b><font size="+2">header</font></b></p> <!-- #BeginEditable "test" --> <p>Here's some editable text </p> <p> </p> <!-- #EndEditable --> Example <blockStart doctypes="ASP-JS,ASP-VB, ASP.NET_CSharp, ASP.NET_VB, ColdFusion,CFC, HTML, JSP,LibraryItem,PHP_MySQL" scheme="innerText"><![CDATA[<!--\s*#BeginTemplate]]></blockStart> customText This value tells Dreamweaver to use custom colors to color the block delimiters. Sample code The delimiters for blocks of PHP script, which appear in red, provide an example of the effect of value:...
innerTag This value is identical to the value, except that the tag coloring is taken from the outerTag scheme inside the delimiters. This is currently used for the tag. html nameTag This value specifies that the string is the opening of a tag and string is the blockStart blockEnd...
Page 100
Field Tags Script cssProperty cssSelector cssValue character function keyword identifier number operator brackets keywords 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.
Page 101
Wildcard Escape Description string Optional whitespace This matches zero or more white space or newline characters. For example, is used to match ASP include <!--\s*#include directives whether they have any white space preceding the token or not because either case is valid. #include The white space wildcards match any combination of white space and newline characters.
Page 102
Scheme precedence Dreamweaver uses the following algorithm to color text syntax in Code view: Dreamweaver determines the initial syntax scheme based on the document type of the current file. The file document type is matched against the attribute. If no scheme.documentType match is found, the scheme where is used.
Preferences dialog box. Note: Macromedia 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.
Page 104
To edit styles for a scheme using the Code Coloring category in the Preferences dialog box, double-click a document type, or click the Edit Coloring Scheme button, to open the Edit Coloring Scheme dialog box. To edit the style for a particular element, select it in the Styles For list. The items listed in the Styles For pane include the fields for the scheme being edited and also the schemes that might appear as blocks within this scheme.
Code coloring examples The following code coloring examples illustrate the code coloring schemes for a cascading style document and a JavaScript document. The lists of keywords in the JavaScript example are abbreviated for the sake of keeping the example short. CSS code coloring <scheme name="CSS"...
alert("Word " + i + " is " + arrayWords[i]); var tokens = new Array("Hello", "world"); displayWords(tokens); ]]></sampleText> </scheme> JavaScript sample text The sample text for the JavaScript scheme illustrates the JavaScript code coloring scheme as follows: * JavaScript */ function displayWords(arrayWords) { (i=0;...
<css-support> Description This tag is the root node for a set of tags that are supported by a property value particular browser. Attributes None. Contents tags. property value Container None. Example <css-support> . . . </css-support> <property> Description Defines a supported CSS property for the browser profile. Attributes name, names, supportlevel, message •...
• attribute defines a message string that message="message_string" message Dreamweaver displays when it finds the property in a document. The message string describes possible limitations or workarounds for the property value. Contents value Container css-support Example <property name="background-color" supportLevel="supported"> <value> Description Defines a list of values supported by the current property.
Changing default HTML formatting To change general code formatting preferences, use the Code Format category of the Preferences dialog box. To change the format of specific tags and attributes, use the Tag Library Editor (Edit > Tag Libraries). For more information, see Using Dreamweaver on the Dreamweaver Help menu.
Page 111
PART II Extension APIs Learn about functions that you need to write when you create new objects, toolbars, tag editors, floating panels, server behaviors, components, or server models. Chapter 6: Insert Bar Objects..........113 Chapter 7: Commands.
Note: The simplest objects contain only the HTML to insert, without a BODY and HEAD tag. For more information, see “Customizing Dreamweaver” on the Macromedia Support Center. • The 18 x 18 pixel image that appears on the Insert bar •...
After that, its visibility and position are saved in the registry. Insertbar.xml tag hierarchy The following example shows the format and hierarchy of nested tags in the insertbar.xml file: <?xml version="1.0" ?> <!DOCTYPE insertbarset SYSTEM "-//Macromedia//DWExtension insertbar 5.0"> <insertbar xmlns:MMString="http://www.macromedia.com/schemes/data/string/"> <category id="DW_Insertbar_Common" MMString:name="insertbar/categorycommon" folder="Common">...
Note: Although the insertbar and category tags use </insertbar> and </category> closing tags to denote the end of their content, the tags button, checkbutton, and separator do not have related closing tags. Instead button, checkbutton, and separator use a slash (/) before the closing bracket to denote the end of their attributes and content.
Page 116
<menubutton> Description This tag defines a pop-up menu for the Insert bar. Attributes id, image, {showIf}, {name}, {folder} Example <menubutton id="DW_ImageMenu" name="Images" image="Common\imagemenu.gif" folder="Images"> <button id="DW_Image" image="Common\Image.gif" enabled="" showIf="" file="Common\Image.htm" /> </menubutton> <button /> Description This tag defines a button on the Insert bar that the user clicks to execute the code that the attributes specify.
Example <checkbutton id="DW_StandardView" name = "Standard View" image="Tools\Standard View.gif" checked="_View_Standard" command="dw.getDocumentDOM().setShowLayoutView(false)"/> <separator /> Description This tag displays a vertical line on the Insert bar. Attributes {showIf} Example <separator showIf="_VIEW_CODE"/> Insert bar definition tag attributes The attributes for the Insert bar definition tags have the following meanings: id="unique id"...
Page 118
showIf="enabler" Description This attribute specifies that this button should appear on the Insert bar only if the given Dreamweaver enabler is a value. If you do not specify , the button always appears. true showIf The possible enablers are _SERVERMODEL_ASP, _SERVERMODEL_ASPNET, _SERVERMODEL_JSP, (for all versions of ColdFusion), (only for _SERVERMODEL_CFML...
command="API_function" Description Instead of referring Dreamweaver to an HTML file with the code to insert, you can use this tag to specify a command that Dreamweaver performs when the button is clicked with this tag. Example command="dw.showTagChooser()" file="file_path" Description attribute specifies the path, relative to the Dreamweaver Configuration folder, of an file object file.
Page 120
To reload extensions Control-click (Windows) or Option-click (Macintosh) the Categories menu in the Insert bar’s title bar. Select Reload Extensions. Note: Remember that in a multiuser operating system, you should edit copies of configuration files in your user Configuration folder rather than editing master configuration files. For more information, “Configuration folders and extensions”...
To change the order of categories in the Insert bar: Save a backup copy of insertbar.xml (with a name such as insertbar.backup.xml). Open the original insertbar.xml file. Find the tag that corresponds to the category you want to move, and select that tag, category including all the tags it contains.
The Objects API This section describes the functions in the Objects API. You must define either the or the function. For details about these functions, see insertObject() objectTag() “insertObject()” on page 123. The remaining functions are optional. canInsertObject() Availability Dreamweaver MX. Description This function determines whether to display the Object dialog box.
Example The following example opens the myObjectHelp.htm file in a browser; this file explains how to use the extension: function displayHelp(){ var myHelpFile = dw.getConfigurationPath() + '/ExtensionsHelp/myObjectHelp.htm'; dw.browseDocument(myHelpFile); isDomRequired() Description This function determines whether the object requires a valid DOM to operate. If this function returns a value or if the function is not defined, Dreamweaver assumes that the command true...
Returns Dreamweaver expects a string that contains an error message or an empty string. If it returns an empty string, the Object dialog box closes when the user clicks OK. If it is not empty, Dreamweaver displays the error message and the dialog box remains. Enabler canInsertObject() Example...
Arguments None. Returns Dreamweaver expects the string to insert into the user’s document. Example The following example of the function inserts an combination for a objectTag() OBJECT/EMBED specific ActiveX control and plug-in: function objectTag() { return '\n' + '<OBJECT CLASSID="clsid:166F1OOB-3A9R-11FB-8075444553540000" \n'¬ + 'CODEBASE="http://www.mysite.com/product/cabs/¬...
A simple Insert Object example This example adds an object to the Insert bar so users can add a line through (strikethrough) selected text by clicking a button. This object is useful if a user needs to make editorial comments on a document.
Page 127
After Dreamweaver applies the formatting, it should return the cursor to the document without any messages or prompting. The following example shows how the function objectTag() now reads: function objectTag() { // Determine if the user is in Code view. var dom = dw.getDocumentDOM();...
Page 128
</script> </head> <body> </body> </html> Save this file to the Configuration/Objects/Text folder as Strikethrough.htm, and create a graphic (GIF format, 18 x 18 pixels) for use on the Insert bar, as shown in the following figure: Name the graphic file Strikethrough.gif, and save it in the Configuration/Objects/Text folder. Now your HTML file identifies the code to insert into the document, and you have the accompanying graphic file for the Insert bar.
Page 129
To separate the HTML object definition file from the supporting JavaScript functions, create a new JS file in the same folder as the original HTML file (for example, Strikethrough.js) and paste all the JavaScript functions into that file. Remove the functions from Strikethrough.htm, and add the JavaScript filename to the attribute of the script tag, as shown in the following example: <html>...
Page 130
// Just return -- don't do anything else. return; function fontColorRed(){ var dom = dw.getDocumentDOM(); if (dw.getFocus() == 'textView' || dw.getFocus(true) == 'html'){ var upCaseTag = (dw.getPreferenceString("Source Format", "Tags Upper Case", "") == 'TRUE'); // Manually wrap tags around selection. if (upCaseTag){ dom.source.wrapSelection('<FONT COLOR="#FF0000">','</FONT>');...
Page 131
Now, you can reload extensions, and test the dialog box. Clicking the Red text checkbox changes the font color: Clicking the OK button performs the function, which adds the strikethrough: objectTag() A simple Insert Object example...
Page 132
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 shown in the following figure. The following example builds a new category on the Insert bar called Editorial and then adds a pop-up menu to that category.
Page 133
Find the following line of code near the beginning of the file: <insertbar xmlns:MMString="http://www.macromedia.com/schemes/data/string/"> tag defines the beginning of all the Insert bar contents. After that line, add a new insertbar...
Page 134
Next, within the opening and closing tags, add the pop-up menu using the category tag and the following attributes, including a unique ID (for more information about menubutton attributes, see “Insert bar definition tag attributes” on page 117): <menubutton id="DW_Insertbar_Markup" name="markup" image="Editorial\Strikethrough.gif"...
CHAPTER 7 Commands Macromedia Dreamweaver MX 2004 commands can perform almost any kind of edit to a user’s current document, other open documents, or any HTML document on a local drive. Commands can insert, remove, or rearrange HTML tags and attributes, comments, and text.
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 prevent a command from appearing in the Commands menu, insert the following comment on the first line of the file: <!-- MENU-LOCATION=NONE -->...
Returns Dreamweaver expects an array that contains an even number of elements. The first element is a string that contains the label for the topmost button. The second element is a string of JavaScript code that defines the behavior of the topmost button when it is clicked. The remaining elements define additional buttons in the same way.
windowDimensions() Description 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 unless you want an Options dialog box that is larger than 640 x 480 pixels. Arguments platform •...
The UI is a form that contains two radio buttons that let the user select uppercase or lowercase. The following example shows the HTML code to create the form: <!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine 5.0//dialog"> <HTML> <HEAD> <!-- Copyright 2001-2002 Macromedia, Inc. All rights reserved. --> <Title>Make Uppercase or Lowercase</Title> <SCRIPT SRC="Change Selection Case.js"></SCRIPT> </HEAD> <BODY>...
Writing the JavaScript code The following example consists of two extension API functions, canAcceptCommand() , which Dreamweaver calls, and one user-defined function, commandButtons() changeCase() which is called from the function. commandButtons() canAcceptCommand() When a user clicks the Commands menu, Dreamweaver calls the function canAcceptCommand() for each menu item to determine whether it should be enabled.
Page 141
The next part of the statement ( return && (theSelNode.nodeType == Node.TEXT_NODE checks to see if the selected node type is text. If so, the function canAcceptCommand() returns the value . If the node type is not text, the test continues to see if the node has true children ( ), and if the type of the first child node is text...
Page 142
commandButtons() When the user clicks a menu item, the extension needs a mechanism that lets the user select uppercase or lowercase. The UI provides this mechanism by defining two radio buttons to let the user make that choice. function causes Dreamweaver to supply the OK and Cancel buttons and commandButtons() tells Dreamweaver what to do when the user clicks them.
Page 143
Next, calls to retrieve the node that contains the selected changeCase() getSelectedNode() text. It also retrieves any child nodes ( in case the selection is a tag that theSelNode.childNodes) contains text, such as <b>text</b> // Get the node containing the selection var theSelNode = theDOM.getSelectedNode();...
Finally, resets the selection and calls to close the UI. The code changeCase() window.close() looks like the following example: // Set the selection back to where it was when you // started theDOM.setSelection(theSel[0],theSel[1]); window.close(); // close extension UI Running the command After you place the files in the Commands folder, you must either restart Dreamweaver or reload the extensions before the new extension appears on the Commands menu.
CHAPTER 8 Menus and Menu Commands Macromedia Dreamweaver MX 2004 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 items by editing the menus.xml file. You can also add, change, and remove keyboard shortcuts for menu items, although in most cases it is easier to do that using the Keyboard Shortcut Editor (see Dreamweaver Help).
About the menus.xml file The menus.xml file contains a structured list of menu bars, menus, menu items, separators, shortcut lists, and keyboard shortcuts. These items are described by XML tags that you can edit in a text editor. Note: Be careful when making changes to menus. Dreamweaver ignores any menu or menu item that contains an XML syntax error.
Example The main (Document window) menu bar uses the following tag: menubar <menubar name="Main Window" id="DWMainWindow"> <!-- menu tags here --> </menubar> <menu> Description Provides information about a menu or submenu to appear in the Dreamweaver menu structure. Attributes name, {app}, id, {platform}, {showIf} The name of the menu as it will appear on the menu bar.
Page 148
Attributes name, id, {app}, {key}, {platform}, {enabled}, {arguments}, {command}, {file}, {checked}, {dynamic}, {isdomrequired}, {showIf} • The menu item name that appears in the menu. An underscore indicates that the name following letter is the command’s access key (mnemonic), for Windows only. •...
• If present, indicates that a menu item is to be determined dynamically, by an dynamic HTML file; the file contains JavaScript code to set the text and state of the menu item. If you specify a tag as , you must also specify a attribute.
<shortcutlist> Description Specifies a shortcut list in the menus.xml file. Attributes {app}, id, {platform} The name of the application in which the shortcut list is available. Not currently used. • The ID for the shortcut list. It should be the same as the menu ID for the menu bar •...
• A unique identifier for a shortcut. • A name for the command executed by the keyboard shortcut, in the style of a menu name item name. For example, the attribute for the F12 shortcut is "Preview in name Primary Browser" Contents None (empty tag).
To move a menu: Quit Dreamweaver. Make a backup copy of the menus.xml file. Open menus.xml in a text editor such as BBEdit, HomeSite, or Wordpad. (Don’t open it in Dreamweaver.) Cut an entire menu and its contents, from the opening tag to the closing tag.
Page 153
Between the double quotation marks (") of the attribute, enter the new keyboard shortcut. Use a Plus (+) sign between the keys in a key combination. For more information about modifiers, see the description of the tag in <menuitem>. menuitem If the keyboard shortcut is in use elsewhere and you didn’t remove its other use, the shortcut will apply only to the first menu item that uses it in menus.xml.
Note: If you add custom menu commands to Dreamweaver, add them at the top level of the Menus folder or create a subfolder. The Macromedia folder MM is reserved for the menu commands that come with Dreamweaver. Modifying the Commands menu You can add certain kinds of commands to the Commands menu, and change their names, without editing the menus.xml file.
To delete a command you’ve created: Select Commands > Edit Command List. A dialog box appears, listing all the commands you can delete. (Commands that are in the default Commands menu don’t appear on this list and can’t be deleted using this approach.) Select a command to delete.
The user selects options in the dialog box. Dreamweaver executes event handlers that are associated with the fields as the user encounters them. The user clicks one of the buttons that are defined by the function. commandButtons() Dreamweaver executes the code that is associated with the clicked button. The dialog box remains visible until one of the scripts in the Menu Commands calls the function.
Example The following example of the function defines the OK, Cancel, and Help commandButtons() buttons: function commandButtons(){ return new Array("OK" , "doCommand()" , "Cancel" , ¬ "window.close()" , "Help" , "showHelp()"); getDynamicContent() Description Retrieves the content for the dynamic portion of the menu. Arguments menuID •...
isCommandChecked() Description Determines whether to display a check mark next to the menu item. Arguments {arg1}, {arg2},...{argN} • If it is a dynamic menu item, the unique ID that the function getDynamicContents() specifies is the only argument. Otherwise, if the attribute is defined for a arguments menuitem...
receiveArguments() Description Processes any arguments passed from a menu item or from the function. If it dw.runCommand() is a dynamic menu item, it processes the dynamic menu item ID. Arguments {arg1}, {arg2},...{argN} • If it is a dynamic menu item, the unique ID that the function getDynamicContents() specifies is the only argument.
Example function setMenuText() if (arguments.length != 1) return ""; var whatToDo = arguments[0]; if (whatToDo == "undo") return dw.getUndoText(); else if (whatToDo == "redo") return dw.getRedoText(); else return ""; windowDimensions() Description Sets specific dimensions for the Parameters dialog box. If this function is not defined, the window dimensions are computed automatically.
A simple menu command This simple menu command example shows how Undo and Redo menu commands might work. The Undo menu item reverses the effect of a user’s editing operation, and the Redo item reverses an Undo operation and restores the effect of the user’s last editing operation. You can implement this example by performing the following steps: Creating the menu items Writing the JavaScript code...
Page 162
canAcceptCommand() Dreamweaver calls the function for each menu item in the MyMenu menu canAcceptCommand() to determine whether it should be enabled or disabled. In the MyMenu.htm file, the function checks the value of to determine whether canAcceptCommand() arguments[0] Dreamweaver is processing a Redo menu item or an Undo menu item. If the argument is "undo"...
Page 163
functions, see the Dreamweaver API For more information about the dw.undo() dw.redo() Reference. In this command, the function processes the arguments and executes the receiveArguments() command. More complex menu commands might call different functions to execute the command. For example, the following code checks whether the first argument is ;...
Placing the command file in the Menu folder To implement the menu Undo 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 must agree with the location that you specified on the tag.
Writing the JavaScript code Because the first tag contains the attribute, Dreamweaver calls the menuitem dynamic function in the PIB_Dynamic.js file, which is shown in the following getDynamicContent() example: function getDynamicContent(itemID) var browsers = null; var PIB = null; var i; var j=0;...
Page 166
canAcceptCommand() Dreamweaver next calls the function for each tag that references canAcceptCommand() menuitem a command file with the attribute. If the function returns the value file canAcceptCommand() , the menu item is dimmed. If the function returns the value false canAcceptCommand() true Dreamweaver enables the item on the menu.
Page 167
// For server connections, the files will // already be remote urls. if (selFile.indexOf("://") == (-1)) var urlPrefix = "file:///"; var strTemp = selFile.substr(urlPrefix.length); if (selFile.indexOf(urlPrefix) == -1) bHavePreviewTarget = false; else if (strTemp.indexOf("/") == -1) bHavePreviewTarget = false; else if (!DWfile.exists(selFile)) bHavePreviewTarget = false;...
Page 168
For each item in the selected list, the function tests for the presence of the character string " ". If it is not found, the code performs a series of tests on the list item. If the item is not in the form of a URL ( ), it sets the return...
Page 169
// Only launch the browser if we have a valid browser selected if (theBrowser != "file:///" && typeof(theBrowser) != "undefined" && theBrowser.length > 0) if (dw.getFocus(true) == 'site') // Only get the first item of the selection because // browseDocument() can't take an array. //dw.browseDocument(site.getSelection()[0],theBrowser);...
Page 170
If the user entered the shortcut keys ( ) and no primary or secondary browser F12 or Ctrl+F12 has been specified, a dialog box appears to inform the user. If the user clicks OK, the function calls the function with the argument to let the user dw.showPreferencesDialog() browsers...
CHAPTER 9 Toolbars You can create a toolbar for Macromedia Dreamweaver MX 2004 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 as check buttons, radio buttons, text boxes, and pop-up menus using a few custom XML tags.
How toolbars behave In Windows, Dreamweaver toolbars generally act the same as standard Windows toolbars. Dreamweaver toolbars have the following characteristics: • You can drag and drop toolbars to dock them, undock them, and reposition them relative to other toolbars. •...
Each toolbar definition file starts with the following declarations: <?xml version="1.0" encoding="optional_encoding"?> <!DOCTYPE toolbarset SYSTEM "-//Macromedia//DWExtension toolbar 5.0"> If the encoding is omitted, Dreamweaver uses the default encoding of the operating system. After the declarations, the file consists of a single...
<toolbar> Description Defines a toolbar. Dreamweaver displays the items and separators from left to right in the specified order, laying out the items automatically. The toolbar file does not specify control over the spacing between the items, but you can specify the widths of certain kinds of items. Attributes id, label, {container}, {initiallyVisible}, {initialPosition}, {relativeTo} •...
As with the attribute, the attribute applies only the initiallyVisible initialPosition first time that Dreamweaver loads the toolbar. After that, the toolbar’s position is saved to the registry or the Dreamweaver Preferences file. You can reset the position of the toolbar by using function.
<itemtype/> Description Defines a single toolbar item. Toolbar items include buttons, radio buttons, check buttons, combo boxes, pop-up menus, and so on. For a list of the types of toolbar items that you can define, see “Toolbar item tags” on page 177.
<separator/> Description Inserts a separator at the current location in the toolbar. Attributes {showIf} • attribute specifies that the separator should appear only on the toolbar if the given showif script returns . For example, you can use the attribute to show the separator only true showIf in a given application or only when the page has a certain document type.
Example <BUTTON ID="DW_DocRefresh" image="Toolbars/images/MM/refresh.gif" disabledImage="Toolbars/images/MM/refresh_dis.gif" tooltip="Refresh Design View (F5)" enabled="((dw.getDocumentDOM() != null) && (dw.getDocumentDOM().getView() != 'browse') && (!dw.getDocumentDOM().isDesignViewUpdated()))" command="dw.getDocumentDOM().synchronizeDocument()" update="onViewChange,onCodeViewSyncChange"/> <checkbutton> Description A check button is a button that has a checked or unchecked state and that executes a specific command when clicked.
Radio buttons act the same as the Code view, Design view, and Split view buttons on the Dreamweaver document toolbar. Attributes id, image, tooltip, checked, command, {showIf}, {disabledImage}, {overImage}, {label}, {file}, {domRequired}, {enabled}, {update}, {arguments} For a description of each attribute, see “Item tag attributes”...
Example <MENUBUTTON ID="DW_CodeNav" image="Toolbars/images/MM/codenav.gif" disabledImage="Toolbars/images/MM/codenav_dis.gif" tooltip="Code Navigation" enabled="dw.getFocus() == 'textView' || dw.getFocus() == 'html'" menuID="DWCodeNavPopup" update="onViewChange"/> <dropdown> Description A dropdown menu is a noneditable menu that executes a specific command when you select an entry and the menu updates itself, based on an attached JavaScript function. The dropdown menu looks and acts the same as the Format control in the Text Property inspector, except it’s a standard size instead of the small Property inspector size.
Container tag or the tag. toolbar toolbarset Example <COMBOBOX ID="Address_URL" width="300" tooltip="Address" label="Address: " file="Toolbars/MM/AddressURL.htm" update="onBrowserPageBusyChange"/> <editcontrol> Description An edit control box is a text-editing box that executes its command when the user changes text in the box and switches focus. Attributes id, tooltip, file, value, command, {showIf}, {label}, {width}, {domRequired}, {enabled}, {update}, {arguments}...
Container tag or the tag. toolbar toolbarset Example <colorpicker id="Color_Example" image="Toolbars/images/colorpickerIcon.gif" disabledImage="Toolbars/images/colorpickerIconD.gif" colorRect="0 12 16 16" tooltip="Text Color" domRequired="false" file="Toolbars/mine/colorExample.htm" update="onSelChange"/> Item tag attributes The attributes for toolbar item tags have the following meanings: id="unique_id" Required. The attribute is an identifier for the toolbar item. The attribute must be unique within the current file and all files that are included within the current file.
If an icon is specified for a color picker, the icon replaces the color picker entirely. If the attribute is also set, the current color appears on top of the icon in the specified colorRect rectangle. Example image="Toolbars/images/MM/codenav.gif" disabledImage="image_path" Optional. Dreamweaver ignores the attribute for items other than buttons, check disabledImage buttons, radio buttons, menu buttons, color pickers, and combo buttons.
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 attribute, Dreamweaver width uses a reasonable default width. Example width="150" menuID="menu_id"...
enabled="script" Optional. As with menus, the script returns a value that specifies whether the item is enabled. If you do not specify this attribute, it defaults to enabled. The attribute is equivalent to the enabled function in a toolbar command file. canAcceptCommand() Example enabled="dw.getFocus() == 'textView' || dw.getFocus() == 'html'"...
The following list shows the possible handlers for , from least to most update_frequency_list frequent. If you do not specify the attribute, the update frequency defaults to update onEdit frequency. You can specify multiple update frequencies, separated by commas. The handlers run on any of the following specified events: •...
Example On a toolbar that has Undo and Redo buttons, each button calls the menu command file, Edit_Clipboard.htm, and passes an argument that specifies the action, as shown in the following example: <button id="DW_Undo" image="Toolbars/images/MM/undo.gif" disabledImage="Toolbars/images/MM/undo_dis.gif" tooltip="Undo" file="Menus/MM/Edit_Clipboard.htm" arguments="'undo'" update="onEveryIdle"/> <button id="DW_Redo"...
Returns Dreamweaver expects a Boolean value; if the item is enabled; otherwise. true false 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, combo boxes, text boxes, and color pickers. For pop-up menus, the current value should be one of the items in the menu.
Page 189
The name is a misnomer because this function should be used even if the getDynamicContent() list of entries in the menu is fixed. For example, the Text_Size.htm file in the Configuration/ Menus/MM folder is not a dynamic menu; it is designed to be called from each one of a set of static menu items.
getMenuID() Availability Dreamweaver MX. Description Only valid for menu buttons. Dreamweaver calls the function to get the ID of the getMenuID() menu that should appear when the user clicks the button. Arguments None. Returns Dreamweaver expects a string that contains a menu ID, which is defined in the menus.xml file. Example function getMenuID() var dom = dw.getDocumentDOM();...
getUpdateFrequency() Availability Dreamweaver MX. Description Specifies how often to run the handlers for the , and attributes enabled checked showIf value to update the visible state of the item. You must specify the update frequency for toolbar items because they are always visible, unlike menus.
Returns Dreamweaver expects a Boolean value: if the item is checked; otherwise. true false Example The following example determines which item, if any, should be checked in a pop-up menu of paragraph formats and CSS styles: function isCommandChecked() var bChecked = false; var style = arguments[0];...
Example function isDOMRequired() return false; receiveArguments() Availability Dreamweaver MX. Description Processes any arguments that pass from a toolbar item. The function is receiveArguments() equivalent to the attribute in a toolbar item tag. command Arguments For pop-up menus, combo boxes, text boxes, and color pickers, the first argument is the current value within the control.
Arguments None. Returns Dreamweaver expects a Boolean value: if the item appears; otherwise. true false Example function showif() var retval = false; var dom = dw.getDocumentDOM(); if(dom) var view = dom.getView(); if(view == ‘design’) retval = true; return retval; A simple toolbar command file This simple example implements a Title text box item as seen on the Dreamweaver document toolbar.
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 contains three JavaScript functions that operate on the Title text box. These functions are canAcceptCommand(), receiveArguments(), getCurrentValue().
To see the complete HTML file that contains the JavaScript functions for the Document Title text box, see the EditTitle.htm file in the Toolbars/MM folder. Note: The MM folder is reserved for Macromedia files. Create another folder inside the Toolbars folder, and place your JavaScript code in that folder.
Reports You can use the Reports API functions to create custom site reports or modify the set of prewritten reports that come with Macromedia Dreamweaver MX 2004. You can access site reports only through the Site Reports dialog box. You can use the Results Window API to create a stand-alone report. Stand-alone reports are regular commands that directly use the Results Window API rather than the Reports API.
How site reports work Reports are accessible through the Site > Reports... menu. When it is selected, this menu item displays a dialog box from which the user selects reports to run on a choice of targets. The user selects which files to run the selected reports on using the Report On: pop-up menu. This menu contains Current Document, Entire Current Local Site, Selected Files In Site, and Folder.
The Reports API The only required function for the Reports API is the function. All other processFile() functions are optional. processFile() Availability Dreamweaver 4. Description This function is called when there is a file to process. The Report command should process the file without modifying it and use the function, the dw.ResultsPalette.SiteReports()
endReporting() Availability Dreamweaver 4. Description This function is called at the end of the Report process. Arguments None. Returns Dreamweaver expects nothing. commandButtons() Availability Dreamweaver 4. Description Defines the buttons that should appear on the right side of the Options dialog box and their behavior when they are clicked.
configureSettings() Availability Dreamweaver 4. Description Determines whether the Report Settings button should be enabled in the Reports dialog box when this report is selected. Arguments None. Returns Dreamweaver expects a Boolean value: if the Report Settings button should be enabled; true otherwise.
CHAPTER 11 Tag Libraries and Editors Macromedia Dreamweaver MX 2004 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 that come with Dreamweaver, and you can create new tag editors.
VTML file. The following figure shows how Dreamweaver organizes the VTML files by markup language: Macromedia HomeSite users can recognize the VTML file structure, but Dreamweaver does not use VTML files in the same way as HomeSite. The most important difference is that Dreamweaver contains its own HTML renderer that displays extension user interfaces (UIs), so the Dreamweaver VTML files are not used in the GUI rendering process.
Page 205
tag groups one or more tags into a tag library. When you import tags or create a taglibrary new set of tags, you can group them into tag libraries. Typically, a grouping taglibrary corresponds to a set of tags that are defined in a JavaServer Pages (JSP) TLD file, an XML document type definition (DTD) file, an ASP.Net name space, or some other logical grouping.
Page 206
+ tagref.name tagref.prefix tagref.prefix To define tags, Dreamweaver uses a modified version of the Macromedia VTML file format. The following example demonstrates all the elements that Dreamweaver must use to define an individual tag: <tag name="input" bind="value" casesensitive="no" endtag="no">...
Page 207
The following table lists the attributes that define tags: Attribute Description Mandatory/ optional tag.bind Used by the Data Binding panel. When you Optional select a tag of this type, the attribute bind indicates the default attribute for data binding. tag.casesensitive Specifies whether the tag name is case- Optional sensitive.
Attribute Description Mandatory/ optional If omitted, Optional attrib.type attrib.type "text" It can have the following values: —free text content TEXT —a list of enumerated values ENUMERATED —a color value (name or hex) COLOR —font name or font family FONT —CSS styles attribute STYLE —a full file path FILEPATH...
Page 209
<category name="Friendly name for category node" desc='Description for incorporated reference' reference="Language[,Topic[,Subtopic]]" id="Unique id"> <category name="Friendly name for subcategory node" ICON="Relative path" desc='Description for incorporated reference' reference="Language,Topic[,Subtopic]" id="Unique id"> <element name="Friendly name for list item" value='Value to pass to visual dialog editors' desc='Description for incorporated reference' reference="Language[,Topic[,Subtopic]]"...
Description Mandatory/ Optional Value is a relative path to an icon GIF. Optional category.icon Any string that is different from the Mandatory category.id category.id attributes of other categories in this file. The following table lists the attributes of the tag, which represents the tag to insert: ELEMENT Attribute Description...
Page 211
The location of the user’s Configuration folder depends on the user’s platform. For Windows 2000 and Windows XP platforms: <drive>:\Documents and Settings\<username>\ ¬ Application Data\Macromedia\Dreamweaver MX 2004\Configuration Note: In Windows XP, this folder may be inside a hidden folder. For Mac OS X platforms: <drive>:Users:<username>:Library:Application Support: ¬...
Page 212
Creating a tag editor UI To create the cfweather tag editor user interface: Save the cfweather.htm file in the Configuration/Taglibraries/CFML folder: <!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine 5.0//dialog"> <html> <head> <title>CFWEATHER</title> <script src="../../Shared/Common/Scripts/dwscripts.js"></script> <script src="../../Shared/Common/Scripts/ListControlClass.js"></script>...
Page 213
// in tagDialogCmns.js (note that it's been included) // For more information about this function, look at the comments // for applyTagCommon in tagDialogCmn.js tagDialog.applyTagCommon(tagNodeObj, theUIObjects); function initializeUI() // define two arrays for the values and display captions for the list control var theTempatureScaleCap = new Array("celsius","fahrenheit");...
Adding a tag to Tag Chooser To add the cfweather tag to the Tag Chooser: Modify the TagChooser.xml file in the Configuration/Taglibraries/CFML folder by adding a new category called Third Party Tags, which features the tag, as shown in the cfweather following example: <category name="Third Party Tags"...
Example Suppose the user edits the following tag: <crfweather zip = “94065”/> If the editor contains a text field for editing the attribute, the function needs to initialize the form element so that the user sees the actual ZIP code in the text field, rather than an empty field. The following code performs the initialization: function inspectTag(tag) document.forms[0].zip.value = tag.zip...
applyTag() Availability Dreamweaver MX. Description When the user clicks OK, Dreamweaver calls the function. If the validateTag() function returns a value, Dreamweaver calls this function and passes the validateTag() true object that represents the current tag (the tag that is being edited). The function reads the values out of the form elements and writes them into the object.
CHAPTER 12 Property Inspectors The Property inspector is perhaps the most familiar floating panel in the Macromedia Dreamweaver MX 2004 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 and external editors for the selected element.
(and not the previous rendering engine) by inserting the following line immediately before the Tag comment, as shown in the following example: <!--DOCTYPE HTML SYSTEM “-//Macromedia//DWEtension layout-engine 5.0//pi”--> section of a Property inspector file contains an HTML form. Instead of displaying the...
The Property inspector API Two of the Property inspector API functions ( canInspectSelection() ) are required. inspectSelection() canInspectSelection() Description Determines whether the Property inspector is appropriate for the current selection. Arguments None. to get the current selection as a JavaScript object (for more dom.getSelectedNode() information about , see the Dreamweaver API Reference).
Property inspectors work, because “keywords” and “description” are values, not tags, of the tag’s attribute.) META NAME <!-- tag:INTJ,priority:5,selection:exact,vline,hline --> <!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine5.0//pi"> <HTML> <HEAD> <TITLE>Interjection Inspector</TITLE> <SCRIPT LANGUAGE="JavaScript"> function canInspectSelection(){ return true; Chapter 12: Property Inspectors...
Page 221
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 the TYPE attribute on the INTJ tag var // theType = theObj.getAttribute('type'); // Initialize a variable called typeIndex to -1.
Page 222
NAME="interjectionImage"> </SPAN> <SPAN ID="label" STYLE="position:absolute; width:23px; ¬ height:17px; z-index:16; left: 44px; top: 5px">Interjection</SPAN> <!-- If your form fields are in different layers, you must ¬ create a separate form inside each layer and reference it as ¬ shown in the inspectSelection() and setInterjectionTag() ¬ functions above.
Custom floating panel files are HTML files that reside in the Configuration/Floaters folder inside the Macromedia Dreamweaver MX 2004 application folder. The section of a floating panel BODY file contains an HTML form;...
When one of the files inside the Configuration folder calls the , or dw.getFloaterVisibility(floaterName) dw.setFloaterVisibility(floaterName) functions, the following events occur: dw.toggleFloater(floaterName) is not one of the reserved floating panel names, Dreamweaver searches the floaterName Configuration/Floaters folder for a file called .htm.
Example // the following instance of displayHelp() opens // in a browser a file that explains how to use // the extension. function displayHelp(){ var myHelpFile = dw.getConfigurationPath() + '/ExtensionsHelp/superDuperHelp.htm'; dw.browseDocument(myHelpFile); documentEdited() Description This function is called when the floating panel becomes visible and after the current series of edits is complete;...
Arguments None. Returns Dreamweaver expects a string containing the words "left" "right" "top" , and "bottom" , or a combination of them, that specifies where Dreamweaver can dock the floating panel. Example getDockingSide() return dock_side = “left top”; initialPosition() Description Determines the initial position of the floating panel the first time it is called.
Returns Dreamweaver expects a string of the form "floaterName1,floaterName2,...floaterNameN" Example The following example of the function specifies that the first time the floating initialTabs() panel appears, it should be tabbed with the scriptEditor floating panel: function initialTabs(){ return "scriptEditor"; isATarget() Availability Dreamweaver MX (Windows only).
isResizable() Availability Dreamweaver 4. Description Determines whether a user can resize a floating panel. If the function is not defined or returns a value, the user can resize the floating panel. If the function returns a value, the user true false cannot resize the floating panel.
Page 229
/* check to see if the node is a script marker */ if (theNode.nodeType == Node.ELEMENT_NODE && ¬ theNode.tagName == "SCRIPT"){ document.layers['blanklayer'].visibility = 'hidden'; document.layers['scriptlayer'].visibility = 'visible';} else{ document.layers['scriptlayer'].visibility = 'hidden'; document.layers['blanklayer'].visibility = 'visible'; About performance Declaring the function in your custom floating selectionChanged() documentEdited() panels can impact Dreamweaver performance adversely.
/* display information for the next unprocessed layer. displayLayer() is a function you would write to perform the "magic". displayLayer(document.layers[document.numProcessed]); /* if there's more work to do, set a timeout to process * the next layer. If we're finished, set the document.running * flag to false.
<br> <br> <br> <br> (no script selected) </center> </div> <div id="scriptlayer" style="position:absolute; width:422px; ¬ height:181px; z-index:1; left: 8px; top: 11px; ¬ visibility: visible"> <form name="theForm"> <textarea name="scriptCode" cols="80" rows="20" wrap="VIRTUAL" ¬ onBlur="updateScript()"></textarea> </form> </div> </body> </html> Both tags use the attribute to specify the position ( ), size ( style...
Page 232
function for the Script Editor contains the following code: selectionChanged() function selectionChanged(){ /* get the selected node */ var theDOM = dw.getDocumentDOM(); var theNode = theDOM.getSelectedNode(); /* check to see if the node is a script marker */ if (theNode.nodeType == Node.ELEMENT_NODE && ¬ theNode.tagName == "SCRIPT"){ document.layers['scriptlayer'].visibility = 'visible';...
If the selected node is not an element, or it is not a tag, the SCRIPT selectionChanged() function makes the layer visible and hides . The floating blanklayer scriptlayer blanklayer panel displays the text (no script selected), as shown in the following figure: updateScript(): write back changes function writes back the selected script when an event occurs in...
Creating a menu item It is not sufficient to save the Script Editor code in the Configuration/Floaters folder. You must also call either the function or the dw.setFloaterVisibility('scriptEditor',true) function to load the floating panel and make it visible. dw.toggleFloater('scriptEditor') The most obvious place from which to invoke the Script Editor is from the Window menu, which is defined in the menus.xml file.
(such as Check Plugin, Go to URL, Swap Image). 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 Macromedia Dreamweaver MX 2004 application folder.
How Behaviors work When a user selects an HTML element in a Dreamweaver document and clicks the Plus (+) button, the following events occur: Dreamweaver calls the function in each Action file to see whether this canAcceptBehavior() action is appropriate for the document or the selected element. If the return value of this function is the value , Dreamweaver dims the action in the false...
The Behaviors API Two Behaviors API functions are required ( ); the applyBehavior() behaviorFunction() rest are optional. applyBehavior() Description This function inserts into the user’s document an event handler that calls the function that the function inserts. The function can also perform other behaviorFunction() applyBehavior() edits on the user’s document, but it must not delete the object to which the behavior is being...
document.theForm.width.value); if (document.theForm.height.value) argArray[arrayIndex++] = ("height=" + ¬ document.theForm.height.value); theURL = escape(document.theForm.URL.value); theName = document.theForm.winName.value; return "MM_openBrWindow('"+theURL+"',¬ '"+theName+"','"+argArray.join()+"')"; behaviorFunction() Description This function inserts one or more functions—surrounded by the following tags, if they don’t yet exist—into the section of the user’s document: HEAD <SCRIPT LANGUAGE="JavaScript"></SCRIPT>...
canAcceptBehavior() Description This function determines whether the action is allowed for the selected HTML element and specifies the default event that should trigger the action. Can also check for the existence of certain objects (such as SWF files) in the user’s document and not allow the action if these objects do not appear.
Example // the following instance of displayHelp() opens // in a browser a file that explains how to use // the extension. function displayHelp(){ var myHelpFile = dw.getConfigurationPath() + '/ExtensionsHelp/superDuperHelp.htm'; dw.browseDocument(myHelpFile); deleteBehavior() Description This function undoes any edits that the function performed.
Page 241
• argument type specifies that the argument is both a navigational URL and a dependent URL or that it is a URL of an unknown type and should appear in the site map and be considered a dependent file when downloading from or uploading to a server. •...
inspectBehavior() Description This function inspects the function call for a previously applied behavior in the user’s document and sets the values of the options in the Parameters dialog box accordingly. If the function is not defined, the default option values appear. inspectBehavior() Note: The function must rely solely on information that the...
Netscape Navigator and another if the brand is Microsoft Internet Explorer. This code can easily be expanded to check for other brands such as Opera and WebTV and modified to perform actions other than going to URLs. <!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine 5.0//dialog"> <html> <head>...
Page 244
//******************* API ********************** function canAcceptBehavior(){ return true; // Return the name of the function to be inserted into // the HEAD of the user's document function behaviorFunction(){ return "checkBrowserBrand"; // Create the function call that will be inserted // with the event handler function applyBehavior() { var nsURL = escape(document.theForm.nsURL.value);...
Page 245
<table border="0" cellpadding="8"> <tr> <td nowrap="nowrap"> Go to this URL if the browser is ¬ Netscape Navigator:<br> <input type="text" name="nsURL" size="50" value=""> <input type="button" name="nsBrowse" value="Browse..." ¬ onClick="browseForURLs('nsURL')"></td> </tr> <tr> <td nowrap="nowrap"> Go to this URL is the browser is ¬ Microsoft Internet Explorer:<br>...
CHAPTER 15 Server Behaviors Macromedia Dreamweaver MX 2004 provides users with an interface for adding server behaviors into their documents to perform server-side tasks such as filtering records based on user criteria, paging through records, linking result lists to details pages, and inserting records into a result set.
Note: For information about participants, participant groups, and how Dreamweaver EDML files are structured, see “Extension Data Markup Language” on page 248. Dreamweaver architecture When you use the Server Behavior Builder to create a Dreamweaver-specific extension, Dreamweaver creates several files (EDML and HTML script files) that support inserting the Server Behavior code into a Dreamweaver document (some behaviors also reference JavaScript files for additional functionality).
Page 249
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 single participant file. For example, the moveTo_declareParam.edml file contains the following code: <participant>...
Page 250
To create a new dynamic page document: In Dreamweaver, select the File > New menu option. In the New Document dialog box, select Category: Dynamic Page and Dynamic Page: ASP JavaScript Click Create. To use the Server Behavior Builder to define your new server behavior: Note: If the Server Behaviors panel is not open and visible, select the Window >...
How the Server Behavior API functions are called The Server Behavior API functions are called in the following scenarios: • function is called when the document opens and again when findServerBehaviors() the participant is edited. It searches the user’s document for instances of the server behavior. For each instance it finds, the function creates a JavaScript object, findServerBehaviors()
Page 252
If you do not want a file that is in the ServerBehaviors folder to appear in the menu, put the following statement on the first line in the HTML file: <!-- MENU-LOCATION=NONE --> • When the user selects an item from the menu, the function is canApplyServerBehavior() called.
The Server Behavior API You can manage server behaviors with the following API functions. analyzeServerBehavior() Availability Dreamweaver UltraDev 1 Description Lets server behaviors set their properties. incomplete deleted After the function is called for every server behavior on the page, an findServerBehaviors() array of all the behaviors in the user’s document appears.
applyServerBehavior() Availability Dreamweaver UltraDev 1. Description Reads values from the form elements in the dialog box and adds the behavior to the user’s document. Dreamweaver calls this function when the user clicks OK in the Server Behaviors dialog box. If this function returns successfully, the Server Behaviors dialog box closes. If this function fails, it displays an error message without closing the Server Behaviors dialog box.
copyServerBehavior() Availability Dreamweaver UltraDev 1. Description Implementing the function is optional. Users can copy instances of the copyServerBehavior() specified server behavior. In the following example, this function is implemented for recordsets. If a user selects a recordset in the Server Behaviors panel or the Data Binding panel, using the Copy command copies the behavior to the Clipboard;...
displayHelp() Description If this function is defined, a Help button appears below the OK and Cancel buttons in the dialog box. This 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 browser a file that explains how to use // the extension.
inspectServerBehavior() Availability Dreamweaver UltraDev 1. Description Determines the settings for the Server Behavior dialog box, based on the specified behavior object. Dreamweaver calls the function when a user opens a Server inspectServerBehavior() Behavior dialog box. Dreamweaver calls this function only when a user edits an existing behavior. Arguments serverBehavior •...
Server behavior implementation functions These functions can be added or edited within the HTML script files or the specified JavaScript files that are listed within the HTML script file. dwscripts.findSBs() Availability Dreamweaver MX (this function replaces the function from earlier versions findSBs() of Dreamweaver).
dwscripts.applySB() Availability Dreamweaver MX (this function replaces the function from earlier versions applySB() of Dreamweaver). Description Inserts or updates runtime code for the server behavior. If the parameter has a value, sbObj null it inserts new runtime code; otherwise, it updates existing runtime code that is indicated by the object.
Arguments sbObj • argument is the server behavior object instance that you want to remove from the sbObj user’s document. Returns Dreamweaver expects nothing. Example The following example deletes all the participants of the server behavior, except the sbObj participants that are protected by the EDML file’s tag.
Regular Expression Description ( ...) Creates a parenthetical subexpression within the metasequence Searches for white spaces The EDML tag declares that runtime code <searchPatterns whereToSearch="directive"> needs to be searched. Each subtag defines one pattern <searchPattern>...</searchPattern> in the runtime code that must be identified. For the Redirect If Empty example, there are two patterns.
CDATA <%= %> processed. Instead, the Extension Data Manager (EDM) receives the uninterpreted text, as shown in the following example: <% if (Recordset1.EOF) Response.Redirect("http://www.macromedia.com"); %> In the following EDML definitions, the locations where the tag is recommended are CDATA indicated in the examples.
Page 263
Required serverBehavior Description attribute indicates which server behavior can use the group. When any of serverBehavior the group’s participant strings are found in the document, the server behavior that quickSearch is indicated by the attribute has Dreamweaver call the serverBehavior function.
Page 264
Value The exact name of a data source file within a Configuration/DataSources folder, as shown in the following example: <group serverBehavior="Repeat Region.htm" ¬ dataSource="myCOMdataSource.htm"> This group defines a new implementation of the Repeat Region server behavior to use if you use the COM data source.
This group attribute defines the long version of the subtype. You would also myServerBehavior have a version with the attribute. In the subType="shortVersion" applyServerBehaviors() function, you can indicate which group should be applied by setting the property on MM_subType the parameter object, as shown in the following example: function applyServerBehavior(ssRec) { var paramObj = new Object();...
<groupParticipants> attributes The following items are valid attributes of the groupParticipants tag. selectParticipant Description Indicates which participant should be selected and highlighted in the document when an instance is selected in the Server Behaviors panel. The server behavior instances that are listed in this panel are ordered by the selected participant, so set the attribute even if selectParticipant...
Page 267
name Description This attribute names a particular participant to be included in the group. The attribute on name tag should be the same as the filename of the participant (without the groupParticipant .edml file extension). Parent groupParticipant Type Attribute. Required Yes.
• value indicates that the participant is optional and multiple copies of it can be multiple associated with the server behavior. Any parameters that are unique to this participant are not used when grouping participants because they might have different values. •...
Required <quickSearch> Description This tag is a simple search string that is used for performance reasons. It cannot be a regular expression. If the string is found in the current document, the rest of the search patterns are called to locate specific instances. This string can be empty to always use the search patterns. Parent participant Type...
Value The value is the text to insert in the document. If any parts of the text need customizing, they can be passed in later as parameters. Parameters should be embedded within two at ( ) signs. Because this text can interfere with the EDML structure, it should use the construct, as CDATA shown in the following example:...
Page 271
• value inserts the text before the current selection or insertion point. If beforeSelection there is no selection, it inserts the text at the end of the tag. BODY • value replaces the current selection with the text. If there is no replaceSelection selection, it inserts the text at the end of the tag.
Required This attribute is required only if the insert location contains the word node Value value is a user-specified name for the node parameter that passes with the tagtype__Tag parameter object to the function. For example, if you insert some text dwscripts.applySB() into a form, you might use a parameter.
<searchPatterns> attributes The following items are valid attributes of the searchPatterns tag. whereToSearch Description This attribute specifies where to search for the participant text. This attribute is related to the insert location, so be sure to set each attribute carefully (see “location”...
<searchPattern> Description This tag is a pattern that identifies participant text and extracts parameter values from it. Each parameter subexpression must be enclosed in parentheses (). You can have patterns with no parameters (which are used to identify participant text), patterns with one parameter, or patterns with many parameters.
Sometimes you might want to assign the entire contents of the limited search location to a parameter. In that case, provide no pattern, as shown in the following example: <searchPatterns whereToSearch="tag+OPTION"> <searchPattern>MY_OPTION_NAME</searchPattern> <searchPattern paramNames="optionLabel" limitSearch="innerOnly"> </searchPattern> </searchPatterns> This example sets the parameter to the entire contents of an optionLabel...
Page 276
There are two parameters (with some text in between them) to extract. Given the text: , the first subexpression in the search pattern matches "a" , so . The <%= a_BIG_b %> p1="a" second subexpression is ignored (note the in the value).
Type Attribute. Required Values true false • The value is if the is not necessary to identify the participant. true searchPattern • The value is (default) if the tag is required. false searchPattern For example, consider the following simple recordset string: <% var Recordset1 = Server.CreateObject("ADODB.Recordset");...
Type Block tag. Required <updatePattern> Description This tag is a specific type of regular expression that lets you update participant text precisely. There should be at least one update pattern definition for every unique parameter that is declared in the insertion text (of the form @@paramName@@ Parent updatePatterns...
If the participant text is long and complex, you might need multiple patterns to update a single parameter, as shown in the following example: <% ... Recordset1.CursorType = 0; Recordset1.CursorLocation = 2; Recordset1.LockType = 3; %> To update the recordset name in all three positions, you need three update patterns for a single parameter, as shown in the following example: <updatePattern paramName="rs">...
<delete> Description This tag is an optional advanced feature lets you control how to delete a participant. Without this tag, the participant is deleted by removing it completely but only if no server behaviors refer to it. By specifying a tag, you can specify that it should never be deleted or that only portions <delete>...
• value, when applied to tags, removes only the specified attribute. attribute+attribName It is meaningless for directives and attributes. • value removes all attributes for tags. It is meaningless for directives attribute+* and attributes. If your server behavior converts selected text into a link, you can remove the link by removing the outer tag only, as shown in the following example: <delete deleteType="tagOnly"/>...
<translations> 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 participant. Parent translator Type Block tag. Required <translation> 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.
Page 283
limitSearch Description This attribute limits the search to some part of the tag. whereToSearch Parent translation Type Attribute. Required translationType Description This attribute indicates the type of translation to perform. These types are preset and give the translation specific functionality. For example, if you specify , any data that is "dynamic data"...
• value indicates that the translated tags define the tabbed region start <CFLOOP> beginning of a tabbed outline, as shown in the following example: <translation whereToSearch="CFLOOP" translationType="tabbed region start"> • value indicates that the translated tags define the end of tabbed region end </CFLOOP>...
<attribute> Description This tag specifies a single attribute (or translated attribute) to add to the translated tag. Parent attributes Type Block tag. Required Yes (at least one). Values specification sets an attribute to a value. Typically, the attributeName="attributeValue" attribute name is fixed, and the value contains some parameter references that are extracted by the parameter patterns, as shown in the following example: <attribute>SOURCE="@@rs@@"</attribute>...
<closeTag> Description This optional tag should be inserted at the end of the translated section. This tag enables certain other extensions, such as custom Property inspectors, to find the translation. Parent translation Type Block tag. Required Values value is a valid tag name; it should match a translation tag.
Page 287
Next, the tag searches the document more precisely than the searchPattern quickSearch and extracts parameter values from the participant code. The search patterns specify where to search (the attribute) with a series of tags that contain specific whereToSearch searchPattern patterns. These patterns can use simple strings or regular expressions. The previous example code is an ASP directive, so the specification and a regular expression whereToSearch="directive"...
Page 288
Now the participant is recognized, even if the telephone number is not found. How participants are matched If a server behavior has more than one participant, the participants must be identified in the user’s document and matched. If the user applies multiple instances of the server behavior to a document, each group of participants must be matched accordingly.
Page 289
Within the tag, matching can also use position information. In the following example, there html are two participants, one that is added before the selection and another that is added after the selection: <% if (expression) { //mySBName %> Random HTML selection here <% } //end mySBName %>...
Search pattern resolution Dreamweaver supports the following actions by using the participant functionality: searchPatterns • File transfer dependency • Updating the file paths for any file reference (such as those for include files) When Dreamweaver creates server models, it builds lists of patterns by scanning all the participants for special attributes.
Page 291
If the user customizes participant code in the document, the participant might not be recognized if the search patterns look for the old code. Shorter search patterns can let the user customize the participant code in their document; however, updating the server behavior instance can cause the participant to be replaced, which loses the custom edits.
Deleting server behaviors Default deletion and dependency counts The user can delete an instance that is selected in the Server Behaviors panel by clicking the Minus (-) button or pressing Delete. All the participants are removed except for the ones that are shared by other server behaviors. Specifically, if more than one server behavior has a participant pointer to the same node, the node is not deleted.
CHAPTER 16 Data Sources The Macromedia Dreamweaver MX 2004 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 in the Dreamweaver API Reference).
Page 294
Dreamweaver goes through each file in the appropriate server model folder, calling the function in each file. For each value in the returned array, findDynamicSources() Dreamweaver calls the function in the same file to get a generateDynamicSourceBindings() new list of all the fields in each data source for the user’s document. Those fields are presented to the user as a tree control in the Dynamic Data or the Dynamic Text dialog box or in the Bindings panel.
The Data Sources API The functions in the Data Sources API let you find, add, edit, and delete data sources and also generate and inspect dynamic data objects. addDynamicSource() Availability Dreamweaver UltraDev 1. Description Adds a dynamic data source. Because there is one implementation of this function in each data source file, Dreamweaver calls the appropriate implementation of the addDynamicSource() function when you select a data source from the Plus (+) menu.
Arguments sourceName bindingName • argument is the name of the top-level node to which the child node is sourceName associated. • argument is the name of the child node. bindingName Returns Dreamweaver expects nothing. displayHelp() Description If this function is defined, a Help button appears below the OK and Cancel buttons in the dialog box.
Returns Dreamweaver expects a Boolean value: if the function has handled the edit; true otherwise. false findDynamicSources() Availability Dreamweaver UltraDev 1. Description Returns the top-level nodes from the data source tree that appears in the Dynamic Data or the Dynamic Text dialog box or in the Bindings panel. Each data source file has an implementation of the function.
Arguments sourceName bindingName • argument is the name of the top-level node that is associated with the sourceName child node. • argument is the name of the child node from which you want to generate a bindingName dynamic data object. Returns Dreamweaver expects a string, which can be passed to the function to...
inspectDynamicDataRef() Availability Dreamweaver UltraDev 1. Description Determines the corresponding node in the data source tree from a dynamic data object. The function compares the string that Dreamweaver passes in to the inspectDynamicDataRef() string that returns for each node in the tree. If a match is found, generateDynamicDataRef() function indicates which node in the tree matches the passed-in inspectDynamicDataRef()
Creating the data source definition file First, when a user clicks on the Bindings Plus (+) menu, Dreamweaver searches the DataSources folder for the current server model to gather all available data sources defined in the folder’s HTML (HTM) files. So, to make a new data source available to the user, you need to create a data source definition file that simply provides the name of the data source using the TITLE and the location of all supporting JavaScript files using the...
Creating the JavaScript file that implements the Data Sources API functions After you have defined the name of the data source, the name of the supporting script files, and the code for the working Dreamweaver document, you need to write out the JavaScript functions for Dreamweaver to provide the user with the ability to add, insert, and delete the necessary code into a document.
Page 302
retList.push(new DataSource("MyDatasource", MyDatasource_FILENAME, false, "MyDatasource.htm")) 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) var bindingsArray = dwscripts.getListValuesFromNote(siteURL, sourceName); retVal = getDataSourceBindingList(bindingsArray, DATASOURCELEAF_FILENAME, true, "MyDatasource.htm");...
JavaScript files as well as the form for the dialog box that the user sees. Create an HTML file with the following content (where MyDatasource_Variable.js is the implementation file that you will create later): <!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine 5.0//dialog"> <html> <head>...
<input name="theName" type="text" class="medTField"> </td> </tr> </table> </div> </form> </body> </html> Save the file in the Configuration/Commands folder as MyDatasource_Variable.htm. Then, as shown in the following example, the supporting JavaScript file simply determines the buttons for the dialog box and how to assign the user input from the dialog box: //******************* API ********************** function commandButtons(){ return new Array(MM.BTN_OK,"okClicked()",MM.BTN_Cancel,"window.close()");...
Page 305
To test your new data source: With the pointer in the document, click on the Bindings Plus (+) menu to see all the available data sources. MyDatasource should appear at the bottom of the list: Click the MyDatasource data source option, and the MyDatasource Variable dialog box you created appears: Enter a value in the dialog box and click OK.
Page 306
Drag the variable to your document, and Dreamweaver will insert the appropriate code from the EDML file: Chapter 16: Data Sources...
Server Formats Chapter 16, “Data Sources,” on page 293, discusses how Macromedia Dreamweaver MX 2004 inserts dynamic data into a user’s document by adding a server expression at the appropriate location. When a visitor requests the document from the web server, that server expression is converted to a value from a database, the contents of a request variable, or some other dynamic value.
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 automatically adds the Edit Format List and None options. The folder also contains one HTML file for each currently installed format type, which includes , and AlphaCase...
The Edit Format List Plus (+) menu If you do not want a file in the ServerFormats folder to appear in the Edit Format List Plus (+) menu, add the following statement as the first line of the HTML file: <!-- MENU-LOCATION=NONE -->...
The Server Formats API 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. When a user selects a format from the Format text field 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 tag (if it’s not already there), and it changes the dynamic data object to call the appropriate format function.
Arguments format • argument corresponds to the JavaScript object. The function must set the format format property of the JavaScript object to be the regular expression for the format. The expression function can also set other, arbitrarily named properties of the object. Each property is stored as an attribute of the tag.
Dreamweaver adds the function declaration by calling the JavaScript applyFormat() function in the data format file. It changes the dynamic data object by calling the function. formatDynamicDataRef() function is called when the user selects a format from the Format formatDynamicDataRef() text box in the Dynamic Data or the Dynamic Text dialog box or in the Bindings panel.
Different technologies offer programmers different ways to accomplish this encapsulation, and different names describe these strategies: functions, modules, and others. Macromedia Dreamweaver MX 2004 uses the term component to refer to some of the more popular and modern encapsulation strategies, including web services, JavaBeans, and ColdFusion components (CFCs).
How to customize the Component panel The Dreamweaver Component panel lets users load and work with components. It lists all the available component types that are compatible with each enabled server model. For instance, because JavaBeans can work only on a JavaServer Page (JSP), JavaBeans components appear only in the JSP server model within the Component panel.
Page 315
Adding a service component To add a new lightweight directory access protocol (LDAP) service using Dreamweaver MX: Using existing component type files as a model (such as the files in the application folder Configuration/Components/Common/WebServices) create all the required files, plus the desired optional files, to display the new component type in the Dreamweaver Components panel, as shown in the following table: Filename...
Populating the tree control Use the property to populate a Component panel tree control, so that it appears ComponentRec within the Component panel in the proper location. Every node in a tree control must have the following properties: Property name Description Required/ Optional...
Returns An array of objects. ComponentRec Example in the WebServices.js file in the function getComponentChildren(componentRec) Configuration/Components/Common/WebServices folder. getContextMenuId() Availability Dreamweaver MX. Description: Returns the Context Menu ID for the component type. Every component type can have a context menu associated with it. The Context Menu pop-up menus are defined in the ComponentNameMenus.xml file, and they work the same way as the menu.xml file.
getCodeViewDropCode() Availability Dreamweaver MX. Description This function gets the code that is dragged and dropped in Code view from the Component panel or the code that is cut, copied, or pasted from the Component panel. Arguments componentRec • argument is an object. componentRec Returns The string that contains the code for the component.
<a href=”#” onMouseDown="handler">Blue Underlined Text</a> value can be replaced by any of the following strings or any JavaScript "handler" expression, such as " ": dw.browseDocument('http://www.macromedia.com') • handler opens a dialog box to set the current site. "Event:SetCurSite" • handler opens a dialog box to create a new site.
Example The following example sets four steps for ColdFusion components, and provides a hypertext link in the fourth step so the user can enter the RDS user name and password: function getSetupSteps() var doSDK = false; dom = dw.getDocumentDOM(); if (dom && dom.serverModel) var aServerModelName = dom.serverModel.getDisplayName();...
Returns An integer that represents the number of setup steps the user has completed, as described in the following list: • A value of either zero or a positive integer indicates the number of completed steps. • A value of indicates that all the necessary steps are complete, so the instruction list does not appear.
Example The following example determines if the component is a table or view, and then returns the appropriate value: bHandled function handleDesignViewDrop(componentRec) var bHandled = false; if (componentRec) if ((componentRec.objectType == "Table")|| (componentRec.objectType == "View")) alert("popup Recordset Server Behavior"); bHandled = true; return bHandled;...
Example In the following example, the extension has a chance to handle a double-click on the tree node item; if it returns the value , the default behavior is to expand/collapse the nodes. false function handleDoubleClick(componentRec) var selectedObj = dw.serverComponentsPalette.getSelectedNode(); if(dwscripts.IS_WIN) if (selectedObj &&...
Page 324
Property Name Description command The JavaScript code to execute. The command handler can force a refresh using function. dreamweaver.serverComponents.refresh() The unique menu ID for the pop-up menu button when the button is clicked. menuId When this ID is present, it overrides the command handler. In other words, the button can be either a button associated with a command, or a button that has a pop-up menu associated with it, but not both at the same time.
You might want to create a specialized server model. Macromedia suggests that you create a new server model rather than editing any of the ones that come with Dreamweaver. (For information regarding creating new document types that are supported by your server model, see “Extensible...
Note: All Dreamweaver-defined server models return a value of 1, so third-party server models can override the file-extension association. Arguments • argument is the Macromedia document object, which is returned by the function. dreamweaver.getDocumentDOM() Returns Dreamweaver expects an integer that indicates the priority that you give to the server model for the file extension.
Description Returns the document file extensions with which a server model can work. For 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 the Default Page Extension list that is found in the App Server category in the Site Definition dialog box.
getServerExtension() Availability Dreamweaver UltraDev 4, deprecated in Dreamweaver MX. Description This function returns the default file extension of files that use the current server model. The object is set to the server model of the currently selected site if no user document is serverModel currently selected.
getServerLanguages() Availability Dreamweaver UltraDev 1, deprecated in Dreamweaver MX. Description This function returns the supported scripting languages of a server model with an array of strings. Dreamweaver uses these strings to populate the Default Scripting Language list that is found in the App Server category in the Site Definition dialog box.
getServerModelDelimiters() Availability Dreamweaver MX. Description This function returns the script delimiters that the application server uses, and it indicates whether each delimiter can participate in merging code blocks. You can access this returned value from JavaScript by calling the function. dom.serverModel.getDelimiters() Arguments None.
getServerModelFolderName() Availability Dreamweaver MX. Description This function returns the folder name to use for this server model within the Configuration folder. You can access this value from JavaScript by calling the function. dom.serverModel.getFolderName() Arguments None. Returns Dreamweaver expects a string, such as "ASP_JS"...
getVersionArray() Availability Dreamweaver UltraDev 1, deprecated in Dreamweaver MX. Description This function retrieves the mapping of server technologies to version numbers. This function is called by the function. dom.serverModel.getServerVersion() Arguments None. Returns Dreamweaver expects an array of version objects, each with a version name and version value, as listed in the following examples: •...
Data Translators Data translators translate specialized markup—server-side includes, conditional JavaScript statements, or other code such as PHP3, JSP, CFML, or ASP—into code that Macromedia Dreamweaver MX 2004 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 or attribute—...
• Pastes or drags content into or within the Document window • Saves changes to a dependent file • Invokes a command, behavior, server behavior, Property inspector, or other extension that sets property of any tag object or the property of any comment innerHTML outerHTML data...
Page 337
string specifies when this translator executes. The following list gives the runDefault possible string values: String Definition Sets the translator to always execute. "allFiles" Sets the translator to never execute. "noFiles" Sets the translator to execute for files that have one of the file "byExtension"...
translateMarkup() Description This function performs the translation. Arguments docName siteRoot docContent • argument is a string that contains the file:// URL for the document to be docName translated. • argument is a string that contains the file:// URL for the root of the site that siteRoot contains the document to be translated.
Arguments docName siteRoot docContent • argument is a string that contains the file:// URL for the document to docName be translated. • argument is a string that contains the file:// URL for the root of the site that siteRoot contains the document to be translated. If the document is outside a site, this string might be empty.
Adding a translated attribute to a tag Attribute translation relies on the Dreamweaver parser to ignore server markup. By default, Dreamweaver already ignores the most common kinds of server markup (including ASP, CFML, and PHP); if you use server markup that has different opening and closing markers, you must modify the third-party tag database to ensure that your translator works properly.
Page 341
A simple attribute translator example To better understand attribute translation, it’s helpful to look at an example. The following translator is Pound Conditional (Poco) markup, a syntax that’s somewhat similar to ASP or PHP. The first step in making this translator work properly is to create a tag for Poco markup, tagspec which prevents Dreamweaver from parsing the untranslated Poco statements.
Page 342
// Boolean indicating whether the attribute is part of // the conditional statement var trueStart; // The beginning of the true case var falseStart; // The beginning of the false case var trueValue; // The HTML that would render in the true case var attName;...
Page 343
break; transValue = attName + '="' + trueValue + '"'; transAtt = ' mmTranslatedValue' + count + '="' + ¬ escape(transValue) + '"'; outStr = outStr.substring(0,end+4) + transAtt + ¬ outStr.substring(end+4); // If attAndValue is true, and tokens is greater than // 1, then trueValue is a series of attribute/value // pairs, not just one.
returnArray[8] = "50"; return returnArray </script> </head> <body> </body> </html> Inspecting translated attributes When server markup specifies a single attribute and the attribute is represented in a Property inspector, Dreamweaver displays the server markup in the Property inspector, as shown in the following figure: The markup appears whether or not a translator is associated with it.
Locking translated tags or blocks of code In most cases, you want a translator to change markup so that Dreamweaver can display it, but you want to save the original markup, not the changes. For such cases, Dreamweaver provides special XML tags in which to wrap translated content and to refer to the original code. When you use these XML tags, the contents of the original attributes are duplicated in Code view.
[<A TARGET="_top" HREF="/company/">about us</A>] [<A TARGET="_top" HREF="/help/">help</A>] </CENTER> <!-- end footer --> <MM:EndLock> A simple block/tag translator example To help understand translation, look at a translator that is written entirely in JavaScript, which does not rely on a C library for any functionality. The following translator example would be more efficient if it was written in C, but the JavaScript version is simpler, which makes it perfect for demonstrating how translators work.
Page 347
// in the document. var replCode = replaceKentTag(); // Calls the replaceKentTag() function // to get the code that will replace KENT. var outStr = ""; // The string to be returned after translation //If the document does not contain any content, terminate the translation. if ( inStr.length <= 0 ){ return "";...
Page 348
replCode = replCode + imgTag; replCode = replCode + end; return replCode; /****************************************************************** * The getImage() function determines which image to display * based on the day of the week, the time of day and the * user's platform. The day and time are figured based on UTC * time (Greenwich Mean Time) minus 8 hours, which gives * Pacific Standard Time (PST).
Page 349
//Or else it's after 6pm but before the stroke of midnight }else if (SFhour >= 18){ //If it's Saturday if (day == 6){ imageRef = "images/kent_dancing.jpg"; //If it's not Saturday, check the user's platform }else if (platform == "MacPPC"){ imageRef = "images/kent_hardAtWorkOnMac.jpg"; }else{ imageRef = "images/kent_hardAtWorkOnWin.jpg";...
Page 350
function for the untranslated Property inspector is simple. canInspectSelection() HAPPY Because the selection type is exact, it can return a value of without further analysis. For the true translated Property inspector, this function is more complicated; the keyword HAPPY *LOCKED* indicates that the Property inspector is appropriate when the selection is within a locked region, but because a document can have several locked regions, further checks must be performed to determine if the Property inspector matches this particular locked region.
Page 351
After you parse the attribute to populate the fields in the Property inspector for the orig translated tag, the next step is probably to set the value of the attribute if the user changes orig the value in any of the fields. You might find restrictions against making changes in a locked region.
Finding bugs in your translator If the function contains certain types of errors, the translator loads properly, translateMarkup() but it fails without an error message when you invoke it. Although failing silently prevents Dreamweaver from becoming unstable, it can hinder development, especially when you need to find one small syntax error in multiple lines of code.
CHAPTER 21 C-Level Extensibility The C-level extensibility mechanism lets you implement Macromedia Dreamweaver MX 2004 extensibility files using a combination of JavaScript and custom C code. You define functions using C, bundle them in a dynamic linked library (DLL) or a shared library, save the library in the Configuration/JSExtensions folder within the Dreamweaver application folder, and then call the functions from JavaScript using the Dreamweaver JavaScript interpreter.
Page 354
readContentsOfFile(JSContext *cx, JSObject *obj, unsigned int ¬ argc, jsval *argv, jsval *rval) char *fileName, *fileContents; JSBool success; unsigned int length; /* Make sure caller passed in exactly one argument. If not, * then tell the interpreter to abort script execution. if (argc != 1){ JS_ReportError(cx, "Wrong number of arguments", 0);...
Note: The library can be implemented in either C or C++, but the file that contains the MM_Init() function and the macro must be implemented in C. The C++ compiler garbles function MM_STATE names, which makes it impossible for Dreamweaver to find the function.
The C-level API The C-level extensibility API consists of the following functions: typedef JSBool (*JSNative)(JSContext *cx, JSObject *obj, unsigned int argc, jsval *argv, jsval *rval) Description This function signature describes C-level implementations of JavaScript functions in the following situations: • pointer is a pointer to an opaque structure, which must be passed to some JSContext...
char *JS_ValueToString() Description This function extracts a function argument from a structure, converts it to a string, if jsval possible, and passes the converted value back to the caller. Note: Do not modify the returned buffer pointer or you might corrupt the data structures of the JavaScript interpreter.
JSBool JS_ValueToDouble() Description This function extracts a function argument from a structure, converts it to a double (if jsval possible), and passes the converted value back to the caller. Arguments JSContext *cx jsval v double *dp • argument is the opaque pointer that passed to the JavaScript function.
Returns A Boolean value: indicates success; indicates failure. JS_TRUE JS_FALSE JSBool JS_StringToValue() Description This function stores a string return value in a structure. It allocates a new JavaScript string jsval object. Arguments JSContext *cx char *bytes size_t sz jsval *vp •...
JSVal JS_BooleanToValue() Description This function stores a Boolean return value in a structure. jsval Arguments JSBool bv • argument is a Boolean value: indicates success; indicates failure. JS_TRUE JS_FALSE Returns structure that contains the Boolean value that passes to the function as an argument. JSVal JSVal JS_IntegerToValue() Description...
Arguments JSObject *obj • Typically, this argument is passed in and converted using the function. JS_ValueToObject() Returns A pointer to a null-terminated string. The caller should not free this string when it finishes. JSObject *JS_NewArrayObject() Description This function creates a new object that contains an array of JSVals Arguments JSContext *cx...
JSBool JS_GetElement() Description This function reads a single element of an array object. Arguments JSContext *cx JSObject *obj unsigned int index jsval *v • argument is the opaque pointer that passes to the JavaScript function. JSContext • argument is a pointer to an array object. •...
JSBool JS_ExecuteScript() Description This function compiles and executes a JavaScript string. If the script generates a return value, it returns in *rval Arguments JSContext *cx JSObject *obj char *script unsigned int sz jsval *rval • argument is the opaque pointer that passes to the JavaScript function. JSContext •...
File Access and Multiuser Configuration API Macromedia recommends that you always use the File Access and Multiuser Configuration API to access the file system through C-level extensions. For files other than configuration files, the functions access the specified file or folder.
Snippets panel list. If a C-level extension calls the function for the file:///c|Program Files/ MM_ConfigFileExists() Macromedia/Dreamweaver/Configuration/Snippets/javascript/onepixelborder.csn URL, it returns a value of . Likewise, if a JavaScript extension tries to call false dw.getDocumentDom("file:///c|Program Files/Macromedia/Dreamweaver/...
Dreamweaver Configuration folder, subject to filtering by the mm_deleted_files.xml file. Examples JSObject *jsobj_array; jsobj_array = MM_GetConfigFolderList("file:///¬ c|/P rogram Files/Macromedia/Dreamweaver/Configuration", "directories" ); JSBool MM_ConfigFileExists() Availability Dreamweaver MX. Description This function checks whether the specified file exists. If it is a file in a configuration folder, the function searches for the file in the user Configuration folder or the Dreamweaver Configuration folder.
An integer that is the operating system file handle for this file. Returns -1 if the file cannot be found or does not exist. Example char *dwConfig = "file:///c|/ rogram Files/Macromedia/Dreamweaver/ Configuration/Extensions.txt"; int = fileno; if(MM_ConfigFileExists(dwConfig)) fileno = MM_OpenConfigFile(dwConfig, "read");...
JS_TRUE JS_FALSE JS_FALSE file does not exist or an error occurs while getting the attributes. Example char dwConfig = "file:///c|/ rogram Files/Macromedia/Dreamweaver/ Configuration/Extensions.txt"; unsigned long attrs; unsigned long filesize; unsigned long modtime; unsigned long createtime; MM_GetConfigAttributes(dwConfig, &attrs, &filesize, &modtime, &createtime);...
JS_TRUE JS_FALSE JS_FALSE file does not exist or it is marked for deletion. Example char *dwConfig = "file:///c|/ rogram Files/Macromedia/Dreamweaver/ Configuration/Extensions.txt"; unsigned long attrs; attrs = (MM_FILEATTR_NORMAL | MM_FILEATTR_RDONLY); int fileno = 0; if(MM_SetConfigFileAttrs(dwConfig, attrs)) fileno = MM_OpenConfigFile(dwConfig);...
A Boolean value: indicates success; indicates failure. JS_TRUE JS_FALSE Example char *dwConfig = "file:///c|/ rogram Files\Macromedia\Dreamweaver \Configuration\Extensions.txt"; MM_CreateConfigFolder(dwConfig); JSBool MM_RemoveConfigFolder() Availability Dreamweaver MX. Description This function removes the folder and its files and subfolders. If the folder is in the Dreamweaver Configuration folder, it marks the folder for deletion in the mm_deleted_files.xml file.
JS_TRUE JS_FALSE Example char dwConfig = "file:///c:| rogram Files\Macromedia\Dreamweaver \Configuration\Objects\insertbar.xml"; MM_DeleteConfigFile(dwConfig); Calling a C function from JavaScript After you understand how C-level extensibility works in Dreamweaver and its dependency on certain data types and functions, it’s useful to know how to build a library and call a function.
Page 372
To call the computeSum() function from the Insert Horizontal Rule object: Create a folder called JSExtensions in the Configuration folder within the Dreamweaver application folder. Copy Sample.dll (Windows) or Sample (Macintosh) to the JSExtensions folder. In a text editor, open the HR.htm file in the Configuration/Objects/Common folder. Add the line to the function, as shown in...
Find information about supporting files and reference resources that can aid in developing Macromedia Dreamweaver MX 2004 extensions. Appendix A: The Shared Folder ..........375...
HTML files in the Configuration folder that include these JavaScript files so that you can investigate how they are used. Generally, you use the functions and resources in the Common and Macromedia (MM) folders or add resources to the Common folder for use in new extensions. You should always look in the Shared/Common/Scripts folder first for utilities and functions.
The Common folder The Common folder has shared scripts and classes for use in third-party extensions. CodeBehindMgr.js Contains functions for creating a code-behind document. A code-behind document lets you create distinct pages that separate the code for user interface (UI) logic from the code for a UI design.
ListControlClass.js Contains functions that manage a tag>, also known as a <select> list control. The methods of the object in this file get, ListControl set, and change the value of the control. SELECT PageSettingsASPNet.js Contains functions that set the properties of an ASP .NET document.
Page 378
Also, houses functionality shared between the UI implementations and mediates switches between the UIs. sbUtils.js Contains shared functions for use within Macromedia server behaviors. The class in the Configuration/Shared/ dwscripts Common/Scripts folder contains more general purpose utilities.
Page 379
The Class folder The Class folder contains the following utility functions: classCheckbox.js Helps manipulate a checkbox control in your HTML extension. FileClass.js Contains class that represents a file in the file system. The paths are represented by URLs for cross-platform compatibility. Methods include toString() getName()
Page 380
The CMN folder The CMN folder contains the following utility functions: dateID.js Contains two functions, createDateID() decipherDateID() Given three strings, dayFormat, dateFormat, and timeFormat, creates an ID for them. Given a date array, createDateID() returns an array with three items: the decipherDateID() dayFormat, the dateFormat, and the timeFormat.
insertion.js Contains the function, which inserts a text insertIntoDocument() string into a document at the insertion point. Also contains the supporting functions getHigherBlockTag() arrContains() function gets get the next highest getHigherBlockTag() blockTag, as defined in the blockTags array, and the arrCon() function finds a specified item in an array.
Using the Shared folder Look first in the Dreamweaver Configuration/Shared/Common folder for useful extension code because this folder contains the most current and commonly used functionality. Extensions can leverage the resources in the Shared folder for their own functionality. An object, command, or other extension can specify one of the JavaScript files in the Shared folder as a source file in a tag, and then use the function in the body of the file or in another...
Page 385
commentStart tag 88 color button control 63 CSS sample text 105 colorpicker tag 181 cssImport tag 88 colorRect attribute 184 cssMedia tag 88 Colors.xml file 83 cssProperty tag 89 combobox tag 180 cssSelector tag 89 command attribute 119, 186 cssValue tag 89 command extensions, definition 21 defaultAttribute tag 90 commandButtons() 136, 156, 200...
Page 386
customizing delete tag 280 appearance of dialog boxes 32 deleteBehavior() 240 browser profiles 29 deleteditems tag 31 default documents 32 deleteDynamicSource() 295 definition of 29 deleteFormat() 311 Dreamweaver 13 deleteSB() 259 editing configuration files 29 deleteServerBehavior() 255 in a multiuser environment 29 deleteType attribute 280 Insert bar 29 description tag 80...
Page 387
dwscripts functions version attribute 268 applySB() 259 whereToSearch attribute 282 deleteSB() 259 EDML files findSBs() 258 about 248 Dynamic Data dialog box 293 editing 260 dynamic menus EDML structure 261 sample code 164 group file tags 262 user experience 155 using regular expressions 260 dynamic templates 48 element node 72...
Page 388
findSBs() 258 getServerSupportsCharset() 333 findServerBehaviors() 256 getSetupSteps() 319 Flash SWF files, displaying in Dreamweaver 63 getTranslatedAttribute() 72 Floating panel API getTranslatorInfo() 336 displayHelp() 224 getUpdateFrequency() 191 documentEdited() 225 getVersionArray() 334 getDockingSide() 225 group file tags 262 initialPosition() 226 group files 248 initialTabs() 226 groupParticipant tag 266 isATarget() 227...
Page 389
Insert bar object JS_ValueToInteger() 357 example 126 JS_ValueToObject() 358 files 113 JS_ValueToString() 357 reordering 121 JSBool 355 Insert bar object extensions, definition 21 JSContext 355 insertbar tag 115 JSNative 356 insertbar.xml file 113, 121 JSObject 355 insertObject() 123 jsval 355 insertText tag 269, 270 inspectBehavior() 242 inspectDynamicDataRef() 299...
Page 390
menus nodes 68 changing 29, 151 nodeType property commands 154 of comment objects 74 definition 23 of document objects 71 modifying pop-up and context 153 of tag objects 72 menus.xml file of text objects 73 about 146 number object 68 changing 151 numbers tag, code coloring 94 menu tag 147...
Page 392
server behavior extensions, definition 22 server format extensions, definition 22 tag attribute 119 Server Formats API Tag Chooser 208 applyFormat() 310 Tag Dialog extensions, definition 22 applyFormatDefinition() 310 Tag editor API deleteFormat() 311 applyTag() 216 formatDynamicDataRef() 311 inspectTag() 214 inspectFormatDefinition() 312 validateTag() 215 Server Model API Tag editor, creating 214...
Page 393
file definition 173 how commands work 172 validateTag() 215 how toolbars work 171 value attribute 185 include/ tag 175 value tag, code validation 109 item tags 177 variable grid controls 59 itemref/ tag 176 VBScript 235 itemtype/ tag 176 version attribute 268 menubutton tag 179 versioning 74 radiobutton tag 178...
Need help?
Do you have a question about the DREAMWEAVER MX 2004-EXTENDING DREAMWEAVER and is the answer not in the manual?
Questions and answers