Home » Adobe Manuals » Computer Software » Adobe 38040334 » Manual Viewer

Adobe 38040334 Extending Dreamweaver - Page 93

Manipulating content within a tree control, A color button control for extensions

UPC - 883919090467

Add to My Manuals
Save this manual to your list of manuals

Page 93 highlights

DREAMWEAVER CS3 87 Extending Dreamweaver Manipulating content within a tree control Tree controls and the nodes within them are implemented as HTML tags. They are parsed by Dreamweaver and stored in the document tree. These tags can be manipulated in the same way as any other document node. For more information on DOM functions and methods, see "The Dreamweaver Document Object Model" on page 90. Adding nodes To add a node to an existing tree control programmatically, set the innerHTML property of the MM:TREECONTROL tag or one of the existing MM:TREENODE tags. Setting the inner HTML property of a tree node creates a nested node. 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 + ''; Adding a child node To add a child node to the currently selected node set the innerHTML property of the selected node. The following example adds a child node to the currently selected node: var tree = document.myTreeControl; var selNode = tree.selectedNodes[0]; //deselect the node, so we can select the new one selnode.removeAttribute("selected"); //add the new node to the top of the selected node's children selNode.innerHTML = '' + ¬ selNode.innerHTML; Deleting nodes To delete the currently selected node from the document structure, use the innerHTML or outerHTML properties. The following example deletes the entire selected node and any children: var tree = document.myTreeControl; var selNode = tree.selectedNodes[0]; selNode.outerHTML = ""; A color button control for extensions In addition to the standard input types such as text, check box, and button, Dreamweaver supports mmcolorbutton, an additional input type in extensions. Specifying in your code causes a color picker to appear in the UI. You can set the default color for the color picker by setting a value attribute on the input tag. If you do not set a value, the color picker appears grey by default and the value property of the input object returns an empty string. The following example shows a valid mmcolorbutton tag: A color button has one event, onChange, which is triggered when the color changes. 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:

Section	Page
Contents	3
Chapter 1: Introduction	7
Background	7
Installing an extension	8
Creating an extension	8
Additional resources for extension writers	9
What’s new in Dreamweaver	9
Documentation Resource Center	9
Deprecated functions	9
Conventions used in this guide	9
Chapter 2: Customizing Dreamweaver	11
Ways to customize Dreamweaver	11
Customizing default documents	12
Customizing page designs	12
Customizing the appearance of dialog boxes	12
Changing the default file type	13
Customizing the interpretation of third-party tags	14
<tagspec>	15
How custom tags appear in the Design view	16
Avoiding rewriting third-party tags	17
Customizing Dreamweaver in a multiuser environment	18
Deleting configuration files in a multiuser environment	19
About mm_deleted_files.xml tag syntax	19
<deleteditems>	19
<item>	19
Reinstalling and uninstalling Dreamweaver in a multiuser environment	20
Changing FTP mappings	20
Extensible document types in Dreamweaver	21
Document type definition file	21
Structure of document type definition files	22
Dynamic templates	25
Document extensions and file types	26
Localized strings	27
Rules for document type definition files	28
Opening a document in Dreamweaver	28
Customizing workspace layouts	29
<panelset>	29
<application>	29
<document>	30
<panelframe>	30
<panelcontainer>	31
<panel>	32
Customizing the Coding toolbar	33
Changing keyboard shortcut mappings	34
The keyboard layout mapping XML files	36
Chapter 3: Customizing Code view	37
Code hints	37
The CodeHints.xml file	38
JavaScript code hinting	39
Declaring classes	40
Crosstag attributes code hinting	41
Spry attribute grouping format	41
Code hints tags	42
<codehints>	42
<menugroup>	43
<description>	43
<menu>	44
<menuitem>	44
<function>	45
<method>	46
<parammenu>	47
<parammenuitem>	47
<optionparammenu>	48
<optionparammenuitem>	48
<property>	49
Code coloring	49
Code coloring files	50
<scheme>	51
<blockEnd>	52
<blockStart>	52
<brackets>	53
<charStart>	53
<charEnd>	54
<charEsc>	54
<commentStart>	54
<commentEnd>	54
<cssImport/>	54
<cssMedia/>	55
<cssProperty/>	55
<cssSelector/>	55
<cssValue/>	56
<defaultAttribute>	56
<defaultTag>	56
<defaultText/>	56
<endOfLineComment>	57
<entity/>	57
<functionKeyword>	57
<idChar1>	58
<idCharRest>	58
<ignoreCase>	58
<ignoreMMTParams>	58
<ignoreTags>	59
<isLocked>	59
<keyword>	59
<keywords>	59
<numbers/>	60
<operators>	60
<regexp>	60
<sampleText>	61
<searchPattern>	61
<stringStart>	62
<stringEnd>	62
<stringEsc>	62
<tagGroup>	62
Scheme block delimiter coloring	63
innerText	63
customText	63
outerTag	64
innerTag	64
nameTag	64
nameTagScript	64
Scheme processing	65
Wildcard characters	65
Escape characters	66
Maximum string length	66
Scheme precedence	67
Editing schemes	68
Code coloring examples	69
Code validation	72
<css-support>	73
<property>	73
<value>	74
Changing default HTML formatting	75
Chapter 4: Extending Dreamweaver	76
Types of Dreamweaver extensions	77
Other ways to extend Dreamweaver	78
Configuration folders and extensions	78
Multiuser Configuration folders	79
Running scripts at startup or shutdown	79
Reloading extensions	80
Extension APIs	80
How Dreamweaver processes JavaScript in extensions	80
Displaying Help	81
Localizing an extension	82
XML string files	82
Localizable strings with embedded values	82
Working with the Extension Manager	83
Chapter 5: User interfaces for extensions	84
Designing an extension user interface	84
Dreamweaver HTML rendering control	85
Using custom UI controls in extensions	86
Editable select lists	86
Database controls	88
Adding a database tree control	89
Adding a variable grid control	90
Adding tree controls	91
Creating a tree control	91
Manipulating content within a tree control	93
A color button control for extensions	93
Adding Flash content to Dreamweaver	94
A simple Flash dialog box example	94
Chapter 6: The Dreamweaver Document Object Model	96
Which document DOM?	97
The Dreamweaver DOM	97
Objects, properties, and methods of the Dreamweaver DOM	97
Properties and methods of the document object	99
Properties and methods of HTML	100
Properties and methods of text objects	102
Properties and methods of comment objects	102
The dreamweaver and site objects	103
Properties of the dreamweaver object	103
The site object	104
Chapter 7: Insert bar objects	105
How object files work	105
The Insert bar definition file	106
Insertbar.xml tag hierarchy	106
Insert bar definition tags	107
<insertbar>	107
<category>	107
<menubutton>	108
<button />	108
<checkbutton />	108
<separator />	109
Insert bar definition tag attributes	109
id=\	109
image=\	109
canDrag=\	109
showIf=\	110
enabled=\	110
checked=\	110
command=\	111
file=\	111
tag=\	111
name=\	111
Modifying the Insert bar	112
Adding objects to the Insert bar	113
Adding objects to the Insert menu	113
A simple insert object example	114
Creating the HTML file	114
Adding the JavaScript functions	114
Creating the image	116
Editing the insertbar.xml file	116
Adding a dialog box	117
Building an Insert bar pop-up menu	119
The objects API functions	122
canInsertObject()	122
displayHelp()	123
isDOMRequired()	123
insertObject()	123
objectTag()	124
windowDimensions()	125
Chapter 8: Browser compatibility check issues API	126
How detection works	126
An Issues example	127
ColAndColgroupCapturedByCaption.htm	127
ColAndColgroupCapturedByCaption.js	127
The issues API functions	129
findIssue()	129
getAffectedBrowserProfiles()	129
getAffectedBrowserDisplayNames()	130
getIssueID()	130
getIssueName()	131
getIssueDescription()	131
Chapter 9: Commands	132
How commands work	132
Adding commands to the Commands menu	133
A simple command example	133
Creating the UI	133
Writing the JavaScript code	134
Determining whether the command should be enabled or dimmed	135
Linking functions to the OK and Cancel buttons	136
Letting the user specify uppercase or lowercase	137
Testing the extension	139
The commands API functions	139
canAcceptCommand()	139
commandButtons()	140
isDOMRequired()	140
receiveArguments()	140
windowDimensions()	141
Chapter 10: Menus and menu commands	142
About the menus.xml file	143
<menubar>	143
<menu>	144
<menuitem>	144
<separator>	146
<shortcutlist>	146
<shortcut>	147
<tool>	148
<action>	148
<activate>	149
<override>	149
Changing menus and menu commands	149
Changing the name of a menu command or menu	150
Changing keyboard shortcuts	151
Modifying pop-up menus and context menus	151
Menu commands	152
Modifying the Commands menu	153
How menu commands work	153
A simple menu command example	154
Creating the menu commands	154
Writing the JavaScript code	155
canAcceptCommand()	155
receiveArguments()	156
setMenuText()	156
Placing the command file in the Menu folder	157
A dynamic menu example	157
Creating the dynamic menu items	157
Writing the JavaScript code	158
canAcceptCommand()	159
havePreviewTarget()	159
receiveArguments()	161
The menu commands API functions	163
canAcceptCommand()	163
commandButtons()	164
getDynamicContent()	164
isCommandChecked()	165
receiveArguments()	165
setMenuText()	166
windowDimensions()	166
Chapter 11: Toolbars	168
How toolbars work	168
How toolbars behave	169
How toolbar commands work	169
A simple toolbar command file	170
Creating the text box	170
Writing the JavaScript code	171
canAcceptCommand(): enable the toolbar item	171
receiveArguments(): set the title	171
getCurrentValue(): get the title	171
The toolbar definition file	172
<toolbar>	173
<include/>	174
<itemtype/>	175
<itemref/>	175
<separator/>	176
Toolbar item tags	176
<button>	176
<checkbutton>	177
<radiobutton>	177
<menubutton>	178
<dropdown>	179
<combobox>	179
<editcontrol>	180
<colorpicker>	180
Item tag attributes	181
id=\	181
showIf=\	181
image=\	182
disabledImage=\	182
overImage=\	182
tooltip=\	182
label=\	182
width=\	183
menuID=\	183
colorRect=\	183
file=\	183
domRequired=\	183
enabled=\	184
checked=\	184
value=\	184
update=\	184
command=\	185
arguments=\	185
The toolbar command API functions	186
canAcceptCommand()	186
getCurrentValue()	187
getDynamicContent()	187
getMenuID()	188
getUpdateFrequency()	189
isCommandChecked()	190
isDOMRequired()	191
receiveArguments()	192
showIf()	192
Chapter 12: Reports	194
Site reports	194
How site reports work	195
A simple site report example	195
Creating the report definition	195
Writing the JavaScript code	196
Stand-alone reports	197
How stand-alone reports work	197
A simple stand-alone report example	197
Creating the dialog box UI	198
Writing the JavaScript code	198
The reports API functions	199
processFile()	199
beginReporting()	200
endReporting()	200
commandButtons()	200
configureSettings()	201
windowDimensions()	201
Chapter 13: Tag libraries and editors	203
Tag library file format	204
The Tag Chooser	207
TagChooser.xml files	207
A simple example of creating a new tag editor	209
Registering the tag in the tag library	210
Creating a tag definition (VTML) file	210
Creating a tag editor UI	211
Adding a tag to Tag Chooser	213
The tag editor APIs functions	213
inspectTag()	213
validateTag()	214
applyTag()	214
Chapter 14: Property inspectors	216
Property inspector files	216
How Property inspector files work	217
A simple Property inspector example	218
Creating the user interface	218
Writing the JavaScript code	219
Creating the image	221
Testing the Property inspector	221
The Property inspector API functions	221
canInspectSelection()	221
displayHelp()	222
inspectSelection()	222
Chapter 15: Floating panels	224
How floating panel files work	225
A simple floating panel example	226
Creating the floating panels	226
Writing the JavaScript code	227
selectionChanged(): is a script marker selected?	227
updateScript(): write back changes	229
Creating a menu item	229
The floating panel API functions	230
displayHelp()	230
documentEdited()	231
getDockingSide()	231
initialPosition()	232
initialTabs()	232
isATarget()	233
isAvailableInCodeView()	233
isResizable()	233
selectionChanged()	234
About performance	234
Chapter 16: Behaviors	236
How Behaviors work	237
Inserting multiple functions in the user’s file	237
What to do when an action requires a return value	237
A simple behavior example	238
Creating the behavior extension	238
Creating the HTML files to browse	240
Testing the behavior	242
The behaviors API functions	242
applyBehavior()	242
behaviorFunction()	243
canAcceptBehavior()	244
displayHelp()	245
deleteBehavior()	245
identifyBehaviorArguments()	245
inspectBehavior()	247
windowDimensions()	248
Chapter 17: Server behaviors	249
Dreamweaver architecture	250
Server behavior folders and files	250
Extension Data Markup Language	250
Group files	250
Participant files	251
The script file	251
A simple server behavior example	251
Creating the dynamic page document	252
Defining the new server behavior	252
Defining the code to insert	252
How the server behavior API functions are called	253
The server behavior API	254
analyzeServerBehavior()	254
applyServerBehavior()	255
canApplyServerBehavior()	256
copyServerBehavior()	256
deleteServerBehavior()	257
displayHelp()	257
findServerBehaviors()	257
inspectServerBehavior()	258
pasteServerBehavior()	258
Server behavior implementation functions	259
dwscripts.findSBs()	259
dwscripts.applySB()	259
dwscripts.deleteSB()	260
Editing EDML files	261
Regular expressions	261
Notes about EDML structure	262
Group EDML file tags	262
<group>	263
<group> attributes	263
version	263
serverBehavior	263
dataSource	264
subType	264
<title>	265
<groupParticipants>	266
<groupParticipants> attributes	266
selectParticipant	266
<groupParticipant>	266
<groupParticipant> attributes	267
name	267
partType	267
Participant EDML files	268
<participant>	268
<participant> attributes	268
version	268
<quickSearch>	269
<insertText>	269
<insertText> attributes	270
location	270
nodeParamName	271
<searchPatterns>	272
<searchPatterns> attributes	272
whereToSearch	272
<searchPattern>	273
<searchPattern> attributes	274
paramNames	274
limitSearch	275
isOptional	276
<updatePatterns>	277
<updatePattern>	277
<updatePattern> attributes	278
paramName	278
<delete>	279
<delete> attributes	279
deleteType	279
<translator>	280
<searchPatterns>	280
<translations>	280
<translation>	281
<translation> attributes	281
whereToSearch	281
limitSearch	281
translationType	282
<openTag>	283
<attributes>	283
<attribute>	283
<display>	284
<closeTag>	284
Server behavior techniques	285
Finding server behaviors	285
Search pattern resolution	288
Updating server behaviors	289
Deleting server behaviors	290
Avoiding conflicts with share-in-memory JavaScript files	291
Chapter 18: Data sources	292
How data sources work	292
A simple data source example	294
Creating the data source definition file	294
Creating the EDML file	295
Creating the JavaScript file that implements the Data Sources API functions	295
Creating the supporting command files for user input	298
Testing the new data source	300
The data sources API functions	301
addDynamicSource()	301
deleteDynamicSource()	301

Match case Limit results 1 per page

DREAMWEAVER CS3

Extending Dreamweaver

Manipulating content within a tree control

Tree controls and the nodes within them are implemented as HTML tags. They are parsed by Dreamweaver and

stored in the document tree. These tags can be manipulated in the same way as any other document node. For more

information on

DOM

functions and methods, see “The Dreamweaver Document Object Model” on page 90.

Adding nodes

To add a node to an existing tree control programmatically, set the

innerHTML

property of the

MM:TREECONTROL

tag or one of the existing

MM:TREENODE

tags. Setting the

inner HTML

property of a tree node

creates a nested node.

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 + ‘<mm:treenode name="node3" value="node3">’;

Adding a child node

To add a child node to the currently selected node set the

innerHTML

property of the selected

node.

The following example adds a child node to the currently selected node:

var tree = document.myTreeControl;

var selNode = tree.selectedNodes[0];

//deselect the node, so we can select the new one

selnode.removeAttribute("selected");

//add the new node to the top of the selected node’s children

selNode.innerHTML = '<mm:treenode name="item10" value="New item11" expanded selected>' + ¬

selNode.innerHTML;

Deleting nodes

To delete the currently selected node from the document structure, use the

innerHTML

outerHTML

properties.

The following example deletes the entire selected node and any children:

var tree = document.myTreeControl;

var selNode = tree.selectedNodes[0];

selNode.outerHTML = "";

A color button control for extensions

In addition to the standard input types such as text, check box, and button, Dreamweaver supports

mmcolorbutton

an additional input type in extensions.

Specifying

<input type=

mmcolorbutton

in your code causes a color picker to appear in the UI. You can set the

default color for the color picker by setting a value attribute on the input tag. If you do not set a value, the color picker

appears grey by default and the value property of the input object returns an empty string.

The following example shows a valid

mmcolorbutton

tag:

A color button has one event,

onChange

, which is triggered when the color changes.

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:

<input type = "mmcolorbutton" name="fgcolorPicker"

onChange="document.fgcolorText.value=this.value">