Workshop 3: Manipulating the Menu Entry for a Command

Workshop #3: Manipulating the Menu Entry for a Command

In this workshop, we'll make the Make Upper Case command a bit fancier. First, we'll make the command disappear from the Commands menu and appear in the Text menu (much more logical placement). Then we'll add a new, related command to the Text menuMake Lower Caseand use a passed argument to allow us to use the same command document for both commands.

Task 1: Change the menu placement of the Make Upper Case command

This is a fairly simple operation. Often, the most challenging part of moving menu entries is determining where to move them to. To make life easier and to avoid disturbing the existing interface, this workshop shows you how to tuck your command in at the bottom of the Text menu, below the Check Spelling menu item.

1. Open the Make Uppercase.htm file and put the following line of code at the very top of the document:

    <! MENU-LOCATION=NONE > 

   When this is done, save the file and close it. Now, if you reload Dreamweaver extensions and check your Commands menu, you'll see that the Make Upper Case command no longer appears there.

Task 2: Add an entry for Make Upper Case to the menus .xml file.

Now that the command no longer appears in the menus automatically, we need to explicitly add it by adding an entry to menus.xml. (Remember, if you're working in a multiuser environment, use the menus.xml file in your user -specific Configuration folder.)

1. Quit Dreamweaver. It's best not to edit menus.xml while Dreamweaver is running.

2. In your text editor, open menus.xml. Here comes the tricky part! Find the lines of code that control the Text menu, and in particular the line that creates the Check Spelling entry. To make this job easier, use your text editor's Find command to search for Spelling . Unless you've installed other extensions that change menus.xml, the entry should be at line 2468.

3. Directly under the menuitem for Check Spelling, create a new line, and enter this code:

    <menuitem name="Change to Upper Case" file="Commands/Make Uppercase.htm"  id="MyStuff_Make_Uppercase"/> 

   Feel free to substitute your own ID if you like, specifying your own company or personal name. Make sure that the file attribute matches the filename you used for the command file.

4. When you're all finished, launch Dreamweaver, and look in the menus for your new command. Figure 5.22 shows the menu item in its new home, at the bottom of the Text menu. Try the command on a test document to make sure it still works.

   Figure 5.22. The Text menu, showing the Change to Upper Case menu item.

   

Task 3: Add the Change to Lower Case command to the Text menu

It's time to leverage all the hard work you put into developing the changeCase() function by making it work for two commands instead of one. We'll do this by creating an argument in the menus file, and setting it to upper for one command and lower for another. This is done in the menus file.

1. Quit Dreamweaver. Then open the menus.xml file and find your command's menu item. (Here's a tip: To find the proper menu entry, search for whatever you assigned as the ID property of your custom menu item.)

2. Add the arguments property to your entry, assigning it a value of upper , like this (new code is in bold):

    <menuitem name="Change to Upper Case" file="Commands/Make Uppercase.html"   arguments="'upper'"  id="MyStuff_Make_Uppercase"/> 

   Note that the argument must appear in two sets of quotation marks, single quotes inside double quotes. The argument must be passed as a string, and you need it to contain a string as well.

3. To create the new menu entry for converting text to lowercase, select and copy the <menuitem/> tag for your command, and paste it into the next line of the menus file. Change the code to create a lowercase command and to pass the argument lower , like this (new code is in bold):

    <menuitem name="Change to  Lower  Case" file="Commands/Make Uppercase.html"  arguments="'lower'"  id="MyStuff_Make_  Lowercase  "/> 

   Make sure you change the ID! Remember, every command must have its own unique ID, and you are creating a new command (but without creating a new command file).

4. When you're done, save and close the menus file.

5. Launch Dreamweaver and check the Text menu. You'll see both of your commands present, as shown in Figure 5.23. Of course, they won't be fully functional yet. Because the command file doesn't have a way of processing arguments, at this point both commands will make text uppercase.

   Figure 5.23. The Text menu, showing the Make Upper Case and Make Lower Case commands in place.

   

Task 4: Add the receiveArguments() function to the command document

Now we need to set up the command document to receive and process this new argument. We'll do this by creating a global variable to store the argument, and adding the receiveArguments() function to feed the upper or lower argument into the variable.

1. Open the Make Upper Case.htm command file in your text editor. Add the following code to the document's <script> tag:

    var gCase;  function receiveArguments() {  gCase = arguments[0];  } 

   When the user chooses Text > Make Upper Case or Text > Make Lower Case, Dreamweaver will access this file, passing it the appropriate argument ( upper or lower ) as specified in the menus.xml entry. The receiveArguments() function you just defined feeds that argument into the gCase variable. Because you have defined gCase as a global variable, the command's other functions (such as the changeCase() function) will have access to it as well.

Task 5: Revise the changeCase() function to accommodate the argument

After you've collected the argument in the gCase variable, you only need to tweak the changeCase() function a bit to account for it.

1. Only one line of the function needs to be changed. Find the line of your changeCase() function that uses the toUpperCase() method, and change it from this

    //if toggle is 1, set thisLetter to upper case  if (toggle==1) {     thisLetter=thisLetter.toUpperCase();     } 

   to this (new code is in bold):

    //if toggle is 1, set thisLetter to upper case  if (toggle==1) {  if (gCase=="upper") {  thisLetter=thisLetter.toUpperCase();  }else{   thisLetter=thisLetter.toLowerCase();   }  } 

   Can you see how this works? If toggle is set to 1 , some kind of capitalization change will occur. Within that conditional, if the gCase argument is set to upper , that change will be to capitalize the character in question. Otherwise, the change will be to uncapitalize the character.

2. Save the file and close it. Then try your two commands out in Dreamweaver.

note

Troubleshooting

Assuming your command worked before you added the argument, the only problems you're likely to encounter at this point are typing mistakes. Make sure you've entered the receiveArguments() function and the gCase variable inside the command file's <script> tag but not inside any other functions. Make sure that, in menus.xml, your arguments are nested inside two sets of quotes. In the changeCase() function, make sure you added the proper number of curly braces for the nested if-else statement.