Customize Components panel files in Dreamweaver

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).

Create a custom component that can work in the Components panel

  1. Create an HTML file that identifies the locations of supporting JavaScript and image files.

  2. Write the JavaScript to enable the component.

  3. Create or identify existing GIF image files to represent the component in the Components panel.

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.

Add a new lightweight directory access protocol (LDAP) service component

  1. 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.

  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 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.

Properties of tree control

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

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 = true; 
// the following allows of enabling/disabling of the button that appears 
// above the Component Tree 
this.allowDelete = true; 
this.isDesignViewDraggable = false;