MACROMEDIA DREAMWEAVER 8-EXTENDING DREAMWEAVER Manual
Summary of DREAMWEAVER 8-EXTENDING DREAMWEAVER
Page 1
Extending dreamweaver.
Page 2
Trademarks 1 step robopdf, activeedit, activetest, authorware, blue sky software, blue sky, breeze, breezo, captivate, central, coldfusion, contribute, database explorer, director, dreamweaver, fireworks, flash, flashcast, flashhelp, flash lite, flashpaper, flex, flex builder, fontographer, freehand...
Page 3
3 contents introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 installing an extension . . . . . . . . . . . . . . . . . . . . . ....
Page 4
4 contents chapter 4: user interfaces for extensions. . . . . . . . . . . . . . . . . . . 111 designing an extension user interface . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 dreamweaver html rendering control . . . . . . . . . . . . . . . . . . . . . . . . . .112 using custom ui cont...
Page 5
Contents 5 chapter 10: reports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249 site reports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249 stand-alone reports. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ....
Page 6
6 contents chapter 16: data sources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379 how data sources work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380 a simple data source example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .382 ...
Page 7
Contents 7 part 4: appendix appendix: the shared folder . . . . . . . . . . . . . . . . . . . . . . . . . . . 483 the shared folder contents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483 using the shared folder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ....
Page 8
8 contents.
Page 9
9 introduction this guide describes the macromedia dreamweaver 8 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 obje...
Page 10
10 introduction installing an extension to become familiar with the process of writing extensions, you might want to explore the extensions and resources that are available through the macromedia exchange website ( www.Macromedia.Com/exchange ). Installing an existing extension introduces you to som...
Page 11
What’s new in dreamweaver 11 ■ determine which files you need to modify or create. ■ plan the user interface (ui), if any, for the extension. ■ create the necessary files and save them in the appropriate folders. ■ restart dreamweaver so that it recognizes the new extension. ■ test the extension. ■ ...
Page 12
12 introduction ■ streamlined handling of css styles the css styles and relevant css panels have been combined. The design panel is now named css; the css styles panel is now named styles. There is now a menu option for document css styles and selection css styles in the window menu. In addition, an...
Page 13
Conventions used in this guide 13 errata a current list of known issues can be found in the extensibility section of the dreamweaver support center ( www.Macromedia.Com/go/extending_errata ). Conventions used in this guide the following typographical conventions are used in this guide: ■ code font i...
Page 14
14 introduction.
Page 15
15 1 part 1 customizing dreamweaver you can customize macromedia dreamweaver 8 to suit your web development needs, including changing settings in dialog boxes, setting preferences in a variety of areas, and changing keyboard shortcuts. You can also customize code hints and code coloring in code view...
Page 17
17 1 chapter 1 customizing dreamweaver in addition to creating and using dreamweaver extensions, you can customize macromedia 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 approac...
Page 18
18 customizing dreamweaver ■ changing the default file type ■ customizing the interpretation of third-party tags ■ customizing workspace layouts ■ customizing the code view toolbar customizing default documents the documenttypes/newdocuments folder contains a default (blank) document of each type th...
Page 19
Ways to customize dreamweaver 19 customizing the appearance of dialog boxes the dialog box layouts for objects, commands, and behaviors are specified as html forms; they reside in html files in the configuration folder within the dreamweaver application folder. You edit these forms as you would edit...
Page 20
20 customizing dreamweaver changing the default file type by default, dreamweaver shows all the file types it recognizes in the file > open dialog box. You can use a pop-up menu in that dialog box to limit the display to certain types of files. If most of your work involves a specific file type (suc...
Page 21
Ways to customize dreamweaver 21 customizing the interpretation of third-party tags server-side technologies such as asp, macromedia coldfusion, jsp, and php use special non- html code in html files; servers create and serve html content based on that code. When dreamweaver encounters non-html tags,...
Page 22
22 customizing dreamweaver ■ string-delimited tags string-delimited tags start with one string and end with another string. They are like empty html tags (such as img ) in that they don’t surround content and don’t have closing tags. If the happy tag were a string-delimited tag, the tag specificatio...
Page 23
Ways to customize dreamweaver 23 ■ content_model describes what kinds of content the tag can contain and where in an html file the tag can appear. Valid values are "block_model" , "head_model" , "marker_model" , and "script_model" : ■ block_model specifies that the tag can contain block-level elemen...
Page 24
24 customizing dreamweaver ■ detect_in_attribute indicates whether to ignore everything between start_string and end_string (or between opening and closing tags if those strings are not defined) even when those strings appear inside attribute names or values. You should generally set this to "true" ...
Page 25
Ways to customize dreamweaver 25 container none. Example content_model="marker_model" icon="happy.Gif" icon_width="18" icon_height="18"> content_model="marker_model" icon="happy.Gif" icon_width="18" icon_height="18"> how custom tags appear in the design view the way that custom tags appear in the de...
Page 26
26 customizing dreamweaver avoiding rewriting third-party tags dreamweaver corrects certain kinds of errors in html code. For details, see using dreamweaver. By default, dreamweaver refrains from changing html in files with certain filename extensions, including .Asp (asp), .Cfm (coldfusion), .Jsp (...
Page 27
Customizing dreamweaver in a multiuser environment 27 to turn off dreamweaver encoding options: 1. Select edit > preferences, and select the code rewriting category. 2. Deselect either or both special characters options. For information on the other code rewriting preferences, see using dreamweaver....
Page 28
28 customizing dreamweaver mac os x platforms use the following location: drive:users/username/library/application support/macromedia/dreamweaver 8/ configuration the first time you run dreamweaver, it copies only some of the configuration files into your user configuration folder. (the files that i...
Page 29
Customizing dreamweaver in a multiuser environment 29 about mm_deleted_files.Xml tag syntax the mm_deleted_files.Xml file contains a structured list of items that specify configuration files that dreamweaver is to ignore. These items are specified by xml tags, which you can edit in a text editor. Th...
Page 30
30 customizing dreamweaver container this tag must be contained in a deleteditems tag. Example reinstalling and uninstalling dreamweaver in a multiuser environment after you install dreamweaver, if you later reinstall it or upgrade to a later version, dreamweaver automatically makes backup copies of...
Page 33
Working with browser profiles 33 3. Add any new tags or attributes that you know are supported by the browser, using the syntax shown in “about browser-profile formatting” on page 30 . If you don’t want to receive error messages about a particular unsupported tag, add it to the list of supported tag...
Page 34
34 customizing dreamweaver changing ftp mappings the ftpextensionmap.Txt file (windows) and the ftpextensionmapmac.Txt file (macintosh) map filename extensions to ftp transfer modes (ascii or binary). Each line in each of the two files includes a filename extension (such as gif) and either the word ...
Page 35
Extensible document types in dreamweaver 35 extensible document types in dreamweaver xml provides a rich system for defining complex documents and data structures. Dreamweaver uses several xml schemas to organize information about server behaviors, tags and tag libraries, components, document types,...
Page 36
36 customizing dreamweaver coldfusion component dynamic cfc jsp jsp dynamic jsp php php dynamic php, php3 library item dwextension lbi asp.Net c# template dwtemplate axcs.Dwt asp.Net vb template dwtemplate axvb.Dwt asp javascript template dwtemplate aspjs.Dwt asp vbscript template dwtemplate aspvb.D...
Page 37
Extensible document types in dreamweaver 37 if you need to create a new document type, you can either add your entry to the document definition file that macromedia provides (mmdocumenttypes.Xml) or add a custom definition file to the configuration/documenttypes folder. Structure of document type de...
Page 38
38 customizing dreamweaver the following table describes the tags and attributes that you can use within a document type definition file. Element type required description tag attribute documenttype (root) yes parent node. Id yes unique identifier across all document type definition files. Servermod...
Page 39
Extensible document types in dreamweaver 39 internaltype yes a broad classification of how dreamweaver treats a file. The internaltype identifies whether the design view is enabled for this document and handles special cases such as dreamweaver templates or extensions. The following values are valid...
Page 40
40 customizing dreamweaver winfileextension yes the file extension that is associated with the document type on windows. You specify multiple file extensions by using a comma-separated list. The first extension in the list is the extension that dreamweaver uses when the user saves a documenttype doc...
Page 41
Extensible document types in dreamweaver 41 when dreamweaver starts, it reads all document type definition files and builds a list of valid document types. Dreamweaver treats any entries within the definition files that have nonexistent server models as nonserver model document types. Dreamweaver ig...
Page 42
42 customizing dreamweaver ■ the value of the internaltype attribute for the new document type must be dwtemplate . ■ the dynamicid attribute must be set, and the value must be a reference to the identifier of an existing dynamic document type. The following example defines a dynamic document type: ...
Page 43
Extensible document types in dreamweaver 43 document extensions and file types by default, dreamweaver shows all the file types it recognizes in the file > open dialog box. After creating a new document type, extension developers need to update the appropriate extensions.Txt file. If the user is on ...
Page 44
44 customizing dreamweaver 3. 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; then add a colon and a brief descriptive phrase to show in the pop-up menu for file types that appears in the file > open dialo...
Page 45
Extensible document types in dreamweaver 45 myjspdoctype/description or in these examples, myjspdoctype/description is a unique string identifier that acts as a placeholder for the localized string. The localized string is defined in the next step. 4. In the configuration/strings folder, create a ne...
Page 46
46 customizing dreamweaver opening a document in dreamweaver when a user opens a file, dreamweaver follows a series of steps to identify the document type based on the file’s extension. If dreamweaver successfully finds a unique document type, dreamweaver uses that type and loads the associated serv...
Page 47
Extensible document types in dreamweaver 47 description outermost tag, which signals the start of the panel set description. Attributes none. Contents this tag may contain one or more , , or tags. Container none. Example description specifies the application window’s initial position and size. Attri...
Page 48
48 customizing dreamweaver description specifies the document window’s initial position and size. Attributes rect, maximize ■ rect specifies the position and size of the document window. The string is in the form “left top right bottom” specified as integers. If the maximize value is true , the rect...
Page 49
Extensible document types in dreamweaver 49 ■ y specifies the top position of the panel group. Its value can be an integer or a value that is relative to the screen. If the integer value is not on the screen, the panel group appears in the closest screen position possible to make it visible on the s...
Page 50
50 customizing dreamweaver ■ height is an integer that specifies the height of the panel in pixels. This attribute is optional. If height is not specified, the build-in default for each panel is used. ■ activepanel is a number that is the id of the front panel. ■ visible is a boolean value: true if ...
Page 51
Extensible document types in dreamweaver 51 ■ id is a number that indicates the id for the panel. The following table contains a list of values: ■ visibletab is a boolean value: true if the tab and the panel should be visible; false otherwise. Contents none. Product id panel flash 1 properties 2 act...
Page 52
52 customizing dreamweaver container this tag must be contained in a panelcontainer tag. Example expanded=”true” activepanel=”20”> expanded=”true” activepanel=”20”> customizing the code view toolbar the code view toolbar displays 15 buttons initially. This is a subset of the buttons that are availab...
Page 53
dw.Getfocus(true) ¬ == 'html') dw.Getdocumentdom().Source.Expandallcodefragments();" update="onviewchange" /> --> 4. Save the file. T...
Page 54
54 customizing dreamweaver.
Page 55
55 2 chapter 2 customizing code view macromedia dreamweaver 8 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 spe...
Page 56
56 customizing code view dreamweaver cannot express some types of code hints menus through the xml file or the javascript api. Both the codehints.Xml file and the javascript api expose a useful subset of the code hints engine, but some dreamweaver functionality is not accessible. For example, there ...
Page 57
Code hints 57 all possible tag names. You can edit the list of tag names using the tag library editor ]]> id="codehints_function_arguments"> ... Doctypes="cfml"/> doctypes="jsp"/> id="codehints_function_arguments"> ... Doctypes="cfml"/> doctypes="jsp"/> doctypes="cfml"/> doctypes="jsp"/> doctypes="j...
Page 58
58 customizing code view description each menugroup tag corresponds to a type of menu. You can see the menu types that dreamweaver defines by selecting the code hints category from the preferences dialog box. Select preferences from the edit menu to display the preferences dialog box. You can create...
Page 59
Code hints 59 attributes none. Contents description text. Container the menugroup tag. Example href="javascript:dw.Taglibrary.Showtaglibraryeditor()">tag library editor. ]]> description this tag describes a single pop-up menu. Dreamweaver opens the menu whenever the user types the last character of ...
Page 60
60 customizing code view ■ the casesensitive attribute specifies whether the pattern is case-sensitive. The possible values for the casesensitive attribute are true , false , or a subset of the comma- separated list that you specify for the doctypes attribute. The list of document types lets you spe...
Page 61
Code hints 61 ■ the icon attribute, which is optional, specifies the path to an image file that dreamweaver displays as an icon to the left of the menu text. The location is expressed as a url, relative to the configuration folder. ■ the texticon attribute, which is optional, specifies a text string...
Page 62
62 customizing code view ■ the pattern attribute specifies the name of the function and its argument list. For methods, the pattern attribute 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 fun...
Page 63
Code coloring 63 code coloring dreamweaver lets you customize or extend the code coloring schemes that you see in code view so that you can add new keywords to a scheme or add code coloring schemes for new document types. If you develop javascript functions to use in your client-side script, for exa...
Page 64
64 customizing code view "codecolor_htmltable" text= "#009999" /> "codecolor_htmlcomment" text= "#999999" italic= "true" / > … colors are specified in red-green-blue (rgb) hexadecimal values. For example, the statement text= "009999" in the preceding xml code assigns a blue-green (teal) color to the...
Page 65
Code coloring 65 notice that the syntaxcolor and tagcolor tags in the colors.Xml file assign color and style values to an id string value. The id value is then used in the codecoloring.Xml file to assign a style to a scheme tag. For example, the defaulttag tag in the codecoloring.Xml excerpt has an ...
Page 66
66 customizing code view contents blockend , blockstart , brackets , charstart , charend , charesc , commentstart , commentend , cssproperty , cssselector , cssvalue , defaultattribute , defaulttext , endoflinecomment , entity , functionkeyword , idchar1 , idcharrest , ignorecase , ignoremmtparam , ...
Page 67
Code coloring 67 attributes cannest , doctypes , id , name , scheme ■ cannest specifies whether the scheme can nest inside itself. Values are "yes" or "no" . The default is "no" . ■ doctypes="doc_type1, doc_type2,…" required. Specifies a comma-separated list of document types into which you can nest...
Page 68
68 customizing code view description contains a text string that represents the delimiter of the start of a character. You must specify the charstart and charend tags in pairs. Multiple charstart … charend pairs are allowed. Attributes none. Example description contains a text string that represents...
Page 69
Code coloring 69 attributes none. Example description a text string that delimits the end of a comment block. You must specify the commentstart and commentend tags in pairs. Multiple commentstart … /commentend pairs are allowed. Attributes none. Example ]]> description an empty tag that indicates th...
Page 70
70 customizing code view attributes name , id ■ name="cssmedia_name" a string that assigns a name to the css @media function. ■ id="id_string" required. An identifier string that maps color and style to this syntax item. Example description an empty tag that indicates css rules and holds code colori...
Page 71
Code coloring 71 description an empty tag that indicates css rules and holds code coloring attributes. Attributes name , id ■ name="cssvalue_name" a string that assigns a name to the css value. ■ id="id_string" required. An identifier string that maps color and style to this syntax item. Example "va...
Page 72
72 customizing code view example "other tags" id= "codecolor_htmltag" /> description optional. If this tag is present, all text that is not defined by any other tag is colored according to the style assigned to this tag. If this tag is omitted, black text is used. Attributes name , id ■ name="csssel...
Page 73
Code coloring 73 attributes name , id ■ name="entity_name" a string that assigns a name to the entity. ■ id="id_string" required. An identifier string that maps color and style to this syntax item. Example "special characters" id= "codecolor_htmlentity" /> description identifies keywords that define...
Page 74
74 customizing code view description a list of characters that are to be recognized as the remaining characters in an identifier. If idchar1 is not specified, all characters of the identifier are validated against this list. Attributes name , id ■ name="idcharrest_name" a string that assigns a name ...
Page 75
Code coloring 75 description specifies whether markup tags should be ignored. Values are yes and no ; the default is yes . Set to no when syntax is for tag markup language that is delimited by and > . Set to yes when syntax is for a programming language. Attributes none. Example no description speci...
Page 76
76 customizing code view description list of keywords for type specified in category attribute. Multiple keywords tags are allowed. Attributes name , id ■ name="keywords_name" a string that assigns a name to the list of keywords. ■ id="id_string" required. An identifier string that maps color and st...
Page 78
78 customizing code view attributes doctypes ■ doctypes="doc_type1, doc_type2,...” the document types for which this sample text appears. Example function displaywords(arraywords) { for (i= 0 ; i // inline comment alert( "word " + i + " is " + arraywords[i]); } } var tokens = new array( "hello" , "w...
Page 79
Code coloring 79 attributes name , id, wrap ■ name="stringstart_name" a string that assigns a name to the stringstart block. ■ id="id_string" required. An identifier string that maps color and style to this syntax item. ■ wrap="true" or "false" . Defines whether code coloring recognizes text strings...
Page 80
80 customizing code view description this tag groups one or more tags to which you can assign a unique color and style. Attributes id , name , taglibrary , tags ■ id="id_string" required. An identifier string that maps color and style to this syntax item. ■ name="display_name" a string that dreamwea...
Page 81
Code coloring 81 sample code header here's some editable text example "asp-js,asp-vb, asp.Net_csharp, asp.Net_vb, coldfusion,cfc, html, jsp,libraryitem,php_mysql " scheme= "innertext" > "asp-js,asp-vb, asp.Net_csharp, asp.Net_vb, coldfusion,cfc, html, jsp,libraryitem,php_mysql " scheme= "inne...
Page 82
82 customizing code view example "php_mysql" scheme= "outertag" > "php" >]]> "php_mysql" scheme= "outertag" > "php" >]]> innertag this value is identical to the outertag value, except that the tag coloring is taken from the scheme inside the delimiters. This is currently used for the html tag. Namet...
Page 83
Code coloring 83 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. To make the proce...
Page 84
84 customizing code view wildcard characters the following is a list of wildcard characters that dreamweaver supports, along with the strings to specify them and descriptions of their usage. Wildcard escape string description wildcard \* skip all characters in the rule until the character that follo...
Page 85
Code coloring 85 escape characters the following is a list of escape characters that dreamweaver supports, along with the strings to specify them and descriptions of their usage. Maximum string length the maximum length allowed for a data string is 100 characters. For example, the following blockend...
Page 86
86 customizing code view scheme precedence dreamweaver uses the following algorithm to color text syntax in code view: 1. Dreamweaver determines the initial syntax scheme based on the document type of the current file. The file document type is matched against the scheme.Documenttype attribute. If n...
Page 87
Code coloring 87 editing schemes you can edit the styles for a code coloring scheme either by editing the code coloring file or by selecting the code coloring category in the dreamweaver preferences dialog box, as shown in the following figure: for fields that you can specify more than once, such as...
Page 88
88 customizing code view 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 style...
Page 89
Code coloring 89 code coloring examples the following code coloring examples illustrate the code coloring schemes for a cascading style document and a javascript document. The lists of keywords in the javascript example are abbreviated for the sake of keeping the example short. Css code coloring "cs...
Page 90
90 customizing code view css sample text the following sample text for the css scheme illustrates the css code coloring scheme: /* comment */ h2, .Head2 { font-family : 'sans-serif' ; font-weight : bold ; color : #339999 ; } the following lines from the colors.Xml file provide the color and style va...
Page 91
Code coloring 91 _$abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz idchar1> "identifier" id= "codecolor_javascriptidentifier" > _$abcdefghijklmnopqrstuvwxyzabcdefgh ijklmnopqrstuvwxyz0123456789 "identifier" id= "codecolor_javascriptidentifier" > _$abcdefghijklmnopqrstuvwxyzabcdefgh ijklmnopqrst...
Page 92
92 customizing code view var tokens = new array ( "hello", "world" ) ; displaywords ( tokens ) ; the following lines from the colors.Xml file provide the color and style values that are seen in the sample text and were assigned by the code coloring scheme: "codecolor_javascriptcomment" text= "#99999...
Page 93
Code validation 93 contents the property and value tags. Container none. Example . . . Description defines a supported css property for the browser profile. Attributes name, names, supportlevel, message ■ name="property_name" the name of the property for which you are specifying support. ■ names="pr...
Page 94
94 customizing code view ■ message="message_string" the message attribute defines a message string that dreamweaver displays when it finds the property in a document. The message string describes possible limitations or workarounds for the property value. Contents value container css-support example...
Page 95
Changing default html formatting 95 container property example message="the implementation of ex units is buggy in safari 1.0."/> changing default html formatting to change general code formatting preferences, use the code format category of the preferences dialog box. To change the format of specif...
Page 96
96 customizing code view.
Page 97
97 2 part 2 overview of extending dreamweaver learn the fundamental concepts of the macromedia dreamweaver 8 interface and how to extend dreamweaver to suit your web development needs. These fundamental concepts include the dreamweaver folders, extension apis, dreamweaver interface components, the d...
Page 99
99 3 chapter 3 extending dreamweaver typically, you create a dreamweaver 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 ■ interacting with...
Page 100
100 extending dreamweaver types of dreamweaver extensions the following list describes the types of dreamweaver extensions that are documented in this guide: insert bar object extensions create changes in the insert bar. An object is typically used to automate inserting code into a document. It can ...
Page 101
Types of dreamweaver extensions 101 server behavior extensions add blocks of server-side code (asp, jsp, or coldfusion) to the document. The server-side code performs tasks on the server when the document is viewed in a browser. Server behaviors appear on the plus ( + ) menu of the dreamweaver serve...
Page 102
102 extending dreamweaver code hints are menus that offer a typing shortcut by displaying a list of strings that potentially complete the string you are typing. If one of the strings in the menu matches the string that you started to type, you can select it to insert it in place of the string that y...
Page 103
Configuration folders and extensions 103 the configuration/shared folder does not correspond to a specific extension type. It is the central repository for utility functions, classes, and images that are used by more than one extension. The files in the configuration/shared/common folder are designe...
Page 104
104 extending dreamweaver multiuser configuration folders for the multiuser operating systems of windows xp, windows 2000, and macintosh os x, dreamweaver creates a separate configuration folder for each user in addition to the dreamweaver configuration folder. Any time dreamweaver or a javascript e...
Page 105
Extension apis 105 to reload extensions 1. Control-click (windows) or option-click (macintosh) the categories menu in the insert bar’s title bar. 2. Select reload extensions. Extension apis the extension apis provide you with the functions that dreamweaver calls to implement each type of extension. ...
Page 106
106 extending dreamweaver how dreamweaver processes javascript in extensions dreamweaver checks the configuration/extension_type folder during startup. If it encounters an extension file within the folder, dreamweaver processes the javascript by completing the following steps: ■ compiling everything...
Page 107
Localizing an extension 107 dreamweaver supports the use of event handlers within links. Event handlers in links must use syntax, as shown in the following example: link text plug-ins (set to play at all times) are supported in the body of extensions. The document.Write() statement, java applets, an...
Page 108
108 extending dreamweaver ■ do not write javascript code in the html files except for required event handlers. This eliminates the need to fix a bug multiple times for multiple translations after the html files are replicated and translated into other languages. Xml string files store all strings in...
Page 109
Working with the extension manager 109 localizable strings with embedded values some display strings have values embedded in them. You can use the errmsg() function to display these strings. You can find the errmsg() function, which is similar to the printf() function in c, in the string.Js file in ...
Page 110
110 extending dreamweaver.
Page 111
111 4 chapter 4 user interfaces for extensions most extensions are built to receive information from the user through a user interface (ui). For example, if you create a property inspector extension for the marquee tag, you need to create a way for the user to specify attributes like direction and h...
Page 112
112 user interfaces for extensions 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 title tag of your h...
Page 113
Using custom ui controls in extensions 113 in most cases, doctype statements must go on the first line of a document. However, to avoid conflicts with extension-specific directives that, in previous versions, were required to be on the first line of a file (such as the comment at the top of a proper...
Page 114
114 user interfaces for extensions editable select lists extension uis often contain pop-up lists that are defined using the select tag. In dreamweaver, you can make pop-up lists in extensions editable by adding editable= "true" to the select tag. To set a default value, set the edittext attribute a...
Page 115
Using custom ui controls in extensions 115 the following example creates a command extension that contains an editable select list using common javascript functions: to create the example: 1. Create a new blank file in a text editor. 2. Enter the following code: function getalert() { var i=document....
Page 116
116 user interfaces for extensions 3. Save the file as editableselecttest.Htm in the dreamweaver configuration/commands folder. To test the example: 1. Restart dreamweaver. 2. Select commands > editableselecttest. When you select a value from the list, an alert message displays the index of the valu...
Page 117
Using custom ui controls in extensions 117 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 dat...
Page 118
118 user interfaces for extensions any option tags that are placed inside the select tag are ignored. To add a database tree control to a dialog box, you can use the following sample code with appropriate substitutions for quoted variables: type="mmdatabasetree" connection="connectionname" noexpandb...
Page 119
Using custom ui controls in extensions 119 the following example creates a variable grid control that is 500 pixels wide, with five columns of various widths: name="paramlist" style="width:800px;" type="mmparameterlist" columns="name,sql data type,direction, default value,run-time value" columnwidth...
Page 120
120 user interfaces for extensions adding tree controls tree controls display data in a hierarchical format and let users expand and collapse nodes in the tree. The mm:treecontrol tag lets you create tree controls for any type of information; unlike the database tree control that is described in “ad...
Page 121
Using custom ui controls in extensions 121 mm:treecontrol tags have the following attributes: mm:treecolumn tags have the following attributes: for readability, treecolumn tags should follow immediately after the mm:treecontrol tag, as shown in the following example: ... Attribute name description n...
Page 122
122 user interfaces for extensions the mm:treenode attributes are described in the following table: for example, the following tree control has all its nodes expanded: manipulating content within a tree control tree controls and the nodes within them are implemented as html tags. They are parsed by ...
Page 123
Using custom ui controls in extensions 123 the following example adds a node to the top level of a tree: var tree = document.Mytreecontrol; //add a top-level node to the bottom of the tree tree.Innerhtml = tree.Innerhtml + ‘ value="node3">’; adding a child node to add a child node to the currently s...
Page 124
124 user interfaces for extensions you might want to keep a text box and a color picker synchronized. The following example creates a text box that synchronizes the color of the text box with the color of the color picker: onchange="document.Fgcolortext.Value=this.Value"> onblur="document.Fgcolorpic...
Page 125
Adding flash content to dreamweaver 125 in dreamweaver, open a new basic html file (this will be your command definition file). Between the opening and closing title tags, enter my flash movie so the head of your page reads as follows: now, save the file as my flash movie.Htm in the application conf...
Page 126
126 user interfaces for extensions 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...
Page 127
127 5 chapter 5 the dreamweaver document object model in macromedia dreamweaver 8, 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. A dom defines the composit...
Page 128
128 the dreamweaver document object model which document dom? It is important to distinguish between the dom of the user’s document and the dom of the extension. The information in this chapter applies to both types of dreamweaver documents, but the way that you reference each dom is different. If y...
Page 129
The dreamweaver dom 129 objects, properties, and methods of the dreamweaver dom the following table lists the objects, properties, methods, and events that the dreamweaver dom supports. Some properties are read-only when they are accessed as properties of a specific object. A bullet (•) indicates pr...
Page 130
130 the dreamweaver document object model form in addition to the properties that are available for all tags: tags:elements • (an array of button, checkbox, password, radio, reset, select, submit, text, file, hidden, image, and textarea objects) mmcolorbutton child objects by name • only those metho...
Page 131
The dreamweaver dom 131 properties and methods of the document object the following table details the properties and methods of the document object that are taken from dom level 1 and used in dreamweaver. A bullet (•) marks read-only properties. Option in addition to the properties that are availabl...
Page 132
132 the dreamweaver document object model properties and methods of html tag objects every html tag is represented by a javascript object. Tags are organized in a tree hierarchy, where tag x is a parent of tag y , if y falls completely within x ’s opening and closing tags ( x content y content more ...
Page 133
The dreamweaver dom 133 childnodes • a nodelist that contains all the immediate children of the tag. Tagname • the html name for the tag, such as img , a , or blink . This value always returns in uppercase letters. Attrname a string that contains the value of the specified tag attribute. Tag.Attrnam...
Page 134
134 the dreamweaver document object model properties and methods of text objects each contiguous block of text in an html document (for example, the text within a p tag) is represented by a javascript object. Text objects never have children. The following table describes the properties and methods ...
Page 135
The dreamweaver dom 135 properties and methods of comment objects a javascript object represents each html comment. The following table details the properties and methods of comment objects that are taken from dom level 1 and are used in dreamweaver. A bullet (•) marks read-only properties. The drea...
Page 136
136 the dreamweaver document object model to find the specific version of dreamweaver, check first for the existence of appversion and then for the version number, as shown in the following example: if (dreamweaver.Appversion && ¬ dreamweaver.Appversion.Indexof('3.01') != -1){ // execute code } the ...
Page 137
137 3 part 3 extension apis learn about functions that you need to write when you create new objects, toolbars, tag editors, floating panels, server behaviors, components, or server models. Chapter 6: insert bar objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 chapter 7: comma...
Page 139
139 6 chapter 6 insert bar objects in macromedia dreamweaver, 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, layers, and tables, by clicking icons or menu options. ...
Page 140
140 insert bar objects how object files work objects have the following components: ■ the html file that defines what is inserted into a document the head section of an object file contains javascript functions (or references external javascript files) that process form input from the body section a...
Page 141
The insert bar definition file 141 the insert bar definition file the configuration/objects/insertbar.Xml file defines the insert bar properties. This xml file contains definitions for each individual object, in the order in which the objects appear. The first time a user starts dreamweaver, the ins...
Page 142
142 insert bar objects insert bar definition tags the insertbar.Xml file contains the following tags and attributes: description this tag signals the content of the insert bar definition file. The closing tag specifies the end of the content. Attributes none. Example file="common\hyperlink.Htm"/> .....
Page 143
The insert bar definition file 143 description this tag defines a pop-up menu for the insert bar. Attributes id, image, {showif}, {name}, {folder} example id="dw_imagemenu" name="images" image="common\imagemenu.Gif" folder="images"> image="common\image.Gif" enabled="" showif="" file="common\image.Ht...
Page 144
144 insert bar objects description a checkbutton is a button that has a checked or unchecked state. When clicked, a checkbutton appears pressed in and highlighted. When it is unchecked, a checkbutton appears flat. Dreamweaver has mouse-over, pressed, mouse-over-while-pressed, and disabled- while-pre...
Page 145
The insert bar definition file 145 image="image_path” description this attribute specifies the path, relative to the dreamweaver configuration folder, to the icon file that appears on the insert bar. The icon can be in any format that dreamweaver can render, but typically it is in gif or jpeg file f...
Page 146
146 insert bar objects enabled="enabler" description this attribute specifies that the item is available to the user if the dw_enabler value is true . If you do not specify the enabled function, the item defaults to always enabled. The possible enablers are _servermodel_asp, _servermodel_aspnet, _se...
Page 147
The insert bar definition file 147 example command="dw.Showtagchooser()" file="file_path" description the file attribute specifies the path, relative to the dreamweaver configuration folder, of an object file. Dreamweaver derives the tooltip for the object icon from the title of the object file, unl...
Page 148
148 insert bar objects 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 ext...
Page 149
Modifying the insert bar 149 to change the order of categories in the insert bar: 1. Save a backup copy of insertbar.Xml (with a name such as insertbar.Backup.Xml). 2. Open the original insertbar.Xml file. 3. Find the category tag that corresponds to the category you want to move, and select that ta...
Page 150
150 insert bar objects 4. Edit the insertbar.Xml file to identify the location of these new files and set attributes (see “the insert bar definition file” on page 141 ) for the button’s appearance. 5. Restart dreamweaver or reload extensions. The new object appears on the insert bar in the specified...
Page 151
A simple insert object example 151 creating the html file the title of the object is specified between the opening and closing title tags. You also specify that the scripting language is javascript. To create the html file: 1. Create a new blank file. 2. Add the following code: 3. Save the file as s...
Page 152
152 insert bar objects next, decide whether to use objecttag() or insertobject() for the next function. The strikethrough object simply wraps the s tag around the selected text, so it doesn’t meet the criteria for using the insertobject() function (see “insertobject()” on page 162 ). Within the obje...
Page 153
A simple insert object example 153 to separate the html object definition file from the supporting javascript functions: 1. Create a new blank file. 2. Paste all the javascript functions into the file. 3. Remove the functions from strikethrough.Htm, and add the javascript filename to the src attribu...
Page 154
154 insert bar objects ■ each button tag in the xml file places an icon on the insert bar and connects it to the proper html file or function. To add the new object to the insert bar: 1. Find the following line near the beginning of the inserbar.Xml file: common" folder="common"> this line identifie...
Page 155
dw.Getfocus(true) == 'h...
Page 156
156 insert bar objects 2. Save the file as strikethrough.Htm. 3. Reload the extensions (see “reloading extensions” on page 104 ). To test the dialog box: 1. Click the red text checkbox. 2. Click ok to perform the objecttag() function, which adds the strike-through:.
Page 157
A simple insert object example 157 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 ...
Page 158
dw.Getfocus(true) == 'html'){ var upcasetag = (dw.Getpreferencestring("source format", "tags upper case", "") == 'true'); // manually wrap tags around selection. If (upcas...
Page 159
A simple insert object example 159 to edit insertbar.Xml: 1. Find the following line of code near the beginning of the file: string/"> the insertbar tag defines the beginning of all the insert bar contents. 2. After that line, add a new category tag for the editorial category you want to create, giv...
Page 160
160 insert bar objects 6. After the strikethrough object button tag, add the hypertext object, as follows: file="editorial\addblue.Htm"/> 7. End the pop-up menu with the closing tag. The following code shows your entire category with the pop-up menu and the two objects: image="editorial\strikethroug...
Page 161
The objects api 161 the objects api this section describes the functions in the objects api. You must define either the insertobject() or the objecttag() function. For details about these functions, see “insertobject()” on page 162 . The remaining functions are optional. Caninsertobject() availabili...
Page 162
162 insert bar objects returns dreamweaver expects nothing. Example the following example opens the myobjecthelp.Htm file in a browser; this file explains how to use the extension: function displayhelp(){ var myhelpfile = dw.Getconfigurationpath() + '/extensionshelp/myobjecthelp.Htm'; dw.Browsedocum...
Page 163
The objects api 163 description this function is required if the objecttag() function is not defined. It is called when the user clicks ok. It either inserts code into the user’s document and closes the dialog box or displays an error message and leaves the dialog box open. This works as an alternat...
Page 164
164 insert bar objects // do some document manipulation here. Exercise left to the reader } return errmsg; } objecttag() description the objecttag() and insertobject() functions are mutually exclusive: if both are defined in a document, the objecttag() function is used. For more information, see “in...
Page 165
The objects api 165 windowdimensions() description this function sets specific dimensions for the options dialog box. If this function is not defined, the window dimensions are computed automatically. Arguments platform ■ the value of the platform argument is either "macintosh" or "windows" , depend...
Page 166
166 insert bar objects.
Page 167
167 7 chapter 7 commands macromedia dreamweaver 8 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. Commands are html files. T...
Page 168
168 commands 4. Dreamweaver calls the commandbuttons() function, if defined, to determine which buttons appear on the right side of the options dialog box and what code should execute when the user clicks the buttons. 5. Dreamweaver scans the command file for a form tag. If a form exists, dreamweave...
Page 169
A simple command example 169 this example creates two files in the commands folder: change case.Htm, which contains the ui, and change case.Js, which contains the javascript code. If you prefer, you can create only the change case.Htm file and put the javascript code in the head section. Creating th...
Page 170
170 commands the contents of the title tag, make uppercase or lowercase , appears in the top bar of the dialog box. Within the form, a table with two cells controls the layout of the elements. Within the table cells are the two radio buttons, uppercase and lowercase. The uppercase button has the che...
Page 171
A simple command example 171 to determine whether the command should be active or dimmed: 1. Create a new blank file. 2. Add the following code: function canacceptcommand(){ var thedom = dw.Getdocumentdom(); // get the dom of the current document var thesel = thedom.Getselection(); // get start and ...
Page 172
thes...
Page 173
A simple command example 173 linking functions to the ok and cancel buttons when the user clicks ok or cancel, the extension needs to perform the appropriate action. You determine the appropriate action by specifying which javascript function to perform when either button is clicked. To link the ok ...
Page 174
174 commands // get the node that contains the selection. Var theselnode = thedom.Getselectednode(); // get the children of the selected node. Var thechildren = theselnode.Childnodes; var i = 0; if (theselnode.Haschildnodes()){ while (i if (thechildren[i].Nodetype == node.Text_node){ var seltext = t...
Page 175
A simple command example 175 the changecase() function first tests the property document.Forms[0].Elements[0].Checked . The document.Forms[0].Elements[0] property refers to the first element in the first form of the current document object, which is the ui for the extension. The checked property has...
Page 176
176 commands testing the extension after you place the files in the commands folder, you can test the extension. To test the extension: 1. Restart dreamweaver or reload extensions. For information on reloading extensions, see “reloading extensions” on page 104 . The change case entry should now appe...
Page 177
The commands api 177 example the following example of the canacceptcommand() function makes the command available only when the selection is a table: function canacceptcommand(){ var retval=false; var selobj=dw.Getdocumentdom.Getselectednode(); return (selobj.Nodetype == node.Element_node && ¬ selob...
Page 178
178 commands isdomrequired() description this function determines whether the command requires a valid dom to operate. If this function returns a value of true or if the function is not defined, dreamweaver assumes that the command requires a valid dom and synchronizes the design and code views of t...
Page 179
The commands api 179 arguments platform ■ the value of the platform argument is either "macintosh" or "windows" , depending on the user’s platform. Returns dreamweaver expects a string of the form "widthinpixels,heightinpixels" . The returned dimensions are smaller than the size of the entire dialog...
Page 180
180 commands.
Page 181
181 8 chapter 8 menus and menu commands macromedia dreamweaver 8 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 remo...
Page 182
182 menus and menu commands 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. A menu bar (tagged with opening and clo...
Page 183
About the menus.Xml file 183 ■ id the menu id for the menu bar. Each menu id in the menus.Xml file should be unique. ■ platform indicates that the menu bar should appear only on the given platform. Valid values are "win" and "mac" . Contents this tag must contain one or more menu tags. Container non...
Page 184
184 menus and menu commands ■ showif specifies that the menu should appear only if the given dreamweaver enabler is the value true . The possible enablers are: _servermodel_asp, _servermodel_aspnet, _servermodel_jsp, _servermodel_cfml (for all versions of macromedia coldfusion), _servermodel_cfml_ud...
Page 185
About the menus.Xml file 185 ■ key the keyboard shortcut for the command, if any. Use the following strings to specify modifier keys: ■ cmd specifies the control key (windows) or command key (macintosh). ■ alt and opt interchangeably specify the alt key (windows) or option key (macintosh). ■ shift s...
Page 186
186 menus and menu commands ■ checked a javascript expression that indicates whether the menu command has a check mark next to it in the menu; if the expression evaluates as true, the item appears with a check mark. ■ dynamic if present, indicates that a menu command is to be determined dynamically,...
Page 187
About the menus.Xml file 187 attributes {app} ■ app the name of the application in which the separator is shown. Not currently used. Contents none (empty tag). Container this tag must be contained in a menu tag. Example description specifies a shortcut list in the menus.Xml file. Attributes {app}, i...
Page 188
188 menus and menu commands description specifies a keyboard shortcut in the menus.Xml file. Attributes key, {app}, {platform}, {file}, {arguments}, {command}, id, {name} ■ key the key combination that activates the keyboard shortcut. For syntax details, see . ■ app the name of the application in wh...
Page 189
About the menus.Xml file 189 description represents one tool; it contains all the shortcuts for the tool as subtags in the menus.Xml file. Attributes {name}, id ■ name a localized version of the tool name. ■ id the internal tool identifier that identifies the tool to which the shortcuts apply. Conte...
Page 190
190 menus and menu commands example = 0.50" id ="dwtools_zoom_50" /> description contains the key combination to activate the tool. Attributes {name}, key, id ■ name a localized version of the action. ■ key the key combination used to activate the tool. For syntax details, see . ■ id a unique id use...
Page 191
Changing menus and menu commands 191 container this tag must be contained in a tool tag. Example id="dwtools_hand_override" /> changing menus and menu commands by editing the menus.Xml file, you can move menu commands within a menu or from one menu to another, add separators to or remove them from m...
Page 192
192 menus and menu commands to move a menu: 1. Quit dreamweaver. 2. Make a backup copy of the menus.Xml file. 3. Open menus.Xml in a text editor such as bbedit, homesite, or wordpad. (don’t open it in dreamweaver.) 4. Cut an entire menu and its contents, from the opening menu tag to the closing /men...
Page 193
Changing menus and menu commands 193 3. Open menus.Xml in a text editor such as bbedit, homesite, or wordpad. (don’t open it in dreamweaver.) 4. Look at the keyboard shortcut matrix (available from the dreamweaver support center) and find a shortcut that’s not being used or one that you want to reas...
Page 194
194 menus and menu commands ■ items in the formats pop-up menu for a binding in the bindings panel are specified in formats.Xml files, in subfolders of the serverformats folder. You can add entries to this menu from inside dreamweaver by using the add format dialog box. ■ the tag library editor dial...
Page 195
Menu commands 195 the following table lists the files you use to create a menu command. 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 me...
Page 196
196 menus and menu commands the command is renamed in the commands menu. To delete a command you’ve created: 1. Select commands > edit command list. A dialog box appears, listing all the commands you can delete. (commands that are in the default commands menu don’t appear on this list and can’t be d...
Page 197
A simple menu command example 197 5. Dreamweaver calls the receivearguments() function, if defined, in the selected menu commands file to let the command process any arguments that pass from the menu item. 6. Dreamweaver calls the commandbuttons() function, if defined, to determine which buttons app...
Page 198
198 menus and menu commands creating the menu commands add the following html menu tags to the end of the menus.Xml file to create a menu called mymenu that contains the undo and redo menu items. Arguments="'undo'" id="mymenu_edit_undo" /> arguments="'redo'" id="mymenu_edit_redo" /> arguments="'undo...
Page 199
A simple menu command example 199 function canacceptcommand() { var selarray; if (arguments.Length != 1) return false; var bresult = false; var whattodo = arguments[0]; if (whattodo == "undo") { bresult = dw.Canundo(); } else if (whattodo == "redo") { bresult = dw.Canredo(); } return bresult; } rece...
Page 200
200 menus and menu commands in this command, the receivearguments() function processes the arguments and executes the command. More complex menu commands might call different functions to execute the command. For example, the following code checks whether the first argument is "foo" ; if it is, it c...
Page 201
A dynamic menu example 201 the setmenutext() function looks like the following example code: 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 ...
Page 202
202 menus and menu commands creating the dynamic menu items the following menu tags in the menus.Xml file define the preview in browser submenu of the file menu: file="menus/mm/pib_dynamic.Htm" arguments="'no browsers'" id="dwmenu_file_pib_default" /> command="dw.Editbrowserlist()" id="dwmenu_file_p...
Page 203
A dynamic menu example 203 for (i=0; i { browsers[j] = new string(pib[i]); if (dw.Getprimarybrowser() == pib[i+1]) browsers[j] += "\tf12"; else if (dw.Getsecondarybrowser() == pib[i+1]) browsers[j] += "\tcmd+f12"; browsers[j] += ";id='"+escquotes(pib[i])+"'"; if (itemid == "dwpopup_pib_default") bro...
Page 204
arguments[0] == 'secondary') return havepreviewtarget(); return havepreviewtarget() && (pib.Length > 0); } the canacceptcommand() function in the pib_dynamic.Js file again retrie...
Page 205
A dynamic menu example 205 var selfile = selfiles[i]; // for server connections, the files will // already be remote urls. If (selfile.Indexof("://") == (-1)) { var urlprefix = "file:///"; var strtemp = selfile.Substr(urlprefix.Length); if (selfile.Indexof(urlprefix) == -1) bhavepreviewtarget = fals...
Page 206
206 menus and menu commands the havepreviewtarget() function sets the value bhavepreviewtarget to false as the default return value. The function performs two basic tests calling the dw.Getfocus() function to determine what part of the application currently has input focus. The first test checks whe...
Page 207
whichbrowser == 'secondary') { // get the path of the selected browser if (whichbr...
Page 208
208 menus and menu commands if (whichbrowser == 'primary') { result = window.Confirm(msg_noprimarybrowserdefined); } else if (whichbrowser == 'secondary') { result = window.Confirm(msg_nosecondarybrowserdefined); } // if the user clicked ok, show the prefs dialog with the browser panel. If (result) ...
Page 209
The menu commands api 209 if the user pressed the shortcut keys (f12 or ctrl+f12) and no primary or secondary browser has been specified, a dialog box appears to inform the user. If the user clicks ok, the function calls the function dw.Showpreferencesdialog() with the browsers argument to let the u...
Page 210
210 menus and menu commands 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 clicke...
Page 211
The menu commands api 211 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 getdynamiccontents() function specifies is the only argument. Otherwise, if the argumen...
Page 212
212 menus and menu commands receivearguments() description processes any arguments passed from a menu item or from the dw.Runcommand() function. If it is a dynamic menu item, it processes the dynamic menu item id. Arguments {arg1}, {arg2},...{argn} ■ if it is a dynamic menu item, the unique id that ...
Page 213
The menu commands api 213 ■ if the arguments attribute is defined for a menuitem tag, the value of that attribute passes to the setmenutext() function (and to the canacceptcommand() , iscommandchecked() , and receivearguments() functions) as one or more arguments. The arguments attribute is useful f...
Page 214
214 menus and menu commands example the following example of windowdimensions() sets the dimensions of the parameters dialog box to 648 x 520 pixels: function windowdimensions(){ return "648,520"; }.
Page 215
215 9 chapter 9 toolbars you can create a toolbar for macromedia dreamweaver 8 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...
Page 216
216 toolbars some types of toolbar controls, such as push buttons and pop-up menus, have icon images associated with them. 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...
Page 217
How toolbars work 217 you cannot drag and drop toolbars between the document window and the dreamweaver workspace frame. ■ toolbars remain a fixed size. A toolbar does not shrink if the container shrinks or if other toolbars are placed next to it. ■ you can show or hide toolbars from the view >toolb...
Page 218
218 toolbars a simple toolbar command file this simple example implements a title text box item as seen on the dreamweaver document toolbar. The text box item lets the user enter a name for the current dreamweaver document. You can implement this toolbar example by performing the following steps: ■ ...
Page 219
A simple toolbar command file 219 canacceptcommand(): enable the toolbar item the canacceptcommand() function consists of one line of code that checks to see whether there is a current document object model (dom) and whether the document is parsed as html. The function returns the results of those t...
Page 220
220 toolbars the function is as follows: function getcurrentvalue() { var title = ""; var dom = dw.Getdocumentdom(); if (dom) title = dom.Gettitle(); return title; } until the user enters a title for the document, the gettitle() function returns untitled document, which appears in the text box. Afte...
Page 221
The toolbar definition file 221 the following section describes each of the toolbar tags. Description defines a toolbar. Dreamweaver displays the items and separators from left to right in the specified order, laying out the items automatically. The toolbar file does not specify control over the spa...
Page 222
222 toolbars ■ container="mainframe" or "document" defaults to "mainframe" . Specifies where the toolbar should dock in the dreamweaver workspace on windows. If the container is set to "mainframe" , the toolbar appears in the outer workspace frame and operates on the front document. If the container...
Page 223
The toolbar definition file 223 ■ relativeto="toolbar_id" this attribute is required if the initialposition attribute specifies below . Otherwise, it is ignored. Specifies the id of the toolbar below which this toolbar should be positioned. Contents the toolbar tag contains include , itemref , and s...
Page 224
224 toolbars 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 226 . Attributes the attributes vary, depending on ...
Page 225
The toolbar definition file 225 ■ showif="script" specifies that this item appears on the toolbar only if the specified script returns a true value. For example, you can use showif to show certain buttons only in a given application or only when a page is written in a server-side language such as co...
Page 226
226 toolbars toolbar item tags each type of toolbar item has its own tag and set of required and optional attributes. You can define toolbar items either inside or outside of toolbars. In general, it is better to define them outside of toolbars and refer to them within toolbars using the itemref tag...
Page 227
Toolbar item tags 227 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. When it is not checked, it appears flat. Dreamweaver implements the following states for th...
Page 228
228 toolbars radio buttons act the same as the code view, design view, and split view buttons on the dreamweaver document toolbar. Attributes id, image, tooltip, checked, command, {showif}, {disabledimage}, {overimage}, {label}, {file}, {domrequired}, {enabled}, {update}, {arguments} for a descripti...
Page 229
dw.Getfocus() == 'html'" menuid="dwcodenavpopup" u...
Page 230
230 toolbars description a combo box is an editable pop-up menu that executes its command when you select an entry or when the user makes an edit in the text box and switches focus. The menu looks and acts the same as the font control on the text property inspector, except it’s a standard size inste...
Page 231
Toolbar item tags 231 container the toolbar tag or the toolbarset tag. Example label="title: " tooltip="document title" width="150" file="toolbars/mm/edittitle.Htm"/> description a color picker is a panel of colors that does not have an associated text box that executes its command when the user sel...
Page 232
232 toolbars item tag attributes the attributes for toolbar item tags have the following meanings: id="unique_id" required. The id attribute is an identifier for the toolbar item. The id attribute must be unique within the current file and all files that are included within the current file. The ite...
Page 233
Item tag attributes 233 if an icon is specified for a color picker, the icon replaces the color picker entirely. If the colorrect attribute is also set, the current color appears on top of the icon in the specified rectangle. Example image="toolbars/images/mm/codenav.Gif" disabledimage="image_path" ...
Page 234
234 toolbars label="label string" optional. This attribute specifies a label that displays next to the item. Dreamweaver does not automatically add a colon to labels. Labels for nonbutton items are always positioned on the left of the item. Dreamweaver places labels for buttons, check buttons, radio...
Page 235
Item tag attributes 235 file="command_file_path" required for pop-up menus and combo boxes. The file attribute is optional for other types of items. The file attribute specifies the path, relative to the configuration folder, of a command file that contains javascript functions to populate, update, ...
Page 236
236 toolbars example checked="dw.Getdocumentdom() != null && dw.Getdocumentdom().Getview() == 'code'" value="script" this attribute is required for pop-up menus, combo boxes, text boxes, and color pickers. Dreamweaver ignores the value attribute for other types of items. To determine what value to d...
Page 237
Item tag attributes 237 the following list shows the possible handlers for update_frequency_list , from least to most frequent. If you do not specify the update attribute, the update frequency defaults to onedit frequency. You can specify multiple update frequencies, separated by commas. The handler...
Page 238
238 toolbars example command="dw.Togglelivedebug()" arguments="argument_list" optional. This attribute specifies the comma-separated list of arguments to pass to the receivearguments() function in a toolbar command file. If you do not specify the arguments attribute, dreamweaver passes the id of the...
Page 239
The toolbar command api 239 canacceptcommand() availability dreamweaver mx. Description determines whether the toolbar item is enabled. The enabled state is the default condition for an item, so you should not define this function unless it returns a false value in at least one case. Arguments for p...
Page 240
240 toolbars getcurrentvalue() availability dreamweaver mx. Description returns the current value to display in the item. Dreamweaver calls the getcurrentvalue() function for pop-up menus, combo boxes, text boxes, and color pickers. For pop-up menus, the current value should be one of the items in t...
Page 241
The toolbar command api 241 the name getdynamiccontent() is a misnomer because this function should be used even if the list of entries in the menu is fixed. For example, the text_size.Htm file in the configuration/menus/mm folder is not a dynamic menu; it is designed to be called from each one of a...
Page 242
242 toolbars getmenuid() availability dreamweaver mx. Description only valid for menu buttons. Dreamweaver calls the getmenuid() function to get the id of the menu that should appear when the user clicks the button. Arguments none. Returns dreamweaver expects a string that contains a menu id, which ...
Page 243
The toolbar command api 243 menuid = 'dwbrowseoptionspopup'; } } return menuid; } getupdatefrequency() availability dreamweaver mx. Description specifies how often to run the handlers for the enabled , checked , showif , and value attributes to update the visible state of the item. You must specify ...
Page 244
244 toolbars description returns a value that specifies whether the item is selected. For a button, checked means that the button appears on or depressed. The iscommandchecked() function is equivalent to the checked attribute in a toolbar item tag. Arguments for pop-up menus, combo boxes, text boxes...
Page 245
The toolbar command api 245 else if (style == "heading 6") bchecked = (textformat == "h6"); else bchecked = (dw.Cssstylepalette.Getselectedstyle() == style); return bchecked; } isdomrequired() availability dreamweaver mx. Description specifies whether the toolbar command requires a valid dom to oper...
Page 246
246 toolbars arguments for pop-up menus, combo boxes, text boxes, and color pickers, the first argument is the current value within the control. The getdynamiccontent() function can optionally attach individual ids to items within a pop-up menu. If the selected item in the pop-up menu has an id atta...
Page 247
The toolbar command api 247 returns dreamweaver expects a boolean value: true if the item appears; false otherwise. Example function showif() { var retval = false; var dom = dw.Getdocumentdom(); if(dom) { var view = dom.Getview(); if(view == ‘design’) { retval = true; } } return retval; }.
Page 248
248 toolbars.
Page 249
249 10 chapter 10 reports macromedia dreamweaver 8 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 8. You can access site reports only through th...
Page 250
250 reports how site reports work 1. 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. 2. The user selects which files to run the selected reports on using the report o...
Page 251
Site reports 251 you create this extension by performing the following steps: ■ creating the report definition ■ writing the javascript code this example creates two files in the html reports folder: list images.Htm, which contains the report definition, and list images.Js, which contains the javasc...
Page 252
252 reports writing the javascript code dreamweaver includes the reports.Js file. You can call any of the functions in reports.Js. However, you also have to create the javascript file that contains any functions that are specific to your custom site report. To create the javascript file: 1. Create t...
Page 253
Stand-alone reports 253 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,...
Page 254
254 reports 5. To call the additem() function, the processfile() function needs to have access to the results window that was created by the stand-alone command. The processfile() function can also call the stopprocessing() function of the results window object to stop processing the list of files. ...
Page 255
Stand-alone reports 255 writing the javascript code next, you create the javascript file that contains any functions that are specific to your stand- alone report. To create the javascript file: 1. Create the listimages.Js file in the configuration/commands folder with the following code: function s...
Page 256
256 reports the reports api the only required function for the reports api is the processfile() function. All other functions are optional. Processfile() availability dreamweaver 4. Description this function is called when there is a file to process. The report command should process the file withou...
Page 257
The reports api 257 returns dreamweaver expects a boolean value: true if the report runs successfully; false if target is excluded from the report run. Endreporting() availability dreamweaver 4. Description this function is called at the end of the report process. Arguments none. Returns dreamweaver...
Page 258
258 reports example the following instance of the commandbuttons() function defines the ok, cancel, and help buttons. Function commandbuttons(){ return new array("ok" , "docommand()" , "cancel" , ¬ "window.Close()" , "help" , "showhelp()"); } configuresettings() availability dreamweaver 4. Descripti...
Page 259
The reports api 259 returns dreamweaver expects a string of the form "widthinpixels,heightinpixels" . The returned dimensions are smaller than the size of the entire dialog box because they do not include the area for the ok and cancel buttons. If the returned dimensions do not accommodate all optio...
Page 260
260 reports.
Page 261
261 11 chapter 11 tag libraries and editors macromedia dreamweaver 8 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 ed...
Page 262
262 tag libraries and editors tag library file format a tag library consists of a single root file, the taglibraries.Vtm file, that lists every installed tag, plus a vtml file for each tag in the tag library. The taglibraries.Vtm file functions as a table of contents and contains pointers to each in...
Page 263
Tag library file format 263 servermodel="aspnet" prefix=" id="dwtaglibrary_aspnet"> servermodel="aspnet" prefix=" id="dwtaglibrary_aspnet"> id="dwtaglibrary_aspnet"> the taglibrary tag groups one or more tags into a tag library. When you import tags or create a new set of tags, you can group them in...
Page 264
264 tag libraries and editors the following table lists tagref attributes : because the tagref.Prefix attribute can override the taglibrary.Prefix attribute, the relationship between the two attributes can be confusing. The following table shows the relationship between the taglibrary.Prefix and tag...
Page 265
Tag library file format 265 to define tags, dreamweaver uses a modified version of the macromedia vtml file format. The following example demonstrates all the elements that dreamweaver must use to define an individual tag: nlbeforecontents=0 nlaftercontents=0 nlaftertag=1 /> nlbeforecontents=0 nlaft...
Page 266
266 tag libraries and editors the following table lists the attributes that define tags: attribute description mandatory/ optional tag.Bind used by the data binding panel. When you select a tag of this type, the bind attribute indicates the default attribute for data binding. Optional tag.Casesensit...
Page 267
Tag library file format 267 tagformat.Nlaftertag the number of newline characters to insert after this tag. Optional attrib.Name the name of the attribute, as it appears in the source code. Mandatory attrib.Type if omitted, attrib.Type is "text" . It can have the following values: text —free text co...
Page 268
268 tag libraries and editors 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. You can do this by using the tag library editor dialog...
Page 269
The tag chooser 269 the following table lists the tags that are available for use in the tagchooser.Xml files: the category tag represents all other nodes in the tree view under the tclibrary ’s node, as shown in the following table: tag description mandatory/ optional tclibrary the tag is the outer...
Page 270
270 tag libraries and editors the following table lists the attributes of the element tag, which represents the tag to insert: a simple example of creating a new tag editor the examples in this section use cfweather , a hypothetical coldfusion tag designed to extract the current temperature from a w...
Page 271
A simple example of creating a new tag editor 271 registering the tag in the tag library for dreamweaver to recognize the new tag, it must be identified in the taglibraries.Vtm file, which is located in the configuration/taglibraries folder. However, if the user is on multiuser platform (such as win...
Page 272
272 tag libraries and editors creating a tag definition (vtml) file when a user selects a registered tag using the tag chooser or a tag editor, dreamweaver searches for a corresponding vtml file for the tag definition. To create a tag definition file: 1. In a text editor, create a file with the foll...
Page 273
A simple example of creating a new tag editor 273 // inspecttag() api function defined (required by all tag editors) function inspecttag(tagnodeobj) { // call into a common library version of inspecttagcommon defined // in tagdialogcmns.Js (note that it's been included) // for more information about...
Page 274
274 tag libraries and editors id="attr:cfargument:tempaturescale" attname="tempaturescale" editable="false" style="width:200px"> id="attr:cfargument:tempaturescale" attname="tempaturescale" editable="false" style="width:200px"> 2. Verify that the tag editor is working by performing the following ste...
Page 275
Tag editor apis 275 ■ the cfweather tag appears in the list box on the right. ■ select cfweather, and click the insert button. The tag editor should appear. Tag editor apis in order to create a new tag editor, you must provide an implementation for the inspecttag() , validatetag() , and applytag() f...
Page 276
276 tag libraries and editors 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. Arguments none. Returns dreamweaver expects a boolean value: true ...
Page 277
Tag editor apis 277 example continuing the cfweather example, in the following code, if the user changes the zip code from 94065 to 53402, in order to update the user’s document to use the new zip code, the dom object must be updated: function applytag(tag) { tag.Zip = document.Forms[0].Zip.Value }.
Page 278
278 tag libraries and editors.
Page 279
279 12 chapter 12 property inspectors the property inspector is perhaps the most familiar floating panel in the macromedia dreamweaver 8 interface. It is indispensable for defining, reviewing, and changing the name, size, appearance, and other attributes of the selection as well as for launching int...
Page 280
280 property inspectors this comment has the following elements: ■ the servermodel element specifies that dreamweaver should load this property inspector only when the server model specified is active. ■ the tagnameorkeyword element is the tag to be inspected or one of the following keywords: *comme...
Page 281
How property inspector files work 281 how property inspector files work at start up, dreamweaver reads the first line of each htm and html file in the configuration/inspectors folder, searching for the comment string that defines the type, priority, and selection type of a property inspector. Files ...
Page 282
282 property inspectors a simple property inspector example the following property inspector inspects the marquee tag, which is available only in microsoft internet explorer. The example lets you set the value of the direction attribute in the property inspector. To set the value of the marquee tag’...
Page 283
A simple property inspector example 283 z-index:16; left: 44px; top: 5px">marquee top: 3px; width: 431px; height: 32px"> onchange="setmarqueetag()"> left right onchange="setmarqueetag()"> left right 5. Save the file as marquee.Htm in the configuration/inspectors folder. Writing the javascript code y...
Page 284
284 property inspectors // 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. // var t...
Page 285
The property inspector api 285 creating the image you can optionally create the image that appears in the property inspector. To create the image: 1. Create an image that is 36 pixels wide and 36 pixels high. 2. Save the image as marquee.Gif in configuration/inspectors. In general, you can save imag...
Page 286
286 property inspectors arguments none. Returns dreamweaver expects a boolean value: true if the inspector can inspect the current selection; false otherwise. Example the following instance of the caninspectselection() function returns a true value if the selection contains the classid attribute, an...
Page 287
The property inspector api 287 inspectselection() description refreshes the contents of the text fields based on the attributes of the current selection. Arguments maxormin ■ the maxormin argument is either max or min , depending on whether the property inspector is in its expanded or contracted sta...
Page 288
288 property inspectors.
Page 289
289 13 chapter 13 floating panels you can create any kind of floating panel or inspector without the size and layout limitations of property inspectors. Although a custom property inspector should be your first choice for setting the properties of the current selection, custom floating panels offer ...
Page 290
290 floating panels 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: ■ custom floating panels displa...
Page 291
A simple floating panel example 291 4. When the floating panel is visible, the following actions occur: ■ when the selection changes, the selectionchanged() function is called, if it is defined. ■ when the user makes changes to the document, the documentedited() function is called, if it is defined....
Page 292
292 floating panels to create the html file header: 1. Create a new blank document. 2. Enter the following: the extension defines two floating panels that display either (no script selected) if the user has not selected a script marker or the javascript code that underlies a selected script marker. ...
Page 293
A simple floating panel example 293 both div tags use the style attribute to specify the position ( absolute ), size ( width:422px and height:181px ), and default visibility setting ( visible ) of the floating panels. The blanklayer panel uses the center attribute and a series of break ( br ) tags t...
Page 294
294 floating panels the selectionchanged() function first calls the dw.Getdocumentdom() function to get the document object model (dom) for the user’s document. It then calls the getselectednode() function to see if the selected node for that document is, first, an element and, second, a script tag....
Page 295
A simple floating panel example 295 if the selected node is not an element, or it is not a script tag, the selectionchanged() function makes the blanklayer floating panel visible and hides the scriptlayer panel. The blanklayer floating panel displays the text (no script selected) , as shown in the f...
Page 296
296 floating panels updatescript(): write back changes the updatescript() function writes back the selected script when an onblur event occurs in the textarea of the scriptlayer panel. The textarea form element contains the javascript code, and the onblur event occurs when textarea loses input focus...
Page 297
The floating panel api 297 if you select a script marker in design view for the current document and then select the script editor menu item, it 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 marke...
Page 298
298 floating panels example // the following instance of displayhelp() opens // in a browser a file that explains how to use // the extension. Function displayhelp(){ var myhelpfile = dw.Getconfigurationpath() + '/extensionshelp/superduperhelp.Htm'; dw.Browsedocument(myhelpfile); } documentedited() ...
Page 299
The floating panel api 299 getdockingside() availability dreamweaver mx. Description specifies the locations at which a floating panel can dock. The function returns a string that contains some combination of the words "left" , "right" , "top" , and "bottom" . If the label is in the string, you can ...
Page 300
300 floating panels example the following example of the initialposition() function specifies that the first time the floating panel appears, it should be 420 pixels from the left and 20 pixels from the top in windows, and 390 pixels from the left side of the screen and 20 pixels from the top of the...
Page 301
The floating panel api 301 isatarget() availability dreamweaver mx (windows only). Description specifies whether other panels can dock to this floating panel. If the isatarget() function is not specified, dreamweaver prevents other panels from docking to this one. Dreamweaver calls this function whe...
Page 302
302 floating panels isresizable() availability dreamweaver 4. Description determines whether a user can resize a floating panel. If the function is not defined or returns a true value, the user can resize the floating panel. If the function returns a false value, the user cannot resize the floating ...
Page 303
The floating panel api 303 example the following example of selectionchanged() shows a different layer in the floating panel, depending on whether the selection is a script marker. If the selection is a script marker, dreamweaver makes the script layer visible. Otherwise, dreamweaver makes the blank...
Page 304
304 floating panels /* create a flag that specifies whether an edit is being processed, and set it to false. */ document.Running = false; /* this function called when document is edited */ function documentedited(){ /* create a list of all the layers to be processed */ var dom = dw.Getdocumentdom();...
Page 305
305 14 chapter 14 behaviors behaviors let users make their html pages interactive. They offer web designers an easy way to assign actions to page elements by filling in an html form. The term behavior refers to the combination of an event (such as onclick , onload , or onsubmit ) and an action (such...
Page 306
306 behaviors how behaviors work when a user selects an html element in a dreamweaver document and clicks the plus (+) button on the behaviors panel, the following events occur: 1. Dreamweaver calls the canacceptbehavior() function in each action file to see whether this action is appropriate for th...
Page 307
A simple behavior example 307 inserting multiple functions in the user’s file actions can insert multiple functions—the main behavior function plus any number of helper functions—into the head section. Two or more behaviors can even share helper functions as long as the function definition is exactl...
Page 308
308 behaviors creating the behavior extension the following code presents a relatively simple example. It checks the brand of the browser and goes to one page if the brand is netscape navigator and another if the brand is microsoft internet explorer. This code can easily be expanded to check for oth...
Page 309
A simple behavior example 309 "\')"; }else{ return "please enter urls in both fields." } } // extract the arguments from the function call // in the event handler and repopulate the // parameters form function inspectbehavior(fncall){ var argarray = gettokens(fncall, "()',"); var nsurl = unescape(ar...
Page 310
310 behaviors microsoft internet explorer: onclick="browseforurls('ieurl')"> 3. Save the file as configuration/behaviors/actions/browserdependenturl.Htm. Creating the html files to browse next, you create the html files to browse, the file to go to if the browser is internet explorer, and the file t...
Page 311
A simple behavior example 311 4. Save the file as netscapecontent.Htm in the same directory as the iecontent.Htm file. 5. Restart dreamweaver. 6. Create a new html file with the following content: /p> "http://www.W3.Org/tr/html4/loose.Dtd"> 7. Save the file as whichbrowser.Htm in the same directory ...
Page 312
312 behaviors onload="checkbrowserbrand('netscaptecontent.Htm','iecontent.Htm')"> testing the behavior finally, you can test the behavior. To test the behavior: 1. View the file whichbrowser.Htm in your browser. Depending on which browser you are using, either iecontent.Htm or netscapecontent.Htm ap...
Page 313
The behaviors api 313 returns dreamweaver expects a string that contains the function call to be inserted in the user’s document, usually after accepting parameters from the user. If the applybehavior() function determines that the user made an invalid entry, the function can return an error string ...
Page 314
314 behaviors behaviorfunction() description this function inserts one or more functions—surrounded by the following tags, if they don’t yet exist—into the head section of the user’s document: arguments none. Returns dreamweaver expects either a string that contains the javascript functions or a str...
Page 315
The behaviors api 315 canacceptbehavior() description this function determines whether the action is allowed for the selected html element and specifies the default event that should trigger the action. Can also check for the existence of certain objects (such as swf files) in the user’s document an...
Page 316
316 behaviors 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 instanc...
Page 317
The behaviors api 317 identifybehaviorarguments() description this function identifies arguments from a behavior function call as navigation links, dependent files, urls, netscape navigator 4.0-style references, or object names so that urls in behaviors can update if the user saves the document to a...
Page 318
318 behaviors example this simple example of the identifybehaviorarguments() function works for the open browser window behavior action, which returns a function that always has three arguments (the url to open, the name of the new window, and the list of window properties): function identifybehavio...
Page 319
The behaviors api 319 inspectbehavior() description this function inspects the function call for a previously applied behavior in the user’s document and sets the values of the options in the parameters dialog box accordingly. If the inspectbehavior() function is not defined, the default option valu...
Page 320
320 behaviors windowdimensions() description this function sets specific dimensions for the parameters dialog box. If this function is not defined, the window dimensions are computed automatically. Arguments platform ■ the value of the argument is either "macintosh" or "windows" , depending on the u...
Page 321
321 15 chapter 15 server behaviors macromedia dreamweaver 8 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 re...
Page 322
322 server behaviors ■ runtime code runtime code is the set of code blocks that are added to a document when a server behavior is applied. These code blocks usually include some server-side code, such as asp script that is enclosed in tags. ■ participants your server behavior extension inserts code ...
Page 323
Dreamweaver architecture 323 group files group files contain a list of participants, and participant files have all server-model-specific code data. Participant files can be used by more than one extension, so several group files can refer to the same participant file. The following example shows a ...
Page 324
324 server behaviors when dreamweaver adds a server behavior to a document, it needs to have detailed information, including where to insert the code, what the code looks like, and what parameters the dreamweaver author or data replaced at runtime. Each participant edml file describes these details ...
Page 325
A simple server behavior example 325 creating the dynamic page document first, you create a new asp document. To create a new dynamic page document: 1. In dreamweaver, select the file > new menu option. 2. In the new document dialog box, select category: dynamic page and dynamic page: asp javascript...
Page 326
326 server behaviors 6. In the relative position pop-up menu, select after the selection. 7. Click ok. In the server behaviors panel, you can see that the plus (+) menu contains the new server behavior in the pop-up list. Also, in the installation folder for your dreamweaver files, the configuration...
Page 327
How the server behavior api functions are called 327 sometimes during analysis, a single tag in the user’s document is identified by two or more behaviors as being an instance of that behavior. For example, the findserverbehaviors() function for the dynamic attribute behavior might detect an instanc...
Page 328
328 server behaviors ■ if the user edits an existing server behavior by double-clicking it, dreamweaver displays the dialog box, executes the onload handler on the body tag, if one exists, and then calls the inspectserverbehavior() function. The inspectserverbehavior() function populates the form el...
Page 329
The server behavior api 329 the server behavior api you can manage server behaviors with the following api functions. Analyzeserverbehavior() availability dreamweaver ultradev 1 description lets server behaviors set their incomplete and deleted properties. After the findserverbehaviors() function is...
Page 330
330 server behaviors arguments serverbehavior , [serverbehaviorarray] ■ the serverbehavior argument is a javascript object that represents the behavior to analyze. ■ the [serverbehaviorarray] argument is an array of javascript objects that represents all the server behaviors that are found on a page...
Page 331
The server behavior api 331 canapplyserverbehavior() availability dreamweaver ultradev 1. Description determines whether a behavior can be applied. Dreamweaver calls this function before the server behaviors dialog box appears. If this function returns a true value, the server behaviors dialog box a...
Page 332
332 server behaviors arguments serverbehavior ■ the serverbehavior javascript object represents the behavior. Returns dreamweaver expects a boolean value: true if the behavior copies successfully to the clipboard; false otherwise. Deleteserverbehavior() availability dreamweaver ultradev 1. Descripti...
Page 333
The server behavior api 333 example // the following instance of displayhelp() opens // in a browser a file that explains how to use // the extension. Function displayhelp(){ var myhelpfile = dw.Getconfigurationpath() + '/extensionshelp/superduperhelp.Htm'; dw.Browsedocument(myhelpfile); } findserve...
Page 334
334 server behaviors description determines the settings for the server behavior dialog box, based on the specified behavior object. Dreamweaver calls the inspectserverbehavior() function when a user opens a server behavior dialog box. Dreamweaver calls this function only when a user edits an existi...
Page 335
Server behavior implementation functions 335 returns dreamweaver expects a boolean value: true if the behavior pastes successfully from the clipboard; false otherwise. Server behavior implementation functions these functions can be added or edited within the html script files or the specified javasc...
Page 336
336 server behaviors dwscripts.Applysb() availability dreamweaver mx (this function replaces the applysb() function from earlier versions of dreamweaver). Description inserts or updates runtime code for the server behavior. If the sbobj parameter has a null value, it inserts new runtime code; otherw...
Page 337
Editing edml files 337 dwscripts.Deletesb() availability dreamweaver mx (this function replaces the deletesb() function from earlier versions of dreamweaver). Description deletes all the participants of the sbobj server behavior instance. The entire participant is deleted, unless the edml file indic...
Page 338
338 server behaviors regular expressions you must understand regular expressions as they are implemented in javascript 1.5. You must also know when it is appropriate to use them in the server behavior edml files. For example, regular expressions cannot be used in quicksearch values, but they are use...
Page 339
Editing edml files 339 this process searches the user’s document, and if there is a match, extracts the parameter values. The first parenthetical subexpression ( \w+ ) extracts the value for rs . The second subexpression ( [^\r]* ) extracts the value for new_url . Notes about edml structure you sh...
Page 340
340 server behaviors because of the cdata tag, the asp tags , along with the other content within the tag, aren’t processed. Instead, the extension data manager (edm) receives the uninterpreted text, as shown in the following example: recordset1.Eof) response.Redirect("http://www.Macromedia.Com"); %...
Page 341
Group edml file tags 341 parent group type attribute. Required no. Serverbehavior description the serverbehavior attribute indicates which server behavior can use the group. When any of the group’s participant quicksearch strings are found in the document, the server behavior that is indicated by th...
Page 342
342 server behaviors multiple versions of a server behavior can differ, depending on which data source you use. For example, the repeat region server behavior is designed for the standard recordset.Htm data source. If dreamweaver is extended to support a new type of data source (such as a com object...
Page 343
Group edml file tags 343 parent group type attribute. Required no. Value the value is a unique string that determines which group to apply, as shown in the following example: subtype="longversion"> this group attribute defines the long version of the myserverbehavior subtype. You would also have a v...
Page 344
344 server behaviors value the value is a plain text string that can include parameter names to make each instance unique, as shown in the following example: description this tag contains an array of groupparticipant declarations. Parent group type block tag. Required yes. Attributes the following i...
Page 345
Group edml file tags 345 value the participantname value is the exact name (without the .Edml extension) of a single participant file that is listed as a group participant, as shown in the following example. See “name” on page 345 . Description this tag represents the inclusion of a single participa...
Page 346
346 server behaviors value the value is the exact name (without the .Edml extension) of any participant file, as shown in the following example: this example refers to the redirectifempty_init.Edml file. Parttype description this attribute indicates the type of participant. Parent groupparticipant t...
Page 347
Participant edml files 347 participant edml files these tags and attributes are valid within the edml participant files. Description this tag contains all the specifications for a single participant. Parent none. Type block tag. Required yes. Attributes the following items are valid attributes of th...
Page 348
348 server behaviors parent participant type attribute. Required no. Description this tag is a simple search string that is used for performance reasons. It cannot be a regular expression. If the string is found in the current document, the rest of the search patterns are called to locate specific i...
Page 349
Participant edml files 349 description this tag provides information about what to insert in the document and where to insert it. It contains the text to insert. Parts of the text that are customized should be indicated by using the @@parametername@@ format. In some cases, such as a translator-only ...
Page 350
350 server behaviors parent inserttext type attribute. Required yes. Values abovehtml[+weight] , belowhtml[+weight] , beforeselection , replaceselection , wrapselection , afterselection , beforenode , replacenode , afternode , firstchildofnode , lastchildofnode , nodeattribute[+attribute] ■ the abov...
Page 351
Participant edml files 351 ■ the beforenode value inserts the text before a node, which is a specific location in the dom. When a function such as dwscripts.Applysb() is called to make the insertion, the node pointer must pass in as a paramobj parameter. The user-definable name of this parameter mus...
Page 352
352 server behaviors required this attribute is required only if the insert location contains the word node . Value the tagtype__tag value is a user-specified name for the node parameter that passes with the parameter object to the dwscripts.Applysb() function. For example, if you insert some text i...
Page 353
Participant edml files 353 attributes the following items are valid attributes of the searchpatterns tag. Wheretosearch description this attribute specifies where to search for the participant text. This attribute is related to the insert location, so be sure to set each attribute carefully (see “lo...
Page 354
354 server behaviors ■ the comment value searches only within the html comments , as shown in the following example: this example searches tags such as . ■ the text value searches only within raw text sections, as shown in the following example: xyz this example finds a text node that contains the t...
Page 355
Participant edml files 355 ■ the value is used if no pattern is given. It is always considered a match, and the entire value is assigned to the first parameter. In the following example, to identify the participant text , you can define a simple pattern, followed by a precise pattern that also extra...
Page 356
356 server behaviors 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 i...
Page 357
Participant edml files 357 required no. Values all , attribute+attribname , tagonly , inneronly ■ the all value (default) searches the entire tag that is specified in the wheretosearch attribute. ■ the attribute+attribname value searches only within the value of the specified attribute, as shown in ...
Page 358
358 server behaviors values true , false ■ the value is true if the searchpattern is not necessary to identify the participant. ■ the value is false (default) if the searchpattern tag is required. For example, consider the following simple recordset string: var recordset1 = server.Createobject("adod...
Page 359
Participant edml files 359 type block tag. Required no. Description this tag is a specific type of regular expression that lets you update participant text precisely. There should be at least one update pattern definition for every unique parameter that is declared in the insertion text (of the form...
Page 360
360 server behaviors the literal parentheses, as well as other special regular expression characters, are escaped by preceding them with a backslash (\). The middle expression, defined as \w+ , is updated with the latest value that passed in for parameters "rs" and "col" , respectively. The values "...
Page 361
Participant edml files 361 type attribute. Required yes. 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 @@rs@@ value, you should have a parameter with that name: pattern description this tag is an opti...
Page 362
362 server behaviors parent delete type attribute. Required no. Values all , none , tagonly , inneronly , attribute+attribname , attribute+* ■ the all value (default) deletes the entire directive or tag. For attributes, it deletes the entire definition. ■ the none value is never automatically delete...
Page 363
Participant edml files 363 type block tag. Required no. Description this tag lets dreamweaver find each specified instance in a document. If multiple search patterns are defined, they must all be found within the text being searched (the search patterns have a logical and relationship), unless they ...
Page 364
364 server behaviors description this tag contains a single translation instruction that includes the location for the participant, what type of translation to perform, and the content that should replace the participant text. Parent translations type block tag. Required no. Attributes the following...
Page 365
Participant edml files 365 type attribute. Required no. 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 "dynamic data" , any data that is translated should beh...
Page 366
366 server behaviors ■ the tabbed region start value indicates that the translated tags define the beginning of a tabbed outline, as shown in the following example: translationtype="tabbed region start"> ■ the tabbed region end value indicates that the translated tags define the end of a tabbed outl...
Page 367
Participant edml files 367 description this tag contains a list of attributes to add to the translated tag that is specified by the opentag tag. Alternatively, if the opentag tag is not defined and the searchpattern tag specifies tag , this tag contains a list of translated attributes to add to the ...
Page 368
368 server behaviors description this tag is an optional display string that should be inserted in the translation. Parent translation type block tag. Required no. Values the displaystring value is any string comprising text and html. It can include parameter references that are extracted by the par...
Page 369
Server behavior techniques 369 server behavior techniques this section covers the common and advanced techniques that create and edit server behaviors. Most of the suggestions involve specific settings in the edml files. Finding server behaviors writing search patterns in order to update or delete s...
Page 370
370 server behaviors the search string is defined as a regular expression by starting and ending with a slash (/) and is followed by i , which means that it is not case-sensitive. Within the regular expression, special characters such as parentheses () and periods (.) are escaped by preceding them w...
Page 371
Server behavior techniques 371 how participants are matched if a server behavior has more than one participant, the participants must be identified in the user’s document and matched. If the user applies multiple instances of the server behavior to a document, each group of participants must be matc...
Page 372
372 server behaviors there are two instances of test listed in the server behaviors panel. If the user tries to add a third instance to the page and names it " aaa ", nothing is added because it already exists. Within the html tag, matching can also use position information. In the following example...
Page 373
Server behavior techniques 373 this server behavior no longer works correctly because only one parameter is named total . To solve this problem, make sure that there is a parameter with a unique value and can be used to match the participants. In the following example, you could make the total varia...
Page 374
374 server behaviors 3. Look for the limitsearch attribute within the searchpattern tag. 4. If the attribute value starts with attribute+ , the remaining string is assumed to be the attribute name (no spaces are allowed in the attribute name). If these four steps are successful, dreamweaver assumes ...
Page 375
Server behavior techniques 375 this example might use the following search patterns: response.Write /if\s*\((\w+)\.Eof\)\s*response\.Redirect\("([^\r]*)"\)/i the user might add another test to a particular instance of this code, as shown in the following example: 2) response.Redirect("some_url_her...
Page 376
376 server behaviors deleting server behaviors default deletion and dependency counts the user can delete an instance that is selected in the server behaviors panel by clicking the minus (-) button or pressing delete. All the participants are removed except for the ones that are shared by other serv...
Page 377
Server behavior techniques 377 if a javascript file has the share-in-memory directive and an html file references it (by using the script tag with the src attribute), dreamweaver loads the javascript into a memory location where the code is implicitly included in all html files thereafter. No te bec...
Page 378
378 server behaviors.
Page 379
379 16 chapter 16 data sources the macromedia dreamweaver 8 data sources api functions let you add data sources, which appear in the plus (+) menu in the bindings panel (for related information, see the function dreamweaver.Dbi.Getdatasources() in the dreamweaver api reference). Data source files ar...
Page 380
380 data sources how data sources work dreamweaver users can add dynamic data by using the bindings panel. The dynamic data objects that are shown on the plus (+) menu are based on the server model that is specified for the page. For example, users can insert recordsets, commands, request variables,...
Page 381
How data sources work 381 request nameofrequestvariable nameofanotherrequestvariable session nameofsessionvariable 4. If the user double-clicks on a data source name in the bindings panel to edit the data source, dreamweaver calls the editdynamicsource() function to handle the user edits within the ...
Page 382
382 data sources 8. Every time the user changes the selection, dreamweaver calls the inspectdynamicdataref() function to determine whether the new selection is dynamic text or a tag with a dynamic attribute. If it is dynamic text, dreamweaver displays the bindings for the current selection in the bi...
Page 383
A simple data source example 383 when a user clicks on the bindings plus (+) menu, dreamweaver searches the datasources folder for the current server model to gather all available data sources defined in the folder’s html (htm) files. So, to make a new data source available to the user, you need to ...
Page 384
384 data sources to create the edml file: 1. Create a new blank file. 2. Enter the following: location="replaceselection">#mydatasource.@@bindin gname@@#]]> location="replaceselection">#mydatasource.@@bindin gname@@#]]> #(?:\s*\w+\s*\()?(mydatasource)\.(\w+)\b[^#]*#/i]]> #(?:\s*\w+\s*\()?(mydatasour...
Page 385
A simple data source example 385 { var theresponse = mm.Mydatasourcecontents; if (theresponse.Length) { var siteurl = dw.Getsiteroot(); if (siteurl.Length) { dwscripts.Addlistvaluetonote(siteurl, "mydatasource", theresponse); } else { alert(mm.Msg_definesite); } } else { alert(mm.Msg_definemydatasou...
Page 386
386 data sources { 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 = getdatasourcebindin...
Page 387
A simple data source example 387 var params = extpart.Findinstring("mydatasource_dataref", expression); if (params) { retarray[0] = params.Sourcename; retarray[1] = params.Bindingname; } } return retarray; } function deletedynamicsource(sourcename, bindingname) { var siteurl = dw.Getsiteroot(); if (...
Page 388
388 data sources to create the command definition file: 1. Create a new blank file. 2. Enter the following: osition:absolute;top:246px;left:182px;white-space:nowrap" class="ft02">dialog"> 3. Save the file as mydatasource_variable.Htm in the configuration/commands folder. To create the supporting jav...
Page 389
A simple data source example 389 function okclicked(){ var nameobj = document.Forms[0].Thename; if (nameobj.Value) { if (isvalidvarname(nameobj.Value)) { mm.Mydatasourcecontents = nameobj.Value; mm.Retval = "ok"; window.Close(); } else { alert(nameobj.Value + " " + mm.Msg_invalidparamname); } } else...
Page 390
390 data sources 2. Click the mydatasource data source option, and the mydatasource variable dialog box you created appears: 3. Enter a value in the dialog box and click ok. The bindings panel displays the data source in a tree with the variable from the dialog box under the data source name: 4. Dra...
Page 391
The data sources api 391 the data sources api the functions in the data sources api let you find, add, edit, and delete data sources and also generate and inspect dynamic data objects. Adddynamicsource() availability dreamweaver ultradev 1. Description this function adds a dynamic data source. Becau...
Page 392
392 data sources for example, in dreamweaver, if the selection is a recordset or command, the deletedynamicsource() function calls the dw.Serverbehaviorinspector.Deleteserverbehavior() function. If the selection is a request, session, or application variable, the function remembers that the variable...
Page 393
The data sources api 393 editdynamicsource() availability dreamweaver mx. 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...
Page 394
394 data sources returns dreamweaver expects an array of javascript objects where each object can have as many as five properties, which are described in the following list: ■ the title property is the label string that appears to the right of the icon for each parent node. The title property is alw...
Page 395
The data sources api 395 arguments sourcename , bindingname ■ the sourcename argument is the name of the top-level node that is associated with the child node. ■ the bindingname argument is the name of the child node from which you want to generate a dynamic data object. Returns dreamweaver expects ...
Page 396
396 data sources ■ the datasource property is the simple name of the file in which the finddynamicsources() function is defined. For example, the finddynamicsources() function in the session.Htm file, which is located in the configuration/datasources/ asp_js folder, sets the datasource property to s...
Page 397
The data sources api 397 arguments string ■ the string argument is the dynamic data object. Returns dreamweaver expects an array of two elements (parent name and child name) for the matched node; it returns a null value if no matches are found..
Page 398
398 data sources.
Page 399
399 17 chapter 17 server formats chapter 16, “data sources,” on page 379 , discusses how macromedia dreamweaver 8 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...
Page 400
400 server formats one example might be to create a new currency format. Essentially, all currency formatting consists of converting a number to a string, inserting commas and decimal points, and inserting a currency symbol, such as a dollar ($) sign. The currency format data type collects all the c...
Page 402
402 server formats when the data formatting functions are called the data formatting functions are called in the following scenarios: ■ in the dynamic data or the dynamic text dialog box, the user selects a node from the data source tree and a format from the format menu. When the user selects the f...
Page 403
The server formats api 403 the server formats api the server formats api consists of the following data formatting functions. Applyformat() availability dreamweaver ultradev 1. Description this function can edit a user’s document by adding a format function declaration to it. When a user selects a f...
Page 404
404 server formats description commits the changes to a format that was created using the edit format dialog box. Users can create, edit, or delete formats with the edit format list dialog box. This function is called to commit any modifications that are made to a format. It can also set other, arbi...
Page 405
The server formats api 405 returns dreamweaver expects nothing. Formatdynamicdataref() availability dreamweaver ultradev 1. Description adds the format function call to the dynamic data object. When a user selects a format from the format text box in the dynamic data or the dynamic text dialog box o...
Page 406
406 server formats inspectformatdefinition() availability dreamweaver ultradev 1. Description initializes form controls when a user edits a format in the edit format list dialog box. Arguments format ■ the format argument is a javascript object that describes the format to apply. The javascript obje...
Page 407
407 18 chapter 18 components macromedia dreamweaver supports the creation of many of the most popular types of components. 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 wo...
Page 408
408 components extending the components panel if you have invented (or simply use) a component strategy that is not represented in dreamweaver’s current components 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 th...
Page 409
Components panel files 409 extensibility lets you add new component types to the panel. There are several general steps that you need to follow when adding a new component type to the components panel: 1. Add the component to the list of available component types for the appropriate server model(s)....
Page 410
410 components classlocation="d:\music\music.Jar"> javabeans should contain the logic for saving themselves in the multiuser configuration folder, so the next time the user launches an application, the component loads itself again from the saved data file. Adding a service component to add a new lig...
Page 411
Components panel files 411 2. Write the javascript code to implement the new server component. The extension file (htm) defines the locations of the javascript code in the script tag. These javascript files can reside in the shared folder, in the same folder as the extension file, or in the common f...
Page 412
412 components for example, the following webservicesclass node has web methods as its children: this.Name = "trafficlocatorwebservice"; this.Image = "components/common/webservices/webservices.Gif"; this.Haschildren = true; this.Tooltiptext = "trafficlocatorwebservice"; this.Iscodeviewdraggable = tr...
Page 413
Components panel api functions 413 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 w...
Page 414
414 components getcodeviewdropcode() availability dreamweaver mx. 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 componentrec argument is an ...
Page 415
Components panel api functions 415 getsetupsteps() availability dreamweaver mx. Description dreamweaver calls this function if the setupstepscompleted() function returns zero or a positive integer. This function controls the server-side setup instructions, which can be implemented using extensions t...
Page 416
416 components example the following example sets four steps for coldfusion components, and provides a hypertext link in the fourth step so the user can enter the rds user name and password: function getsetupsteps() { var dosdk = false; dom = dw.Getdocumentdom(); if (dom && dom.Servermodel) { var as...
Page 417
Components panel api functions 417 description dreamweaver calls this function before the components tab appears. Dreamweaver then calls the getsetupsteps() function if the setupstepscompleted() function returns zero or a positive integer. Arguments none. Returns an integer that represents the numbe...
Page 418
418 components returns a boolean value that indicates whether the drop operation was successful: true if successful; false otherwise. Example the following example determines if the component is a table or view, and then returns the appropriate bhandled value: function handledesignviewdrop(component...
Page 419
Components panel api functions 419 arguments componentrec ■ the componentrec argument is an object that contains the following properties: ■ the name property is the name of the tree node item. ■ the image property is an optional icon for the tree node item. If this icon is omitted, dreamweaver uses...
Page 420
420 components toolbarcontrols() availability dreamweaver mx. Description every component type returns a list of toolbarbuttonrec objects, which represents the toolbar icons, in left-to-right order. Each toolbarbuttonrec object contains the following properties: arguments none. Returns an array of t...
Page 421
Components panel api functions 421 example the following example assigns properties to the toolbar buttons: function toolbarcontrols() { var toolbarbtnarray = new array(); dom = dw.Getdocumentdom(); var plusbutton = new toolbarcontrolrec(); var aservermodelname = null; if (dom && dom.Servermodel) { ...
Page 422
(dw.Servercomponentspalette.Getselectednode()....
Page 423
423 19 chapter 19 server models server models are the technologies that run scripts on a server. When users define a new site, they can identify the server model that they want to use at the site level and at the individual document level. This server model handles any dynamic elements that the user...
Page 424
424 server models the server model api functions this section describes the functions that configure server models for dreamweaver. Canrecognizedocument() availability dreamweaver mx. Description when opening a document (and when more than one server model claims a file extension), dreamweaver calls...
Page 425
The server model api functions 425 getfileextensions() availability dreamweaver ultradev 1, deprecated in dreamweaver mx. Description returns the document file extensions with which a server model can work. For example, the asp server model supports .Asp and .Htm file extensions. This function retur...
Page 426
426 server models the getlanguagesignatures() function returns a map of these signature declarations. Extension developers can use this map to generate language-specific code blocks that dreamweaver drops on the page (based on the appropriate server model for the page) when the user drags and drops ...
Page 427
The server model api functions 427 description this function returns a javascript object that can be accessed from within the javascript code. You can retrieve this object by calling the dom.Servermodel.Getserverinfo() javascript function. Furthermore, servername , serverlanguage , and serverversion...
Page 428
428 server models if you want a file in the serverformats folder to apply only to a specific scripting language, add the following statement so it is the first line in the html file: in this example, xxx represents the scripting language. This statement causes the server behavior to appear in the pl...
Page 429
The server model api functions 429 arguments none. Returns dreamweaver expects an array of objects where each object contains the following three properties: ■ the startpattern property is a regular expression that matches the opening script delimiter (such as " ). ■ the endpattern property is a reg...
Page 430
430 server models description this function returns the folder name to use for this server model within the configuration folder. You can access this value from javascript by calling the dom.Servermodel.Getfoldername() function. Arguments none. Returns dreamweaver expects a string, such as "asp_js" ...
Page 431
The server model api functions 431 arguments none. Returns dreamweaver expects an array of version objects, each with a version name and version value, as listed in the following examples: ■ asp version 2.0 ■ adodb version 2.1.
Page 432
432 server models.
Page 433
433 20 chapter 20 data translators data translators translate specialized markup—server-side includes, conditional javascript statements, or other code such as php3, jsp, cfml, or asp—into code that macromedia dreamweaver 8 can read and display. In dreamweaver, you can translate attributes within ta...
Page 434
434 data translators how data translators work dreamweaver handles all translator files the same way, regardless of whether they translate entire tags or only attributes. At startup, dreamweaver reads all the files in the configuration/ translators folder and calls the gettranslatorinfo() function t...
Page 435
Adding a translated attribute to a tag 435 determining what kind of translator to use all translators must contain the gettranslatorinfo() and translatemarkup() functions, and they must reside in the configuration/translators folder. They differ, however, in the kind of code that they insert into th...
Page 436
436 data translators the mmtranslatedvalue attribute must be unique within the tag. If it is likely that your translator needs to translate more than one attribute in a single tag, you must add a routine in the translator that appends numbers to the mmtranslatedvalue attribute (for example, mmtransl...
Page 437
Locking translated tags or blocks of code 437 inspecting translated attributes when server markup specifies a single attribute and the attribute is represented in a property inspector, dreamweaver displays the server markup in the property inspector, as shown in the following figure: the markup appe...
Page 438
438 data translators the syntax of the xml tags is shown in the following example: type="tagnameortype" depfiles="dependentfileslist" ¬ orig="encodedorignalmarkup"> translated content the italicized values in this example have the following significance: ■ the translatorclass value is the unique ide...
Page 439
Creating property inspectors for locked content 439 [support] [about us] [help] 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...
Page 440
440 data translators another problem is inherent in inspecting translated content. When you call the dom.Getselection() function, the values that return by default are offsets into the untranslated source. To expand the selection properly so that the locked region (and only the locked region) is sel...
Page 441
Creating property inspectors for locked content 441 document.Layers['timelayer'].Document.Timeform.Timefield.¬ value = timevalue; } after you parse the orig attribute to populate the boxes in the property inspector for the translated tag, the next step is probably to set the value of the orig attrib...
Page 442
442 data translators finding bugs in your translator if the translatemarkup() function contains certain types of errors, the translator loads properly, but it fails without an error message when you invoke it. Although failing silently prevents dreamweaver from becoming unstable, it can hinder devel...
Page 443
A simple attribute translator example 443 6. Add alert() statements in strategic spots throughout the translatemarkup() function so you can make sure you’re getting the proper branches and so you can check the values of variables and properties at different points: for (var i=0; i alert("we're at th...
Page 444
444 data translators creating the icon next, you create the icon for poco tags. To create the icon: 1. Create an image file that is 18 x 18 pixels for the poco tags icon. 2. Save the file as poco.Gif in the configuration/thirdpartytags folder. Creating the attribute translator you create an html fil...
Page 445
A simple attribute translator example 445 // the conditional statement var truestart; // the beginning of the true case var falsestart; // the beginning of the false case var truevalue; // the html that would render in the true case var attname; // the name of the attribute that is being' // set con...
Page 446
446 data translators transvalue = attname + '="' + truevalue + '"'; transatt = ' mmtranslatedvalue' + count + '="' + ¬ escape(transvalue) + '"'; outstr = outstr.Substring(0,end+4) + transatt + ¬ outstr.Substring(end+4); // if attandvalue is true, and tokens is greater than // 1, then truevalue is a ...
Page 447
A simple block/tag translator example 447 returnarray[0] = "pound_conditional"; // the translatorclass returnarray[1] = "pound conditional translator"; // the title returnarray[2] = "2"; // the number of extensions returnarray[3] = "html"; // the first extension returnarray[4] = "htm"; // the second...
Page 448
448 data translators * 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 * * express...
Page 449
A simple block/tag translator example 449 return ""; } // as long as start, which is equal to the location in instr of the // kent tag, is not equal to -1 (that is, as long as there is another // kent tag in the document) while (start != -1){ // copy everything up to the start of the kent tag. // th...
Page 450
450 data translators //assemble the lock tags and the replacement html. Var replcode = start + ' depfiles="' + depfiles + '"'; replcode = replcode + ' orig="%3ckent%3e">'; replcode = replcode + imgtag; replcode = replcode + end; return replcode; } /*************************************************...
Page 451
A simple block/tag translator example 451 // now determine which photo to show based on whether it's a workday or a // weekend; what time it is; and, if it's a time and day when kent is // working, what platform the user is on. //if it's not sunday if (day != 0){ //and it's between 10am and noon, in...
Page 452
452 data translators 3. Save the file as kent.Htm in the configuration/translators folder. The data translator api this section describes the functions used to define translators for dreamweaver. Gettranslatorinfo() description this function provides information about the translator and the files it...
Page 453
The data translator api 453 7. The rundefault string specifies when this translator executes. The following list gives the possible string values: 8. The priority string specifies the default priority for running this translator. The priority is a number between 0 and 100 . If you do not specify a p...
Page 454
454 data translators transarray[11] = "50"; return transarray; } translatemarkup() description this function performs the translation. Arguments docname , siteroot , doccontent ■ the docname argument is a string that contains the file:// url for the document to be translated. ■ the siteroot argument...
Page 455
The data translator api 455 livedatatranslatemarkup() availability dreamweaver ultradev 1. Description this function translates documents when users are using the live data window. When the user selects the view > live data command or clicks the refresh button, dreamweaver calls the livedatatranslat...
Page 456
456 data translators.
Page 457
457 21 chapter 21 c-level extensibility the c-level extensibility mechanism lets you implement macromedia dreamweaver 8 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 l...
Page 458
458 c-level extensibility the readcontentsoffile() function accepts a list of arguments from the user, retrieves the filename argument, 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 rea...
Page 459
C-level extensibility and the javascript interpreter 459 the following example shows how the mm_init() function for the library mylibrary might look: void mm_init() { js_definefunction("readcontentsoffile", readcontentsoffile, 1); } your library must include exactly one instance of the following mac...
Page 460
460 c-level extensibility data types the javascript interpreter defines the following data types. Typedef struct jscontext jscontext a pointer to this opaque data type passes to the c-level function. Some functions in the api accept this pointer as one of their arguments. Typedef struct jsobject jso...
Page 461
The c-level api 461 the c-level api the c-level extensibility api consists of the following functions: typedef jsbool (*jsnative)(jscontext *cx, jsobject *obj, unsigned int argc, jsval *argv, jsval *rval) description this function signature describes c-level implementations of javascript functions i...
Page 462
462 c-level extensibility arguments char *name , jsnative call , unsigned int nargs ■ the name argument is the name of the function as it is exposed to javascript. ■ the call argument is a pointer to a c-level function. The function must accept the same arguments as readcontentsoffile , and it must ...
Page 463
The c-level api 463 arguments jscontext *cx , jsval v , long *lp ■ the cx argument is the opaque jscontext pointer that passes to the javascript function. ■ the v argument is the jsval structure from which the integer is to be extracted. ■ the lp argument is a pointer to a 4-byte integer. This funct...
Page 464
464 c-level extensibility ■ the bp argument is a pointer to a jsbool boolean value. This function stores the converted value in *bp . Returns a boolean value: js_true indicates success; js_false indicates failure. Jsbool js_valuetoobject() description this function extracts a function argument from ...
Page 465
The c-level api 465 ■ the vp argument is a pointer to the jsval structure into which the contents of the string should be copied. Returns a boolean value: js_true indicates success; js_false indicates failure. Jsbool js_doubletovalue() description this function stores a floating-point number return ...
Page 466
466 c-level extensibility jsval js_integertovalue() description this function converts a long integer value to jsval structure. Arguments lv ■ the lv argument is the long integer value that you want to convert to a jsval structure. Returns a jsval structure that contains the integer that was passed ...
Page 467
The c-level api 467 ■ typically, this argument is passed in and converted using the js_valuetoobject() function. Returns a pointer to a null-terminated string. The caller should not free this string when it finishes. Jsobject *js_newarrayobject() description this function creates a new object that c...
Page 468
468 c-level extensibility jsbool js_getelement() description this function reads a single element of an array object. Arguments jscontext *cx , jsobject *obj , unsigned int index , jsval *v ■ the cx argument is the opaque jscontext pointer that passes to the javascript function. ■ the obj argument i...
Page 469
The c-level api 469 jsbool js_executescript() description this function compiles and executes a javascript string. If the script generates a return value, it returns in *rval . Arguments jscontext *cx , jsobject *obj , char *script , unsigned int sz , jsval *rval ■ the cx argument is the opaque jsco...
Page 470
470 c-level extensibility returns a boolean value: js_true indicates success; js_false indicates failure. File access and multiuser configuration api macromedia recommends that you always use the file access and multiuser configuration api to access the file system through c-level extensions. For fi...
Page 471
File access and multiuser configuration api 471 there are many cases where javascript extensions open files and write to the configuration folder. Javascript extensions can access the file system by using dwfile, mmnotes, or passing a url to the dreamweaver.Getdocumentdom() function. When an extensi...
Page 472
472 c-level extensibility for example, if you use the trash can icon in the snippets panel to delete a snippets folder called javascript and a file called onepixelborder.Csn, dreamweaver writes a file in the user configuration folder called mm_deleted_files.Xml, which looks like the following exampl...
Page 473
File access and multiuser configuration api 473 ■ the char *contstraints argument can be " files" or " directories " or a null value. If you specify null , the mm_getconfigfolderlist() function returns files and folders. Returns jsobject is an array that contains the list of files or folders in eith...
Page 474
474 c-level extensibility int mm_openconfigfile() availability dreamweaver mx. Description this function opens the file and returns an operating system file handle. You can use the operating system file handle in calls to system file functions. You must close the file handle with a call to the syste...
Page 478
478 c-level extensibility jsbool mm_removeconfigfolder() availability dreamweaver mx. Description this function removes the folder and its files and subfolders. If the folder is in the dreamweaver configuration folder, it marks the folder for deletion in the mm_deleted_files.Xml file. Arguments char...
Page 480
480 c-level extensibility to build the shared library on the macintosh using metrowerks codewarrior 9 or greater: 1. Open sample.Mcp. 2. Build the project (project > make) to generate a mach-o bundle. When the build operation finishes, the sample.Bundle file appears in the folder that contains sampl...
Page 481
481 4 part 4 appendix find information about supporting files and reference resources that can aid in developing macromedia dreamweaver 8 extensions. Appendix: the shared folder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483.
Page 483
483 appendix the shared folder the shared folder is the central repository for utility functions, classes, and images that are commonly used by all extensions. Any extension can reference the files in the shared folder’s subfolders, and you can add custom common utilities to the ones already provide...
Page 484
484 the shared folder the common folder the common folder has shared scripts and classes for use in third-party extensions. Codebehindmgr.Js contains functions for creating a code-behind document. A code-behind document lets you create distinct pages that separate the code for user interface (ui) lo...
Page 485
The shared folder contents 485 gridcontrolclass.Js use this class to create and manipulate an editable grid. You add a special select list in your html, and attach this class to it in javascript to manipulate the grid. Imagebuttonclass.Js this class makes it easy to control the pressed/mouse-over- w...
Page 486
486 the shared folder the mm folder the mm folder contains the shared scripts, images, and classes used by the extensions that come with dreamweaver, including the scripts for building a navigation bar, specifying preload calls, and the shortcut key definitions. The scripts folder the scripts subfol...
Page 487
The shared folder contents 487 the scripts folder also contains two subfolders, class and cmn. The class folder the class folder contains the following utility functions: navbar.Js contains classes and functions for working with a navigation bar and navigation bar elements. Includes functions to add...
Page 488
488 the shared folder the cmn folder the cmn folder contains the following utility functions: gridcontrolclass.Js older version of the gridcontrolclass in the common folder. See the gridcontrolclass.Js file in the shared/common/ scripts folder. Imagebuttonclass.Js older version of the imagebuttoncla...
Page 489
The shared folder contents 489 dom.Js contains general helper functions for working with the dreamweaver dom. Includes functions that get the root node of the active document, find a tag of a given name, create a list of nodes from the specified starting node, check whether a given tag is contained ...
Page 490
490 the shared folder other folders the following list describes other folders of interest in the shared folder: ■ controls the controls folder contains the elements used to build a server behavior. These controls include interfaces for text and recordset menus. ■ fireworks the fireworks folder has ...
Page 491
Using the shared folder 491 using the shared folder look first in the dreamweaver configuration/shared/common folder for useful extension code because this folder contains the most current and commonly used functionality. Extensions can leverage the resources in the shared folder for their own funct...
Page 492
492 the shared folder.
Page 493
493 index a action files 305 action tag 189 activate tag 190 adddynamicsource() 391 alert() 128 analyzeserverbehavior() 329 apis, types of behaviors 312 c-level extensibility 461 commands 176 component panel 412 data formatting 399 data sources 391 data translator 434 floating panel 297 menu command...
Page 494
494 index behaviors api 312 helper functions 307 inserting multiple functions with 307 required functions 312 sample code 307 user experience 306 behaviors api applybehavior() 312 behaviorfunction() 314 canacceptbehavior() 315 deletebehavior() 316 displayhelp() 316 identifybehaviorarguments() 317 in...
Page 495
Index 495 closetag tag 368 code coloring about 63 blockend tag 66 blockstart tag 66 brackets tag 67 charend tag 68 charesc tag 68 charstart tag 68 commentend tag 69 commentstart tag 68 css sample text 90 cssimport tag 69 cssmedia tag 69 cssproperty tag 70 cssselector tag 70 cssvalue tag 71 defaultat...
Page 496
496 index conventions, in this guide 13 copyserverbehavior() 331 css-support tag, code validation 92 cssimport tag, code coloring 69 cssmedia tag, code coloring 69 cssproperty tag, code coloring 70 cssselector tag, code coloring 70 cssvalue tag, code coloring 71 custom javascript controls 113 custom...
Page 497
Index 497 opening, procedure for 46 tags in definition file 38 document, opening 46 documentedited() 298 documentelement property 131 dom. See document object model. Domrequired attribute 235 dreamweaver dom 129 dreamweaver object 135, 136 dreamweaver, customizing or extending 9 dropdown tag 229 dws...
Page 498
498 index extensions, reloading 104, 105 extensions.Txt file 43 external javascript files 106 f file (field) object 128 file attribute 147, 235 file type, changing default 20 files codehints.Xml 56 insertbar.Xml 150 menus.Xml 182 mm_deleted_files.Xml 28 mmdocumenttypes.Xml 35 toolbars.Xml 215 xml 12...
Page 499
Index 499 i id attribute 144, 232 idchar1 tag, code coloring 73 idcharrest tag, code coloring 74 identifybehaviorarguments() 317 ignorecase tag, code coloring 74 ignoremmtparams tag, code coloring 74 ignoretags tag, code coloring 75 image attribute 145, 232 image object 128 include/ tag 223 initialp...
Page 500
500 index m manipulating tree control content 122 math object 128 menu command extensions, definition 100 menu commands about 194 sample code 197 user experience 196 menu commands api canacceptcommand() 209 commandbuttons() 209 getdynamiccontent() 210 iscommandchecked() 211 receivearguments() 212 se...
Page 501
Index 501 objects api caninsertobject() 161 displayhelp() 161 insertobject() 162 isdomrequired() 162 objecttag() 164 windowdimensions() 165 objecttag() 164 onblur event 128 onchange event 128 onclick event 128 onfocus event 128 onload event 128 onmouseover event 128 onresize event 128 opening a docu...
Page 502
502 index s sampletext tag, code coloring 77 scheme block delimiter coloring 80 scheme processing code coloring 83 escape characters 85 maximum string length 85 precedence 86 wildcard characters 84 scheme tag, code coloring 65 scripting-language statement 428 search pattern resolution 373 searchpatt...
Page 503
Index 503 t tag attribute 147 tag chooser 268 tag dialog extensions, definition 100 tag editor api applytag() 276 inspecttag() 275 validatetag() 276 tag editor, creating 275 tag libraries 262 tag object 132 taggroup tag, code coloring 80 tagname property 132 tagspec tag 22 target browser, code valid...
Page 504
504 index u unescape() 128 uninstalling 30 update attribute 236 updatepattern tag 359, 360 updatepatterns tag 358 url property 131 v validatetag() 276 value attribute 236 value tag, code validation 94 variable grid controls 118 vbscript 305 version attribute 347 vline 279 w w3c 128 wheretosearch att...