Viewing Source CodeJust as a user can view source code for an HTML page in a web browser, users can view the source code of an HTML-based AIR application. The Adobe® AIR® SDK includes an AIRSourceViewer.js JavaScript file that you can use in your application to easily reveal source code to end users. Loading, configuring, and opening the Source ViewerThe Source Viewer code is included in a JavaScript file, AIRSourceViewer.js, that is included in the frameworks directory of the AIR SDK. To use the Source Viewer in your application, copy the AIRSourceViewer.js to your application project directory and load the file via a script tag in the main HTML file in your application: <script type="text/javascript" src="AIRSourceViewer.js"></script> The AIRSourceViewer.js file defines a class, SourceViewer, which you can access from JavaScript code by calling air.SourceViewer. The SourceViewer class defines three methods: getDefault(), setup(), and viewSource().
Note: Code using the Source Viewer must be in the
application security sandbox (in a file in the application directory).
For example, the following JavaScript code instantiates a Source Viewer object and opens the Source Viewer window listing all source files: var viewer = air.SourceViewer.getDefault(); viewer.viewSource(); Configuring the Source ViewerThe config() method applies given settings to the Source Viewer. This method takes one parameter: configObject. The configObject object has properties that define configuration settings for the Source Viewer. The properties are default, exclude, initialPosition, modal, typesToRemove, and typesToAdd. defaultA string specifying the relative path to the initial file to be displayed in the Source Viewer. For example, the following JavaScript code opens the Source Viewer window with the index.html file as the initial file shown: var viewer = air.SourceViewer.getDefault();
var configObj = {};
configObj.default = "index.html";
viewer.viewSource(configObj);
excludeAn array of strings specifying files or directories to be excluded from the Source Viewer listing. The paths are relative to the application directory. Wildcard characters are not supported. For example, the following JavaScript code opens the Source Viewer window listing all source files except for the AIRSourceViewer.js file, and files in the Images and Sounds subdirectories: var viewer = air.SourceViewer.getDefault();
var configObj = {};
configObj.exclude = ["AIRSourceViewer.js", "Images" "Sounds"];
viewer.viewSource(configObj);
initialPositionAn array that includes two numbers, specifying the initial x and y coordinates of the Source Viewer window. For example, the following JavaScript code opens the Source Viewer window at the screen coordinates [40, 60] (X = 40, Y = 60): var viewer = air.SourceViewer.getDefault();
var configObj = {};
configObj.initialPosition = [40, 60];
viewer.viewSource(configObj);
modalA Boolean value, specifying whether the Source Viewer should be a modal (true) or non-modal (false) window. By default, the Source Viewer window is modal. For example, the following JavaScript code opens the Source Viewer window such that the user can interact with both the Source Viewer window and any application windows: var viewer = air.SourceViewer.getDefault();
var configObj = {};
configObj.modal = false;
viewer.viewSource(configObj);
typesToAddAn array of strings specifying the file types to include in the Source Viewer listing, in addition to the default types included. By default, the Source Viewer lists the following file types:
typesToExcludeAn array of strings specifying the file types to exclude from the Source Viewer. By default, the Source Viewer lists the following file types:
Opening the Source ViewerYou should include a user interface element, such as a link, button, or menu command, that calls the Source Viewer code when the user selects it. For example, the following simple application opens the Source Viewer when the user clicks a link: <html>
<head>
<title>Source Viewer Sample</title>
<script type="text/javascript" src="AIRSourceViewer.js"></script>
<script type="text/javascript">
function showSources(){
var viewer = air.SourceViewer.getDefault();
viewer.viewSource()
}
</script>
</head>
<body>
<p>Click to view the source files.</p>
<input type="button"
onclick="showSources()"
value="View Source" />
</body>
</html>
Source Viewer user interfaceWhen the application calls the viewSource() method of a SourceViewer object, the AIR application opens a Source Viewer window. The window includes a list of source files and directories (on the left) and a display area showing the source code for the selected file (on the right): Directories are listed in brackets. The user can click a brace to expand or collapse the listing of a directory. The Source Viewer can display the source for text files with recognized extensions (such as HTML, JS, TXT, XML, and others) or for image files with recognized image extensions (JPG, JPEG, PNG, and GIF). If the user selects a file that does not have a recognized file extension, an error message is displayed (“Cannot retrieve text content from this filetype”). Any source files that are excluded via the setup() method are not listed (see Loading, configuring, and opening the Source Viewer). |
|