MACROMEDIA DREAMWEAVER MX 2004-EXTENDING DREAMWEAVER Spécifications

Extending Dreamweaver

10 IntroductionInstalling an extensionTo become familiar with the process of writing extensions, you might want to explore the extensions and resource

100 Extending DreamweaverTypes of Dreamweaver extensionsThe following list describes the types of Dreamweaver extensions that are documented in this g

Types of Dreamweaver extensions 101Server Behavior extensions add blocks of server-side code (ASP, JSP, or ColdFusion) to the document. The server-sid

102 Extending DreamweaverCode Hints are menus that offer a typing shortcut by displaying a list of strings that potentially complete the string you ar

Configuration folders and extensions 103The Configuration/Shared folder does not correspond to a specific extension type. It is the central repository

104 Extending DreamweaverMultiuser Configuration foldersFor the multiuser operating systems of Windows XP, Windows 2000, and Macintosh OS X, Dreamweav

Extension APIs 105To reload extensions1. Control-click (Windows) or Option-click (Macintosh) the Categories menu in the Insert bar’s title bar.2. Sele

106 Extending DreamweaverHow Dreamweaver processes JavaScript in extensionsDreamweaver checks the Configuration/extension_type folder during startup.

Localizing an extension 107Dreamweaver supports the use of event handlers within links. Event handlers in links must use syntax, as shown in the follo

108 Extending Dreamweaver Do not write JavaScript code in the HTML files except for required event handlers. This eliminates the need to fix a bug mu

Working with the Extension Manager 109Localizable Strings with Embedded ValuesSome display strings have values embedded in them. You can use the errMs

What’s new in Dreamweaver 11 Determine which files you need to modify or create. Plan the user interface (UI), if any, for the extension. Create th

110 Extending Dreamweaver

1114CHAPTER 4User Interfaces for ExtensionsMost extensions are built to receive information from the user through a user interface (UI). For example,

112 User Interfaces for ExtensionsWhen you design an extension, you should determine what variables are necessary and what form elements can best hand

Using custom UI controls in extensions 113In most cases, DOCTYPE statements must go on the first line of a document. However, to avoid conflicts with

114 User Interfaces for ExtensionsEditable select listsExtension UIs often contain pop-up lists that are defined using the select tag. In Dreamweaver,

Using custom UI controls in extensions 115The following example creates a Command extension that contains an editable select list using common JavaScr

116 User Interfaces for Extensions</select></td></tr></table></form></div></body></html>3.Save the fil

Using custom UI controls in extensions 117The following figure shows an advanced Recordset dialog box that uses a database tree control and a variable

118 User Interfaces for ExtensionsAny option tags that are placed inside the select tag are ignored.To add a database tree control to a dialog box, yo

Using custom UI controls in extensions 119The following example creates a variable grid control that is 500 pixels wide, with five columns of various

12 Introduction Streamlined handling of CSS stylesThe CSS Styles and Relevant CSS panels have been combined. The Design panel is now named CSS; the C

120 User Interfaces for ExtensionsAdding tree controlsTree controls display data in a hierarchical format and let users expand and collapse nodes in t

Using custom UI controls in extensions 121MM:TREECONTROL tags have the following attributes: MM:TREECOLUMN tags have the following attributes:For read

122 User Interfaces for ExtensionsThe MM:TREENODE attributes are described in the following table:For example, the following tree control has all its

Using custom UI controls in extensions 123The following example adds a node to the top level of a tree:var tree = document.myTreeControl;//add a top-l

124 User Interfaces for ExtensionsYou might want to keep a text box and a color picker synchronized. The following example creates a text box that syn

Adding Flash content to Dreamweaver 125In Dreamweaver, open a new basic HTML file (this will be your Command definition file). Between the opening and

126 User Interfaces for ExtensionsSave the file again. Next, exit and restart Dreamweaver. Select the Command > My Flash Movie menu option, and you

1275CHAPTER 5The Dreamweaver Document Object ModelIn Macromedia Dreamweaver 8, the Document Object Model (DOM) is a critically important structure for

128 The Dreamweaver Document Object ModelWhich document DOM?It is important to distinguish between the DOM of the user’s document and the DOM of the e

The Dreamweaver DOM 129Objects, properties, and methods of the Dreamweaver DOMThe following table lists the objects, properties, methods, and events t

Conventions used in this guide 13ErrataA current list of known issues can be found in the Extensibility section of the Dreamweaver Support Center (www

130 The Dreamweaver Document Object ModelformIn addition to the properties that are available for all tags: tags:elements • (an array of button, check

The Dreamweaver DOM 131Properties and methods of the document object The following table details the properties and methods of the document object tha

132 The Dreamweaver Document Object ModelProperties and methods of HTML tag objects Every HTML tag is represented by a JavaScript object. Tags are org

The Dreamweaver DOM 133childNodes •A NodeList that contains all the immediate children of the tag.tagName •The HTML name for the tag, such as IMG, A,

134 The Dreamweaver Document Object ModelProperties and methods of text objects Each contiguous block of text in an HTML document (for example, the te

The Dreamweaver DOM 135Properties and methods of comment objects A JavaScript object represents each HTML comment. The following table details the pro

136 The Dreamweaver Document Object ModelTo find the specific version of Dreamweaver, check first for the existence of appVersion and then for the ver

1373PART 3Extension APIsLearn about functions that you need to write when you create new objects, toolbars, tag editors, floating panels, server behav

1396CHAPTER 6Insert Bar ObjectsIn Macromedia Dreamweaver, objects insert specific strings of code into a user’s document. Objects commonly reside on t

14 Introduction

140 Insert Bar ObjectsHow object files work Objects have the following components: The HTML file that defines what is inserted into a documentThe HE

The Insert bar definition file 141The Insert bar definition fileThe Configuration/Objects/insertbar.xml file defines the Insert bar properties. This X

142 Insert Bar ObjectsInsert bar definition tagsThe insertbar.xml file contains the following tags and attributes:<insertbar>DescriptionThis tag

The Insert bar definition file 143<menubutton>DescriptionThis tag defines a pop-up menu for the Insert bar. Attributesid, image, {showIf}, {name

144 Insert Bar Objects<checkbutton />DescriptionA checkbutton is a button that has a checked or unchecked state. When clicked, a checkbutton app

The Insert bar definition file 145image="image_path”DescriptionThis attribute specifies the path, relative to the Dreamweaver Configuration folde

146 Insert Bar Objectsenabled="enabler"DescriptionThis attribute specifies that the item is available to the user if the DW_enabler value is

The Insert bar definition file 147Examplecommand="dw.showTagChooser()"file="file_path"DescriptionThe file attribute specifies the

148 Insert Bar ObjectsModifying the Insert barYou can move objects from one category to another, rename categories, and completely remove objects from

Modifying the Insert bar 149To change the order of categories in the Insert bar:1. Save a backup copy of insertbar.xml (with a name such as insertbar.

151PART 1Customizing DreamweaverYou can customize Macromedia Dreamweaver 8 to suit your web development needs, including changing settings in dialog b

150 Insert Bar Objects4. Edit the insertbar.xml file to identify the location of these new files and set attributes (see “The Insert bar definition fi

A simple insert object example 151Creating the HTML fileThe title of the object is specified between the opening and closing title tags. You also spec

152 Insert Bar ObjectsNext, decide whether to use objectTag() or insertObject() for the next function. The Strikethrough object simply wraps the s tag

A simple insert object example 153To separate the HTML object definition file from the supporting JavaScript functions:1. Create a new blank file.2. P

154 Insert Bar Objects Each button tag in the XML file places an icon on the Insert bar and connects it to the proper HTML file or function.To add th

A simple insert object example 155To create the function:1. After the objectTag() function in Strikethrough.js, create a function called fontColorRed(

156 Insert Bar Objects2. Save the file as Strikethrough.htm.3. Reload the extensions (see “Reloading extensions” on page 104).To test the dialog box:1

A simple insert object example 157Building an Insert bar pop-up menuThe Dreamweaver Insert bar introduces a new organization for objects and now suppo

158 Insert Bar Objects// Manually wrap tags around selection.var dom = dw.getDocumentDOM();if (dw.getFocus() == 'textView' || dw.getFocus(tr

A simple insert object example 159To edit insertbar.xml:1. Find the following line of code near the beginning of the file:<insertbar xmlns:MMString

160 Insert Bar Objects6. After the Strikethrough object button tag, add the hypertext object, as follows:<button id="DW_Blue_Text" image=

The Objects API 161The Objects APIThis section describes the functions in the Objects API. You must define either the insertObject() or the objectTag(

162 Insert Bar ObjectsReturnsDreamweaver expects nothing.ExampleThe following example opens the myObjectHelp.htm file in a browser; this file explains

The Objects API 163Description This function is required if the objectTag() function is not defined. It is called when the user clicks OK. It either i

164 Insert Bar Objects // do some document manipulation here. Exercise left to the reader } return errMsg;}objectTag()DescriptionThe objectT

The Objects API 165windowDimensions()DescriptionThis function sets specific dimensions for the Options dialog box. If this function is not defined, th

166 Insert Bar Objects

1677CHAPTER 7CommandsMacromedia Dreamweaver 8 commands can perform almost any kind of edit to a user’s current document, other open documents, or any

168 Commands4. Dreamweaver calls the commandButtons() function, if defined, to determine which buttons appear on the right side of the Options dialog

A simple command example 169This example creates two files in the Commands folder: Change Case.htm, which contains the UI, and Change Case.js, which c

171CHAPTER 1Customizing DreamweaverIn addition to creating and using Dreamweaver extensions, you can customize Macromedia Dreamweaver in many ways, wh

170 CommandsThe contents of the Title tag, Make Uppercase or Lowercase, appears in the top bar of the dialog box. Within the form, a table with two ce

A simple command example 171To determine whether the command should be active or dimmed:1. Create a new blank file.2. Add the following code:function

172 CommandsThe next part of the return statement (&& (theSelNode.nodeType == Node.TEXT_NODE) checks to see if the selected node type is text.

A simple command example 173Linking functions to the OK and Cancel buttonsWhen the user clicks OK or Cancel, the extension needs to perform the approp

174 Commands// Get the node that contains the selection.var theSelNode = theDOM.getSelectedNode();// Get the children of the selected node.var theChil

A simple command example 175The changeCase() function first tests the property document.forms[0].elements[0].checked. The document.forms[0].elements[0

176 CommandsTesting the extensionAfter you place the files in the Commands folder, you can test the extension.To test the extension:1. Restart Dreamwe

The Commands API 177ExampleThe following example of the canAcceptCommand() function makes the command available only when the selection is a table:fun

178 CommandsisDomRequired()DescriptionThis function determines whether the command requires a valid DOM to operate. If this function returns a value o

The Commands API 179Argumentsplatform The value of the platform argument is either "macintosh" or "windows", depending on the use

18 Customizing Dreamweaver Changing the default file type Customizing the interpretation of third-party tags Customizing workspace layouts Customi

180 Commands

1818CHAPTER 8Menus and Menu CommandsMacromedia Dreamweaver 8 creates all its menus from the structure defined in the menus.xml file in the Dreamweaver

182 Menus and Menu CommandsAbout the menus.xml fileThe menus.xml file contains a structured list of menu bars, menus, menu commands, separators, short

About the menus.xml file 183 id The menu ID for the menu bar. Each menu ID in the menus.xml file should be unique. platform Indicates that the menu

184 Menus and Menu Commands showIf Specifies that the menu should appear only if the given Dreamweaver enabler is the value true. The possible enable

About the menus.xml file 185 key The keyboard shortcut for the command, if any. Use the following strings to specify modifier keys: Cmd specifies th

186 Menus and Menu Commands checked A JavaScript expression that indicates whether the menu command has a check mark next to it in the menu; if the e

About the menus.xml file 187Attributes{app} app The name of the application in which the separator is shown. Not currently used.ContentsNone (empty t

188 Menus and Menu Commands<shortcut>DescriptionSpecifies a keyboard shortcut in the menus.xml file.Attributeskey, {app}, {platform}, {file}, {a

About the menus.xml file 189<tool>DescriptionRepresents one tool; it contains all the shortcuts for the tool as subtags in the menus.xml file.At

Ways to customize Dreamweaver 19Customizing the appearance of dialog boxesThe dialog box layouts for objects, commands, and behaviors are specified as

190 Menus and Menu CommandsExample<action name="Set magnification to 50%" key="5" command="dw.activeViewScale = 0.50"

Changing menus and menu commands 191ContainerThis tag must be contained in a tool tag.Example<override name="Quick switch to Hand tool" k

192 Menus and Menu CommandsTo move a menu:1. Quit Dreamweaver.2. Make a backup copy of the menus.xml file.3. Open menus.xml in a text editor such as B

Changing menus and menu commands 1933. Open menus.xml in a text editor such as BBEdit, HomeSite, or Wordpad. (Don’t open it in Dreamweaver.)4. Look at

194 Menus and Menu Commands Items in the formats pop-up menu for a binding in the Bindings panel are specified in Formats.xml files, in subfolders of

Menu commands 195The following table lists the files you use to create a Menu command.Modifying the Commands menuYou can add certain kinds of commands

196 Menus and Menu CommandsThe command is renamed in the Commands menu.To delete a command you’ve created:1. Select Commands > Edit Command List.A

A simple menu command example 1975. Dreamweaver calls the receiveArguments() function, if defined, in the selected Menu Commands file to let the comma

198 Menus and Menu CommandsCreating the menu commandsAdd the following HTML menu tags to the end of the menus.xml file to create a menu called MyMenu

A simple menu command example 199function canAcceptCommand(){ var selarray; if (arguments.length != 1) return false; var bResult = false; var what

Trademarks1 Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breezo, Captivate, Central, ColdFusion, Contribute,

20 Customizing DreamweaverChanging the default file typeBy default, Dreamweaver shows all the file types it recognizes in the File > Open dialog bo

200 Menus and Menu CommandsIn this command, the receiveArguments() function processes the arguments and executes the command. More complex menu comman

A dynamic menu example 201The setMenuText() function looks like the following example code:function setMenuText(){ if (arguments.length != 1) return

202 Menus and Menu CommandsCreating the dynamic menu itemsThe following menu tags in the menus.xml file define the Preview in Browser submenu of the F

A dynamic menu example 203for (i=0; i<PIB.length; i=i+2){browsers[j] = new String(PIB[i]);if (dw.getPrimaryBrowser() == PIB[i+1]) browsers[j] +=

204 Menus and Menu Commandsfunction canAcceptCommand(){var PIB = dw.getBrowserList();if (arguments[0] == 'primary' || arguments[0] == '

A dynamic menu example 205var selFile = selFiles[i];// For server connections, the files will// already be remote URLs.if (selFile.indexOf("://&q

206 Menus and Menu CommandsThe havePreviewTarget() function sets the value bHavePreviewTarget to false as the default return value. The function perfo

A dynamic menu example 207var theBrowser = null;var i=0;var browserList = null;var result = false;if (havePreviewTarget()){// Code to check if we were

208 Menus and Menu Commandsif (whichBrowser == 'primary'){result = window.confirm(MSG_NoPrimaryBrowserDefined);}else if (whichBrowser == &ap

The Menu Commands API 209If the user pressed the shortcut keys (F12 or Ctrl+F12) and no primary or secondary browser has been specified, a dialog box

Ways to customize Dreamweaver 21Customizing the interpretation of third-party tagsServer-side technologies such as ASP, Macromedia ColdFusion, JSP, an

210 Menus and Menu CommandsReturnsDreamweaver expects an array that contains an even number of elements. The first element is a string that contains t

The Menu Commands API 211isCommandChecked()DescriptionDetermines whether to display a check mark next to the menu item.Arguments{arg1}, {arg2},...{arg

212 Menus and Menu CommandsreceiveArguments()DescriptionProcesses any arguments passed from a menu item or from the dw.runCommand() function. If it is

The Menu Commands API 213 If the arguments attribute is defined for a menuitem tag, the value of that attribute passes to the setMenuText() function

214 Menus and Menu CommandsExampleThe following example of windowDimensions() sets the dimensions of the Parameters dialog box to 648 x 520 pixels:fun

2159CHAPTER 9ToolbarsYou can create a toolbar for Macromedia Dreamweaver 8 simply by creating a file that defines the toolbar and placing that file in

216 ToolbarsSome types of toolbar controls, such as push buttons and pop-up menus, have icon images associated with them. Icon images are stored in an

How toolbars work 217You cannot drag and drop toolbars between the document window and the Dreamweaver workspace frame. Toolbars remain a fixed size

218 ToolbarsA simple toolbar command fileThis simple example implements a Title text box item as seen on the Dreamweaver Document toolbar. The text bo

A simple toolbar command file 219canAcceptCommand(): enable the toolbar itemThe canAcceptCommand() function consists of one line of code that checks t

22 Customizing Dreamweaver String-delimited tagsString-delimited tags start with one string and end with another string. They are like empty HTML tag

220 ToolbarsThe function is as follows:function getCurrentValue(){var title = "";var dom = dw.getDocumentDOM(); if (dom)title = dom.getTitle

The toolbar definition file 221<!-- main toolbar --><toolbar id="DW_Toolbar_Main" label="Document"><radiobutton id=

222 Toolbars container="mainframe" or "document" Defaults to "mainframe". Specifies where the toolbar should dock in th

The toolbar definition file 223 relativeTo="toolbar_id" This attribute is required if the initialPosition attribute specifies below. Otherw

224 Toolbars<itemtype/>DescriptionDefines a single toolbar item. Toolbar items include buttons, radio buttons, check buttons, combo boxes, pop-u

The toolbar definition file 225 showIf="script" Specifies that this item appears on the toolbar only if the specified script returns a true

226 ToolbarsToolbar item tagsEach type of toolbar item has its own tag and set of required and optional attributes. You can define toolbar items eithe

Toolbar item tags 227<checkbutton>DescriptionA check button is a button that has a checked or unchecked state and that executes a specific comma

228 ToolbarsRadio buttons act the same as the Code view, Design view, and Split view buttons on the Dreamweaver document toolbar.Attributesid, image,

Toolbar item tags 229ContentsNone.ContainerThe toolbar tag or the toolbarset tag.Example<MENUBUTTON ID="DW_CodeNav"image="Toolbars/i

Ways to customize Dreamweaver 23 content_model describes what kinds of content the tag can contain and where in an HTML file the tag can appear. Vali

230 Toolbars<combobox>DescriptionA combo box is an editable pop-up menu that executes its command when you select an entry or when the user make

Toolbar item tags 231ContainerThe toolbar tag or the toolbarset tag.Example<EDITCONTROL ID="DW_SetTitle"label="Title: "tooltip=

232 ToolbarsItem tag attributesThe attributes for toolbar item tags have the following meanings: id="unique_id"Required. The id attribute is

Item tag attributes 233If an icon is specified for a color picker, the icon replaces the color picker entirely. If the colorRect attribute is also set

234 Toolbarslabel="label string"Optional. This attribute specifies a label that displays next to the item. Dreamweaver does not automaticall

Item tag attributes 235file="command_file_path"Required for pop-up menus and combo boxes. The file attribute is optional for other types of

236 ToolbarsExamplechecked="dw.getDocumentDOM() != null && dw.getDocumentDOM().getView() == 'code'"value="script"

Item tag attributes 237The following list shows the possible handlers for update_frequency_list, from least to most frequent. If you do not specify th

238 ToolbarsExamplecommand="dw.toggleLiveDebug()"arguments="argument_list" Optional. This attribute specifies the comma-separated

The toolbar command API 239canAcceptCommand()AvailabilityDreamweaver MX.DescriptionDetermines whether the toolbar item is enabled. The enabled state i

24 Customizing Dreamweaver detect_in_attribute indicates whether to ignore everything between start_string and end_string (or between opening and clo

240 ToolbarsgetCurrentValue()AvailabilityDreamweaver MX.DescriptionReturns the current value to display in the item. Dreamweaver calls the getCurrentV

The toolbar command API 241The name getDynamicContent() is a misnomer because this function should be used even if the list of entries in the menu is

242 ToolbarsgetMenuID()AvailabilityDreamweaver MX.DescriptionOnly valid for menu buttons. Dreamweaver calls the getMenuID() function to get the ID of

The toolbar command API 243menuID = 'DWBrowseOptionsPopup';}}return menuID;}getUpdateFrequency()AvailabilityDreamweaver MX.DescriptionSpecif

244 ToolbarsDescriptionReturns a value that specifies whether the item is selected. For a button, checked means that the button appears on or depresse

The toolbar command API 245 else if (style == "Heading 6") bChecked = (textFormat == "h6"); else bChecked = (dw.cssStyleP

246 ToolbarsArgumentsFor pop-up menus, combo boxes, text boxes, and color pickers, the first argument is the current value within the control. The get

The toolbar command API 247ReturnsDreamweaver expects a Boolean value: true if the item appears; false otherwise.Examplefunction showif(){var retval =

248 Toolbars

24910CHAPTER 10ReportsMacromedia Dreamweaver 8 supports two types of reports: site reports and stand-alone reports.Site reportsYou use the Reports API

Ways to customize Dreamweaver 25ContainerNone.Example<tagspec tag_name="happy" tag_type="nonempty" render_contents="false&

250 ReportsHow site reports work1. Reports are accessible through the Site > Reports command. When it is selected, this command displays a dialog b

Site reports 251You create this extension by performing the following steps: Creating the report definition Writing the JavaScript codeThis example

252 ReportsWriting the JavaScript codeDreamweaver includes the Reports.js file. You can call any of the functions in Reports.js. However, you also hav

Stand-alone reports 253Stand-alone reportsYou can use the Results Window API to create a stand-alone report. Stand-alone reports are regular commands

254 Reports5. To call the addItem() function, the processFile() function needs to have access to the Results window that was created by the stand-alon

Stand-alone reports 255Writing the JavaScript codeNext, you create the JavaScript file that contains any functions that are specific to your stand-alo

256 ReportsThe Reports APIThe only required function for the Reports API is the processFile() function. All other functions are optional.processFile()

The Reports API 257ReturnsDreamweaver expects a Boolean value: true if the report runs successfully; false if target is excluded from the report run.

258 ReportsExampleThe following instance of the commandButtons() function defines the OK, Cancel, and Help buttons.function commandButtons(){return ne

The Reports API 259ReturnsDreamweaver expects a string of the form "widthInPixels,heightInPixels".The returned dimensions are smaller than t

26 Customizing DreamweaverAvoiding rewriting third-party tagsDreamweaver corrects certain kinds of errors in HTML code. For details, see Using Dreamwe

260 Reports

26111CHAPTER 11Tag Libraries and EditorsMacromedia Dreamweaver 8 users can use tag editors to insert new tags, edit existing tags, and access referenc

262 Tag Libraries and EditorsTag library file formatA tag library consists of a single root file, the TagLibraries.vtm file, that lists every installe

Tag library file format 263</taglibrary><taglibrary name="ASP.NET Tags" doctypes="ASP.NET_CSharp,ASP.NET_VB"¬ servermodel

264 Tag Libraries and EditorsThe following table lists tagref attributes:Because the tagref.prefix attribute can override the taglibrary.prefix attrib

Tag library file format 265To define tags, Dreamweaver uses a modified version of the Macromedia VTML file format. The following example demonstrates

266 Tag Libraries and EditorsThe following table lists the attributes that define tags: Attribute Description Mandatory/optionaltag.bindUsed by the Da

Tag library file format 267tagformat.nlaftertagThe number of newline characters to insert after this tag. Optionalattrib.nameThe name of the attribute

268 Tag Libraries and EditorsThe Tag ChooserThe Tag Chooser lets you view tags in functional groups so you can easily access frequently used tags. In

The Tag Chooser 269The following table lists the tags that are available for use in the TagChooser.xml files:The CATEGORY tag represents all other nod

Customizing Dreamweaver in a multiuser environment 27To turn off Dreamweaver encoding options:1. Select Edit > Preferences, and select the Code Rew

270 Tag Libraries and EditorsThe following table lists the attributes of the ELEMENT tag, which represents the tag to insert:A simple example of creat

A simple example of creating a new tag editor 271Registering the tag in the tag libraryFor Dreamweaver to recognize the new tag, it must be identified

272 Tag Libraries and EditorsCreating a tag definition (VTML) file When a user selects a registered tag using the Tag Chooser or a tag editor, Dreamwe

A simple example of creating a new tag editor 273// inspectTag() API function defined (required by all tag editors) function inspectTag(tagNodeObj){

274 Tag Libraries and Editors <tr> <td valign="baseline" align="right" nowrap="nowrap">Type: </t

Tag editor APIs 275 The cfweather tag appears in the list box on the right. Select cfweather, and click the Insert button. The tag editor should ap

276 Tag Libraries and EditorsvalidateTag()AvailabilityDreamweaver MX.DescriptionWhen a user clicks on a node in the tree control or clicks OK, the fun

Tag editor APIs 277ExampleContinuing the cfweather example, in the following code, if the user changes the ZIP code from 94065 to 53402, in order to u

278 Tag Libraries and Editors

27912CHAPTER 12Property InspectorsThe Property inspector is perhaps the most familiar floating panel in the Macromedia Dreamweaver 8 interface. It is

28 Customizing DreamweaverMac OS X platforms use the following location:drive:Users/username/Library/Application Support/Macromedia/Dreamweaver 8/Conf

280 Property InspectorsThis comment has the following elements: The serverModel element specifies that Dreamweaver should load this Property inspect

How Property inspector files work 281How Property inspector files workAt start up, Dreamweaver reads the first line of each HTM and HTML file in the C

282 Property InspectorsA simple Property inspector exampleThe following Property inspector inspects the MARQUEE tag, which is available only in Micros

A simple Property inspector example 283z-index:16; left: 44px; top: 5px">Marquee</SPAN><!-- If your form fields are in different laye

284 Property Inspectors// Get the value of the DIRECTION attribute on the MARQUEE tag. var theDirection = theObj.getAttribute('direction');/

The Property inspector API 285Creating the imageYou can optionally create the image that appears in the Property inspector.To create the image:1. Crea

286 Property InspectorsArgumentsNone.ReturnsDreamweaver expects a Boolean value: true if the inspector can inspect the current selection; false otherw

The Property inspector API 287inspectSelection()DescriptionRefreshes the contents of the text fields based on the attributes of the current selection.

288 Property Inspectors

28913CHAPTER 13Floating PanelsYou can create any kind of floating panel or inspector without the size and layout limitations of Property inspectors. A

Customizing Dreamweaver in a multiuser environment 29About mm_deleted_files.xml tag syntaxThe mm_deleted_files.xml file contains a structured list of

290 Floating PanelsHow floating panel files workCustom floating panels can be moved, resized, and tabbed together the same way as the floating panels

A simple floating panel example 2914. When the floating panel is visible, the following actions occur: When the selection changes, the selectionChang

292 Floating PanelsTo create the HTML file header:1. Create a new blank document.2. Enter the following:<!doctype html public "-//W3C//DTD HTM

A simple floating panel example 293Both div tags use the style attribute to specify the position (absolute), size (width:422px and height:181px), and

294 Floating PanelsThe selectionChanged() function first calls the dw.getDocumentDOM() function to get the Document Object Model (DOM) for the user’s

A simple floating panel example 295If the selected node is not an element, or it is not a SCRIPT tag, the selectionChanged() function makes the blankl

296 Floating PanelsupdateScript(): write back changes The updateScript() function writes back the selected script when an onBlur event occurs in the t

The Floating panel API 297If you select a script marker in Design view for the current document and then select the Script Editor menu item, it invoke

298 Floating PanelsExample// the following instance of displayHelp() opens// in a browser a file that explains how to use// the extension.function dis

The Floating panel API 299getDockingSide()AvailabilityDreamweaver MX.DescriptionSpecifies the locations at which a floating panel can dock. The functi

3ContentsIntroduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9Background . . . . . . . . . . . . .

30 Customizing DreamweaverContainerThis tag must be contained in a deleteditems tag.Example<item name="snippets\headers\5columnwith4links.csn&

300 Floating PanelsExampleThe following example of the initialPosition() function specifies that the first time the floating panel appears, it should

The Floating panel API 301isATarget() AvailabilityDreamweaver MX (Windows only).DescriptionSpecifies whether other panels can dock to this floating pa

302 Floating PanelsisResizable()AvailabilityDreamweaver 4. DescriptionDetermines whether a user can resize a floating panel. If the function is not de

The Floating panel API 303Example The following example of selectionChanged() shows a different layer in the floating panel, depending on whether the

304 Floating Panels/* create a flag that specifies whether an edit is being processed, and set it to false. */document.running = false;/* this functio

30514CHAPTER 14Behaviors Behaviors let users make their HTML pages interactive. They offer web designers an easy way to assign actions to page element

306 BehaviorsHow Behaviors workWhen a user selects an HTML element in a Dreamweaver document and clicks the Plus (+) button on the Behaviors panel, th

A simple behavior example 307Inserting multiple functions in the user’s fileActions can insert multiple functions—the main behavior function plus any

308 BehaviorsCreating the behavior extensionThe following code presents a relatively simple example. It checks the brand of the browser and goes to on

A simple behavior example 309 "\')"; }else{ return "Please enter URLs in both fields." }}// Extract the arguments fro

Working with browser profiles 31 You must use a space in the following places: Before the closing angle bracket (>) on the !ELEMENT line After

310 Behaviors<tr><td nowrap="nowrap">&nbsp;&nbsp;Go to this URL is the browser is ¬Microsoft Internet Explorer:<br>

A simple behavior example 3114. Save the file as netscapecontent.htm in the same directory as the iecontent.htm file.5. Restart Dreamweaver.6. Create

312 Behaviors<body onLoad="checkBrowserBrand('netscaptecontent.htm','iecontent.htm')"></body></html>Te

The Behaviors API 313ReturnsDreamweaver expects a string that contains the function call to be inserted in the user’s document, usually after acceptin

314 BehaviorsbehaviorFunction()DescriptionThis function inserts one or more functions—surrounded by the following tags, if they don’t yet exist—into t

The Behaviors API 315canAcceptBehavior()DescriptionThis function determines whether the action is allowed for the selected HTML element and specifies

316 BehaviorsdisplayHelp()DescriptionIf this function is defined, a Help button appears below the OK and Cancel buttons in the Parameters dialog box.

The Behaviors API 317identifyBehaviorArguments()DescriptionThis function identifies arguments from a behavior function call as navigation links, depen

318 BehaviorsExampleThis simple example of the identifyBehaviorArguments() function works for the Open Browser Window behavior action, which returns a

The Behaviors API 319inspectBehavior()DescriptionThis function inspects the function call for a previously applied behavior in the user’s document and

32 Customizing DreamweaverThe following example shows an entry for the APPLET tag that would be accurate for Netscape Navigator 3.0: <!ELEMENT APPL

320 BehaviorswindowDimensions()DescriptionThis function sets specific dimensions for the Parameters dialog box. If this function is not defined, the w

32115CHAPTER 15Server BehaviorsMacromedia Dreamweaver 8 provides users with an interface for adding server behaviors into their documents to perform s

322 Server Behaviors Runtime code Runtime code is the set of code blocks that are added to a document when a server behavior is applied. These code

Dreamweaver architecture 323Group filesGroup files contain a list of participants, and participant files have all server-model-specific code data. Par

324 Server BehaviorsWhen Dreamweaver adds a server behavior to a document, it needs to have detailed information, including where to insert the code,

A simple server behavior example 325Creating the dynamic page documentFirst, you create a new ASP document.To create a new dynamic page document:1. In

326 Server Behaviors6. In the Relative Position pop-up menu, select After the Selection.7. Click OK.In the Server Behaviors panel, you can see that th

How the Server Behavior API functions are called 327Sometimes during analysis, a single tag in the user’s document is identified by two or more behavi

328 Server Behaviors If the user edits an existing server behavior by double-clicking it, Dreamweaver displays the dialog box, executes the onLoad ha

The Server Behavior API 329The Server Behavior APIYou can manage server behaviors with the following API functions.analyzeServerBehavior()Availability

Working with browser profiles 333. Add any new tags or attributes that you know are supported by the browser, using the syntax shown in “About browser

330 Server BehaviorsArgumentsserverBehavior, [serverBehaviorArray] The serverBehavior argument is a JavaScript object that represents the behavior to

The Server Behavior API 331canApplyServerBehavior()AvailabilityDreamweaver UltraDev 1.DescriptionDetermines whether a behavior can be applied. Dreamwe

332 Server BehaviorsArgumentsserverBehavior The serverBehavior JavaScript object represents the behavior. ReturnsDreamweaver expects a Boolean value:

The Server Behavior API 333Example// the following instance of displayHelp() opens// in a browser a file that explains how to use// the extension.func

334 Server BehaviorsDescriptionDetermines the settings for the Server Behavior dialog box, based on the specified behavior object. Dreamweaver calls t

Server behavior implementation functions 335ReturnsDreamweaver expects a Boolean value: true if the behavior pastes successfully from the Clipboard; f

336 Server Behaviorsdwscripts.applySB()AvailabilityDreamweaver MX (this function replaces the applySB() function from earlier versions of Dreamweaver)

Editing EDML files 337dwscripts.deleteSB()AvailabilityDreamweaver MX (this function replaces the deleteSB() function from earlier versions of Dreamwea

338 Server BehaviorsRegular expressionsYou must understand regular expressions as they are implemented in JavaScript 1.5. You must also know when it i

Editing EDML files 339This process searches the user’s document, and if there is a match, extracts the parameter values. The first parenthetical subex

34 Customizing DreamweaverChanging FTP mappingsThe FTPExtensionMap.txt file (Windows) and the FTPExtensionMapMac.txt file (Macintosh) map filename ext

340 Server BehaviorsBecause of the CDATA tag, the ASP tags <%= %>, along with the other content within the tag, aren’t processed. Instead, the E

Group EDML file tags 341ParentgroupTypeAttribute.RequiredNo.serverBehaviorDescriptionThe serverBehavior attribute indicates which server behavior can

342 Server BehaviorsMultiple versions of a server behavior can differ, depending on which data source you use. For example, the Repeat Region server b

Group EDML file tags 343ParentgroupTypeAttribute.RequiredNo.ValueThe value is a unique string that determines which group to apply, as shown in the fo

344 Server BehaviorsValueThe value is a plain text string that can include parameter names to make each instance unique, as shown in the following exa

Group EDML file tags 345ValueThe participantName value is the exact name (without the .edml extension) of a single participant file that is listed as

346 Server BehaviorsValueThe value is the exact name (without the .edml extension) of any participant file, as shown in the following example:<grou

Participant EDML files 347Participant EDML filesThese tags and attributes are valid within the EDML participant files.<participant>DescriptionTh

348 Server BehaviorsParentparticipantTypeAttribute.RequiredNo.<quickSearch>DescriptionThis tag is a simple search string that is used for perfor

Participant EDML files 349<insertText>DescriptionThis tag provides information about what to insert in the document and where to insert it. It c

Extensible document types in Dreamweaver 35Extensible document types in DreamweaverXML provides a rich system for defining complex documents and data

350 Server BehaviorsParentinsertTextTypeAttribute.RequiredYes.ValuesaboveHTML[+weight], belowHTML[+weight], beforeSelection, replaceSelection, wrapSel

Participant EDML files 351 The beforeNode value inserts the text before a node, which is a specific location in the DOM. When a function such as dwsc

352 Server BehaviorsRequiredThis attribute is required only if the insert location contains the word node.ValueThe tagtype__Tag value is a user-specif

Participant EDML files 353<searchPatterns> attributesThe following items are valid attributes of the searchPatterns tag.whereToSearchDescription

354 Server Behaviors The comment value searches only within the HTML comments <! ... >, as shown in the following example:<searchPatterns wh

Participant EDML files 355 The <empty> value is used if no pattern is given. It is always considered a match, and the entire value is assigned

356 Server BehaviorsThe parameter names should match the ones that are specified in the insertion text and the update parameters.ParentsearchPatternTy

Participant EDML files 357RequiredNo.Valuesall, attribute+attribName, tagOnly, innerOnly The all value (default) searches the entire tag that is spec

358 Server BehaviorsValuestrue, false The value is true if the searchPattern is not necessary to identify the participant. The value is false (defau

Participant EDML files 359TypeBlock tag.RequiredNo.<updatePattern>DescriptionThis tag is a specific type of regular expression that lets you upd

36 Customizing DreamweaverColdFusion ComponentDynamic cfcJSP JSP Dynamic jspPHP PHP Dynamic php, php3Library Item DWExtension lbiASP.NET C# TemplateDW

360 Server BehaviorsThe literal parentheses, as well as other special regular expression characters, are escaped by preceding them with a backslash (\

Participant EDML files 361TypeAttribute.RequiredYes.ValuesThe value is the exact name of a parameter that is used in the insertion text. In the follow

362 Server BehaviorsParentdeleteTypeAttribute.RequiredNo.Valuesall, none, tagOnly, innerOnly, attribute+attribName, attribute+* The all value (defaul

Participant EDML files 363TypeBlock tag.RequiredNo.<searchPatterns>DescriptionThis tag lets Dreamweaver find each specified instance in a docume

364 Server Behaviors<translation>DescriptionThis tag contains a single translation instruction that includes the location for the participant, w

Participant EDML files 365TypeAttribute.RequiredNo.translationTypeDescriptionThis attribute indicates the type of translation to perform. These types

366 Server Behaviors The tabbed region start value indicates that the translated <CFLOOP> tags define the beginning of a tabbed outline, as sho

Participant EDML files 367<attributes>DescriptionThis tag contains a list of attributes to add to the translated tag that is specified by the op

368 Server Behaviors<display>DescriptionThis tag is an optional display string that should be inserted in the translation.ParenttranslationTypeB

Server behavior techniques 369Server behavior techniquesThis section covers the common and advanced techniques that create and edit server behaviors.

Extensible document types in Dreamweaver 37If you need to create a new document type, you can either add your entry to the document definition file th

370 Server BehaviorsThe search string is defined as a regular expression by starting and ending with a slash (/) and is followed by i, which means tha

Server behavior techniques 371How participants are matched If a server behavior has more than one participant, the participants must be identified in

372 Server BehaviorsThere are two instances of Test listed in the Server Behaviors panel. If the user tries to add a third instance to the page and na

Server behavior techniques 373This server behavior no longer works correctly because only one parameter is named total. To solve this problem, make su

374 Server Behaviors3. Look for the limitSearch attribute within the searchPattern tag.4. If the attribute value starts with attribute+, the remaining

Server behavior techniques 375This example might use the following search patterns: <quickSearch>Response.Write</quickSearch><searchPat

376 Server BehaviorsDeleting server behaviorsDefault deletion and dependency counts The user can delete an instance that is selected in the Server Be

Server behavior techniques 377If a JavaScript file has the SHARE-IN-MEMORY directive and an HTML file references it (by using the SCRIPT tag with the

378 Server Behaviors

37916CHAPTER 16Data SourcesThe Macromedia Dreamweaver 8 Data Sources API functions let you add data sources, which appear in the Plus (+) menu in the

38 Customizing DreamweaverThe following table describes the tags and attributes that you can use within a document type definition file. Element Type

380 Data SourcesHow data sources work Dreamweaver users can add dynamic data by using the Bindings panel. The dynamic data objects that are shown on t

How data sources work 381RequestNameOfRequestVariableNameOfAnotherRequestVariableSessionNameOfSessionVariable4.If the user double-clicks on a data sou

382 Data Sources8. Every time the user changes the selection, Dreamweaver calls the inspectDynamicDataRef() function to determine whether the new sele

A simple data source example 383When a user clicks on the Bindings Plus (+) menu, Dreamweaver searches the DataSources folder for the current server m

384 Data SourcesTo create the EDML file:1. Create a new blank file.2. Enter the following:<participant> <quickSearch><![CDATA[#]]>

A simple data source example 385 { var theResponse = MM.MyDatasourceContents; if (theResponse.length) { var siteURL = dw.getSiteRoot();

386 Data Sources{ var retVal = new Array(); var siteURL = dw.getSiteRoot(); // For localized object name... if (sourceName != "MyDatasource&q

A simple data source example 387 var params = extPart.findInString("MyDatasource_DataRef", expression); if (params) { retArray

388 Data SourcesTo create the command definition file:1. Create a new blank file.2. Enter the following:<!DOCTYPE HTML SYSTEM "-//Macromedia//

A simple data source example 389function okClicked(){ var nameObj = document.forms[0].theName; if (nameObj.value) { if (IsValidVarName(nameObj.va

Extensible document types in Dreamweaver 39internaltypeYes A broad classification of how Dreamweaver treats a file. The internaltype identifies whethe

390 Data Sources2. Click the MyDatasource data source option, and the MyDatasource Variable dialog box you created appears:3. Enter a value in the dia

The Data Sources API 391The Data Sources API The functions in the Data Sources API let you find, add, edit, and delete data sources and also generate

392 Data SourcesFor example, in Dreamweaver, if the selection is a recordset or command, the deleteDynamicSource() function calls the dw.serverBehavio

The Data Sources API 393editDynamicSource() AvailabilityDreamweaver MX.DescriptionThis function is called when the user double-clicks a data source na

394 Data SourcesReturnsDreamweaver expects an array of JavaScript objects where each object can have as many as five properties, which are described i

The Data Sources API 395ArgumentssourceName, bindingName The sourceName argument is the name of the top-level node that is associated with the child

396 Data Sources The dataSource property is the simple name of the file in which the findDynamicSources() function is defined. For example, the findD

The Data Sources API 397Argumentsstring The string argument is the dynamic data object.ReturnsDreamweaver expects an array of two elements (parent na

398 Data Sources

39917CHAPTER 17Server FormatsChapter 16, “Data Sources,” on page 379, discusses how Macromedia Dreamweaver 8 inserts dynamic data into a user’s docume

4ContentsChapter 4: User Interfaces for Extensions. . . . . . . . . . . . . . . . . . . 111Designing an extension user interface . . . . . . . . . .

40 Customizing DreamweaverwinfileextensionYes The file extension that is associated with the document type on Windows. You specify multiple file exten

400 Server FormatsOne example might be to create a new currency format. Essentially, all currency formatting consists of converting a number to a stri

How data formatting works 401The following example shows the format tag for the "Currency - default" string: <format file="Currency&

402 Server FormatsWhen the data formatting functions are calledThe data formatting functions are called in the following scenarios: In the Dynamic Da

The Server Formats API 403The Server Formats API The server formats API consists of the following data formatting functions.applyFormat()AvailabilityD

404 Server FormatsDescriptionCommits the changes to a format that was created using the Edit Format dialog box. Users can create, edit, or delete form

The Server Formats API 405ReturnsDreamweaver expects nothing.formatDynamicDataRef()AvailabilityDreamweaver UltraDev 1.DescriptionAdds the format funct

406 Server FormatsinspectFormatDefinition()AvailabilityDreamweaver UltraDev 1.DescriptionInitializes form controls when a user edits a format in the E

40718CHAPTER 18ComponentsMacromedia Dreamweaver supports the creation of many of the most popular types of components. In addition, Dreamweaver lets y

408 ComponentsExtending the Components panelIf you have invented (or simply use) a component strategy that is not represented in Dreamweaver’s current

Components panel files 409Extensibility lets you add new component types to the panel. There are several general steps that you need to follow when ad

Extensible document types in Dreamweaver 41When Dreamweaver starts, it reads all document type definition files and builds a list of valid document ty

410 Componentsclasslocation="d:\music\music.jar"></javabean></javabeans>JavaBeans should contain the logic for saving themsel

Components panel files 4112. Write the JavaScript code to implement the new server component.The extension file (HTM) defines the locations of the Jav

412 ComponentsFor example, the following WebServicesClass node has web methods as its children:this.name = "TrafficLocatorWebService"; this.

Components panel API functions 413getContextMenuId()AvailabilityDreamweaver MX.Description Returns the Context Menu ID for the component type. Every c

414 ComponentsgetCodeViewDropCode()AvailabilityDreamweaver MX.DescriptionThis function gets the code that is dragged and dropped in Code view from the

Components panel API functions 415getSetupSteps()AvailabilityDreamweaver MX.DescriptionDreamweaver calls this function if the setupStepsCompleted() fu

416 ComponentsExampleThe following example sets four steps for ColdFusion components, and provides a hypertext link in the fourth step so the user can

Components panel API functions 417DescriptionDreamweaver calls this function before the Components tab appears. Dreamweaver then calls the getSetupSte

418 ComponentsReturnsA Boolean value that indicates whether the drop operation was successful: true if successful; false otherwise.Example The followi

Components panel API functions 419ArgumentscomponentRec The componentRec argument is an object that contains the following properties: The name prop

42 Customizing Dreamweaver The value of the internaltype attribute for the new document type must be DWTemplate. The dynamicid attribute must be set

420 ComponentstoolbarControls()AvailabilityDreamweaver MX.DescriptionEvery component type returns a list of toolBarButtonRec objects, which represents

Components panel API functions 421ExampleThe following example assigns properties to the toolbar buttons:function toolbarControls(){var toolBarBtnArra

422 ComponentsminusButton.command = "clickedDelete()";minusButton.enabled = "(dw.serverComponentsPalette.getSelectedNode() != null &

42319CHAPTER 19Server ModelsServer models are the technologies that run scripts on a server. When users define a new site, they can identify the serve

424 Server ModelsThe Server Model API functionsThis section describes the functions that configure server models for Dreamweaver.canRecognizeDocument(

The Server Model API functions 425getFileExtensions() AvailabilityDreamweaver UltraDev 1, deprecated in Dreamweaver MX.DescriptionReturns the document

426 Server ModelsThe getLanguageSignatures() function returns a map of these signature declarations. Extension developers can use this map to generate

The Server Model API functions 427DescriptionThis function returns a JavaScript object that can be accessed from within the JavaScript code. You can r

428 Server ModelsIf you want a file in the ServerFormats folder to apply only to a specific scripting language, add the following statement so it is t

The Server Model API functions 429ArgumentsNone.ReturnsDreamweaver expects an array of objects where each object contains the following three properti

Extensible document types in Dreamweaver 43Document extensions and file typesBy default, Dreamweaver shows all the file types it recognizes in the Fil

430 Server ModelsDescriptionThis function returns the folder name to use for this server model within the Configuration folder. You can access this va

The Server Model API functions 431ArgumentsNone.ReturnsDreamweaver expects an array of version objects, each with a version name and version value, as

432 Server Models

43320CHAPTER 20Data TranslatorsData translators translate specialized markup—server-side includes, conditional JavaScript statements, or other code su

434 Data TranslatorsHow data translators workDreamweaver handles all translator files the same way, regardless of whether they translate entire tags o

Adding a translated attribute to a tag 435Determining what kind of translator to useAll translators must contain the getTranslatorInfo() and translate

436 Data TranslatorsThe mmTranslatedValue attribute must be unique within the tag. If it is likely that your translator needs to translate more than o

Locking translated tags or blocks of code 437Inspecting translated attributesWhen server markup specifies a single attribute and the attribute is repr

438 Data TranslatorsThe syntax of the XML tags is shown in the following example:<MM:BeginLock translatorClass="translatorClass" ¬type=&q

Creating Property inspectors for locked content 439[<A TARGET="_top" HREF="/support/">support</A>][<A TARGET="

44 Customizing Dreamweaver3. Add a new line for each new file type. In capital letters, enter the filename extensions that the new file type can have,

440 Data TranslatorsAnother problem is inherent in inspecting translated content. When you call the dom.getSelection() function, the values that retur

Creating Property inspectors for locked content 441document.layers['timelayer'].document.timeForm.timefield.¬value = timeValue;}After you pa

442 Data TranslatorsFinding bugs in your translatorIf the translateMarkup() function contains certain types of errors, the translator loads properly,

A simple attribute translator example 4436. Add alert() statements in strategic spots throughout the translateMarkup() function so you can make sure y

444 Data TranslatorsCreating the iconNext, you create the icon for Poco tags.To create the icon:1. Create an image file that is 18 x 18 pixels for the

A simple attribute translator example 445// the conditional statementvar trueStart; // The beginning of the true casevar falseStart; // T

446 Data Translators transValue = attName + '="' + trueValue + '"'; transAtt = ' mmTranslatedValue' +

A simple block/tag translator example 447 returnArray[0] = "Pound_Conditional"; // The translatorClass returnArray[1] = "Pound Cond

448 Data Translators * markup to be translated, the regular expressions that * * a document containing the markup to be translated * * would mat

A simple block/tag translator example 449 return ""; } // As long as start, which is equal to the location in inStr of the // KENT

Extensible document types in Dreamweaver 45 <loadstring>myJSPDocType/Description</loadstring></description>or<description>

450 Data Translators //Assemble the lock tags and the replacement HTML. var replCode = start + ' depFiles="' + depFiles + '

A simple block/tag translator example 451 // Now determine which photo to show based on whether it's a workday or a // weekend; what time i

452 Data Translators3. Save the file as kent.htm in the Configuration/Translators folder.The Data Translator APIThis section describes the functions u

The Data Translator API 4537. The runDefault string specifies when this translator executes. The following list gives the possible string values: 8. T

454 Data TranslatorstransArray[11] = "50";return transArray;}translateMarkup()DescriptionThis function performs the translation.Argumentsdoc

The Data Translator API 455liveDataTranslateMarkup()AvailabilityDreamweaver UltraDev 1.DescriptionThis function translates documents when users are us

456 Data Translators

45721CHAPTER 21C-Level Extensibility The C-level extensibility mechanism lets you implement Macromedia Dreamweaver 8 extensibility files using a combi

458 C-Level ExtensibilityThe readContentsOfFile() function accepts a list of arguments from the user, retrieves the filename argument, reads the conte

C-level extensibility and the JavaScript interpreter 459The following example shows how the MM_Init() function for the library myLibrary might look:vo

46 Customizing DreamweaverOpening a document in DreamweaverWhen a user opens a file, Dreamweaver follows a series of steps to identify the document ty

460 C-Level ExtensibilityData typesThe JavaScript interpreter defines the following data types.typedef struct JSContext JSContextA pointer to this opa

The C-level API 461The C-level API The C-level extensibility API consists of the following functions:typedef JSBool (*JSNative)(JSContext *cx, JSObjec

462 C-Level ExtensibilityArgumentschar *name, JSNative call, unsigned int nargs The name argument is the name of the function as it is exposed to Jav

The C-level API 463ArgumentsJSContext *cx, jsval v, long *lp The cx argument is the opaque JSContext pointer that passes to the JavaScript function.

464 C-Level Extensibility The bp argument is a pointer to a JSBool Boolean value. This function stores the converted value in *bp.ReturnsA Boolean va

The C-level API 465 The vp argument is a pointer to the jsval structure into which the contents of the string should be copied.ReturnsA Boolean value

466 C-Level ExtensibilityJSVal JS_IntegerToValue()DescriptionThis function converts a long integer value to JSVal structure. Argumentslv The lv argum

The C-level API 467 Typically, this argument is passed in and converted using the JS_ValueToObject() function.ReturnsA pointer to a null-terminated s

468 C-Level ExtensibilityJSBool JS_GetElement()DescriptionThis function reads a single element of an array object.ArgumentsJSContext *cx, JSObject *ob

The C-level API 469JSBool JS_ExecuteScript()DescriptionThis function compiles and executes a JavaScript string. If the script generates a return value

Extensible document types in Dreamweaver 47<panelset>DescriptionOutermost tag, which signals the start of the panel set description.AttributesNo

470 C-Level ExtensibilityReturnsA Boolean value: JS_TRUE indicates success; JS_FALSE indicates failure.File Access and Multiuser Configuration APIMacr

File Access and Multiuser Configuration API 471There are many cases where JavaScript extensions open files and write to the Configuration folder. Java

472 C-Level ExtensibilityFor example, if you use the trash can icon in the Snippets panel to delete a Snippets folder called javascript and a file cal

File Access and Multiuser Configuration API 473 The char *contstraints argument can be "files" or "directories" or a null value.

474 C-Level Extensibilityint MM_OpenConfigFile()AvailabilityDreamweaver MX.DescriptionThis function opens the file and returns an operating system fil

File Access and Multiuser Configuration API 475Example char *dwConfig = "file:///c|/Program Files/Macromedia/Dreamweaver/Configuration/Extensions

476 C-Level ExtensibilityReturnsA Boolean value: JS_TRUE indicates success; JS_FALSE indicates failure. Returns JS_FALSE if the file does not exist or

File Access and Multiuser Configuration API 477Example char *dwConfig = "file:///c|/Program Files/Macromedia/Dreamweaver/Configuration/Extensions

478 C-Level ExtensibilityJSBool MM_RemoveConfigFolder()AvailabilityDreamweaver MX.DescriptionThis function removes the folder and its files and subfol

Calling a C function from JavaScript 479ReturnsA Boolean value: JS_TRUE indicates success; JS_FALSE indicates failure.Example char dwConfig = "fi

48 Customizing Dreamweaver<document>DescriptionSpecifies the Document window’s initial position and size.Attributesrect, maximize rect specifie

480 C-Level ExtensibilityTo build the shared library on the Macintosh using Metrowerks CodeWarrior 9 or greater:1. Open Sample.mcp.2. Build the projec

4814PART 4AppendixFind information about supporting files and reference resources that can aid in developing Macromedia Dreamweaver 8 extensions.Appen

483APPENDIXThe Shared FolderThe Shared folder is the central repository for utility functions, classes, and images that are commonly used by all exten

484 The Shared FolderThe Common folderThe Common folder has shared scripts and classes for use in third-party extensions.CodeBehindMgr.js Contains fun

The Shared folder contents 485GridControlClass.js Use this class to create and manipulate an editable grid. You add a special select list in your HTML

486 The Shared FolderThe MM folderThe MM folder contains the shared scripts, images, and classes used by the extensions that come with Dreamweaver, in

The Shared folder contents 487The Scripts folder also contains two subfolders, Class and CMN. The Class folderThe Class folder contains the following

488 The Shared FolderThe CMN folderThe CMN folder contains the following utility functions:GridControlClass.js Older version of the GridControlClass i

The Shared folder contents 489DOM.js Contains general helper functions for working with the Dreamweaver DOM. Includes functions that get the root node

Extensible document types in Dreamweaver 49 y specifies the top position of the panel group. Its value can be an integer or a value that is relative

490 The Shared FolderOther foldersThe following list describes other folders of interest in the Shared folder: Controls The Controls folder contains

Using the Shared folder 491Using the Shared folder Look first in the Dreamweaver Configuration/Shared/Common folder for useful extension code because

492 The Shared Folder

493I n d e x

494 IndexbehaviorsAPI 312helper functions 307inserting multiple functions with 307required functions 312sample code 307user experience 306Behavi

Index 495closeTag tag 368code coloringabout 63blockEnd tag 66blockStart tag 66brackets tag 67charEnd tag 68charEsc tag 68charStart tag 68comme

496 Indexconventions, in this guide 13copyServerBehavior() 331css-support tag, code validation 92cssImport tag, code coloring 69cssMedia tag, code

Index 497opening, procedure for 46tags in definition file 38document, opening 46documentEdited() 298documentElement property 131DOM. <italic&g

498 Indexextensions, reloading 104, 105Extensions.txt file 43external JavaScript files 106Ffile (field) object 128file attribute 147, 235file t

Index 499Iid attribute 144, 232idChar1 tag, code coloring 73idCharRest tag, code coloring 74identifyBehaviorArguments() 317ignoreCase tag, code c

Contents 5Chapter 10: Reports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249Site reports . . . . . . . . . . . . . . .

50 Customizing Dreamweaver height is an integer that specifies the height of the panel in pixels. This attribute is optional. If height is not specif

500 IndexMmanipulating tree control content 122math object 128menu command extensions, definition 100menu commandsabout 194sample code 197user ex

Index 501Objects APIcanInsertObject() 161displayHelp() 161insertObject() 162isDomRequired() 162objectTag() 164windowDimensions() 165objectTag()

502 IndexSsampleText tag, code coloring 77scheme block delimiter coloring 80scheme processingcode coloring 83escape characters 85maximum string le

Index 503Ttag attribute 147Tag Chooser 268Tag Dialog extensions, definition 100Tag editor APIapplyTag() 276inspectTag() 275validateTag() 276Tag

504 IndexUunescape() 128uninstalling 30update attribute 236updatePattern tag 359, 360updatePatterns tag 358URL property 131VvalidateTag() 276v

Extensible document types in Dreamweaver 51 id is a number that indicates the ID for the panel. The following table contains a list of values: visib

52 Customizing DreamweaverContainerThis tag must be contained in a panelcontainer tag.Example<panelset><panelframe rect=”196 453 661 987” vis

Extensible document types in Dreamweaver 53enabled="dw.getFocus(true) == 'textView' || dw.getFocus(true) == ¬'html'" com

54 Customizing Dreamweaver

552CHAPTER 2Customizing Code ViewMacromedia Dreamweaver 8 uses two devices in Code view that help you enter code quickly and make your code readable a

56 Customizing Code ViewDreamweaver cannot express some types of Code Hints menus through the XML file or the JavaScript API. Both the CodeHints.xml f

Code hints 57<menugroup name="Tag Names" enabled="true" id="CodeHints_Tag_Names"><description> <![CDATA

58 Customizing Code View<menugroup>DescriptionEach menugroup tag corresponds to a type of menu. You can see the menu types that Dreamweaver defi

Code hints 59AttributesNone.ContentsDescription text.ContainerThe menugroup tag.Example<description><![CDATA[ To add or remove tags and attri

6ContentsChapter 16: Data Sources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379How data sources work . . . . . . . . . . . . . . .

60 Customizing Code View The casesensitive attribute specifies whether the pattern is case-sensitive. The possible values for the casesensitive attri

Code hints 61 The icon attribute, which is optional, specifies the path to an image file that Dreamweaver displays as an icon to the left of the menu

62 Customizing Code View The pattern attribute specifies the name of the function and its argument list. For methods, the pattern attribute describes

Code coloring 63Code coloringDreamweaver lets you customize or extend the code coloring schemes that you see in Code view so that you can add new keyw

64 Customizing Code View<tagColor id="CodeColor_HTMLTable" text="#009999" /><syntaxColor id="CodeColor_HTMLComment&q

Code coloring 65Notice that the syntaxColor and tagColor tags in the Colors.xml file assign color and style values to an id string value. The id value

66 Customizing Code ViewContentsblockEnd, blockStart, brackets, charStart, charEnd, charEsc, commentStart, commentEnd, cssProperty, cssSelector, cssVa

Code coloring 67AttributescanNest, doctypes, id, name, scheme canNest Specifies whether the scheme can nest inside itself. Values are "Yes"

68 Customizing Code View<charStart>DescriptionContains a text string that represents the delimiter of the start of a character. You must specify

Code coloring 69AttributesNone.Example<commentStart><![CDATA[<%--]]></commentStart><commentEnd>DescriptionA text string tha

Contents 7PART 4: APPENDIXAppendix: The Shared Folder . . . . . . . . . . . . . . . . . . . . . . . . . . . 483The Shared folder contents . . . . .

70 Customizing Code ViewAttributesname, id name="cssMedia_name" A string that assigns a name to the CSS @media function. id="id_str

Code coloring 71<cssValue/>DescriptionAn empty tag that indicates CSS rules and holds code coloring attributes.Attributesname, id name="cs

72 Customizing Code ViewExample<defaultTag name="Other Tags" id="CodeColor_HTMLTag" /><defaultText/> DescriptionOption

Code coloring 73Attributesname, id name="entity_name" A string that assigns a name to the entity. id="id_string" Required. An

74 Customizing Code View<idCharRest>DescriptionA list of characters that are to be recognized as the remaining characters in an identifier. If i

Code coloring 75<ignoreTags>DescriptionSpecifies whether markup tags should be ignored. Values are Yes and No; the default is Yes. Set to No whe

76 Customizing Code View<keywords>DescriptionList of keywords for type specified in category attribute. Multiple keywords tags are allowed.Attri

Code coloring 77Attributesname, id name="operator_name" A string that assigns a name to the list of operator characters. id="id_str

78 Customizing Code ViewAttributesdoctypes doctypes="doc_type1, doc_type2,...” The document types for which this sample text appears.Example<

Code coloring 79Attributesname, id, wrap name="stringStart_name" A string that assigns a name to the stringStart block. id="id_stri

8Contents

80 Customizing Code View<tagGroup>DescriptionThis tag groups one or more tags to which you can assign a unique color and style.Attributesid, nam

Code coloring 81Sample code<!-- #EndEditable --> <p><b><font size="+2">header</font></b></p> <!

82 Customizing Code ViewExample<blockStart doctypes="PHP_MySQL" scheme="outerTag"><![CDATA[<script\s+language="ph

Code coloring 83Scheme processingDreamweaver has three basic code coloring modes: CSS mode, Script mode, and Tags mode.In each mode, Dreamweaver appli

84 Customizing Code ViewWildcard charactersThe following is a list of wildcard characters that Dreamweaver supports, along with the strings to specify

Code coloring 85Escape charactersThe following is a list of escape characters that Dreamweaver supports, along with the strings to specify them and de

86 Customizing Code ViewScheme precedenceDreamweaver uses the following algorithm to color text syntax in Code view:1. Dreamweaver determines the init

Code coloring 87Editing schemesYou can edit the styles for a code coloring scheme either by editing the code coloring file or by selecting the Code Co

88 Customizing Code ViewTo edit styles for a scheme using the Code Coloring category in the Preferences dialog box, double-click a document type, or c

Code coloring 89Code coloring examplesThe following code coloring examples illustrate the code coloring schemes for a cascading style document and a J

9IntroductionThis guide describes the Macromedia Dreamweaver 8 framework and application programming interface (API) that lets you build extensions to

90 Customizing Code ViewCSS sample textThe following sample text for the CSS scheme illustrates the CSS code coloring scheme:/* Comment */H2, .head2

Code coloring 91<searchPattern><![CDATA[=\s*/\e*\\/]]></searchPattern></regexp><idChar1>_$abcdefghijklmnopqrstuvwxyzABCD

92 Customizing Code Viewvar tokens = new Array("Hello", "world");displayWords(tokens);The following lines from the Colors.xml file

Code validation 93ContentsThe property and value tags.ContainerNone.Example<css-support>. . .</css-support><property>DescriptionDefi

94 Customizing Code View message="message_string" The message attribute defines a message string that Dreamweaver displays when it finds th

Changing default HTML formatting 95ContainerpropertyExample<property name="margin"><value type="units" name="ex"

96 Customizing Code View

972PART 2Overview of Extending DreamweaverLearn the fundamental concepts of the Macromedia Dreamweaver 8 interface and how to extend Dreamweaver to su

993CHAPTER 3Extending DreamweaverTypically, you create a Dreamweaver extension to perform one of the following types of tasks: Automating changes to