Stand-alone reports | Developing Extensions for Macromedia Dreamweaver 8

< Day Day Up >

You can use the Results Window API to create a stand-alone report. Stand-alone reports are regular commands that directly use the Results Window API rather than the Reports API. You can access a stand-alone report the same way you access any other command, through the menus or through another command.

Stand-alone reports reside in the Dreamweaver Configuration/Commands folder. A custom command for a stand-alone report appears on the Commands menu.

Dreamweaver creates a new Results window each time the user runs a new stand-alone report.

Path	File	Description
Configuration/Commands	commandname.htm	Defines the UI for the dialog box that appears when the user selects the command and contains the JavaScript code or a reference to the JavaScript file that performs the actions needed to generate the report.
Configuration/Commands	commandname.js	Generates a Results window and puts the report in it.

How stand-alone reports work

1.	The custom command, which is the command you create to generate the report, opens a new results window by calling the `dw.createResultsWindow()` function and storing the returned results object in a window variable. The remaining functions in this process should be called as methods of this object.
2.	The custom command initializes the title and format of the Results window by calling the `setTitle()` and `SetColumnWidths()` functions as methods of the Results window object.
3.	The command can either start adding items to the Results window immediately by calling the `addItem()` function, or it can begin iterating through a list of files by calling the `setFileList()` and `startProcessing()` functions as methods of the Results window object.
4.	When the command calls `resWin.startProcessing()`, Dreamweaver calls the `processFile()` function for each file URL in the list. Define the `processFile()` function in the stand-alone command. It receives the file URL as its only argument. Use the `setCallbackCommands()` function of the Results window object if you want Dreamweaver to call the `processFile()` function in some other command.
5.	To call the `addItem()` function, the `processFile()` function needs to have access to the Results window that was created by the stand-alone command. The `processFile()` function can also call the `stopProcessing()` function of the Results window object to stop processing the list of files.

A simple stand-alone report example

The simple stand-alone report extension lists all the images referenced in a particular file and displays the report in the Results window.

You create this extension by performing the following steps:

1.	Creating the dialog box UI
2.	Writing the JavaScript code

This example creates two files in the Configuration/Commands folder: List images.htm which defines the UI of the dialog box that appears when the user selects the custom command, and Listimages.js, which contains the JavaScript code specific to this report.

Creating the dialog box UI

The BODY of the HTML file specifies the contents of the dialog box that appears when the user selects the custom command and calls any JavaScript files required.

To create the HTML file:

Create the Configuration/Commands/Listimages.htm file.

Enter the following in the Listimages.htm file:

 <html> <head> <title>Standalone report example</title> <script src="/books/4/533/1/html/2/Listimages.js"> </script> </head> <body> <div name="test"> <form name="myForm"> <table> <tr> <td>Click OK to display the standalone report.</td> </tr> </table> </form> </div> </body>

Save the file as Listimages.htm in the Configuration/Commands folder.

Writing the JavaScript code

Next, you create the JavaScript file that contains any functions that are specific to your stand-alone report.

To create the JavaScript file:

Create the Listimages.js file in the Configuration/Commands folder with the following code:


 function stdaloneresultwin()  {   var curDOM = dw.getDocumentDOM("document");   var tagList = curDOM.getElementsByTagName('img');   var imgfilename;   var iOffset = 0;   var iLineNumber = 0;   var resWin = dw.createResultsWindow("Images in File", ["Line", "Image"]);   for (var i=0; i < tagList.length; i++)    {     // Get the name of the source file.       imgfilename = tagList[i].getAttribute('src');     // Get the character offset from the start of the file     // to the start of the img tag.     iOffset = curDOM.nodeToOffsets(curDOM.images[i]);     // Based on the offset, figure out what line in the file      // the img tag is on.     iLineNumber = curDOM.getLineFromOffset(iOffset[0]);     // As long as the src attribute specifies a file name,       if (imgfilename != null)      { // display the line number, and image path.       resWin.addItem(resWin, "0", "Images in Current File", null, null, null, [iLineNumber , imgfilename]);       }   }   return; } // add buttons to dialog function commandButtons() {   return new Array("OK", "stdaloneresultwin()", "Cancel", "window.close()"); }

Save the file as Listimages.js in the Configuration/Commands folder.

< Day Day Up >