Anzeigen von Quellcode

Laden, Konfigurieren und Öffnen des Source Viewers
- Konfigurieren des Source Viewers
- Öffnen des Source Viewers
Benutzeroberfläche des Source Viewers

So wie Benutzer Quellcode für eine HTML-Seite in einem Webbrowser anzeigen können, ist es auch möglich, den Quellcode einer HTML-basierten AIR-Anwendung anzuzeigen. Das Adobe® AIR®-SDK enthält die JavaScript-Datei „AIRSourceViewer.js“, die Sie in Ihrer Anwendung verwenden können, um den Quellcode für Endbenutzer zugänglich zu machen.

Laden, Konfigurieren und Öffnen des Source Viewers

Der Source Viewer-Code ist in der JavaScript-Datei „AIRSourceViewer.js“ enthalten, die sich im Frameworks-Verzeichnis des AIR-SDK befindet. Um den Source Viewer in Ihrer Anwendung zu verwenden, kopieren Sie die Datei „AIRSourceViewer.js“ in das Projektverzeichnis Ihrer Anwendung und laden Sie die Datei über ein script-Tag in die Haupt-HTML-Datei der Anwendung:

<script type="text/javascript" src="AIRSourceViewer.js"></script>

Die Datei „AIRSourceViewer.js“ definiert eine Klasse, SourceViewer, auf die Sie aus dem JavaScript-Code zugreifen können, indem Sie air.SourceViewer aufrufen.

Die SourceViewer-Klasse definiert drei Methoden: getDefault() , setup() und viewSource() .

Methode	Beschreibung
`getDefault()`	Eine statische Methode. Gibt eine SourceViewer-Instanz zurück, mit der Sie die anderen Methoden aufrufen können.
`setup()`	Wendet Konfigurationseinstellungen auf den Source Viewer an. Weitere Informationen finden Sie unter Konfigurieren des Source Viewers .
`viewSource()`	Öffnet ein neues Fenster, in dem der Benutzer zu Quelldateien der Hostanwendung navigieren und sie öffnen kann.

Hinweis: Code, der den Source Viewer verwendet, muss sich in der Sicherheits-Sandbox der Anwendung befinden (in einer Datei im Anwendungsverzeichnis).

Der folgende JavaScript-Code instanziiert zum Beispiel ein SourceViewer-Objekt und öffnet das Source-Viewer-Fenster, in dem alle Quelldateien aufgelistet sind:

var viewer = air.SourceViewer.getDefault(); 
viewer.viewSource();

Konfigurieren des Source Viewers

Die config() -Methode wendet bestimmte Einstellungen auf den Source Viewer an. Diese Methode verwendet einen Parameter: configObject . Das configObject -Objekt verfügt über Eigenschaften, die Konfigurationseinstellungen für den Source Viewer definieren. Die Eigenschaften sind default , exclude , initialPosition , modal , typesToRemove und typesToAdd .

default

Ein String, der den relativen Pfad zu der Anfangsdatei angibt, die im Source Viewer angezeigt wird.

Der folgende JavaScript-Code öffnet zum Beispiel das Source-Viewer-Fenster mit der Datei „index.html“ als zuerst angezeigter Datei:

var viewer = air.SourceViewer.getDefault(); 
var configObj = {}; 
configObj.default = "index.html"; 
viewer.viewSource(configObj);

exclude

Ein Array von Strings, das Dateien oder Ordner angibt, die nicht im Source Viewer aufgelistet werden sollen. Die Pfade sind relativ zum Anwendungsverzeichnis. Platzhalterzeichen werden nicht unterstützt.

Der folgende JavaScript-Code öffnet zum Beispiel das Source-Viewer-Fenster, in dem alle Quelldateien mit Ausnahme der Datei „AIRSourceViewer.js“ und der Dateien in den Unterverzeichnissen „Images“ und „Sounds“ aufgelistet sind:

var viewer = air.SourceViewer.getDefault(); 
var configObj = {}; 
configObj.exclude = ["AIRSourceViewer.js", "Images" "Sounds"]; 
viewer.viewSource(configObj);

initialPosition

Ein Array, das zwei Zahlen enthält, die die anfänglichen x- und y-Koordination des Source-Viewer-Fensters angeben.

Der folgende JavaScript-Code öffnet das Source-Viewer-Fenster zum Beispiel bei den Bildschirmkoordinaten [40, 60] (X = 40, Y = 60):

var viewer = air.SourceViewer.getDefault(); 
var configObj = {}; 
configObj.initialPosition = [40, 60]; 
viewer.viewSource(configObj);

modal

Ein boolescher Wert, der angibt, ob der Source Viewer als modales Fenster (true) oder als nicht-modales Fenster (false) angezeigt wird. Standardmäßig ist das Source-Viewer-Fenster modal.

Der folgende JavaScript-Code öffnet das Source-Viewer-Fenster zum Beispiel so, dass der Benutzer sowohl mit dem Source-Viewer-Fenster als auch mit allen Anwendungsfenster interagieren kann:

var viewer = air.SourceViewer.getDefault(); 
var configObj = {}; 
configObj.modal = false; 
viewer.viewSource(configObj);

typesToAdd

Ein Array von Strings, das die Dateitypen angibt, die in der Source-Viewer-Auflistung zusätzlich zu den Standardtypen berücksichtigt werden sollen.

Standardmäßig listet der Source Viewer die folgenden Dateitypen auf:

Textdateien – TXT, XML, MXML, HTM, HTML, JS, AS, CSS, INI, BAT, PROPERTIES, CONFIG
Bilddateien – JPG, JPEG, PNG, GIF

Wenn kein Wert angegeben wird, werden alle Standardtypen eingeschlossen (außer den über die typesToExclude -Eigenschaft ausgeschlossenen Dateitypen).

Der folgende JavaScript-Code öffnet zum Beispiel das Source-Viewer-Fenster und berücksichtigt VCF- und VCARD-Dateien:
```
var viewer = air.SourceViewer.getDefault(); 
var configObj = {}; 
configObj.typesToAdd = ["text.vcf", "text.vcard"]; 
viewer.viewSource(configObj);
```
Für jeden aufgelisteten Dateityp müssen Sie "text" (für Textdateien) oder "image" (für Bilddateien) angeben.

typesToExclude

Ein Array von Strings, das die Dateitypen auflistet, die nicht im Source Viewer angezeigt werden sollen.

Standardmäßig listet der Source Viewer die folgenden Dateitypen auf:

Textdateien – TXT, XML, MXML, HTM, HTML, JS, AS, CSS, INI, BAT, PROPERTIES, CONFIG
Bilddateien – JPG, JPEG, PNG, GIF

Der folgende JavaScript-Code öffnet das Source-Viewer-Fenster zum Beispiel, ohne GIF- oder XML-Dateien aufzulisten:
```
var viewer = air.SourceViewer.getDefault(); 
var configObj = {}; 
configObj.typesToExclude = ["image.gif", "text.xml"]; 
viewer.viewSource(configObj);
```
Für jeden aufgelisteten Dateityp müssen Sie "text" (für Textdateien) oder "image" (für Bild dateien) angeben.

Öffnen des Source Viewers

Sie sollten ein Benutzeroberflächenelement, zum Beispiel einen Hyperlink, eine Schaltfläche oder einen Menübefehl, einfügen, das den Source-Viewer-Code aufruft, wenn der Benutzer es auswählt. Die folgende einfache Anwendung öffnet zum Beispiel den Source Viewer, wenn der Benutzer auf einen Hyperlink klickt:

<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>

Benutzeroberfläche des Source Viewers

Wenn die Anwendung die viewSource() -methode eines SourceViewer-Objekts aufruft, öffnet die AIR-Anwendung ein Source-Viewer-Fenster. Das Fenster enthält eine Liste von Quelldateien und Ordnern (auf der linken Seite) sowie einen Anzeigebereich, in dem der Quellcode für die ausgewählte Datei angezeigt wird (rechts):

Grafik in Originalgröße anzeigen

Ordner werden in eckigen Klammern aufgeführt. Der Benutzer kann auf eine eckige Klammer klicken, um die Auflistung eines Ordners ein- oder auszublenden.

Der Source Viewer kann den Quellcode von Textdateien mit bekannten Erweiterungen (wie HTML, JS, TXT, XML und andere) oder von Bilddateien mit bekannten Erweiterungen (JPG, JPEG, PNG und GIF) anzeigen. Wenn der Benutzer eine Datei auswählt, die keine bekannte Dateierweiterung hat, wird eine Fehlermeldung angezeigt, dass kein Textinhalt von diesem Dateityp abgerufen werden kann.

Quelldateien, die über die setup() -Methode ausgeschlossen sind, werden nicht angezeigt (siehe Laden, Konfigurieren und Öffnen des Source Viewers ).