Download Print this page

Adobe 38040334 - Dreamweaver CS3 User Manual

Extending dreamweaver

Hide thumbs Also See for 38040334 - Dreamweaver CS3:

User manual (497 pages)

,

User manual (738 pages)

Table Of Contents

page of 385

/ 385
Contents
Table of Contents
Bookmarks

Table of Contents

Advertisement

Quick Links

Download this manual See also: User Manual

CS 3

ADOBE

DREAMWEAVER

®

®

EXTENDING DREAMWEAVER

Table of Contents

Advertisement

Table of Contents

Need help?

Need help?

Do you have a question about the 38040334 - Dreamweaver CS3 and is the answer not in the manual?

Questions and answers

Summary of Contents for Adobe 38040334 - Dreamweaver CS3

Page 1 CS 3 ADOBE DREAMWEAVER ® ® EXTENDING DREAMWEAVER...
Page 2 The content of this guide is furnished for informational use only, is subject to change without notice, and should not be construed as a commitment by Adobe Systems Incorpo- rated.
Page 3: Table Of Contents
Contents Chapter 1: Introduction Background ................1 Installing an extension .
Page 4 The objects API functions ............. . . 116 Chapter 8: Browser compatibility check issues API How detection works .
Page 5 A simple floating panel example ............220 The floating panel API functions .
Page 6 A simple attribute translator example ........... . 334 A simple block/tag translator example .
Page 7: Background
Chapter 1: Introduction This guide describes the Adobe® Dreamweaver® CS3 framework and application programming interface (API) that lets you build extensions to Dreamweaver. It provides information about how each type of extension works; the API functions that Dreamweaver calls to implement the various objects, menus, floating panels, server behaviors, and so on, that make up the features of Dreamweaver;...
Page 8: Installing An Extension
To install an extension: Download and install the Adobe® Extension Manager, which is available on the Adobe Downloads website at http://www.adobe.com/go/downloads. Log on to the Adobe Exchange website at http://www.adobe.com/go/exchange.
Page 9: Additional Resources For Extension Writers
For information on the new functions that have been added to the Utility API and the JavaScript API, see the Dreamweaver API Reference. Documentation Resource Center Improve your Dreamweaver skills with books from Adobe. Check out the latest content written by the experts at http://www.adobe.com/support/documentation/buy_books.html. Deprecated functions In Dreamweaver CS3, several functions have been deprecated.
Page 10 DREAMWEAVER CS3 Extending Dreamweaver The following naming conventions are used in this guide: • You The developer who is responsible for writing extensions • The user The person using Dreamweaver • The visitor The person who views the web page that the user created...
Page 11: Ways To Customize Dreamweaver
Chapter 2: Customizing Dreamweaver In addition to creating and using Adobe Dreamweaver CS3 extensions, you can customize Dreamweaver in many ways, which lets you work in a manner that’s familiar, comfortable, and efficient for you. Ways to customize Dreamweaver There are several general approaches to customizing Dreamweaver. Some of these approaches are covered in Using Dreamweaver.
Page 12 • “Customizing the appearance of dialog boxes” on page 6 • “Changing the default file type” on page 7 • “Customizing the interpretation of third-party tags” on page 8 • “Customizing workspace layouts” on page 23 • “Customizing the Coding toolbar” on page 27 Customizing default documents The DocumentTypes/NewDocuments folder contains a default (blank) document of each type that you can create using Dreamweaver.
Page 13: Changing The Default File Type
On your hard disk, find the appropriate HTM file in the Configuration/Objects, Configuration/Commands, or Configuration/Behaviors folder. Make a copy of the file somewhere other than the Configuration folder. Open the copy in Dreamweaver, edit the form, and save it. Quit Dreamweaver. Copy the changed file back to the Configuration folder in place of the original.
Page 14: Customizing The Interpretation Of Third-Party Tags
For example, for JPEG files, enter the following: Save the file. Restart Dreamweaver. To see the changes, select File > Open, and click the pop-up menu of file types. Customizing the interpretation of third-party tags Server-side technologies such as ASP, ColdFusion, JSP, and PHP use special non-HTML code in HTML files; servers create and serve HTML content based on that code.
Page 15 The following information describes the attributes and valid values for the asterisk (*) are ignored for string-delimited tags. Optional attributes are marked in the attribute lists with curly braces ( ); all attributes not marked with curly braces are required. <tagspec>...
Page 16 • specifies a delimiter that marks the end of a string-delimited tag. This attribute is required if end_string is specified. start_string • indicates whether to ignore everything between detect_in_attribute between opening and closing tags if those strings are not defined) even when those strings appear inside attribute names or values.
Page 17 <p>This is a paragraph that includes an instance of the <code>happy</code> tag (<happy>Joe</happy>).</p> Because is set to render_contents are not rendered. Instead, the start and end tags and their contents appear as a single icon. For nonempty tags that have a render_contents instead, the content between the opening and closing tags (such as the text between the tags in the content between the opening and closing tags</mytag>...
Page 18: Customizing Dreamweaver In A Multiuser Environment
The location of the user’s Configuration folder depends on the user’s platform. Windows 2000 and Windows XP platforms use the following location: hard disk:\Documents and Settings\username\Application Data\Adobe\Dreamweaver 9\Configuration Note: In Windows XP, this folder may be inside a hidden folder.
Page 19 copy the file from the Dreamweaver Configuration folder to the corresponding location inside your user Configuration folder. Then edit the copy in your user Configuration folder. Deleting configuration files in a multiuser environment When working in a multiuser operating system, if you do something within Dreamweaver that would delete a config- uration file (for example, deleting a predesigned snippet from the Snippets panel), Dreamweaver creates a file in your user Configuration folder called mm_deleted_files.xml.
Page 20: Changing Ftp Mappings
Attributes name specifies the path to the configuration file, relative to the Configuration folder. In Windows, name attribute use a backslash (\) to separate parts of the path; on the Macintosh®, use a colon (:). Contents None (empty tag). Container This tag must be contained in a deleteditems Example...
Page 21: Extensible Document Types In Dreamweaver
Dreamweaver provides an initial document type definition file. This file, named MMDocumentTypes.xml, contains the document type definitions provided by Adobe: Document type Server model ASP.NET C#...
Page 22 EDML VTML If you need to create a new document type, you can either add your entry to the document definition file that Adobe provides (MMDocumentTypes.xml) or add a custom definition file to the Configuration/DocumentTypes folder. Note: The NewDocuments subfolder resides in the Configuration/DocumentTypes folder. This subfolder contains default pages (templates) for each document type.
Page 23 <title> <loadString id="mmdocumenttypes_0title" /> </title> <description> <loadString id="mmdocumenttypes_0descr" /> </description> </documenttype> </documenttypes> Note: Color coding for document types is specified in the XML files that reside in the Configuration/CodeColoring folder. In the previous example, the loadString the title and description for ASP-JS type documents. For more information about localized strings, see “Localized strings”...
Page 24 Element Type Attribute internaltype dynamicid winfileextension macfileextension previewfile file priorversionservermodel Required Description A broad classification of how Dreamweaver treats a file. The identifies whether the Design view is enabled internaltype for this document and handles special cases such as Dreamweaver templates or extensions. The following values are valid: Dynamic (has special display regions)
Page 25 Element Type Attribute title (subtag) description (subtag) Note: When the user saves a new document, Dreamweaver examines the list of extensions for the current platform that are associated with the document type ( string in the list and uses it as the default file extension. To change this default file extension, you must reorder the exten- sions in the comma-separated list so the new default is listed first.
Page 26 The location of the user’s Configuration folder depends on the user’s platform. Windows 2000 and Windows XP platforms use the following location: hard disk:\Documents and Settings\username\Application Data\Adobe\Dreamweaver 9\Configuration Note: In Windows XP, this folder may be inside a hidden folder.
Page 27 To add a new document type: 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 28 In these examples, myJSPDocType/Description localized string. The localized string is defined in the next step. In the Configuration/Strings folder, create a new XML file (or edit an existing file) that defines the localized string. For example, the following code, when placed in the Configuration/Strings/strings.xml file, defines the string: DocType/Description <strings>...
Page 29 claim an ASP document and if their respective weaver assigns the document to ASP-JS (because, alphabetically, ASP-JS is first). If Dreamweaver cannot map the file extension to a document type, Dreamweaver opens the document as a text file. Customizing workspace layouts Dreamweaver lets you customize the workspace layout, including which panels are in the specified layout, as well as other attributes such as the positions and sizes of the panels, their collapsed or expanded states, the position and size of the application window, and the position and size of the Document window.
Page 30 Example <panelset> <application rect="0 0 1000 1200" maximize="false"> </application> </panelset> <document> Description Specifies the Document window’s initial position and size. Attributes rect, maximize • specifies the position and size of the Document window. The string is in the form “left top right bottom” rect specified as integers.
Page 31 • is a string value that specifies to which edge of the application frame to dock the panel group. This attribute dock is ignored on the Macintosh because panel groups cannot be docked. • is a Boolean value: collapse true group is expanded.
Page 32 Specifies the panel that appears in the panel container. Attributes id, visibleTab • is a number that indicates the ID for the panel. The following table contains a list of values: Software Panel Adobe® Flash® Properties Actions Align Behaviors Components Component Inspector...
Page 33 Software Panel 101–110 Library Dreamweaver Properties Flex Builder Properties • is a Boolean value: visibleTab true Contents None. Container This tag must be contained in a panelcontainer Example <panelset> <panelframe rect="196 453 661 987" visible="true" dock="floating"> <panelcontainer title="Color" height="250" visible="true" expanded="true" activepanel="20">...
Page 34: Changing Keyboard Shortcut Mappings
 Save the file. To make any buttons that are not visible in the toolbar appear, you remove the comment that surrounds a button in the XML file.
Page 35 Filename Windows platform fr.xml French (France) fr-ca.xml French (Canada) fr-ch.xml French (Switzerland) it.xml Italian (Italy) Italian (Switzerland) it-mac.xml ja.xml Japanese nl-be.xml Dutch (Belgium) French (Belgium) zh-cn.xml Chinese (PRC) Chinese (Singapore) If you are using a keyboard layout other than those provided by Dreamweaver, you can create a mappings file for your specific keyboard and place it in the Configuration\Menus\Adaptive Sets folder.
Page 36 Switch the keyboard layout to the U.S. keyboard (through your computer’s the operating system). Start the Dreamweaver Keyboard Shortcut Editor by selecting Edit > Keyboard Shortcuts. Click the third image button in the upper right of the dialog box to export the set as an HTML file. After saving the summary file, close the Keyboard Shortcut Editor dialog box.
Page 37: Code Hints
Chapter 3: Customizing Code view Adobe Dreamweaver CS3 uses two devices in Code view that help you enter code quickly and make your code readable and accurate. These two devices are code hints and code coloring. In addition, Dreamweaver validates your code for the target browsers that you specify and allows you to change default HTML formatting.
Page 38: The Codehints.xml File
After Dreamweaver loads the contents of a code hints file, you can also add new Code Hints menus dynamically through JavaScript. For example, JavaScript code populates the list of session variables in the Bindings panel. You can use the same code to add a Code Hints menu, so when a user types displays a menu of session variables.
Page 39 <a href="javascript:dw.popupTagLibraryEditor()"> Tag Library Editor </a>]]> </description> </menugroup> <menugroup name="Function Arguments" enabled="true" id="CodeHints Function <description> </description> <function pattern="ArraySort(array, sort doctypes="CFML"/> <function pattern="Response.addCookie(Cookie cookie)" doctypes="JSP"/> </menugroup> </codehints> JavaScript code hinting Dreamweaver supports code hinting for the Spry framework. The Spry code hinting file (SpryCodeHints.xml) has the same basic format as CodeHints.xml.
Page 40 </method> <method pattern="getColumnType(columnName)" icon= ".../hintMisc.gif" /> <method pattern="distinct()" icon= ".../hintMisc.gif" /> <method pattern="getSortColumn()" icon= ".../hintMisc.gif" /> <method pattern="sort()" icon= ".../hintMisc.gif" /> <event pattern="onCurrentRowChanged" icon= ".../hintMisc.gif" /> <event pattern="onDataChanged" icon= ".../hintMisc.gif" /> </menu> <function pattern="Accordion(element,{options})" caseSensitive="true" /> <menu classpattern="Spry.Widget.Accordion"> <method pattern="openNextPanel()" icon= ".../hintMisc.gif" /> <method pattern="openPreviousPanel()"...
Page 41 <classlibrary name="Spry Keywords" id="CodeColor_JavascriptSpry"> <class>Spry.Data.XMLDataSet</class> <class>Spry.Widget.Accordion</class> </classlibrary> Where: • is a new tag to group the classes into the color id classlibrary is used to list each individual class available in the class library. The list of classes can grow to include other class spry classes from different spry packages (such as: Debug, Data, Utils, Widgets, and Effects), or other Asynchronous JavaScript and XML (Ajax) toolkits or JavaScript libraries.
Page 42: Code Hints Tags
Example <crosstag_attributes> <attribgroup id="spryRegionAttrs" name="Spry1.2"> <attrib name="spry:region" <attrib name="spry:detailregion" <attrib name="spry:content"/> <attrib name="spry:if"/> <attrib name="spry:choose"> <attrib name="spry:when"/> <attrib name="spry:default"/> <attrib name="spry:state" type="Enumerated"> <attriboption value="read" <attriboption value="loading" caption="loading"/> <attriboption value="failed" </attrib> <taggroup> <tag name="div"/> <tag name="span"/> </taggroup> </attribgroup> <attribgroup id="spryBehaviorAttrs" name="Spry1.2"> <attrib name="spry:hover"...
Page 43 Example <codehints> <menugroup> Description Each tag corresponds to a type of menu. You can see the menu types that Dreamweaver defines by menugroup selecting the Code Hints category from the Preferences dialog box. Select Preferences from the Edit menu to display the Preferences dialog box.
Page 44 Example <description> <![CDATA[ To add or remove tags and attributes, use the <a href="javascript:dw.tagLibrary.showTagLibraryEditor()">Tag Library Editor</a>.]]> </description> <menu> Description This tag describes a single pop-up menu. Dreamweaver opens the menu whenever the user types the last character of the string in the pattern attribute. For example, the menu that shows the contents of a Session variable might have a pattern attribute that is equal to "...
Page 45 Attributes }, { label, value, icon texticon • The attribute is the string that Dreamweaver displays in the pop-up menu. label • The attribute is the string that Dreamweaver inserts in the document when you select the command. When value the user selects the item from the menu and presses Enter or Return, Dreamweaver replaces all the text that the user typed since the menu opened.
Page 46 • The attribute specifies the name of the function and its argument list. For methods, the pattern attribute pattern describes the name of the object, the name of the method, and the method’s arguments. For a function name, the Code Hints menu appears when the user types function.
Page 47 • The attribute specifies the name of the method and its argument list. The pattern attribute describes the pattern name of the object, the name of the method, and the method’s arguments. The menu shows the list of arguments for the method. The Code Hints menu appears when the user types menu shows the methods that have been specified for the object.
Page 48 • The attribute specifies the name to display. This argument is required. label • The attribute specifies the value to drop when the item is selected in the code hint menu. This argument is value required. • The attribute specifies the icon to be used in the code hint menu. This argument is required. icon •...
Page 49: Code Coloring
Attributes label, value, icon, datatype • The attribute specifies the name to display. This argument is required. label • The attribute specifies value to drop when the item is selected in the code hint menu. This argument is value required. •...
Page 50: Code Coloring Files
DREAMWEAVER CS3 Extending Dreamweaver Dreamweaver provides the JavaScript function , which enables you to dreamweaver.reloadCodeColoring() reload code coloring XML files that might have been edited manually. For more information on this function, see the Dreamweaver API Reference. To update a code coloring scheme or add a new scheme, you must modify the code coloring definition files. Code coloring files Dreamweaver defines code coloring styles and schemes in XML files that reside in the Configuration/CodeColoring folder.
Page 51 DREAMWEAVER CS3 Extending Dreamweaver The following excerpt from the CodeColoring.xml file illustrates the hierarchy of tags in a code coloring scheme file, and it also illustrates the relationship between the code coloring styles file and the code coloring scheme file: Notice that the tags in the Colors.xml file assign color and style values to an string...
Page 52 Attributes name priority doctypes • A string that assigns a name to the scheme. Dreamweaver shows the scheme name in the name="scheme_name" Edit Coloring Scheme dialog box. Dreamweaver shows a combination of scheme name and field name, such as . If you do not specify a name, the fields for the scheme do not appear in the Edit Coloring Scheme HTML Comment dialog box.
Page 53 Attributes canNest doctypes name scheme • Specifies whether the scheme can nest inside itself. Values are canNest • doctypes="doc_type1, doc_type2,…" which you can nest this code coloring scheme. Document types are defined in the Dreamweaver Configuration/Document Types/MMDocumentTypes.xml file. • Required when id="id_string"...
Page 54 <charEnd> Description Contains a text string that represents the delimiter of the end of a character. You must specify the tags in pairs. Multiple charEnd charStart Attributes None. Example <charEnd><![CDATA[']]></charEnd> <charEsc> Description Contains a text string that represents an escape character. Multiple Attributes None.
Page 55 Attributes name • A string that assigns a name to the CSS name="cssImport_name" • Required. An identifier string that maps color and style to this syntax item. < id="id_string" Example <cssImport name="@import" id="CodeColor <cssMedia/> Description An empty tag that indicates the code coloring rule for the Attributes name •...
Page 56 Example <cssSelector name="Selector" id="CodeColor_CSSSelector" /> <cssValue/> Description An empty tag that indicates CSS rules and holds code coloring attributes. Attributes name • A string that assigns a name to the CSS value. name="cssValue_name" • Required. An identifier string that maps color and style to this syntax item. id="id_string"...
Page 57 Attributes name • A string that assigns a name to the CSS Selector. name="cssSelector_name" • Required. An identifier string that maps color and style to this syntax item. id="id_string" Example <defaultText name="Text" id="CodeColor_TextText" /> <endOfLineComment> Description A text string that delimits the start of a comment that continues until the end of the current line. Multiple …...
Page 58 <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 59 Example <ignoreMMTParams>No</ignoreMMTParams> <ignoreTags> Description Specifies whether markup tags should be ignored. Values are is for tag markup language that is delimited by Attributes None. Example <ignoreTags>No</ignoreTags> <isLocked> Description Specifies whether the text that is matched by this scheme is locked from being edited in the Code view. Values are .
Page 60 Contents <keyword></keyword> Example <keywords name="Reserved Keywords" id="CodeColor <keyword>break</keyword> <keyword>case</keyword> </keywords> <numbers/> Description An empty tag that specifies numbers that should be recognized and also holds color attributes. Attributes name • A string that assigns a name to the name="number_name" • Required.
Page 61 • The character or string that signals special character processing, known as the escape character or escape string. Contents <searchPattern></searchPattern> Example <regexp name="RegExp" id="CodeColor_JavascriptRegexp" delimiter="/" escape="\\"> <searchPattern><![CDATA[(\s*/\e*\\/]]></searchPattern> <searchPattern><![CDATA[=\s*/\e*\\/]]></searchPattern> </regexp> <sampleText> Description Representative text that appears in the Preview window of the Edit Coloring Scheme dialog box. For more infor- mation on the Edit Coloring Scheme dialog box, see “Editing schemes”...
Page 62 <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. Multiple stringStart stringEnd Attributes name id, wrap • A string that assigns a name to the name="stringStart_name"...
Page 63: Scheme Block Delimiter Coloring
• taglibrary="tag_library_id" • A tag or comma-separated list of tags that comprise the tag group. tags="tag_list" Example <tagGroup name="HTML Table Tags" id="CodeColor_HTMLTable" taglibrary="DWTagLibrary_html" tags="table,tbody,td,tfoot,th,thead,tr,vspec,colw,hspec" /> Scheme block delimiter coloring scheme attribute controls the coloring of block opening and closing strings or block delimiters. The blockStart following values are valid values for the Note: Do not confuse the...
Page 64 outerTag value specifies that both the outerTag weaver should color them as tags would be colored in the scheme that surrounds them. The JavaScript scheme, in which <script> provides an example of this value. This scheme matches blocks of JavaScript code, which does not recognize tags, so the delimiters need to be colored by the scheme that surrounds them.
Page 65: Scheme Processing
Example <blockStart doctypes="ColdFusion,CFC" scheme="nameTagScript"><![CDATA[<cfset\n]]></blockStart> Scheme processing Dreamweaver has three basic code coloring modes: CSS mode, Script mode, and Tags mode. In each mode, Dreamweaver applies code coloring only to particular fields. The following chart indicates which fields are subject to code coloring in each mode. Field defaultText defaultTag...
Page 66 Wildcard Escape Description string Wildcard Skip all characters in the rule until the character that follows the wildcard is found. For example, use to match all tags of this type that have the name attribute specified. Wildcard with escape \e*x Where character This is the same as the wildcard, except that an escape character can be...
Page 67 <blockEnd><![CDATA[]]></blockEnd> Assuming the optional white space wildcard strings ( automatically, then the data string is 26 characters long, plus a wildcard string (  This leaves an editable region name that can be as many as 74 characters, which is the maximum of 100 characters minus 26.
Page 68: Editing Schemes
Preferences dialog box. Note: Adobe recommends that you create backup copies of all XML files before you make changes. You should verify all manual changes before you edit color and style settings using the Preferences dialog box. Data will be lost if you edit an...
Page 69: Code Coloring Examples
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.
Page 70 <blockStart doctypes="ASP-JS,ASP-VB,ASP.NET_CSharp,ASP.NET_VB,ColdFusion, CFC,HTML,JSP,LibraryItem,DWTemplate,PHP_MySQL" scheme="outerTag"> <![CDATA[<style\s+\*>]]></blockStart> <blockEnd><![CDATA[</style>]]></blockEnd> <commentStart name="Comment" id="CodeColor_CSSComment"><![CDATA[ /*]]></commentStart> <commentEnd><![CDATA[*/]]></commentEnd> <endOfLineComment><![CDATA[]]></endOfLineComment> <stringStart name="String" id="CodeColor_CSSString"><![CDATA["]]></stringStart> <stringEnd><![CDATA["]]></stringEnd> <stringStart><![CDATA[']]></stringStart> <stringEnd><![CDATA[']]></stringEnd> <stringEsc><![CDATA[\]]></stringEsc> <cssSelector name="Selector" id="CodeColor_CSSSelector" /> <cssProperty name="Property" id="CodeColor_CSSProperty" /> <cssValue name="Value" id="CodeColor_CSSValue" /> <sampleText doctypes="CSS"><![CDATA[/* Comment */ H2, .head2{ font-family : 'Sans-Serif'; font-weight : bold;...
Page 71 JavaScript code coloring <scheme name="JavaScript" id="JavaScript" doctypes="JavaScript" priority="50"> <ignoreCase>No</ignoreCase> <ignoreTags>Yes</ignoreTags> <blockStart doctypes="ASP-JS,ASP-VB,ASP.NET_CSharp,ASP.NET_VB,ColdFusion, CFC,HTML,JSP,LibraryItem,DWTemplate,PHP_MySQL" scheme="outerTag"> <![CDATA[<script>]]></blockStart> <blockEnd><![CDATA[</script>]]></blockEnd> <blockStart doctypes="ASP-JS,ASP-VB,ASP.NET_CSharp,ASP.NET_VB,ColdFusion, CFC,HTML,JSP,LibraryItem,DWTemplate,PHP_MySQL" scheme="outerTag"> <![CDATA[<script\s+\*>]]></blockStart> <blockEnd><![CDATA[</script>]]></blockEnd> <commentStart name="Comment" id="CodeColor_JavascriptComment"> <![CDATA[/*]]></commentStart> <commentEnd><![CDATA[*/]]></commentEnd> <endOfLineComment><![CDATA[//]]></endOfLineComment> <endOfLineComment><![CDATA[]]></endOfLineComment> <stringStart name="String" id="CodeColor_JavascriptString"> <![CDATA["]]></stringStart> <stringEnd><![CDATA["]]></stringEnd> <stringStart><![CDATA[']]></stringStart> <stringEnd><![CDATA[']]></stringEnd> <stringEsc><![CDATA[\]]></stringEsc> <brackets name="Bracket" id="CodeColor_JavascriptBracket"> <![CDATA[{[()]}]]></brackets>...
Page 72: Code Validation
</keywords> <keywords id="CodeColor_JavascriptNumber"> <keyword>Infinity</keyword> <keyword>Nan</keyword> </keywords> <keywords name="Client Keywords" id="CodeColor_JavascriptClient"> <keyword>alert</keyword> . . . </keywords> <sampleText><![CDATA[/* JavaScript */ function displayWords(arrayWords) { for (i=0; i < arrayWords.length(); i++) { // inline comment alert("Word " + i + " is " + arrayWords[i]); var tokens = new Array("Hello", "world");...
Page 73 Dreamweaver stores browser profiles in the Browser Profile folder inside the Dreamweaver Configuration folder. Each browser profile is defined as a text file that is named for the browser. For example, the browser profile for Internet Explorer version 6.0 is Internet_Explorer_6.0.txt. To support target browser checking for CSS, Dream- weaver stores CSS profile information for a browser in an XML file whose name corresponds to the browser profile but with a suffix of _CSS.xml.
Page 74 <property names="foo,bar"> <value type="named" name="top"/> <value type="named" name="bottom"/> </property> <property name="foo"> <value type="named" name="top"/> <value type="named" name="bottom"/> </property> <property name="bar"> <value type="named" name="top"/> <value type="named" name="bottom"/> </property> • supportlevel="error", "warning", "info", property. If not specified, "supported" omit the message attribute, Dreamweaver uses the default message, “CSS property name supported.
Page 75: Changing Default Html Formatting
• message="message_string" it finds the property value in a document. If the string of “ is not supported. ” value_name Contents None. Container property Example <property name="margin"> <value type="units" name="ex" supportlevel="warning" message="The implementation of ex units is buggy in Safari 1.0."/> <value type="units"...
Page 76: Chapter 4: Extending Dreamweaver
Chapter 4: Extending Dreamweaver Typically, you create an Adobe Dreamweaver CS3 extension to perform one of the following types of tasks: • Automating changes to the user’s current document, such as inserting HTML, CFML, or JavaScript; changing text or image properties; or sorting tables •...
Page 77: Types Of Dreamweaver Extensions
Types of Dreamweaver extensions The following list describes the types of Dreamweaver extensions that are documented in this guide: extensions create changes in the Insert bar. An object is typically used to automate inserting code Insert Bar object into a document. It can also contain a form that gathers input from the user and JavaScript that processes the input. Object files are stored in the Configuration/Objects folder.
Page 78: Configuration Folders And Extensions
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 Adobe Exchange website. For more information on the contents of each subfolder within the Configuration folder, see the Configuration_ReadMe.htm file.
Page 79: Multiuser Configuration Folders
DREAMWEAVER CS3 Extending Dreamweaver Configuration/Shared/Common/Scripts folder structure For more information about the Shared folder, see “The Shared folder” on page 364. Multiuser Configuration folders For the multiuser operating systems of Windows XP, Windows 2000, and Macintosh OS X, Dreamweaver creates a separate Configuration folder for each user in addition to the Dreamweaver Configuration folder.
Page 80: Extension Apis
Reloading extensions If you make a change to an extension while you are working in Dreamweaver, you can reload the extensions so that Dreamweaver recognizes the change. To reload extensions Control-click (Windows) or Option-click (Macintosh) the Categories menu in the Insert bar’s title bar. Select Reload Extensions.
Page 81: Displaying Help
• Executes the procedures Note: If any JavaScript code in your extension file contains the string " string as an ending tag and reports an unterminated string literal error. To avoid this problem, break the string script into pieces and concatenate them like this: Dreamweaver executes code in the onLoad command or action from a menu for the Command and Behavior action extension types.
Page 82: Localizing An Extension
Localizing an extension Use the following techniques to make it easier to translate your extensions into local languages. • Separate extensions into HTML and JavaScript files. The HTML files can be replicated and localized; the JavaS- cript files are not localized. •...
Page 83: Working With The Extension Manager
); Working with the Extension Manager If you create extensions for others users, you must package them according to the guidelines on the Adobe Exchange website (www.adobe.com/go/exchange) under the Help > How to Create an Extension category. After you have written and tested an extension in the Extension Manager, select File >...
Page 84: Designing An Extension User Interface
If you plan to submit your extension for Adobe certification, you need to follow the guidelines that are available within the Extension Manager files on the Adobe Exchange website (www.adobe.com/go/exchange). These guidelines are not intended to limit your creativity.
Page 85: Dreamweaver Html Rendering Control
When you design an extension, you should determine what variables are necessary and what form elements can best handle them. Consider the following basic guidelines when you design an extension UI: • To name your extension, place the name in the the extension title bar.
Page 86: Using Custom Ui Controls In Extensions
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). Using custom UI controls in extensions In addition to the standard HTML form elements, Dreamweaver supports custom controls to help you create flexible, professional-looking interfaces, as described in the following list: •...
Page 87 Dreamweaver adds the following custom attributes for the Attribute name Description Declares that the pop-up list has an editable text area editable Holds or sets text within the editable text area editText Note: Editable select lists are available in Dreamweaver. The following example creates a Command extension that contains an editable select list using common JavaScript functions: To create the example:...
Page 88: Database Controls
editText="Editable Text"> <option> Baseball</option> <option> Football </option> <option> Soccer </option> </select> </td> </tr> </table> </form> </div> </body> </html> Save the file as EditableSelectTest.htm in the Dreamweaver Configuration/Commands folder. To test the example: Restart Dreamweaver. Select Commands > EditableSelectTest. When you select a value from the list, an alert message displays the index of the value and the text. If you enter a value, an alert message indicates that nothing is selected.
Page 89 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...
Page 90 You can change the attribute to retrieve selected data and display it in the tree. You can use the connection attribute as a JavaScript wrapper object for the new tag. For more examples, see the DBTreeCon- DBTreeControl trolClass.js file in the Configuration/Shared/Common/Scripts folder. Adding a variable grid control The variable grid control has the following attributes: Attribute name...
Page 91 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 database tree control that MM:TREECONTROL is described in “Adding a database tree control”...
Page 92 tags have the following attributes: MM:TREECOLUMN Attribute name Description Name of the column name String to appear in column header value width Width of the column in pixels (percentage not supported); default is 100 Optional. Specifies whether the text in the column should be aligned left, right, or align center;...
Page 93: Manipulating Content Within A Tree Control
DREAMWEAVER CS3 Extending Dreamweaver Manipulating content within a tree control Tree controls and the nodes within them are implemented as HTML tags. They are parsed by Dreamweaver and stored in the document tree. These tags can be manipulated in the same way as any other document node. For more information on functions and methods, see “The Dreamweaver Document Object Model”...
Page 94: Adding Flash Content To Dreamweaver
In this example, when the user changes the value of the text box and then tabs or clicks elsewhere, the color picker updates to show the color that is specified in the text box. Whenever the user selects a new color with the color picker, the text box updates to show the hex value for that color.
Page 95 <body> <body> <form> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http: //download.Macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="200" height="100"> <param name="movie" value="myFlash.swf"> <param name="quality" value="high"> <embed src="myFlash.swf" quality="high" pluginspage="http://www.Macromedia.com/go/ getflashplayer" type="application/x-shockwave-flash" width="200" height="100"></embed> </object> </form> </body> </html> 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.
Page 96: Chapter 6: The Dreamweaver Document Object Model
Chapter 6: The Dreamweaver Document Object Model In Adobe Dreamweaver CS3, the Document Object Model (DOM) is a critically important structure for extension builders. It lets you access and manipulate elements within a user’s document and within the extension file.
Page 97: Objects, Properties, And Methods Of The Dreamweaver Dom
Which document DOM? It is important to distinguish between the DOM of the user’s document and the DOM of the extension. The infor- mation in this topic applies to both types of Dreamweaver documents, but the way that you reference each DOM is different.
Page 98 Object Properties (an array of form objects) document forms • images • (an array of image objects) (an array of layers • and absolutely positioned elements objects by name child nodeType • parentNode • childNodes • previousSibling • nextSibling • documentElement •...
Page 99: Properties And Methods Of The Document Object
Object Properties In addition to the properties that are available password text for all tags: file form • hidden value image (field) textarea In addition to the properties that are available select for all tags: form • (an array of option objects) options •...
Page 100 Property or method nodeType • parentNode • parentWindow • childNodes • previousSibling • nextSibling • documentElement • body • URL • getElementsByTagName(tagName) getElementsById(Id) getElementsByAttributeName(attrName) getElementById(id) hasChildNodes() Properties and methods of HTML The following table lists the properties and methods of HTML elements in Dreamweaver, along with their return values or explanations.
Page 101 Property or method nodeType • parentNode • childNodes • previousSibling • nextSibling • tagName • attrName innerHTML outerHTML getAttribute(attrName) getTranslatedAttribute(attrName) setAttribute(attrName, attrValue) removeAttribute(attrName) getElementsByTagName(tagName) Return value Node.ELEMENT_NODE The parent tag. If this is the tag, the document object returns. HTML NodeList that contains all the immediate children of the tag.
Page 102: Properties And Methods Of Text Objects
Property or method getElementsByAttributeName(attrName) hasChildNodes() hasTranslatedAttributes() Properties and methods of text objects Each contiguous block of text in an HTML document (for example, the text within a JavaScript object. Text objects never have children. The following table describes the properties and methods of text objects that are taken from DOM Level 1 and used in Dreamweaver.
Page 103: The Dreamweaver And Site Objects
Property or method data hasChildNodes() The dreamweaver and site objects Dreamweaver implements the standard objects that are accessible through the DOM and adds two custom objects: . These custom objects are widely used within the APIs and in writing extensions. For more dreamweaver site information on the methods of the...
Page 104 DREAMWEAVER CS3 Extending Dreamweaver The site object object has no properties. For information about the methods of the object, see the Dreamweaver API site site Reference.
Page 105: How Object Files Work
Chapter 7: Insert bar objects In Adobe Dreamweaver CS3, objects insert specific strings of code into a user’s document. Objects commonly reside on the Insert bar, on the Insert menu, or both. Objects let users add content, such as images, absolutely positioned (AP) elements, and tables, by clicking icons or menu options.
Page 106: The Insert Bar Definition File
Note: The simplest objects contain only the HTML to insert, without “Customizing Dreamweaver” on the Adobe Support Center. • The 18 x 18 pixel image that appears on the Insert bar •...
Page 107: Insert Bar Definition Tags
<menubutton id="DW Images" MMString:name="insertbar/images" image="Common\Image.png"> <button id="DW Image" image="Common\Image.png" MMString:name="insertbar/image" file="Common\Image.htm" /> </menubutton> <separator /> <button id="DW TagChooser" MMString:name="insertbar/tagChooser" image="Common\Tag Chooser.gif" command="dw.showTagChooser()" codeOnly="TRUE"/> </category> </insertbar> Note: Although the insertbar category end of their content, the tags button, checkbutton, and separator do not have related closing tags. Instead button, check- button, and separator use a slash (/) before the closing bracket to denote the end of their attributes and content.
Page 108 Example <category id="DW Insertbar Common" folder="Common"> <button id="DW Hyperlink" image="Common\Hyperlink.gif" file="Common\Hyperlink.htm"/> </category> <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"...
Page 109: Insert Bar Definition Tag Attributes
Attributes id, image, checked, {showIf}, {enabled}, {command}, {file}, {tag}, {name}, {codeOnly} 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="...
Page 110 Example canDrag="false" showIf="enabler" Description This attribute specifies that this button should appear on the Insert bar only if the given Dreamweaver enabler is a value. If you do not specify true showIf _SERVERMODEL_ASPNET, _SERVERMODEL_JSP, _SERVERMODEL_CFML ColdFusion), _SERVERMODEL_CFML_UD4 _FILE_TEMPLATE, _VIEW_CODE, _VIEW_DESIGN, _VIEW_LAYOUT, _VIEW_EXPANDED_TABLES, _VIEW_STANDARD To specify multiple enablers, place a comma (which means AND) between the enablers.
Page 111 Example checked=" View Layout" command="API_function" Description Instead of referring Dreamweaver to an HTML file that contains the code to insert, you use this tag to specify a command that Dreamweaver performs when the button is clicked. Example command="dw.showTagChooser()" file="file_path" Description attribute specifies the path, relative to the Dreamweaver Configuration folder, of an object file.
Page 112: Modifying The Insert Bar
Modifying the Insert bar You can move objects from one category to another, rename categories, and completely remove objects from the panel. To make the changes appear in the Insert bar, you must either restart Dreamweaver or reload extensions. For information on reloading extensions, see “Reloading extensions”...
Page 113: Adding Objects To The Insert Bar
To create a new category: Save a backup copy of insertbar.xml (with a name such as “insertbar.backup.xml”). Open the original insertbar.xml file. Create a new category tag, specifying the default folder for the category and a set of objects to appear in the category.
Page 114: A Simple Insert Object Example
A simple insert object example This example adds an object to the Insert bar so users can add a line through (strike through) selected text by clicking a button. This object is useful if a user needs to make editorial comments in a document. Because this example performs text manipulation, you may want to explore some of the objects from the Text pop- up menu in the HTML category on the Insert bar as models.
Page 115 To add the isDOMRequired() function: In the head section of the Strikethrough.htm file, between the opening and closing function: <script language="javascript"> function isDOMRequired() { // Return false, indicating that this object is available in Code view. return false; </script> Save the file. Next, decide whether to use objectTag() simply wraps the...
Page 116 To separate the HTML object definition file from the supporting JavaScript functions: Create a new blank file. Paste all the JavaScript functions into the file. Remove the functions from Strikethrough.htm, and add the JavaScript filename to the tag, as shown in the following example: <html>...
Page 117 This line identifies the beginning of the Common category on the Insert bar. Start a new line after the category tag; then insert the for the Strikethrough object. The ID must be a unique name for the button (following standard naming conventions, use for this object).
Page 118 Note: Because dom.applyCharacterMarkup() API function for font color changes. (For more information, see Reference). Save the file as Strikethrough.js. Next, in the Strikethrough.htm file, you add the form. The form for this example is a simple check box that calls the function when the user clicks on it.
Page 119 Click OK to perform the objectTag() 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 120 //--------------- API FUNCTIONS--------------- function isDOMRequired() { // Return false, indicating that this object is available in Code view. return false; function objectTag() { // Manually wrap tags around selection. var dom = dw.getDocumentDOM(); if (dw.getFocus() == 'textView' || dw.getFocus(true) == 'html'){ var upCaseTag = (dw.getPreferenceString("Source Format", "Tags Upper Case", "") == 'TRUE');...
Page 121 tag defines the beginning of all the Insert bar contents. insertbar After that line, add a new category and folder attributes, and then add a closing <category id="DW Insertbar Editorial" name="Editorial" folder="Editorial"> </category> Reload extensions. For information on reloading extensions, see “Reloading extensions” on page 74. The Editorial category appears on the Insert bar: Within the opening and closing category...
Page 122: The Objects Api Functions
To test the new pop-up menu: Reload extensions. For information on reloading extensions, see “Reloading extensions” on page 74. Click the Editorial menu. The following pop-up menu appears: The objects API functions This section describes the functions in the objects API. You must define either the function.
Page 123 displayHelp() Description If you define this function, it displays a Help button below the OK and Cancel buttons in the Parameters dialog box. This function is called when the user clicks the Help button. Arguments None. Returns Dreamweaver expects nothing. Example The following example opens the myObjectHelp.htm file in a browser;...
Page 124 If none of these conditions apply, use the Arguments None. 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.
Page 125 Arguments None. Returns Dreamweaver expects the string to insert into the user’s document. Example The following example of the objectTag() control and plug-in: function objectTag() { return '\n' + '<OBJECT CLASSID="clsid:166F1OOB-3A9R-11FB-8075444553540000" \n'¬ + 'CODEBASE="http://www.mysite.com/product/cabs/¬ myproduct.cab#version=1,0,0,0" \n' + 'NAME="MyProductName"> \n' ¬ + '<PARAM NAME="SRC"...
Page 126: How Detection Works
Chapter 8: Browser compatibility check issues API In Adobe Dreamweaver CS3, the browser compatibility check (BCC) feature helps you create page layouts that work well (that is, that both look and function the same) across multiple browsers by locating combinations of HTML and CSS that can trigger browser rendering bugs.
Page 127: An Issues Example
Sequence of events Dreamweaver parses the styles that apply to the current document, whether defined inline, in the head, or in an external stylesheet, as the affected browser would read them. Dreamweaver calls the findIssue() An Issues example The following examples are the files ColAndColgroupCapturedByCaption.js ColAndColgroupCapturedByCaption.htm <!DOCTYPE HTML SYSTEM "-//...
Page 128 for (var i=0; i < captions.length; i++){ currCap = captions[i]; parentTable = currCap.parentNode; // the caption is only a problem if it's in the valid // spot (i.e., the first child of the table) if (currCap == parentTable.childNodes[0]){ // find all colgroup and col tags that are in the // same table as the caption.
Page 129: The Issues Api Functions
The issues API functions All of the functions in the issues API are required except for extension APIs, you are responsible for writing the body of each function and returning an appropriate value to Dreamweaver. For information about browser compatibility check functions, see the “Page Content” topic in the Dreamweaver API Reference.
Page 130 Returns An array of browser names, each of which must match exactly the first line in a valid browser profile (see the TXT files in the Configuration/BrowserProfiles folder). Example function getAffectedBrowsers(){ return new Array("Microsoft Internet Explorer 5.0", "Microsoft Internet Explorer 5.5", "Microsoft Internet Explorer 6.0");...
Page 131 Example function getIssueID() { return "EXPANDING_BOX_PROBLEM"; getIssueName() Availability Dreamweaver CS3. Description Provides Dreamweaver with the name or short description of the issue. Arguments None. Returns A string containing the name or a short description of the issue. Example function getIssueName(){ return "The Expanding Box Problem";...
Page 132: How Commands Work
Chapter 9: Commands Adobe Dreamweaver CS3 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.
Page 133: Adding Commands To The Commands Menu
Dreamweaver calls the commandButtons() side of the Options dialog box and what code should execute when the user clicks the buttons. Dreamweaver scans the command file for a function, which sizes the Options dialog box that contains the body elements of the file. If windowDimensions() function is not defined, Dreamweaver automatically sizes the dialog box.
Page 134: Writing The Javascript Code
Add the following code to the file to create the form: <!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine 5.0//dialog"> <HTML> <HEAD>  <Title>Make Uppercase or Lowercase</Title> <SCRIPT SRC="Change Selection Case.js"></SCRIPT> </HEAD> <BODY> <form name="uorl"> <table border="0">...
Page 135 • “Linking functions to the OK and Cancel buttons” on page 130 • “Letting the user specify uppercase or lowercase” on page 131 Determining whether the command should be enabled or dimmed The first task in creating a command is to determine when the item should be active and when it should be dimmed. When a user clicks the Commands menu, Dreamweaver calls the item to determine whether it should be enabled.
Page 136 The next part of the statement ( return selected node type is text. If so, the canAcceptCommand() text, the test continues to see if the node has children ( first child node is text ( && theChildren[0].nodeType == Node.TEXT_NODE)) returns the value canAcceptCommand() Commands menu, as shown in the following figure: Otherwise,...
Page 137 Save the file. function causes Dreamweaver to supply the OK and Cancel buttons and tells Dreamweaver commandButtons() what to do when the user clicks them. The when the user clicks OK and to call Letting the user specify uppercase or lowercase When the user clicks a menu item, the extension needs a mechanism to let the user select uppercase or lowercase.
Page 138 if (uorl == 'u'){ theDocEl.outerHTML = theWholeDoc.substring(0,theSel[0]) + selText.toUpperCase() + theWholeDoc.substring(theSel[1]); else { theDocEl.outerHTML = theWholeDoc.substring(0,theSel[0]) + selText.toLowerCase() + theWholeDoc.substring(theSel[1]); // Set the selection back to where it was when you started theDOM.setSelection(theSel[0],theSel[1]); window.close(); // close extension UI Save the file as Change Case.js in the Configuration/Commands folder. function is a user-defined function that is called by the changeCase() user clicks OK.
Page 139: The Commands Api Functions
Testing the extension After you place the files in the Commands folder, you can test the extension. To test the extension: Restart Dreamweaver or reload extensions. For information on reloading extensions, see “Reloading extensions” on page 74. The Change Case entry should now appear on the Commands menu. Type some text in a document.
Page 140 commandButtons() Description This function defines the buttons that should appear on the right side of the Options dialog box and their behaviors when they are clicked. If this function is not defined, no buttons appear, and the body section of the command file expands to fill the entire dialog box.
Page 141 DREAMWEAVER CS3 Extending Dreamweaver Returns Dreamweaver expects nothing. windowDimensions() Description This function sets specific dimensions for the Parameters dialog box. If this function is not defined, the window dimensions are computed automatically. Note: Do not define this function unless you want an Options dialog box that is larger than 640 x 480 pixels. Arguments platform •...
Page 142: Chapter 10: Menus And Menu Commands
Chapter 10: Menus and menu commands Adobe Dreamweaver CS3 creates all its menus from the structure defined in the menus.xml file in the Dreamweaver Configuration/Menus folder. You can rearrange, rename, and remove menu commands by editing the menus.xml file. You can also add, change, and remove keyboard shortcuts for menu commands, although in most cases it is easier to do that using the Keyboard Shortcut Editor (see Dreamweaver Help).
Page 143: About The Menus.xml File
About the menus.xml file The menus.xml file contains a structured list of menu bars, menus, menu commands, 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 command that contains an XML syntax error.
Page 144 Specifies that the menu should appear only if the given Dreamweaver enabler is the value showIf possible enablers are: _SERVERMODEL_ASP, _SERVERMODEL_ASPNET, _SERVERMODEL_JSP, (for all versions of Macromedia ColdFusion from Adobe), _SERVERMODEL_CFML UltraDev version 4 of ColdFusion), _VIEW_LAYOUT, _VIEW_EXPANDED_TABLES, a comma (which means AND) between the enablers. You can specify NOT with menu to appear only in Code view for an ASP page, specify the attribute as _SERVERMODEL_ASP".
Page 145 • The name of the application in which the menu command is available. Not currently used. • The keyboard shortcut for the command, if any. Use the following strings to specify modifier keys: • specifies the Control key (Windows) or Command key (Macintosh). •...
Page 146 • Specifies that the menuitem should appear only if the given Dreamweaver enabler has value showIf possible enablers are: _SERVERMODEL_ASP, _SERVERMODEL_ASPNET, _SERVERMODEL_JSP, (for all versions of ColdFusion), _SERVERMODEL_CFML ColdFusion), _SERVERMODEL_PHP, _FILE_TEMPLATE, _VIEW_CODE, _VIEW_DESIGN, _VIEW_LAYOUT, , and _VIEW_EXPANDED_TABLES _VIEW_STANDARD means AND) between the enablers. You can specify NOT with to appear in Code view but not for a ColdFusion page, specify the attribute as !_SERVERMODEL_CFML".
Page 147 • Indicates that the shortcut list should appear only on the given platform. Valid values are platform "mac" Contents This tag can contain one or more shortcut syntax as HTML comment tags). Container None. Example <shortcutlist id="DWMainWindow">  </shortcutlist>...
Page 148 Example <shortcut key="Cmd+Shift+Z" file="Menus/MM/Edit_Clipboard.htm" arguments="’redo’" id="DWShortcuts_Edit_Redo" /> <tool> Description Represents one tool; it contains all the shortcuts for the tool as subtags in the menus.xml file. Attributes {name}, id • A localized version of the tool name. name • The internal tool identifier that identifies the tool to which the shortcuts apply. Contents This tag can contain one or more activate...
Page 149: Changing Menus And Menu Commands
<activate> Description Contains the key combination to activate the tool. Attributes {name}, key, id • A localized version of the action. name • The key combination used to activate the tool. For syntax details, see “<menuitem>” on page 138. • A unique ID used to reference the action.
Page 150 You can move items into or out of context menus using the same procedure as for other menus. For information, see “About the menus.xml file” on page 137. To move a menu command: Quit Dreamweaver. Make a backup copy of the menus.xml file. Open menus.xml in a text editor such as BBEdit, Macromedia®...
Page 151 Open menus.xml in a text editor such as BBEdit, HomeSite, or Wordpad. (Don’t open it in Dreamweaver.) Look at the Keyboard Shortcut Matrix (available from the Dreamweaver Support Center at http://www.adobe.com/go/dreamweaver_support) and find a shortcut that is not being used or one that you want to reassign.
Page 152: Menu Commands
• Server behaviors (listed in the Plus (+) pop-up menu on the Server Behaviors panel) are specified in ServerBe- haviors.xml files, in subfolders of the ServerBehaviors folder. • Server formats (listed in the Plus (+) pop-up menu in the Edit Format List dialog box) are specified in ServerFormats.xml files, in subfolders of the ServerFormats folder.
Page 153: Modifying The Commands Menu
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. For more information about menus.xml, see “Changing menus and menu commands” on page 143. Note: The term command has two meanings in Dreamweaver. Strictly speaking, a command is a particular kind of extension.
Page 154: A Simple Menu Command Example
• If the function returns a canAcceptCommand() function to determine whether to display a check mark next to the menu item. If the isCommandChecked() function is not defined, no check mark appears. isCommandChecked() Dreamweaver calls the setMenuText() If the function is not defined, Dreamweaver uses the text that is specified in the setMenuText() The user selects an item from the menu.
Page 155: Writing The Javascript Code
<menuitem name="MyUndo" key="Cmd+Z" file="Menus/MyMenu.htm" arguments="'undo'" id="MyMenu_Edit_Undo" /> <menuitem name="MyRedo" key="Cmd+Y" file="Menus/MyMenu.htm" arguments="'redo'" id="MyMenu_Edit_Redo" /> </menu> attribute defines keyboard shortcut keys that the user can type to invoke the menu item. The specifies the name of the command file that Dreamweaver executes when Dreamweaver invokes the menu item. The value of the attribute defines the arguments that Dreamweaver will pass when it calls the arguments...
Page 156 receiveArguments() Dreamweaver calls the receiveArguments() tag. For the Undo and Redo menu items, the function, depending on whether the value of the argument, dw.redo() function undoes the previous step that the user performed in the document window, dialog box, or dw.undo() panel that has focus.
Page 157: A Dynamic Menu Example
function looks like the following example code: setMenuText() 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 ""; 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 Dream- weaver Configuration/Menus folder or a subfolder that you create.
Page 158 The first tag defines the default menu item No Browsers Selected, which appears on the submenu if you menuitem have not specified any browsers for the Preview In Browser item in the Preferences dialog box. If you specified the Microsoft Internet Explorer browser, however, the submenu would look like the following figure: attribute for the first menu item specifies the command file PIB_Dynamic.htm.
Page 159 function calls the getDynamicContent() names that have been specified in the Preview In Browser section of the Preferences dialog box. This array contains the name of each browser and the path to the executable file. Next, for each item in the array , the i=i+2) getDynamicContents()
Page 160 else if (site.getFocus() != 'none') var selFiles = site.getSelection(); if (selFiles.length > 0) var i; bHavePreviewTarget = true; for (i = 0; i < selFiles.length; i++) var selFile = selFiles[i]; // For server connections, the files will // already be remote URLs. if (selFile.indexOf("://") == (-1)) var urlPrefix = "file:///";...
Page 161 function sets the value havePreviewTarget() function performs two basic tests calling the currently has input focus. The first test checks whether the Site panel has focus ( ). If the Site panel does not have focus, the second test checks to see if a document ( 'site') ), Text view ( 'document'...
Page 162 // Match the path with the name of the corresponding browser // that appears in the menu. browserList = dw.getBrowserList(); while(i < browserList.length) if (browserList[i+1] == theBrowser) theBrowser = browserList[i]; i+=2; else theBrowser = whichBrowser; // Only launch the browser if we have a valid browser selected. if (theBrowser != "file:///"...
Page 163: The Menu Commands Api Functions
After variables are initialized, the receiveArguments() and tests the result. If the result of the test is true, the function checks to see if the user selected the viewTarget() primary or secondary browser. If so, the function sets the variable starts the browser ( dw.getPrimaryBrowser() loop that examines the list of browsers returned by...
Page 164 commandButtons() Description Defines the buttons that appear on the right side of the Options dialog box and their behavior when they are clicked. If this function is not defined, no buttons appear, and the body section of the Menu Commands file expands to fill the entire dialog box.
Page 165 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 argument. Otherwise, if the arguments function (and to the “canAcceptCommand()” on page 157, “receiveArguments()” on isCommandChecked() page 159, and “setMenuText()”...
Page 166 Note: The attribute is ignored for dynamic menu items. arguments Returns Dreamweaver expects nothing. Example function receiveArguments() var styleName = arguments[0]; if (styleName == "(None)") dw.getDocumentDOM('document').applyCSSStyle('',''); else dw.getDocumentDOM('document').applyCSSStyle('',styleName); setMenuText() Description Specifies the text that should appear in the menu. Note: Do not use this function if you are using “getDynamicContent()” on page 158. Arguments {arg1}, {arg2},...{argN} If the...
Page 167 DREAMWEAVER CS3 Extending Dreamweaver Note: Do not define this function unless you want a dialog box that is larger than 640 x 480 pixels. Arguments platform The value of the argument is either , depending on the user’s platform. platform "macintosh"...
Page 168: How Toolbars Work
Chapter 11: Toolbars You can create a toolbar for Adobe Dreamweaver CS3 simply by creating a file that defines the toolbar and placing that file in the Configuration/Toolbars folder. Within a toolbar file, you can define items such as check buttons, radio buttons, text boxes, and pop-up menus using a few custom XML tags.
Page 169: How Toolbars Behave
Icon images are stored in an images folder in the Toolbars folder. Images can be in any format that Dreamweaver can render but are typically GIF or JPEG file formats. Images for Adobe-authored toolbars are stored in the Toolbars/images/MM folder.
Page 170: A Simple Toolbar Command File
For each toolbar control item, Dreamweaver determines whether the If the attribute exists, Dreamweaver calls the file should enable the control in the current context of the document. For the Document Title text box in the Dreamweaver toolbar, for example, the checks to see if there is a current DOM and if the current document is an HTML file.
Page 171: Writing The Javascript Code
attribute causes Dreamweaver to display Document Title in a tooltip box when the user places the tooltip mouse pointer over the text box. The specifies that the EditTitle.htm file contains the JavaScript functions that operate on the text box. To see the full definition of the Dreamweaver Document toolbar, see the main toolbar ( toolbars.xml file.
Page 172: The Toolbar Definition File
To see the complete HTML file that contains the JavaScript functions for the Title text box, see the EditTitle.htm file in the Toolbars/MM folder. The MM folder is reserved for Adobe files. Create another folder inside the Toolbars folder, and place your JavaScript code in that folder.
Page 173 <menubutton id="DW_Preview" . . ./> <separator/> <button id="DW_DocRefresh" . . ./> <button id="DW_Reference" . . ./> <menubutton id="DW_CodeNav" . . ./> <menubutton id="DW_ViewOptions" . . ./> </toolbar> </toolbarset> The following section describes each of the toolbar tags. <toolbar> Description Defines a toolbar. Dreamweaver displays the items and separators from left to right in the specified order, laying out the items automatically.
Page 174 • The toolbar appears at the beginning of the row immediately below the toolbar that the below attribute specifies. Dreamweaver reports an error if the specify relative to the same toolbar, they appear in the order that Dreamweaver encounters them during below loading, which might not be predictable if the toolbars reside in separate files.
Page 175 <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 170. Attributes The attributes vary, depending on the item that you define.
Page 176: Toolbar Item Tags
<separator/> Description Inserts a separator at the current location in the toolbar. Attributes {showIf} • The attribute specifies that the separator should appear only on the toolbar if the given script returns showif . For example, you can use the true when the page has a certain document type.
Page 177 Example <BUTTON ID="DW DocRefresh" image="Toolbars/images/MM/refresh.gif" disabledImage="Toolbars/images/MM/refresh 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. When it is checked, it appears pressed in and highlighted.
Page 178 Radio buttons act the same as the Code view, Design view, and Code and Design view buttons on the Dreamweaver document toolbar. Attributes id, image, tooltip, checked, command, {showIf}, {disabledImage}, {overImage}, {label}, {file}, {domRequired}, {enabled}, {update}, {arguments} For a description of each attribute, see “Item tag attributes” on page 175. Contents None.
Page 179 Example <MENUBUTTON ID="DW CodeNav" image="Toolbars/images/MM/codenav.gif" disabledImage="Toolbars/images/MM/codenav tooltip="Code Navigation" enabled="dw.getFocus() == 'textView' || dw.getFocus() == 'html'" menuID="DWCodeNavPopup" update="onViewChange"/> <dropdown> Description A drop-down menu (or pop-up 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 drop-down 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.
Page 180 Contents None. Container tag or the 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.
Page 181: Item Tag Attributes
Contents None. Container tag or the 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 file and all files that are included within the current file.
Page 182 DREAMWEAVER CS3 Extending Dreamweaver image="image_path" This attribute is required for buttons, check buttons, radio buttons, menu buttons, and combo buttons. The image attribute is optional for color pickers and is ignored for other item types. The attribute specifies the path, image relative to the Configuration folder, of the icon file that displays on the button.
Page 183 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 Example width="150" menuID="menu_id" This attribute is required for menu buttons and combo buttons, unless you specify the associated command file.
Page 184 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 toolbar command file. Example enabled="dw.getFocus() =='textView' || dw.getFocus() == 'html'" checked="script" This attribute is required for check buttons and radio buttons.
Page 185 • executes whenever the user switches focus between Code view and Design view or when the user onViewChange changes between Code view, Design view, or Code and Design view. • executes whenever the document is edited in Design view. Changes that you make in Code view do not onEdit trigger this event.
Page 186: The Toolbar Command Api Functions
<button id="DW Undo" image="Toolbars/images/MM/undo.gif" disabledImage="Toolbars/images/MM/undo tooltip="Undo" file="Menus/MM/Edit Clipboard.htm" arguments="'undo'" update="onEveryIdle"/> <button id="DW Redo" image="Toolbars/images/MM/redo.gif" disabledImage="Toolbars/images/MM/redo tooltip="Redo" file="Menus/MM/Edit Clipboard.htm" arguments="'redo'" update="onEveryIdle"/> The toolbar command API functions In many cases where you specify a script for an attribute, you can also implement the attribute through a JavaScript function in a command file.
Page 187 Example function canAcceptCommand() return (dw.getDocumentDOM() != null); getCurrentValue() Availability Dreamweaver MX. Description Returns the current value to display in the item. Dreamweaver calls the 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 188 The name is a misnomer because this function should be used even if the list of entries in getDynamicContent() 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. By adding a function that simply returns the list of possible font sizes, however, the same command file can also be used for a toolbar pop-up menu.
Page 189 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(); var menuID = ''; if (dom) var view = dom.getView(); var focus = dw.getFocus(); if (view == 'design') menuID = 'DWDesignOnlyOptionsPopup';...
Page 190 DREAMWEAVER CS3 Extending Dreamweaver Arguments None. Returns Dreamweaver expects a string that contains a comma-separated list of update handlers. For a complete list of the possible update handlers, see “update="update_frequency_list"” on page 178. Example function getUpdateFrequency() return onSelChange”; isCommandChecked() Availability Dreamweaver MX.
Page 191 function isCommandChecked() var bChecked = false; var style = arguments[0]; var textFormat = dw.getDocumentDOM().getTextFormat(); if (dw.getDocumentDOM() == null) bChecked = false; if (style == "(None)") bChecked = (dw.cssStylePalette.getSelectedStyle() == '' || textFormat == "" || textFormat == "P" || textFormat == "PRE"); else if (style == "Heading 1") bChecked =0(textFormat == "h1");...
Page 192 receiveArguments() Availability Dreamweaver MX. Description Processes any arguments that pass from a toolbar item. 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.
Page 193 Example function showif() var retval = false; var dom = dw.getDocumentDOM(); if(dom) var view = dom.getView(); if(view == ‘design’) retval = true; return retval; DREAMWEAVER CS3 Extending Dreamweaver...
Page 194: Site Reports
Chapter 12: Reports Adobe Dreamweaver CS3 supports two types of reports: site reports and stand-alone reports. Site reports You use the reports API to create custom site reports or modify the set of prewritten reports that come with Dreamweaver. You can access site reports only through the Reports dialog box.
Page 195 How site reports work Reports are accessible through the Site > Reports command. When it is selected, this command 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 the Current Document, Entire Current Local Site, Selected Files In Site, and Folder commands.
Page 196 <html> <head> <title>List Images</title> At the end of the file, add the script <script src="../Reports.js"></script> At the end of the file, add another script attribute. <html> <head> <title>List Images</title> <script src="../Reports.js"></script> <script src="List Images.js"></script> Close the tag, include opening and closing head </head>...
Page 197: Stand-Alone Reports
reportItem(REP_ITEM_CUSTOM, fileURL, imgfilename, curDOM.nodeToSourceViewOffsets(tagList[i])); } Save the file as List Images.js in the Configuration/Reports/HTML Reports folder. Stand-alone reports You can use the results window API to create a stand-alone report. Stand-alone reports are regular commands that directly use the results window API rather than the reports API. You can access a stand-alone report the same way you access any other command, through the menus or through another command.
Page 198 You create this extension by performing the following steps: “Creating the dialog box UI” on page 192 “Writing the JavaScript code” on page 192 This example creates two files in the Configuration/Commands folder: List images.htm which defines the UI of the dialog box that appears when the user selects the custom command, and Listimages.js, which contains the JavaScript code specific to this report.
Page 199: The Reports Api Functions
// Get the name of the source file. imgfilename = tagList[i].getAttribute('src'); // Get the character offset from the start of the file // to the start of the img tag. iOffset = curDOM.nodeToOffsets(curDOM.images[i]); // Based on the offset, figure out what line in the file // the img tag is on.
Page 200 DREAMWEAVER CS3 Extending Dreamweaver beginReporting() Availability Dreamweaver 4. Description This function is called at the start of the reporting process, before any reports are run. If the Report command returns value from this function, the Report command is excluded from the report run. false Arguments target...
Page 201 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.
Page 202 DREAMWEAVER CS3 Extending Dreamweaver Example The following instance of the function sets the dimensions of the Parameters dialog box to windowDimensions() 648 x 520 pixels: function windowDimensions(){ return "648,520";...
Page 203: Chapter 13: Tag Libraries And Editors
Chapter 13: Tag libraries and editors Adobe Dreamweaver CS3 users can use tag editors to insert new tags, edit existing tags, and access reference information about tags. Dreamweaver comes with editors for the following languages: HTML, ASP.NET, CFML, JRun, and JSP. You can customize tag editors that come with Dreamweaver, and you can create new tag editors.
Page 204: Tag Library File Format
VTML file. The following figure shows how Dreamweaver organizes the VTML files by markup language: Macromedia HomeSite from Adobe 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 graphical user interface (GUI) rendering process.
Page 205 tag groups one or more tags into a tag library. When you import tags or create a new set of tags, taglibrary you can group them into tag libraries. Typically, a in a JavaServer Pages (JSP) TLD file, an XML document type definition (DTD) file, an ASP.NET namespace, or some other logical grouping.
Page 206 Is the Is the taglibrary.prefix defined? defined? To define tags, Dreamweaver uses a modified version of the 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"> <tagformat indentcontents="yes"...
Page 207: The Tag Chooser
Attribute tagformat.nlbeforecontents tagformat.nlaftercontents tagformat.nlaftertag attrib.name attrib.type attrib.casesensitive Note: In versions before Dreamweaver MX, tag information is stored in the Configuration/TagAttributeList.txt file. The Tag Chooser The Tag Chooser lets you view tags in functional groups so you can easily access frequently used tags. In order to add a tag or a set of tags to the Tag Chooser, you must add them to the tag library.
Page 208 <?xml version="1.0" encoding="iso-8859-1" standalone="yes" ?> <tclibrary name="Friendly name for library node" desc='Description for incorporated reference' reference="Language[,Topic[,Subtopic]]"> <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">...
Page 209: A Simple Example Of Creating A New Tag Editor
Description Value describes the language, topic, and subtopic to display in the Tag category.reference info section. category.icon Value is a relative path to an icon GIF. Any string that is different from the category.id other categories in this file. The following table lists the attributes of the Attribute Description element.name...
Page 210 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\Adobe\¬ Dreamweaver 9\Configuration Note: In Windows XP, this folder may be inside a hidden folder. For Mac OS X platforms: <drive>:Users:<username>:Library:Application Support:Adobe:¬...
Page 211 <TAG NAME="cfweather" endtag="no"> <TAGFORMAT NLBEFORETAG="1" NLAFTERTAG="1"/> <TAGDIALOG FILE="cfweather.htm"/> <ATTRIBUTES> <ATTRIB NAME="zip" TYPE="TEXT"/> <ATTRIB NAME="tempaturescale" TYPE="ENUMERATED"> <ATTRIBOPTION VALUE="Celsius"/> <ATTRIBOPTION VALUE="Fahrenheit"/> </ATTRIB> </ATTRIBUTES> </TAG> Save the cfweather.vtm file in the Configuration/Taglibraries/CFML folder. Using the tag definition file, Dreamweaver can perform code hinting, code completion, and tag formatting function- ality for the tag.
Page 212 function initializeUI() // define two arrays for the values and display captions for the list control var theTempatureScaleCap = new Array("celsius","fahrenheit"); var theTempatureScaleVal = new Array("celsius","fahrenheit"); // instantiate a new list control TEMPATURESCALELIST = new ListControl("thetempaturescale"); // add the tempaturescalelist dropdown list control to the uiobjects theUIObjects0= new Array(TEMPATURESCALELIST);...
Page 213: The Tag Editor Apis Functions
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 <category name="Third Party Tags" icon="icons/Elements.gif" reference='CFML'> <element name="cfweather"...
Page 214 If the editor contains a text field for editing the 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 validateTag() Availability Dreamweaver MX. Description When a user clicks on a node in the tree control or clicks OK, the function performs input validation on the currently displayed HTML form elements.
Page 215 DREAMWEAVER CS3 Extending Dreamweaver function applyTag(tag) tag.zip = document.forms[0].zip.value...
Page 216: Property Inspector Files
Chapter 14: Property inspectors The Property inspector is perhaps the most familiar floating panel in the Adobe Dreamweaver CS3 interface. It is indispensable for defining, reviewing, and changing the name, size, appearance, and other attributes of the selection as well as for launching internal and external editors for the selected element.
Page 217: How Property Inspector Files Work
• The element specifies that Dreamweaver should load this Property inspector only when the server serverModel model specified is active. • The element is the tag to be inspected or one of the following keywords: tagNameOrKeyword comments), (for locked regions), or *LOCKED* •...
Page 218: A Simple Property Inspector Example
For the first tag that has one or more inspectors, Dreamweaver calls each inspector’s function. If this function returns the value inspecting the selection. If more than one potential inspector remains after calling the sorts the remaining inspectors by priority. If more than one potential inspector shares the same priority, Dreamweaver selects an inspector alphabetically by name.
Page 219 </BODY> </HTML> To specify what appears in the Property inspector, add the following between the opening and closing  <SPAN ID="image" STYLE="position:absolute; width:23px; height:17px; ¬ z-index:16; left: 3px; top: 2px"> <IMG SRC="marquee.png"...
Page 220 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 DIRECTION attribute on the MARQUEE tag. var theDirection = theObj.getAttribute('direction'); // Initialize a variable for the DIRECTION attribute to -1. // This is used to store the menu index that corresponds to // the value of the attribute.
Page 221: The Property Inspector Api Functions
Save the file as marquee.js in the Configuration/Inspectors folder. Creating the image You can optionally create the image that appears in the Property inspector. To create the image: Create an image that is 36 pixels wide and 36 pixels high. Save the image as marquee.gif in Configuration/Inspectors.
Page 222 Example The following instance of the canInspectSelection() attribute, and the value of that attribute is CLASSID class ID for Adobe Flash Player): function canInspectSelection(){3 var theDOM = dw.getDocumentDOM(); var theObj = theDOM.getSelectedNode(); return (theObj.nodeType == Node.ELEMENT theObj.hasAttribute("classid") && ¬ theObj.getAttribute("classid").toLowerCase()== ¬...
Page 223 function inspectSelection(){ var dom = dreamweaver.getDocumentDOM(); var theObj = dom.getSelectedNode(); document.forms[0].keywords.value = theObj.getAttribute("content"); DREAMWEAVER CS3 Extending Dreamweaver...
Page 224: Chapter 15: Floating Panels
Custom floating panel files are HTML files that reside in the Configuration/Floaters folder inside the Adobe Dreamweaver CS3 application folder. The contains an HTML form; event handlers that are attached to form elements can call JavaScript code that performs arbitrary edits to the current document.
Page 225: How Floating Panel Files Work
How floating panel files work Custom floating panels can be moved, resized, and tabbed together the same way as the floating panels that are built in to Dreamweaver. Custom floating panels differ from built-in floating panels in the following ways: •...
Page 226: A Simple Floating Panel Example
A simple floating panel example In this example, you create a Script Editor extension that creates a floating panel to display the JavaScript code that underlies a selected script marker in Design view. The Script Editor displays the JavaScript code in the element of an HTML form that is defined in a floating panel called code in the floating panel, the extension calls the selected a script marker when you invoke the Script Editor, the extension displays...
Page 227 visibility: visible"> <form name="theForm"> <textarea name="scriptCode" cols="80" rows="20" wrap="VIRTUAL" ¬ onBlur="updateScript()"></textarea> </form> </div> </body> </html> Save the file as scriptEditor.htm in the Configuration/Floaters folder. Both tags use the attribute to specify the position ( style and default setting ( visibility visible and a series of break ( ) tags to position the text in the center of the panel.
Page 228 function first calls the selectionChanged() Model (DOM) for the user’s document. It then calls the that document is, first, an element and, second, a function makes the selectionChanged() JavaScript code. It also sets the visibility following figure shows the scriptlayer If the selected node is not an element, or it is not a floating panel visible and hides the blanklayer...
Page 229: Creating A Menu Item
if (theNode.nodeType == Node.ELEMENT theNode.tagName == "SCRIPT"){ document.layers['scriptlayer'].visibility = 'visible'; document.layers['scriptlayer'].document.theForm.¬ scriptCode.value = theNode.innerHTML; document.layers['blanklayer'].visibility = 'hidden'; }else{ document.layers['scriptlayer'].visibility = 'hidden'; document.layers['blanklayer'].visibility = 'visible'; Save the file. updateScript(): write back changes function writes back the selected script when an updateScript() panel.
Page 230: The Floating Panel Api Functions
If you select a script marker in Design view for the current document and then select the Script Editor menu item, Dreamweaver invokes the Script Editor floating panel and displays the JavaScript code that underlies the script marker. If you select the menu item when a script marker has not been selected, Dreamweaver displays the panel that contains the text blanklayer To add the menu item:...
Page 231 documentEdited() Description This function is called when the floating panel becomes visible and after the current series of edits is complete; that is, multiple edits might occur before this function is called. This function should be defined only if the floating panel must track edits to the document.
Page 232 Example getDockingSide() return dock side = “left top”; initialPosition() Description Determines the initial position of the floating panel the first time it is called. If this function is not defined, the default position is the center of the screen. Arguments platform •...
Page 233 function initialTabs(){ return "scriptEditor"; isATarget() Availability Dreamweaver MX (Windows only). Description Specifies whether other panels can dock to this floating panel. If the weaver prevents other panels from docking to this one. Dreamweaver calls this function when the user tries to combine this panel with others.
Page 234 Returns Dreamweaver expects a Boolean value: Example The following example prevents the user from resizing the floating panel: function isResizable() return false; selectionChanged() Description Called when the floating panel becomes visible and when the selection changes (when focus switches to a new document or when the insertion point moves to a new location in the current document).
Page 235 To help avoid performance penalties, use the function takes two arguments: the JavaScript to be called and the amount of time in milliseconds to wait before calling it. method lets you build pauses into your processing. These pauses let the user continue inter- setTimeout() acting with the application.
Page 236: Chapter 16: Behaviors
HTML elements accept which events. Files that list events that each browser supports are stored in the Configuration/Behaviors/Events folder within the Adobe Dreamweaver CS3 application folder. Actions are the part of a behavior that you can control; when you write a behavior, you’re really writing an Action file.
Page 237: How Behaviors Work
How Behaviors work When a user selects an HTML element in a Dreamweaver document and clicks the Plus (+) button on the Behaviors panel, the following events occur: Dreamweaver calls the canAcceptBehavior() priate for the document or the selected element. If the return value of this function is example, the Control Shockwave action is dimmed when the user’s document has no SWF files.) If the return value is a list of events, Dreamweaver compares each event with the valid events for the currently selected HTML element...
Page 238: A Simple Behavior Example
To get around this limitation, set the string that the behaviorFunction() at the end of the list of actions in the event handler. For an example that uses the document.MM_returnValue variable, see the Validate Form.js file in the Configuration/Behaviors/Actions folder within the MM_returnValue Dreamweaver application folder.
Page 239 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 240 </head> <body> <form method="post" action="" name="theForm"> <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>...
Page 241 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Netscape Navigator content</title> </head> <body> This is the page to go to if you are using Netscape Navigator. </body> </html> Save the file as netscapecontent.htm in the same folder as the iecontent.htm file. Restart Dreamweaver.
Page 242: The Behaviors Api Functions
DREAMWEAVER CS3 Extending Dreamweaver //--> </script> </head> <body onLoad="checkBrowserBrand('netscaptecontent.htm','iecontent.htm')"> </body> </html> Testing the behavior Finally, you can test the behavior. To test the behavior: ❖ View the file whichbrowser.htm in your browser. Depending on which browser you are using, either iecontent.htm or netscapecontent.htm appears. The behaviors API functions Two behaviors API functions are required ( );...
Page 243 Example The following example of the applyBehavior() passes user-specified parameters (the height and width of the window; whether the window should have scroll bars, a toolbar, a location bar, and other features; and the URL that should open in the window): function applyBehavior() { var i,theURL,theName,arrayIndex = 0;...
Page 244 The following example is equivalent to the preceding declare the function in all behaviors that come with Dreamweaver: behaviorFunction() function MM popupMsg(theMsg){ //v1.0 alert(theMsg); function behaviorFunction(){ return "MM popupMsg"; 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.
Page 245 displayHelp() Description If this function is defined, a Help button appears below the OK and Cancel buttons in the Parameters dialog box. This function is called when the user clicks the Help button. Arguments None. Returns Dreamweaver expects nothing. Example // the following instance of displayHelp() opens // in a browser a file that explains how to use // the extension.
Page 246 This argument is the string that the applyBehavior() Returns Dreamweaver expects a string that contains a comma-separated list of the types of arguments in the function call. The length of the list must equal the number of arguments in the function call. Argument types must be one of the following types: •...
Page 247 // reference, a dependent URL, and perhaps a property value // such as "show" or "hide") to the existing list of argument // types, or if no list yet exists, add only // "NS4.0ref,IE4.0ref,other,dep" var listOfArgTypes += ((listOfArgTypes)?",":"") + ¬ "NS4.0ref,IE4.0ref,other,dep";...
Page 248 DREAMWEAVER CS3 Extending Dreamweaver Note: For more information about the function, see the dwscripts.js file in the unescQuotes() Configuration/Shared/Common/Scripts/CMN folder. windowDimensions() Description This function sets specific dimensions for the Parameters dialog box. If this function is not defined, the window dimensions are computed automatically.
Page 249: Chapter 17: Server Behaviors
Chapter 17: Server behaviors Adobe Dreamweaver CS3 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. If a Dreamweaver user repeatedly inserts the same runtime code into documents, you can create a new extension to automate updating a document with these frequently used code blocks.
Page 250: Dreamweaver Architecture
Participants Your server behaviors extension inserts code blocks into the user’s document. A code block is a single, continuous block of script, such as a server-side tag, an HTML tag, or an attribute that adds server-side functionality to a web page. An EDML file defines each code block as a participant. All the participants for a given server behavior comprise one participant group.
Page 251: A Simple Server Behavior Example
Participant files A participant represents a single code block on the page, such as a server tag, an HTML tag, or an attribute. A partic- ipant 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.
Page 252 • “Creating the dynamic page document” on page 246 • “Defining the new server behavior” on page 246 • “Defining the code to insert” on page 246 Creating the dynamic page document First, you create a new ASP document. To create a new dynamic page document: In Dreamweaver, select the File >...
Page 253: How The Server Behavior Api Functions Are Called
• A script file: Hello World.htm Note: If you are working in a multiuser configuration, these files appear in your Application Data folder. How the server behavior API functions are called The server behavior API functions are called in the following scenarios: •...
Page 254: The Server Behavior Api
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:  • When the user selects an item from the menu, the function returns a value, a dialog box appears.
Page 255 One purpose of the analyzeServerBehavior() , and participants selectedNode function generates the complete list of server behaviors in the user’s document. findServerBehaviors() The other purpose of the analyzeServerBehavior() same tag in the user’s document. In this case, the Suppose the Recordset1, DynamicText1, and DynamicText2 server behaviors are on a page. Both DynamicText server behaviors need Recordset1 to exist on the page.
Page 256 canApplyServerBehavior() Availability Dreamweaver UltraDev 1. Description Determines whether a behavior can be applied. Dreamweaver calls this function before the Server Behaviors dialog box appears. If this function returns a value, the Server Behaviors dialog box does not appear and the attempt to add a server behavior stops. false Arguments serverBehavior...
Page 257 deleteServerBehavior() Availability Dreamweaver UltraDev 1. Description Removes the behavior from the user’s document. It is called when the user clicks the Minus (-) button on the Server Behaviors panel. It can edit a user’s document. For more information, see “dwscripts.deleteSB()” on page 254. Arguments serverBehavior •...
Page 258 The four required properties are incomplete properties as necessary. For more information, see “dwscripts.findSBs()” on page 253 and Dreamweaver API Reference. Arguments None. Returns Dreamweaver expects an array of JavaScript objects; the length of the array is equal to the number of behavior instances that are found in the page.
Page 259: Server Behavior Implementation Functions
Arguments behavior JavaScript object represents the behavior. behavior Returns Dreamweaver expects a Boolean value: otherwise. 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...
Page 260 Description Inserts or updates runtime code for the server behavior. If the runtime code; otherwise, it updates existing runtime code that is indicated by the be set as properties on a JavaScript object and passed in as that are declared as @@paramName@@ Arguments paramObj, sbObj...
Page 261: Editing Edml Files
Example The following example deletes all the participants of the protected by the EDML file’s delete function deleteServerBehavior(sbObj) { dwscripts.deleteSB(sbObj); Editing EDML files You must maintain Dreamweaver coding conventions when you edit a file. Pay attention to the dependency of one element upon another.
Page 262: Group Edml File Tags
ASP tags CDATA the Extension Data Manager (EDM) receives the uninterpreted text, as shown in the following example: <% if (Recordset1.EOF) Response.Redirect("http://www.Adobe.com"); %> In the following EDML definitions, the locations where the Group EDML file tags These tags and attributes are valid within the EDML group files.
Page 263 DREAMWEAVER CS3 Extending Dreamweaver <group> Description This tag contains all the specifications for a group of participants. Parent None. Type Block tag. Required Yes. <group> attributes The following items are valid attributes of the group tag. version Description This attribute defines which version of Dreamweaver server behavior processing the current server behavior targets. For Dreamweaver CS3, the version number is 9.
Page 264 Required Value The value is the exact name (without a path) of any server behavior HTML file within a Configuration/ServerBehaviors folder, as shown in the following example: <group serverBehavior="redirectIfEmpty.htm"> dataSource Description This advanced feature supports new data sources that can be added to Dreamweaver. Multiple versions of a server behavior can differ, depending on which data source you use.
Page 265 Parent group Type Attribute. Required Value The value is a unique string that determines which group to apply, as shown in the following example: <group serverBehavior="myServerBehavior.htm" subType="longVersion"> This group attribute defines the long version of the attribute. In the subType="shortVersion" group should be applied by setting the example: function applyServerBehavior(ssRec) {...
Page 266 DREAMWEAVER CS3 Extending Dreamweaver <groupParticipants> Description This tag contains an array of declarations. groupParticipant Parent group Type Block tag. Required Yes. <groupParticipants> attributes The following items are valid attributes of the tag. groupParticipants selectParticipant Description Indicates which participant should be selected and highlighted in the document when an instance is selected in the Server Behaviors panel.
Page 267 Required Yes (at least one). <groupParticipant> attributes The following items are valid attributes of the groupParticipant tag. name Description This attribute names a particular participant to be included in the group. The tag should be the same as the filename of the participant (without the .edml file extension). groupParticipant Parent groupParticipant...
Page 268: Participant Edml Files
• The value indicates that the participant is optional. If it is not found, the group is still considered complete option and no incomplete flag is set in the Server Behaviors panel. • The value indicates that the participant is optional and multiple copies of it can be associated with the multiple server behavior.
Page 269 DREAMWEAVER CS3 Extending Dreamweaver Type Attribute. 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.
Page 270 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. Arguments should be embedded within two at ( EDML structure, it should use the CDATA <insertText location="aboveHTML">...
Page 271 • The value replaces the current selection with the text. If there is no selection, it inserts the replaceSelection text at the end of the tag. body • The value balances the current selection, inserts a block tag before the selection, and adds the wrapSelection appropriate closing tag after the selection.
Page 272 Value value is a user-specified name for the node parameter that passes with the parameter object to the tagtype_Tag function. For example, if you insert some text into a form, you might use a dwscripts.applySB() parameter. In your server behavior applyServerBehavior() indicate the exact form to update, as shown in the following example: function applyServerBehavior(ssRec) {...
Page 273 Type Attribute. Required Yes. Values directive tag+tagName tag+* comment • The value searches all server directives (server-specific tags). For ASP and JSP, this means search all directive script blocks. <% ... %> Note: Tag attributes are not searched, even if they contain directives. •...
Page 274 Type Block tag. Required Yes. Values searchString /regularExpression/ • The value is a simple search string that is case-sensitive. It cannot be used to extract parameters. searchString • The value is a regular expression search pattern. /regularExpression/ • The value is used if no pattern is given. It is always considered a match, and the entire value is assigned <empty>...
Page 275 The parameter names should match the ones that are specified in the insertion text and the update parameters. Parent searchPattern Type Attribute. Required Yes. Values , ... paramName1 paramName2 Each parameter name should be the exact name of a parameter that is used in the insertion text. For example, if the insertion text contains , you should define exactly one parameter with that name: @@p1@@...
Page 276 This example indicates that only the value of the is not defined, the tag is ignored. • The value searches only the outer tag and ignores the tagOnly is a tag. whereToSearch • The value searches only the innerOnly is a tag. whereToSearch isOptional Description...
Page 277 DREAMWEAVER CS3 Extending Dreamweaver <updatePatterns> Description This optional advanced feature lets you update the participant precisely. Without this tag, the participant is updated automatically by replacing the entire participant text each time. If you specify an tag, it must updatePatterns contain specific patterns to find and replace each parameter within the participant.
Page 278 <updatePattern paramName="rs" > /(\b)\w+(\.Field\.Items)/ </updatePattern> <updatePattern paramName="col"> /(\bItems\(")\w+("\))/ </updatePattern> The literal parentheses, as well as other special regular expression characters, are escaped by preceding them with a backslash (\). The middle expression, defined as , respectively. The values Multiple occurrences of the same pattern can be updated simultaneously by using the regular expression global flag after the closing slash (such as /pattern/g) If the participant text is long and complex, you might need multiple patterns to update a single parameter, as shown...
Page 279 Values The value is the exact name of a parameter that is used in the insertion text. In the following example, if the insertion text contains an value, you should have a parameter with that name: @@rs@@ <updatePattern paramName="rs">pattern</updatePattern> <delete> Description This tag is an optional advanced feature that lets you control how to delete a participant.
Page 280 • The value, when applied to tags, removes only the specified attribute. It is meaningless attribute+attribName for directives and attributes. • The value removes all attributes for tags. It is meaningless for directives and attributes. attribute+* 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"/>...
Page 281 DREAMWEAVER CS3 Extending Dreamweaver Type Block tag. Required <translation> Description This tag contains a single translation instruction that includes the location for the participant, what type of trans- lation to perform, and the content that should replace the participant text. Parent translations Type...
Page 282 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 Dreamweaver dynamic data; that is, it should have the dynamic data placeholder look in the Design view (curly braces ({ }) notation with dynamic background color) and appear in the Server Behaviors panel.
Page 283 <translation whereToSearch="directive" translationType="custom"> <openTag> Description This optional tag can be inserted at the beginning of the translation section. This tag lets certain other extensions, such as custom Property inspectors, find the translation. Parent translation Type Block tag. Required Values value is a valid tag name. It should be unique to prevent conflicts with known tag types. For example, tagName if you specify <openTag>MM_DYNAMIC_CONTENT</openTag>...
Page 284 Required Yes (at least one). Values attributeName="attributeValue" 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> <attribute>BINDING="@@col@@"</attribute> <attribute> mmTranslatedValueDynValue="VALUE={@@rs@@.@@col@@}" </attribute> <display> Description This tag is an optional display string that should be inserted in the translation. Parent translation Type...
Page 285: Server Behavior Techniques
Values value is a valid tag name; it should match a translation tagName Example If you specify the value <closeTag>MM_DYNAMIC_CONTENT</closeTag> with the tag. </MM_DYNAMIC_CONTENT> Server behavior techniques This section covers the common and advanced techniques that create and edit server behaviors. Most of the sugges- tions involve specific settings in the EDML files.
Page 286 The search string is defined as a regular expression by starting and ending with a slash (/) and is followed by means that it is not case-sensitive. Within the regular expression, special characters such as parentheses () and periods (.) are escaped by preceding them with a backslash (\). The two parameters from the string by using parenthetical subexpressions (the parameters must be enclosed in parentheses).
Page 287 <group serverBehavior="test.htm"> <title>Test</title> <groupParticipants> <groupParticipant name="test_p1" partType="identifier" /> <groupParticipant name="test_p2" partType="identifier" /> </groupParticipants> </group> The following example inserts two simple participants above the <% //test_p1 %> <% //test_p2 %> <html> These participants are found and matched, and Test appears once in the Server Behaviors panel. If you add the server behavior again, nothing is added because the participants already exist.
Page 288 Now there are two identical instances of each participant, which is allowed within the HTML. They are matched by the order in which they occur in the document. The following example shows a matching problem and how to avoid it. You can create a participant that computes the tax on some dynamic data and displays the result at the selection.
Page 289: Updating Server Behaviors
In resolving a tag, Dreamweaver uses the following algorithm: searchPatterns Look for the attribute within the whereToSearch If the attribute value starts with tag+ in the tag name). Look for the attribute within the limitSearch If the attribute value starts with attribute+ are allowed in the attribute name).
Page 290: Deleting Server Behaviors
The search patterns fail because they are looking for a parenthesis after the patterns more forgiving, you can shorten them by splitting them up, as shown in the following example: <quickSearch>Response.Write</quickSearch> <searchPatterns whereToSearch="directive"> <searchPattern paramNames="rs">/(\w+)\.EOF/</searchPattern> <searchPattern paramNames="new__url"> /if\s*\([^\r\n]*\)\s*Response\.Redirect\("([^\r\n]*)"/i </searchPattern> </searchPatterns> These shortened search patterns are flexible, so the user can add to the code.
Page 291 DREAMWEAVER CS3 Extending Dreamweaver Avoiding conflicts with share-in-memory JavaScript files If several HTML files reference a particular JavaScript file, Dreamweaver loads the JavaScript into a central location where the HTML files can share the same JavaScript source. These files contain the following line: //SHARE-IN-MEMORY=true If a JavaScript file has the directive and an HTML file references it (by using the...
Page 292: How Data Sources Work
Chapter 18: Data sources The Adobe Dreamweaver CS3 Data Sources API functions let you add data sources, which appear in the Plus (+) menu in the Bindings panel (for related information, see the function dreamweaver.dbi.getDataSources() Data source files are stored in the Configuration/DataSources/ServerModelName folder.
Page 293 The following steps describe the process that is involved in adding dynamic data: When the user clicks the Plus (+) menu in the Bindings panel, a pop-up menu appears. To determine the contents of the menu, Dreamweaver first looks for a DataSources.xml file in the same folder as the data sources (for example, Configuration/DataSources/ASP_Js/DataSources.xml).
Page 294: A Simple Data Source Example
Dreamweaver calls the inspectDynamicDataRef() in the user’s document to an item in the tree. (This process is the reverse of what occurs when the function is called.) If the generateDynamicDataRef() contains two elements, Dreamweaver shows with a visual cue which item in the tree is bound to the current selection. Every time the user changes the selection, Dreamweaver calls the determine whether the new selection is dynamic text or a tag with a dynamic attribute.
Page 295: Creating The Edml File
To create the data source definition file: Create a new blank file. Enter the following: <HTML> <HEAD> <TITLE>MyDatasource</TITLE> <SCRIPT SRC="../../Shared/Common/Scripts/dwscripts.js"></SCRIPT> <SCRIPT SRC="../../Shared/Common/Scripts/dwscriptsServer.js"></SCRIPT> <SCRIPT SRC="../../Shared/Common/Scripts/DataSourceClass.js"></SCRIPT> <SCRIPT SRC="MyDatasource.js"></SCRIPT> </HEAD> <body></body> </HTML> Save the file as MyDatasource.htm in the Configuration/DataSources/ColdFusion folder. Creating the EDML file The EDML file defines the code that Dreamweaver inserts into the document to represent the data source value.
Page 296 To create the JavaScript file: Create a new blank file. Enter the following: //************** GLOBALS VARS ***************** var MyDatasource FILENAME = "REQ var DATASOURCELEAF FILENAME = "DSL //****************** API ********************** function addDynamicSource() MM.retVal = ""; MM.MyDatasourceContents = ""; dw.popupCommand("MyDatasource if (MM.retVal == "OK") var theResponse = MM.MyDatasourceContents;...
Page 297 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, return retVal; function generateDynamicDataRef(sourceName, bindingName, dropObject) var paramObj = new Object();...
Page 298 retArray[0] = params.sourceName; retArray[1] = params.bindingName; return retArray; function deleteDynamicSource(sourceName, bindingName) var siteURL = dw.getSiteRoot(); if (siteURL.length) //For localized object name if (sourceName != "MyDatasource") sourceName = "MyDatasource"; dwscripts.deleteListValueFromNote(siteURL, sourceName, bindingName); Save the file as MyDatasource.js in the Configuration/DataSources/ColdFusion folder. Creating the supporting command files for user input function contains the command addDynamicSource()
Page 299 <!DOCTYPE HTML SYSTEM "-//Macromedia//DWExtension layout-engine 5.0//dialog"> <html> <head> <title>MyDatasource Variable</title> <script src="MyDatasource Variable.js"></script> <SCRIPT SRC="../Shared/MM/Scripts/CMN/displayHelp.js"></SCRIPT> <SCRIPT SRC="../Shared/MM/Scripts/CMN/string.js"></SCRIPT> <link href="../fields.css" rel="stylesheet" type="text/css"> </head> <body> <form> <div ALIGN="center"> <table border="0" cellpadding="2" cellspacing="4"> <tr> <td align="right" valign="baseline" nowrap>Name:</td> <td valign="baseline" nowrap> <input name="theName" type="text" class="medTField"> </td>...
Page 300 Save the file as MyDatasource_Variable.js in the Configuration/Commands folder. Testing the new data source You can now open Dreamweaver (or restart it if you already have it open), and open a ColdFusion file or create a new one. To test your new data source: With the pointer in the document, click on the Bindings Plus (+) menu to see all the available data sources.
Page 301: The Data Sources Api Functions
DREAMWEAVER CS3 Extending Dreamweaver Drag the variable to your document, and Dreamweaver inserts the appropriate code from the EDML file: The data sources API functions The functions in the data sources API let you find, add, edit, and delete data sources and also generate and inspect dynamic data objects.
Page 302 Description Dreamweaver calls this function when a user selects a data source in the tree and clicks the Minus (-) button. For example, in Dreamweaver, if the selection is a recordset or command, the calls the dw.serverBehaviorInspector.deleteServerBehavior() session, or application variable, the function remembers that the variable was deleted and does not continue to display it.
Page 303 Description This function is called when the user double-clicks a data source name in the Bindings panel to edit the data source. You can implement this function to handle user edits in the tree. Otherwise, the server behavior that matches the data source is automatically invoked.
Page 304 generateDynamicDataRef() Availability Dreamweaver UltraDev 1. Description This function generates the dynamic data object for a child node. Arguments sourceName bindingName • The argument is the name of the top-level node that is associated with the child node. sourceName • The argument is the name of the child node from which you want to generate a dynamic bindingName data object.
Page 305 DREAMWEAVER CS3 Extending Dreamweaver Note: A JavaScript class that defines these properties exists in the DataSourceClass.js file, which is located in the Configuration/Shared/Common/Scripts folder. inspectDynamicDataRef() Availability Dreamweaver UltraDev 1. Description This function determines the corresponding node in the data source tree from a dynamic data object. The function takes the string that Dreamweaver passes in and compares it to the string that inspectDynamicDataRef() returns for each node in the tree.
Page 306: Chapter 19: Server Formats
Chapter 19: Server formats “Data sources” on page 286, discusses how Adobe Dreamweaver CS3 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.
Page 307: How Data Formatting Works
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 Currency DateTime...
Page 308: When The Data Formatting Functions Are Called
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: ...
Page 309: The Server Formats Api Functions
The server formats API functions The server formats API consists of the following data formatting functions. applyFormat() Availability Dreamweaver UltraDev 1. Description This function can edit a user’s document by adding a format function declaration to it. 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, Dream- weaver 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.
Page 310 Returns Dreamweaver expects the format object, if the function completes successfully. If an error occurs, the function returns an error string. If it returns an empty string, the form is closed, but the new format is not created, which is the same as a Cancel operation.
Page 311 • The argument is a JavaScript object that describes the format to apply. The JavaScript object is the node format that corresponds to the tag in the Formats.xml file. The object has a JavaScript property for each attribute format of the corresponding tag.
Page 312: Component Basics
Chapter 20: Components Adobe Dreamweaver CS3 supports the creation of many of the most popular types of compo- nents. In addition, Dreamweaver lets you extend the types of components that appear in the Components panel. Component basics Programmers use various strategies to encapsulate their work. You can think of encapsulation as creating an entity that exists in a virtual black box.
Page 313: How To Customize The Components Panel
Extending the Components panel If you have invented (or simply use) a component strategy that is not represented in Dreamweaver’s current Compo- nents panel, you can extend the Components panel’s logic so the panel can handle new kinds of components. To add a new kind of component to the Dreamweaver Components panel, you need to locate the available compo- nents (in the user’s environment) and request descriptions from each component (or parse them if they are written using ASCII files).
Page 314: Components Panel Files
Components panel files The Configuration/Components folder has a subfolder for each implemented server model. Component files are stored in the Configuration/Components/server-model/ComponentType folder. You can add other server models and supporting server extensions (for more information, see “Server models” on page 319 and “Server behaviors” on page 243).
Page 315 Filename Description *.gif The image that appears in the Components pop-up menu. *Menus.xml The repository for metadata that organizes the Components panel structure. Although the common WebServices component does not use this file, you can refer to the file WebServicesMenus.xml in the application folder Components/ColdFusion/ WebServices as an example.
Page 316: Components Panel Api Functions
Property name Description Tooltip text of the tree node item toolTipText Determines whether the item can be dragged and dropped into isCodeViewDraggable the Code view. Determines whether the item can be dragged and dropped into isDesignViewDraggable the Design view. For example, the following WebServicesClass node has web methods as its children: this.name = "TrafficLocatorWebService";...
Page 317 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.
Page 318 Description This function gets the code that is dragged and dropped in Code view from the Components panel or the code that is cut, copied, or pasted from the Components panel. Arguments componentRec • The argument is an object. componentRec Returns The string that contains the code for the component.
Page 319 <a href=”#” onMouseDown="handler">Blue Underlined Text</a> value can be replaced by any of the following strings or any JavaScript expression, such as "handler" " dw.browseDocument('http://www.adobe.com') • An handler opens a dialog box to set the current site. "Event:SetCurSite" • An handler opens a dialog box to create a new site.
Page 320 var someSteps = new Array(); someSteps.push(MM.MSG_WebService_InstructionsTitle); someSteps.push(MM.MSG_Dynamic_InstructionsStep1); someSteps.push(MM.MSG_Dynamic_InstructionsStep2); if(doSDK == true) someSteps.push(MM.MSG_WebService_InstructionsStep3); someSteps.push(MM.MSG_WebService_InstructionsStep4); return someSteps; setupStepsCompleted() Availability Dreamweaver MX. Description Dreamweaver calls this function before the Components tab appears. Dreamweaver then calls function if the getSetupSteps() Arguments None. Returns An integer that represents the number of setup steps the user has completed, as described in the following list: •...
Page 321 • The property is optional tool tip text for the tree node item. toolTipText • The property is a Boolean value that indicates whether the tree node item can be isCodeViewDraggable dragged and dropped into the Code view. • The isDesignViewDraggable dragged and dropped into the Design view.
Page 322 • The property is a Boolean value that indicates whether the tree node item can be isCodeViewDraggable dragged and dropped into Code view. • The isDesignViewDraggable dragged and dropped into Design view. Returns Nothing. 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.
Page 323 Property name Description Left /right toolStyle JavaScript code that returns a Boolean value ( enabled conditions exist: • When the dreamweaver.serverComponents.refresh() • When the selection in the tree changes • When server model changes The JavaScript code to execute. The command handler can force a refresh using the command serverComponents.refresh() The unique menu ID for the pop-up menu button when the button is clicked.
Page 324 plusButton.image plusButton.pressedImage plusButton.disabledImage plusButton.toolStyle plusButton.toolTipText plusButton.enabled plusButton.menuId toolBarBtnArray.push(plusButton); var minusButton minusButton.image minusButton.pressedImage minusButton.disabledImage minusButton.toolStyle minusButton.toolTipText minusButton.command minusButton.enabled dw.serverComponentsPalette.getSelectedNode() && ((dw.serverComponentsPalette.getSelectedNode().objectType=='Root') || (dw.serverComponentsPalette.getSelectedNode().objectType == 'Error') || (dw.serverComponentsPalette.getSelectedNode().objectType == 'MissingProxyGen')))"; toolBarBtnArray.push(minusButton); if(aServerModelName != null && aServerModelName.indexOf(".NET") >= 0) var deployWServiceButton deployWServiceButton.image deployWServiceButton.pressedImage deployWServiceButton.disabledImage = DEPLOYSUPPORTBUTTONUP;...
Page 325: How Customizing Server Models Works
“getSetupSteps()” on page 312 and “setupStepsCompleted()” on page 314 functions. You might want to create a specialized server model. Adobe 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...
Page 326: The Server Model Api Functions
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 Adobe document object, which is returned by the dreamweaver.getDocumentDOM() function. Returns Dreamweaver expects an integer that indicates the priority that you give to the server model for the file extension.
Page 327 Note: The Default Page Extension list exists only in Dreamweaver 4 and earlier. For Dreamweaver MX, and later, the Site Definition dialog box does not list file extension settings. Instead, Dreamweaver reads the Extensions.txt file and parses the element in the mmDocumentTypes.xml file. (For more information on these two files and the documenttype element, see “Extensible document types in Dreamweaver”...
Page 328 DREAMWEAVER CS3 Extending Dreamweaver Description This function returns the default file extension of files that use the current server model. The object serverModel is set to the server model of the currently selected site if no user document is currently selected. Arguments None.
Page 329 DREAMWEAVER CS3 Extending Dreamweaver Note: The Default Scripting Language list exists only in Dreamweaver 4 and earlier. For Dreamweaver MX and later, the Site Definition dialog box does not list supported scripting languages, nor does Dreamweaver use the function. Dreamweaver does not use this function because each server model has only one getServerLanguages() server language in Dreamweaver.
Page 330 Returns Dreamweaver expects an array of objects where each object contains the following three properties: • The property is a regular expression that matches the opening script delimiter (such as startPattern • The property is a regular expression that matches the closing script delimiter (such as endPattern •...
Page 331 Arguments metaCharSetString argument is a string that holds the value of the document’s metaCharSetString Returns Dreamweaver expects a Boolean value. 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 dom.serverModel.getServerVersion() Arguments None.
Page 332: How Data Translators Work
Chapter 22: 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 Adobe Dreamweaver CS3 can read and display. In Dreamweaver, you can translate attributes within tags as well as entire tags or blocks of code.
Page 333: Determining What Kind Of Translator To Use
Note: To prevent JavaScript errors from interfering with startup, errors in any translator file are reported only after all translators are loaded. For more information on debugging translators, see “Finding bugs in your translator” on page 333. Dreamweaver also calls the translateMarkup() lation preferences) whenever the user might add new content or change existing content that needs translation.
Page 334: Adding A Translated Attribute To A Tag
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 trans- lator works properly.
Page 335: Locking Translated Tags Or Blocks Of Code
DREAMWEAVER CS3 Extending Dreamweaver Inspecting translated attributes When server markup specifies a single attribute and the attribute is represented in a Property inspector, Dream- weaver 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. The translator runs whenever the user edits the server markup that appears in the Property inspector.
Page 336 • The value is a string that identifies the type of markup (or the tag name that is associated with tagNameOrType the markup) that is contained in the lock. The string can contain only alphanumeric, hyphen (-), or underscore (_) characters. You can check this value in the to determine whether the Property inspector is the right one for the content.
Page 337: Creating Property Inspectors For Locked Content
Creating Property inspectors for locked content After you create a translator, you need to create a Property inspector for the content so the user can change its properties (for example, the file to be included or one of the conditions in a conditional statement). Inspecting trans- lated content is a unique problem for several reasons: •...
Page 338 function inspectSelection() { var currentDOM = dw.getDocumentDOM(); var currSelection = currentDOM.getSelection(); var theObj = currentDOM.offsetsToNode(curSelection[0],curSelection[0]+1); if (theObj.nodeType != Node.ELEMENT_NODE) { return; // To convert the encoded characters back to their // original values, use the unescape() method. var origAtt = unescape(theObj.getAttribute("ORIG")); // Convert the string to lowercase for processing var origAttLC = origAtt.toLowerCase();...
Page 339: Finding Bugs In Your Translator
Finding bugs in your translator If the function contains certain types of errors, the translator loads properly, but it fails without translateMarkup() 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. If your translator fails, one effective debugging method is to turn the translator into a command, as described in the following steps: Copy the entire contents of the translator file to a new document, and save it in the Configuration/Commands...
Page 340: A Simple Attribute Translator Example
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. You create the attribute translator by performing the following steps: •...
Page 341 <html> <head> <title>Conditional Translator</title> <meta http-equiv="Content-Type" content="text/html; charset="> <script language="JavaScript"> /************************************************************* * This translator handles the following statement syntaxes: * * <# if (condition) then foo else bar #> * <# if (condition) then att="foo" else att="bar" #> * <# if (condition) then att1="foo" att2="jinkies" * att3="jeepers"...
Page 342 while (start != -1){ back3FromStart = start-3; end = outStr.indexOf(' #>',start); equalSign = outStr.indexOf('="<# if',back3FromStart); attAndValue = (equalSign != -1)?false:true; trueStart = outStr.indexOf('then', start); falseStart = outStr.indexOf(' else', start); trueValue = outStr.substring(trueStart+5, falseStart); tokens = dreamweaver.getTokens(trueValue,' '); // If attAndValue is false, find out what attribute you're // translating by backing up from the equal sign to the // first space.
Page 343: A Simple Block/Tag Translator Example
// Increment the counter so that the next instance // of mmTranslatedValue will have a unique name, and // then find the next <# conditional in the code. count++; start = outStr.indexOf('<# if',end); // Return the translated string. return outStr function getTranslatorInfo(){ returnArray = new Array(7);...
Page 344 /********************************************************** * The getTranslatorInfo() function provides information * about the translator, including its class and name, * the types of documents that are likely to contain the * markup to be translated, the regular expressions that * a document containing the markup to be translated * would match (whether the translator should run on all * files, no files, in files with the specified * extensions, or in files matching the specified...
Page 345 outStr = outStr + replCode; // Copy everything after the KENT tag. outStr = outStr + inStr.substring(start+6); // Use the string you just created for the next trip through // the document. This is the most inefficient part of all. inStr = outStr;...
Page 346 var hour = today.getUTCHours(); var SFhour = hour - 8; var platform = navigator.platform; var imageRef; // If SFhour is negative, you have two adjustments to make. // First, subtract one from the day count because it is already the wee // hours of the next day in GMT.
Page 347: The Data Translator Api Functions
}else{ imageRef = "images/kent_hardAtWorkOnWin.jpg"; }else{ imageRef = "images/kent_sleeping.jpg"; //If it's after midnight and before 10am, or anytime on Sunday }else{ imageRef = "images/kent_sleeping.jpg"; return imageRef; </script> </head> <body> </body> </html> Save the file as kent.htm in the Configuration/Translators folder. The data translator API functions This section describes the functions used to define translators for Dreamweaver.
Page 348 string specifies a regular expression that you can check. The array should contain the same number regExps elements as are specified in regExps the document’s source code before the translator can act on a file. string specifies when this translator executes. The following list gives the possible string values: runDefault String Definition...
Page 349 Description Dreamweaver performs two translation passes. The first pass goes through all the translators and calls the functions. After those functions are called, the second pass calls the lateMarkup() passed in is the to translate. The only edits that are allowed during the second pass are those dealing with translated attributes.
Page 350 function translateMarkup(docName, siteRoot, docContent){ var translatedString = ""; if (docContent.length > 0){ translatedString = ASPTrans.translateASP(docName, siteRoot, ¬ docContent); return translatedString; For an all-JavaScript example, see “A simple attribute translator example” on page 334 or “A simple block/tag trans- lator example” on page 337. liveDataTranslateMarkup() Availability Dreamweaver UltraDev 1.
Page 351: How Integrating C Functions Works
Chapter 23: C-level extensibility The C-level extensibility mechanism lets you implement Adobe Dreamweaver CS3 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 352 </FORM> </BODY> </HTML> function accepts a list of arguments from the user, retrieves the filename argument, readContentsOfFile() reads the contents of the file, and returns the contents of the file. For more information about the JavaScript data structures and functions that appear in the JavaScript interpreter”...
Page 353: C-Level Extensibility And The Javascript Interpreter
void MM_Init() JS_DefineFunction("readContentsOfFile", readContentsOfFile, 1); Your library must include exactly one instance of the following macro: /* MM_STATE is a macro that expands to some definitions that are * needed to interact with Dreamweaver. This macro must * be defined exactly once in your library. */ MM_STATE Note: The library can be implemented in either C or C++, but the file that contains the macro must be implemented in C.
Page 354: The C-Level Api
typedef struct jsval jsval An opaque data structure that can contain an integer, or a pointer to a floating-point number, string, or object. Some functions in the API can read the values of function arguments by reading the contents of a some can be used to write the function’s return value by writing a typedef enum { JS_FALSE = 0, JS_TRUE = 1 } JSBool A simple data type that stores a Boolean value.
Page 355: Jsbool Js_Valuetointeger
• The argument is the number of arguments that the function expects to receive. nargs Returns A Boolean value: indicates success; JS_TRUE char *JS_ValueToString() Description This function extracts a function argument from a 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. To change the string, you must copy the characters into another buffer and create a new JavaScript string.
Page 356: Jsbool Js_Valuetoboolean
Arguments JSContext *cx jsval v double *dp • The argument is the opaque JSContext • The argument is the structure from which the double is to be extracted. JSVal • The argument is a pointer to an 8-byte double. This function stores the converted value in Returns A Boolean value: indicates success;...
Page 357: Jsbool Js_Doubletovalue
Arguments JSContext *cx char *bytes size_t sz • The argument is the opaque JSContext • The argument is the string to be stored in the bytes free the string when it is not needed. If the string size is not specified (see the null-terminated.
Page 358: Jsval Js_Objecttovalue
Arguments argument is the long integer value that you want to convert to a Returns structure that contains the integer that was passed to the function as an argument. JSVal JSVal JS_ObjectToValue() Description This function stores an object return value in a to define its contents.
Page 359 • The argument is an optional pointer to the an array that contains elements. If the return value is length undefined and can be set using the Returns A pointer to a new array object or the value long JS_GetArrayLength() Description Given a pointer to an array object, this function gets the number of elements in the array.
Page 360: Jsbool Js_Executescript
• The argument is an integer index into the array. The first element is index length - 1 • The argument is a pointer to a JSVal Returns A Boolean value: indicates success; JS_TRUE JSBool JS_ExecuteScript() Description This function compiles and executes a JavaScript string. If the script generates a return value, it returns in Arguments JSContext *cx JSObject *obj...
Page 361: File Access And Multiuser Configuration Api
File access and multiuser configuration API Adobe 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.
Page 362: Js_Object Mm_Getconfigfolderlist
Configuration/Snippets/html/onepixelborder.csn file, and it adds the resulting list of files to the Snippets panel list. If a C-level extension calls the MM_ConfigFileExists() /Adobe Dreamweaver CS3/Configuration/Snippets/javascript/onepixelborder.csn value of . Likewise, if a JavaScript extension tries to call false Files/Adobe/Adobe Dreamweaver CS3/Configuration/Snippets/javascript/onepixelborder.csn") returns a value.
Page 363: Jsbool Mm_Configfileexists
*fileUrl a file:// URL. Returns A Boolean value: indicates success; JS_TRUE Example char *dwConfig = “file:///c|/Program Files/Adobe/Adobe Dreamweaver CS3/ Configuration/Extensions.txt”; int fileno = 0; if(MM_ConfigFileExists(dwConfig)) fileno = MM_OpenConfigFile(dwConfig, “read”); int MM_OpenConfigFile() Availability Dreamweaver MX.
Page 364: Jsbool Mm_Getconfigfileattributes
Returns 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|/Program Files/Adobe/Adobe Dreamweaver CS3/ Configuration/Extensions.txt"; int = fileno; if(MM_ConfigFileExists(dwConfig)) fileno = MM_OpenConfigFile(dwConfig, "read");...
Page 365: Jsbool Mm_Setconfigfileattributes
Returns A Boolean value: indicates success; JS_TRUE or an error occurs while getting the attributes. Example char dwConfig = "file:///c|/Program Files/Adobe/Adobe Dreamweaver CS3/ Configuration/Extensions.txt"; unsigned long attrs; unsigned long filesize; unsigned long modtime; unsigned long createtime; MM_GetConfigAttributes(dwConfig, &attrs, &filesize, &modtime, &createtime);...
Page 366: Jsbool Mm_Createconfigfolder
Example char *dwConfig = "file:///c|/Program Files/Adobe/Adobe Dreamweaver CS3/ 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); JSBool MM_CreateConfigFolder() Availability Dreamweaver MX. Description This function creates a folder in the specified location.
Page 367: Calling A C Function From Javascript
Returns A Boolean value: indicates success; JS_TRUE Example char *dwConfig = "file:///c|/Program Files/Adobe/Adobe Dreamweaver CS3 /Configuration/Objects"; MM_RemoveConfigFolder(dwConfig); JSBool MM_DeleteConfigFile() Availability Dreamweaver MX. Description This function deletes the file, if it exists. If the file exists below the Dreamweaver Configuration folder, the function marks the file for deletion in the mm_deleted_files.xml file.
Page 368 • The Sample.mak makefile lets you build the Sample.c source file into a DLL with Microsoft Visual C++; Sample.mcp is the equivalent file for building a Mach-O Bundle with Metrowerks CodeWarrior and Sample.xcode is the equivalent file for Apple Xcode. If you use another tool, you can create the makefile. To build the DLL in Windows using VS.Net 2003: Use File >...
Page 369 DREAMWEAVER CS3 Extending Dreamweaver Save the file and restart Dreamweaver. To execute the function, select Insert > HTML > Horizontal Rule. computeSum() A dialog box that contains the number 4 (the result of computing the sum of 2 plus 2) appears.
Page 370: The Shared Folder Contents
Any extension can reference the files in the Shared folder’s subfolders, and you can add custom common utilities to the ones already provided by Adobe Dreamweaver CS3. The multiple user Configuration folders installed for users on Windows XP, Windows 2000, and Mac OS X platforms also contain a Shared folder for individual customiza- tions.
Page 371: The Common Folder
The Common folder The Common folder has shared scripts and classes for use in third-party extensions. File Description 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. The methods of manage the link to design documents.
Page 372 Contains functions to insert Adobe Fireworks CS3 HTML code into Dreamweaver documents. Func- tions check whether current document is a Fireworks document, insert Fireworks HTML at insertion point, update a Fireworks style block to Dreamweaver, and more. Also contains related utility functions.
Page 373 File Description sbUtils.js Contains shared functions for use within Adobe server behaviors. The Configuration/Shared/Common/Scripts folder contains more general purpose utilities. setText.js Contains functions to escape an expression string, unescape an expression string, and extract an expression string. sortTable.js Contains functions to initialize and sort a table as well as functions to sort an array, set the mouse pointer to a hand icon or pointer, and check the type and version of the browser.
Page 374 File Description dateID.js Contains two functions, " dayFormat" them. Given a date array, dateFormat displayHelp.js Contains one function that displays the specified Help document. docInfo.js Contains functions that provide information about the user’s document. Operations performed by functions include returning an array of object references for a specified browser type and tag, returning all instances of a specified tag name, searching for a tag that wraps the current selection, and so on.
Page 375: Using The Shared Folder
File Description string.js Contains a generic set of functions for manipulating and parsing text strings. Functions include: extractArgs() badChars() AllInRange() code() TemplateUtils.js Contains utility functions for Dreamweaver templates. Functions insert an editable region into a docu- ment, insert a repeating region into a document, scan a document for a specified editable region, and so on.
Page 376 DREAMWEAVER CS3 Extending Dreamweaver LIST_LINKS = new ListControl('linkPath'); LIST_TARGETS = new ListControl('linkTarget'); With the declarations, Hyperlink.js defines two new ListControl objects. The code in the new listControl Hyperlink.htm file then attaches them to the controls in the form, as follows: SELECT <td align="left">...
Page 377: Index
Index debugging 333 action files 230 sample code 334 action tag 142 attributes activate tag 143 arguments 179 addDynamicSource() 295 checked 104, 178 alert() 91 colorRect 177 analyzeServerBehavior() 248 command 105, 179 APIs, types of disabledImage 176 behaviors 236 domRequired 177 C-level extensibility 348 enabled 104, 178 commands 133...
Page 378 canDrag attribute 103 blockEnd tag 46 canInsertObject() 116 blockStart tag 46 canRecognizeDocument() 320 brackets tag 47 category tag 101 charEnd tag 48 changing default file type 7 charEsc tag 48 charEnd tag, code coloring 48 charStart tag 47 charEsc tag, code coloring 48 commentEnd tag 48 charStart tag, code coloring 47 commentStart tag 48...
Page 379 getSetupSteps() 312 editDynamicSource() 296 handleDesignViewDrop() 314 findDynamicSources() 297 handleDoubleClick() 315 generateDynamicDataRef() 298 setupStepsCompleted() 314 generateDynamicSourceBindings( toolbarControls() 316 inspectDynamicDataRef() 299 Configuration folders and extensions 72 data translator API functions configureSettings() 195 getTranslatorInfo() 341 confirm() 91 liveDataTranslateMarkup() 344 conventions, in this guide 3 translateDOM() 342 copyServerBehavior() 250 translateMarkup() 343...
Page 380 EDML file tags in behavior dialog boxes 231 attributes 277 in extension files 74 closeTag 278 returning a value from 231 delete 273 events deleteType attribute 273 in extension files 91 display 278 role in behaviors 230 group 257 examples groupParticipant 260 attribute translator 334 groupParticipants 260...
Page 381 getCurrentValue() 165, 181 id attribute 103, 175 getDockingSide() 225 getDynamicContent() 158, 181 idChar1 tag, code coloring 52 idCharRest tag, code coloring 52 getElementsByAttributeName property 94, 96 identifyBehaviorArguments() 239 getElementsByTagName() ignoreCase tag, code coloring 52 for document objects 93 ignoreMMTParams tag, code for tag objects 94 ignoreTags tag, code coloring 53 getFileExtensions() 320...
Page 382 localized strings 17 method tag 40 localizing 76 MM:TREECOLUMN tag 85 location attribute 264 MM:TREENODE tag 85 locked content, inspecting 331 MM_ConfigFileExists() 357 *LOCKED* keyword 331 MM_CreateConfigFolder() 360 MM_DeleteConfigFile() 361 mm_deleted_files.xml file manipulating tree control content 87 about 13 mapping files, keyboard shortcuts 28 deleteditems tag 13 math object 91 item tag 13...
Page 383 of tag objects 94 site 188 of text objects 96 stand-alone 191 parentWindow property 93 reports API functions participant files 245 beginReporting() 194 participant tag 262 commandButtons() 194 participants, and server behavior 244 configureSettings() 195 partType attribute 261 endReporting() 194 password (field) object 91 processfile() 193 pasteServerBehavior() 252...
Page 384 share-in-memory 285 changing appearance of 5 shortcut tag 141 changing color highlighting 11 shortcutlist tag 140 customizing interpretation of 8 showIf attribute 104, 175 tagspec 9 showIf() 186 title tag 259 shutdown commands 73 tool tag 142 Shutdown folder 73 toolbar command API functions site object, properties of 97 canAcceptCommand() 180...
Page 385 in commands API 135 in menu commands 160 in objects API 119 in reports API 195 workspace about 163 layouts, customizing 23 structure 256 tree view 91 XML files about 91 CodeHints.xml 32 Formats.xml 301 insertbar.xml 107 menus.xml 137 MMDocumentTypes.xml 15 SpryCodeHints.xml 33 string 76 toolbars.xml 162...

This manual is also suitable for:

Dreamweaver cs3