Stand-alone reports in Dreamweaver

Stand-alone reports

Search
Adobe Dreamweaver User Guide

On this page

Applies to: Adobe Dreamweaver

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

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 creating the dialog box UI and 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.

Create the dialog box UI

The body section 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.

  1. Create the Configuration/Commands/Listimages.htm file.

  2. Enter the following in the Listimages.htm file:

     <html> 
<head> 
<title>Standalone report example</title> 
<script src=”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>

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

Write the JavaScript code

Create the JavaScript file that contains any functions that are specific to your stand-alone report.

  1. 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()"); 
}

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