The Configuration/Components folder has a subfolder for each implemented server model. Component files are stored in the Configuration/Components/server-model/ComponentType folder. You can add other server models and supporting server extensions (for more information, see Server models and Server behaviors).
To make the component type appear in a tree control view, create the associated optional files and populate the tree control.
You can set a component type to work at three levels: individual web page, set of web pages, or an entire site. Your JavaScript code must include the logic for component persistence—for saving itself between sessions and reloading at the start of a new session.
-
Using existing component type files as a model (such as the files in the application folder Configuration/Components/Common/WebServices), create all the required files, plus the desired optional files, to display the new component type in the Dreamweaver Components panel, as shown in the following table:
Filename
Description
Required/Optional
*.htm
The extension file that identifies other supporting JavaScript and GIF files.
Required
*.js
The extension file that implements the Component API callback.
Required
*.gif
The image that appears in the Components pop-up menu.
Required
*Menus.xml
The repository for metadata that organizes the Components panel structure. Although the common WebServices component does not use this file, you can refer to the file WebServicesMenus.xml in the application folder Components/ColdFusion/WebServices as an example.
Optional
*.gif
Toolbar images, which can be enabled or disabled, as shown in the following example: ToolBarImageUp.gif ToolBarImageDown.gif ToolBarImageDisabled.gif
or, tree node images.
Optional
Note:
Keep the same prefix throughout all the files that correspond to one component so that each file and its corresponding component can be identified easily.
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 folder for code that applies to multiple server models.
For example, the WebServices.htm file in the Configuration/Components/Common/WebServices/ folder contains the line:
<SCRIPT SRC="../../Common/WebServices/WebServicesCommon.js"></SCRIPT>
For more information on the available Component API functions, see Components panel API functions.
Note:
When adding a new service, you might want to use the Components panel to browse meta information so that the information is readily available as you create the extension. Dreamweaver can browse added components and display nodes in the component tree. The Components panel provides drag-and-drop support and keyboard support in Code view.
Use the ComponentRec property to populate a Components panel tree control, so that it appears within the Components panel in the proper location. Every node in a tree control must have the following properties:
Property name |
Description |
Required/Optional |
---|---|---|
name |
Name of the tree node item |
Required |
image |
Icon of the tree node item. If it is not specified, a default icon is used. |
Optional |
hasChildren |
Responds to clicks on the Plus (+) and Minus (-) buttons in the tree control by loading children. You can work with a tree that is not prepopulated. |
Required |
toolTipText |
Tooltip text of the tree node item |
Optional |
isCodeViewDraggable |
Determines whether the item can be dragged and dropped into the Code view. |
Optional |
isDesignViewDraggable |
Determines whether the item can be dragged and dropped into the Design view. |
Optional |
this.name = "TrafficLocatorWebService"; this.image = "Components/Common/WebServices/WebServices.gif"; this.hasChildren = true; this.toolTipText = "TrafficLocatorWebService"; this.isCodeViewDraggable = true; // the following allows of enabling/disabling of the button that appears // above the Component Tree this.allowDelete = true; this.isDesignViewDraggable = false;