Customizing the Dreamweaver Workspace


Custom tag support is just the beginning when it comes to integrating Dreamweaver into a CMS workflow. Additional custom features include the following:

  • Toolbars ” Newly customizable in Dreamweaver MX, toolbars provide easy access to commonly used commands, such as Save File or Close.

  • Menus ” The entire menu structure ”including main and context menus ”is extensible, both to incorporate new CMS-specific commands and to limit certain Dreamweaver functionality.

  • Help files ” In the latest version, Dreamweaver switched from a browser-based to a system-specific help system: compiled Win Help files for Windows and Apple Help files for Macintosh. You can integrate custom help files under either operating system in Dreamweaver.

Dreamweaver can, in essence, be customized to such a degree that it functions as an extension of the CMS.

Modifying the Menus

The menus in Dreamweaver, like many other programs, are the primary interface for user interaction. Although you can accomplish an action in numerous other ways ”selecting a toolbar button, dragging in an object ” the same task is almost always accessible through the menus. Dreamweaver menus are completely customizable. CMS systems can integrate menu commands where users are likely to look as well as inserting a completely new, dedicated menu. Any element on the page or in the user interface that has a context menu can also be addressed. You could, for example, add a CMS-specific menu item to a context menu for a selected image.

WARNING

Use extreme caution when editing the menus.xml file. Although Macromedia includes a backup file, menus.bak, in the same folder, I recommend that you store another copy of the menus.xml file in a separate location. Because of the structure of the menus.xml file, if an error occurs while you're modifying the file, the menus in Dreamweaver could be seriously damaged. Replacing the modified menus.xml with your backup restores full functionality.


The entire menu structure in Dreamweaver is controlled by a single XML file found in the Configuration/Menus folder, menus.xml. To customize the menus ”beyond editing the shortcuts, which can be done by choosing Edit > Keyboard Shortcuts ”you need to edit the menus.xml file. There are currently two ways to modify this file: by hand or by installing an extension. Either way, you need to understand the menus.xml structure before proceeding.

The menus.xml file contains two main XML tag structures: <shortcutlist> and <menubar> . This discussion is concerned solely with the <menubar> construct. The <menubar> tag is used for both context and main menus. Each menu is identified with a unique ID attribute; the ID for the main menu, for example, is DWMainWindow , whereas the context menu for anchor tags is DWAnchorContext . Within each <menubar> tag is one or more <menu> tags. A menu tag corresponds to the drop-down menus, such as File, Edit, and View; context menu bars have only one <menu> tag. Within the <menu> tag is a series of <menuitem> tags, which are the individual menu selections. Submenus are created by nesting one <menu> tag within another.

Here's a typical <menubar> tag that defines the Search panel context menu:

 <menubar name="" id="DWSearchTab">      <menu name="" id="DWSearchTab_ContextMenu">          <menuitem name="Open File"  enabled="dw.resultsPalette.canOpenInEditor();"  command="dw.resultsPalette.openInEditor()" domRequired="FALSE"  id="DWSearchTab_OpenInEditor"/>          <menuitem name="_Find and Replace..."  domRequired="false" enabled="dw.getDocumentDOM() != null"  command="dw.showFindReplaceDialog()" id="DWSearchTab_Find_Replace"  />          <menuitem name="Clear Results"  enabled="dw.resultsPalette.canClear();"  command="dw.resultsPalette.clear()" domRequired="FALSE"  id="DWSearchTab_Clear"/>      </menu>  </menubar> 

To add a custom CMS menu item to an existing menu, you need to properly define the <menuitem> tag, which takes the following attributes:

  • name ” The label for the item as it appears in the menu.

  • id ” A unique identifier that typically includes a reference to the menu ( DWSearchTab_Clear ).

  • enabled ” An optional JavaScript statement that evaluates to either true or false and determines whether the menu item is available.

  • command ” A JavaScript command that executes when the menu item is chosen .

  • file ” A path to a JavaScript file that executes when the menu item is selected.

NOTE

The command and file attributes are mutually exclusive ”only one may be included in any given <menuitem> tag. However, one or the other is required.


Let's look at the structure for a typical CMS- related <menuitem> .Our example, Mark JWL Index, is intended to wrap any selected text with a <jwl:index> tag. The menu item should be available only from the text context menu. The first attribute, name , is simple enough:

 name = "Mark JWL Index" 

Next, we'll add the identifying id attribute:

 id="DWTextContext_JWL_Index" 

Make sure that the id attribute is unique, or the menu structure could become corrupt. If you're not sure, do a search for the proposed ID value in the menus.xml file.

The third attribute, enabled , is somewhat more complex. Before we can apply the attribute, we need to make sure that text is selected, not some other item like an image. The Dreamweaver JavaScript API has all the power we need:

 enabled = "dw.getDocumentDOM().getSelectedNode().nodeType ==  Node.TEXT_NODE" 

Now we're ready to add the actual command attribute to execute the menu item:

 command="dw.getDocumentDOM().wrapTag('<jwl:index>') 

The completed menuitem tag looks like this:

 <menuitem name = "Mark JWL Index" id="DWTextContext_JWL_Index"  enabled = "dw.getDocumentDOM().getSelectedNode().nodeType ==  Node.TEXT_NODE"  command="dw.getDocumentDOM().wrapTag('<jwl:index>') /> 

All you need to do now is locate the text context menu and insert the item. I generally use Dreamweaver's Find & Replace command to locate the proper menu. In this case, I'd search for DWTextContext , the id of the desired menu. Once found, it's merely a matter of adding the <menuitem> tag within the <menu> tag. You can even add <separator /> tags on either side to isolate the custom command.

As noted earlier, entire menus can be added to the Dreamweaver main menu bar. To accomplish this, insert a complete <menu> tag with the needed <menuitems> after the Dreamweaver File menu ( id="DWMenu_File" ) and before the Dreamweaver Help menu ( id="DWMenu_Help" ). (You can add menus anywhere except before the File and after the Help menu.) Let's look at an example of a CMS <menu> tag with a submenu under one of the items, Utilities. To make the structure clear, I've only included the name attribute for the various <menuitem> tags:

graphics/01icon03.gif

As you can see, the menu item that opens the submenu is not another <menuitem> tag, but the opening <menu> tag. You might also notice the ID for the nested <menu> tag; although it is not required to refer to containing elements in this way ”DWMenu_JWL_Utilities ”it makes it far easier to see where a menu is located.

Inserting Customized Toolbars

Toolbars, like menus, are completely customizable in Dreamweaver. Toolbars are great for providing shortcuts to often-used functionality without forcing the user to memorize keystrokes.

Structurally, Dreamweaver toolbars are like Dreamweaver menus. Both are defined by a central XML file; both allow individual items to be added to existing elements; and both permit completely new elements to be added to the system. Toolbars, however, do offer several key enhanced features over menus:

  • A variety of controls are available, including buttons, checkboxes, option buttons, menu buttons , drop-down lists, combo boxes, text fields, and color pickers.

  • Greater interactivity with the user is allowed. Multiple images can be used to respond to mouse over, mouse out, selection, and deselection events.

  • Reuse of toolbar items in multiple toolbars is possible.

The toolbars.xml file is found in Configuration/Toolbars. The file consists of a series of <toolbar> tags, each containing a number of entries. Here's a simplified version of the Standard toolbar definition, with only the id and tooltip attributes:

 <toolbar id="Standard_Toolbar" initiallyVisible="false"  label="Standard">     <button id="DW_New" tooltip="New" />     <button id="DW_Open" tooltip="Open" />     <button id="DW_Save" tooltip="Save" />     <button id="DW_SaveAll" tooltip="Save All" />     <separator />     <button id="DW_Cut" tooltip="Cut" />      <button id="DW_Copy" tooltip="Copy" />     <button id="DW_Paste" tooltip="Paste" />     <separator />     <button id="DW_Undo" tooltip="Undo" />     <button id="DW_Redo" tooltip="Redo" />  </toolbar> 

Let's see how you would go about adding a toolbar item to an existing toolbar. In this example, you'll see how to add a type of text field, called an editcontrol , to a toolbar. The editcontrol allows the user to enter a text value. Then, when the user presses Enter (or Return) or selects another interface element, editcontrol executes a script. Our fictional editcontrol will be used to set a CMS start date tag for the given document and add it to the Standard toolbar.

The tag entry for each item on the toolbar is based on the item type. In our example, our toolbar item is an <editcontrol> tag. As with <menuitem> tags, all toolbar entries must have a unique ID attribute. For our example, that attribute is this:

 id="JWL_SetStartDate" 

Different item types have different attributes, but all require a ToolTip that shows the user what the toolbar item is:

 tooltip="Start Date for JWL Content" 

Special attributes for the editcontrol toolbar type include a label , which is positioned to the left of the text field, and a width value, given in pixels:

 label="Start Date: "  width="150" 

The file attribute is a path to an HTML file that is executed when the toolbar item is activated. Typically, this file is stored in the Toolbars folder in a custom directory:

 file="Toolbars/JWL/StartDate.htm" 

Here's the complete tag:

 <editcontrol file="Toolbars/JWL/StartDate.htm"  id="JWL_SetStartDate" label="Start Date: " tooltip="Start Date for  JWL Content" width="150" /> 

When inserted as the last entry of the Standard toolbar definition, a text field appears, as shown in Figure 1.5.

Figure 1.5. Editcontrol text fields are just one of the types of toolbar objects possible.

graphics/01fig05.gif

Incorporating Custom Help Files

Built-in help is an important aspect of any CMS system. Most content management systems are fairly complex, and users often need access to online documentation. Incorporating a custom help system within Dreamweaver makes it easier for designers and developers who are using a CMS to get answers as quickly as possible, without leaving the application they are working in.

Dreamweaver MX now uses operating system style help files instead of Web-based help. Windows systems use a compiled help format in which the files use a .chm extension; Apple systems work with the Apple Help format. To incorporate custom help systems into Dreamweaver, you need to output your help files into these formats.

TIP

A commercial extension, Deva Tools for Dreamweaver, is capable of outputting .chm files. Co-developed by me, Deva Tools is available at www.devahelp.com. Compiled help files also can be created by working with HTML Help Workshop, available from Microsoft at http://www.microsoft.com/downloads/release.asp?releaseid=33071. On the Macintosh side, a set of BBEdit extensions for creating Apple Help is available from http://www.powrtools.com/powrhelp/.


After the files are created, you need to modify three Dreamweaver files to integrate them into the Dreamweaver help system. The first file is the help.xml file found in the Dreamweaver/Help folder; note that this is one extensions folder that is not found within the Configuration folder. The standard help.xml file contains three entries: one for Using Dreamweaver, one for Extending Dreamweaver, and one for using ColdFusion:

 <?xml version="1.0" ?>  <help-books>     <book-id id="DW_Using" win-mapping="dwusing.chm" mac-    mapping="Using Dreamweaver MX/book"/>     <book-id id="DW_Extending" win-mapping="dwextend.chm" mac-    mapping="Extending Dreamweaver MX/book"/>     <book-id id="CF_Using" win-mapping="cfbooks.chm" mac-    mapping="ColdFusion"/>  </help-books> 

Modify the help.xml file to include a custom entry for your CMS help files, as in this example:

 <book-id id="JWL_Using" win-mapping="jwlusing.chm" mac mapping="JWL/book"/> 

The second file that needs modification is the menus.xml file. You need to add a <menuitem> tag to invoke the help systems, like this one:

 <menuitem name="Using JWL in Dreamweaver" arguments="'JWLUsing'"  file="Menus/MM/CSHelp.htm" id="DWMenu_Help_JWLUsing" /> 

This <menuitem> passes an argument, in the example JWLUsing, to a file CSHelp.htm in the Menus/MM folder ”which just happens to be the third file that you need to modify. The primary element within the CSHelp.htm file is the receiveArguments() function. This function is a series of Else If statements that display the proper help file given a particular argument. To incorporate a custom help system, an additional Else If statement is added, like this one:

 else if (arguments[0] == 'JWLUsing'){   helpDoc = "JWL_Using:index.htm";  } 

Set to the index.htm, this function displays the opening page of the custom help file.



Joseph Lowery's Beyond Dreamweaver
Joseph Lowerys Beyond Dreamweaver
ISBN: B000H2MWYS
EAN: N/A
Year: 2001
Pages: 87
Authors: Joseph Lowery

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net