Anzeigen von Quellcode

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 Bilddateien) 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 anderen) 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).