Constructing Fireworks Commands

To better understand all that is involved in the programming of crossapplication extensions, you need to have a firm grasp of the user experience. When you understand the end result, the reasoning behind the coding process becomes much clearer.

NOTE

Cross-application extensions are found listed under the Commands menu; however, the Extension Manager can install them wherever the author deems appropriate. You can access the Fireworks Button object, for example, through Media it's own categoryin the Insert panel.

Running the Command: The User Experience

Let's step through a sample command. Although the following example uses screen shots from the Convert Text to Image command, the basic procedure is the same for any such extension:

1. The user invokes the command in Dreamweaver.

2. The command's dialog box, like the one for Convert Text to Image in Figure 7.3, appears.

   Figure 7.3. As with other Dreamweaver extensions, the dialog box is the primary user interface for specifying parameters. The key difference with a cross-application extension like Convert Text to Graphics is that these parameters are eventually passed to Fireworks for processing.

   

3. The user clicks OK to run the command after all the parameters are selected.

4. A small message box appears that says Waiting for Fireworks .

   As you'll see in the next section, this message box is actually a separate command launched from the Convert Text to Image command.

5. Fireworks opens or, if it is already open , it is brought to the front.

6. The Fireworks- related commands are executed and a small dialog box appears indicating that a script is being processed .

   When you're finished in Fireworks, Dreamweaver comes back to the front and the small message box and dialog box close. Any changes to image or text are then incorporated into the Dreamweaver document.

TIP

One of the cool features of the Convert Text to Image command is the swatch that shows an example of the selected Fireworks style. These swatches are actually created programmatically from within the extension by pressing the Update Styles button.

Depending on the complexity of the command and the speed of the system involved, the whole procedure might happen so fast that the user is not aware of all of these steps. All that the end user really has to do is click the OK button. The programmer's task, as you'll see, is a tad more complex. Now, let's pop that hood and see what's really going on.

TIP

You can customize the processing message by changing the App.batchStatusString property when you execute the Fireworks command. To see this effect in action, select Update Styles from either the Convert Text to Image or Convert Bullets to Image commands.

Behind the Scenes: The Developer's Experience

The biggest problem in creating cross-application extensions is one-way communication. Although Dreamweaver (through the FWLaunch DLL) is clearly able to send a command to Fireworks for execution, Fireworks cannot, in turn , talk to Dreamweaver. Rather, Dreamweaver must wait for a response to its request to Fireworks before it can continue processing. This restricted communication is the rationale behind the code workflow found in cross-application extensions. You might be surprised to find that such an application typically involves a minimum of five different JavaScript files.

Let's look at an overview of how the process works, from the coding perspective. You might find it helpful to refer to diagram 7.4.

Figure 7.4. The cross-application extension workflow from a code point-of-view .

1. The user executes the Dreamweaver command, stored in the Commands folder.

2. The user presses the OK button, and then several key events take place:

   • All of the user-selected parameters are entered into their appropriate variables .

   • These variables are passed to Fireworks via the execFunctionInFireworks() function, stored in Shared/Fireworks/FwExec.js.

   • The actual commands to be processed within Fireworks are written to a temporary file, fwExecTempScript.jsf, which is stored in the Shared/MM/Scripts/ folder. The .jsf extension designates a Fireworks JavaScript file.

3. The execFunctionInFireworks runs a separate command, FwExecDlg , to pop up the Waiting for Fireworks notice.

   The FwExecDlg command is a "hidden" command found in the file, FwExecDlg.htm. The HTML comment, <!-- MENU-LOCATION=NONE --> , before the opening <html> tag prevents the extension from appearing in the Commands folder.

4. When the FwExecDlg command loads, it calls one function: fwexec_execJsInFireworksAndWaitForResponse() . This function is founded in the external JavaScript file, FwExecDlg.js.

   The key function call contained within fwexec_execJsInFireworksAndWaitForResponse() is FWLaunch.execJsInFireworks() , which executes a temporary JavaScript file created on-the-fly and stored in Shared/MM/Scripts/fwExecTempScript.jsf.

NOTE

Dreamweaver commands may be split into two or more files within the Commands folder, an HTML file and a JavaScript file. The HTML page holds the form and form elements that make up the dialog box as well as <script> tag linking to the JavaScript file. The JavaScript file contains most, if not all, of the JavaScript functions necessary. This file often also defines text strings in a series of global variables to make localization easier. All of Macromedia's commands use the two-file design.

Although this whole procedure might appear quite convoluted, it's actually fairly straightforward to implement. With the standard Macromedia files (FwExec.js, FwExecDlg.htm, and FwExecDlg.js) in place, all the back-end interprocess communication is handled for you. As a programmer, you can concentrate on coding the commands to execute in Fireworks and Dreamweaverand you'll find an example of how it's done in the next section.