Broncode bekijken

De Source Viewer laden, configureren en openen
- De Source Viewer configureren
- De Source Viewer openen
Gebruikersinterface van de Source Viewer

Net zoals gebruikers de broncode van een HTML-pagina in een webbrowser kunnen bekijken, is het ook mogelijk om de broncode van een AIR-toepassing op HTML-basis te bekijken. De SDK van Adobe® AIR® bevat een JavaScript-bestand met de naam AIRSourceViewer.js waarmee de broncode in de toepassing bekeken kan worden.

De Source Viewer laden, configureren en openen

De code voor de Source Viewer staat in een JavaScript-bestand met de naam AIRSourceViewer.js. Dit bestand staat in de map frameworks van de SDK van AIR. Als u de Source Viewer in een toepassing wilt gebruiken, kopieert u het bestand AIRSourceViewer.js naar de projectmap van de toepassing en laadt u het bestand via een scripttag in het hoofd-HTML-bestand in de toepassing:

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

Het bestand AIRSourceViewer.js definieert een klasse met de naam SourceViewer. Om vanuit JavaScript toegang tot deze klasse te krijgen roept u air.SourceViewer aan.

De klasse SourceViewer definieert drie methoden: getDefault() , setup() en viewSource() .

Methode	Beschrijving
`getDefault()`	Een statische methode. Hiermee wordt een instantie SourceViewer geretourneerd, waarmee u de andere methoden kunt aanroepen.
`setup()`	Hiermee worden configuratie-instellingen op de Source Viewer toegepast. Zie De Source Viewer configureren voor meer informatie.
`viewSource()`	Hiermee wordt een nieuw venster geopend waarin de gebruiker naar bronbestanden van de hosttoepassing kan bladeren en deze kan openen.

Opmerking: code die gebruik maakt van de Source Viewer moet in de beveiligingssandbox van de toepassing staan (dit is een bestand in de toepassingsmap).

Met de volgende JavaScript-code wordt bijvoorbeeld een Source Viewer-object ingesteld en wordt het venster Source Viewer geopend met daarin een lijst van alle bronbestanden:

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

De Source Viewer configureren

De methode config() past gegeven instellingen toe op de Source Viewer. Deze methode heeft één parameter nodig: configObject . Het object configObject heeft eigenschappen die configuratie-instellingen voor de Source Viewer definiëren. Deze eigenschappen zijn: default , exclude , initialPosition , modal , typesToRemove en typesToAdd .

default

Een tekenreeks die het relatieve pad aangeeft ten opzichte van het eerste bestand dat in de Source Viewer wordt weergegeven.

Met de volgende JavaScript-code wordt bijvoorbeeld het venster van de Source Viewer geopend met het bestand index.html als eerste weergegeven bestand:

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

exclude

Een matrix met tekenreeksen waarmee bestanden of mappen worden aangegeven die worden weggelaten uit de lijst in de Source Viewer. De paden zijn relatief ten opzichte van de toepassingsmap. Jokertekens worden niet ondersteund.

Met de volgende JavaScript-code wordt bijvoorbeeld het Source Viewer-venster geopend met daarin een lijst van alle bronbestanden met uitzondering van het bestand AIRSourceViewer.js en bestanden in de subcategorieën Images en Sounds:

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

initialPosition

Een matrix die twee getallen bevat waarmee de eerste x- en y-coördinaten van het Source Viewer-venster worden aangegeven.

Met de volgende JavaScript-code wordt het Source Viewer-venster bijvoorbeeld geopend op de schermcoördinaten [40, 60] (X = 40, Y = 60):

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

modal

Een Booleaanse waarde die aangeeft of de Source Viewer een modaal (true) of niet-modaal (false) venster is. Het Source Viewer-venster is standaard modaal.

Met de volgende JavaScript-code wordt het Source Viewer-venster bijvoorbeeld zodanig geopend dat de gebruiker kan communiceren met zowel het Source Viewer-venster als met andere toepassingsvensters:

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

typesToAdd

Een matrix met tekenreeksen waarmee wordt aangegeven welke bestandstypen in de lijst in de Source Viewer worden opgenomen, naast de standaardbestandstypen.

Standaard worden in de Source Viewer de volgende bestandstypen weergegeven:

Tekstbestanden: TXT, XML, MXML, HTM, HTML, JS, AS, CSS, INI, BAT, PROPERTIES, CONFIG
Afbeeldingsbestanden: JPG, JPEG, PNG, GIF

Als er geen waarde is opgegeven, worden alle standaardtypen opgenomen (met uitzondering van de bestandstypen die in de eigenschap typesToExclude zijn opgegeven).

Met de volgende JavaScript-code worden in het Source Viewer-venster bijvoorbeeld VCF- en VCARD-bestanden weergegeven:
```
var viewer = air.SourceViewer.getDefault(); 
var configObj = {}; 
configObj.typesToAdd = ["text.vcf", "text.vcard"]; 
viewer.viewSource(configObj);
```
Voor elk bestandstype moet u opgeven of het een tekstbestandstype ("text") of afbeeldingsbestandstype ("image") betreft.

typesToExclude

Een matrix met tekenreeksen waarmee wordt aangeven welke bestandstypen niet in de Source Viewer worden weergegeven.

Standaard worden in de Source Viewer de volgende bestandstypen weergegeven:

Tekstbestanden: TXT, XML, MXML, HTM, HTML, JS, AS, CSS, INI, BAT, PROPERTIES, CONFIG
Afbeeldingsbestanden: JPG, JPEG, PNG, GIF

Met de volgende JavaScript-code worden in het Source Viewer-venster bijvoorbeeld geen GIF- en XML-bestanden weergegeven:
```
var viewer = air.SourceViewer.getDefault(); 
var configObj = {}; 
configObj.typesToExclude = ["image.gif", "text.xml"]; 
viewer.viewSource(configObj);
```
Voor elk bestandstype moet u opgeven of het een tekstbestandstype ( "text" ) of een afbeeldingsbestandstype ( "image" ) betreft.

De Source Viewer openen

Neem een gebruikersinterface-element op, bijvoorbeeld een koppeling, knop of menuopdracht, waarmee de Source Viewer-code kan worden aangeroepen. In de volgende eenvoudige toepassing wordt de Source Viewer bijvoorbeeld geopend wanneer de gebruiker op een koppeling klikt:

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

Gebruikersinterface van de Source Viewer

Wanneer de toepassing de methode viewSource() van een object SourceViewer aanroept, wordt een Source Viewer-venster door AIR geopend. Dit venster bevat een lijst met bronbestanden en -mappen (links) en een weergavegebied met de broncode voor het geselecteerde bestand (rechts):

Afbeelding op volledige grootte weergeven

Mappen staan tussen vierkante haken. De gebruiker kan hierop klikken om een map uit te vouwen of samen te vouwen.

In de Source Viewer kan de bron worden weergegeven voor tekstbestanden met bekende extensies (zoals HTML, JS, TXT, XML, enzovoort) of voor afbeeldingsbestanden met bekende afbeeldingsbestandsextensies (JPG, JPEG, PNG en GIF). Als de gebruiker een bestand selecteert dat geen bekende bestandsextensie heeft, wordt een foutbericht weergegeven met de melding dat de tekstinhoud niet kan worden opgehaald.

Bronbestanden die zijn uitgesloten door middel van de methode setup() worden niet weergegeven (zie De Source Viewer laden, configureren en openen ).