The main issues many developers find when starting to write extensions is that many of the techniques used to develop DHTML Interface elements simply are not possible within Dreamweaver extension Interfaces.

Another issue is the annoyance that something that is possible in one type of extension is not available in another type of extension.

An example of this is the classic popup menu. Popup Menus can be a life saver when designing an interface for an application, as they allow the developer to group similar or related features to a single interaction point within an interface.

Of course when developing toolbars they are nearly always essential. Without popup menus interfaces would be at best large and confusing and at worst impossible, resulting in most cases with the developer having to leave out a feature that might otherwise have been added in.

When developing Toolbars and Insertbar Objects Extensions for Dreamweaver, developers can make use of popup menus by utilizing the MENUBUTTON tag. But according to the documentation that ships with Dreamweaver if your developing commands or other types of extensions there seems little a developer can do... or is there?

An undocumented Core Object type comes to the rescue with the somewhat obvious name PopupMenu Object. The PopupMenu Object is not packed with features and does not support sub menus or icons and other graphics and menu items can not be grayed out. But it does allow the developer to call a popup menu when and where ever they wish within any extension type.

So how do we use this object?

To define a popup menu in your code you simply declare a variable being of type PopupMenu like so.

Var myPopupMenu = new PopupMenu();

To add items to the menu you make use of addItem method that is one of the two methods the PopupMenu Object exposes. So if we wanted to have four items in the menu when it pops up we would need to call this method four times like so.

myPopupMenu.addItem('item 1');
myPopupMenu.addItem('item 2');
myPopupMenu.addItem('item 3');
myPopupMenu.addItem('item 4');

To make the popup menu appear we need to call the other exposed method which is the popup method. This displays the popup menu allowing the user to select an item from the menu.

var respone = myPopupMenu.popup();

When a user clicks a menu item on the menu the menu item text is assigned to the variable used, in the case of the example above the variable response is assigned the value of the menu item selected.

A simple way to make use and to simplify the code is to write a function to handle the creation and displaying of the menu. This way we can pass in an array of menu items and then use a single function call when ever we need to call a popup menu. The code below demonstrates how to do this.

function popupMenu(a){
    var m = new PopupMenu();
    for(var i=0;i < a.length;i++){
       m.addItem(a[i]);
    }
    var s=m.popup();
    return s;
}

to use this function we simply call the function popupMenu() passing it an array of menu items and it returns the item the user selected.

Example 1 (Code example)

var myMenuItems=new Array('item 1','item 2','item 3','item 4');
var response = popupMenu(myMenuItems);
alert(response)

Example 2 (Code example)

alert(popupMenu([ 'item 1','item 2','item 3','item 4' ]));