Components panel files

The Configuration/Components folder has a subfolder for each implemented server model. Component files are stored in the Configuration/Components/server-model/ComponentType folder. You can add other server models and supporting server extensions (for more information, see Chapter 19, "Server Models," on page 423 and Chapter 15, "Server Behaviors," on page 321).

To create a custom component that can work in the Components panel:

• Create an HTML file that identifies the locations of supporting JavaScript and image files.
  
  
• Write the JavaScript to enable the component.
  
  
• Create or identify existing GIF image files to represent the component in the Components panel.
  
  

If you want the component type to appear in a tree control view, you also need to create the associated optional files and populate the tree control.

You can set a component type to work at the level of an individual web page, to a set of web pages, or to 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.

The following example shows a data entry in the file JavaBeansList.xml (to be saved in the multiuser configuration folder) that defines the component class and its location:

 <javabeans> <javabean classname="TestCollection.MusicCollection" classlocation="d:\music\music.jar"></javabean> </javabeans> 

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 lightweight directory access protocol (LDAP) service using Dreamweaver MX:

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 list.	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 Configuration/Components/Common/WebServices/WebServices.htm file contains the line:

 <SCRIPT src="/books/4/533/1/html/2/../../Common/WebServices/WebServicesCommon.js"></SCRIPT>. 

For more information on the available Component API functions, see "Components panel API functions" on page 412.

TIP

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.

Populating the 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;