Visualizzazione del codice sorgente

Esattamente come è possibile visualizzare il codice sorgente di una pagina HTML in un browser Web, è possibile anche visualizzare il codice sorgente di un'applicazione AIR basata su HTML. Adobe® AIR® SDK include un file JavaScript AIRSourceViewer.js che potete utilizzare nell'applicazione per mostrare con facilità il codice sorgente agli utenti finali.

Caricamento, configurazione e apertura del visualizzatore del codice sorgente

Il codice del visualizzatore del codice sorgente è incluso nel file JavaScript AIRSourceViewer.js, che si trova nella directory frameworks di AIR SDK. Per utilizzare il visualizzatore del codice sorgente nell'applicazione, copiate AIRSourceViewer.js nella directory di progetto dell'applicazione e caricate il file tramite un tag script nel file HTML principale dell'applicazione: 

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

Nel file AIRSourceViewer.js viene definita una classe, SourceViewer, a cui potete accedere dal codice JavaScript chiamando air.SourceViewer .

La classe SourceViewer definisce tre metodi: getDefault() , setup() e viewSource() .

Metodo

Descrizione

getDefault()

Metodo statico. Restituisce un'istanza di SourceViewer che potete utilizzare per chiamare gli altri metodi.

setup()

Applica le impostazioni di configurazione al visualizzatore del codice sorgente. Per informazioni dettagliate, vedete Configurazione del visualizzatore del codice sorgente .

viewSource()

Apre una nuova finestra nella quale l'utente può sfogliare e aprire i file di origine dell'applicazione host.

Nota: il codice per cui viene utilizzato il visualizzatore del codice sorgente deve trovarsi nella sandbox di sicurezza dell'applicazione (in un file nella directory dell'applicazione).

Il codice JavaScript seguente, ad esempio, consente di creare un'istanza di un oggetto SourceViewer e di aprire la finestra del visualizzatore del codice sorgente con l'elenco di tutti i file di origine: 

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

Configurazione del visualizzatore del codice sorgente

Il metodo config() applica le impostazioni al visualizzatore del codice sorgente. Questo metodo accetta un parametro: configObject . L'oggetto configObject ha proprietà che definiscono le impostazioni di configurazione per il visualizzatore del codice sorgente, ovvero default , exclude , initialPosition , modal , typesToRemove e typesToAdd .

default

Stringa che specifica il percorso relativo del file iniziale da visualizzare nel visualizzatore del codice sorgente.

Il codice JavaScript seguente, ad esempio, consente di aprire la finestra del visualizzatore del codice sorgente con il file index.html come file iniziale: 

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

exclude

Array di stringhe che specifica i file o le directory da escludere dall'elenco del visualizzatore del codice sorgente. I percorsi sono relativi alla directory dell'applicazione. Non sono supportati caratteri jolly.

Il codice JavaScript seguente, ad esempio, consente di aprire la finestra del visualizzatore del codice sorgente con l'elenco di tutti i file di origine, ad eccezione del file AIRSourceViewer.js e dei file contenuti nelle sottodirectory Images e Sounds: 

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

initialPosition

Array che include due numeri e specifica le coordinate x e y iniziali della finestra del visualizzatore del codice sorgente.

Il codice JavaScript seguente ad esempio consente di aprire la finestra del visualizzatore del codice sorgente con le coordinate [40, 60] (X = 40, Y = 60): 

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

modal

Valore booleano che specifica se il visualizzatore del codice sorgente deve essere una finestra modale (true) o non modale (false). Per impostazione predefinita, la finestra del visualizzatore del codice sorgente è modale.

Il codice JavaScript seguente, ad esempio, consente di aprire la finestra del visualizzatore del codice sorgente in modo che l'utente possa interagire sia con essa che con le finestre di altre applicazioni: 

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

typesToAdd

Array di stringhe che specifica i tipi di file da includere nell'elenco del visualizzatore del codice sorgente oltre ai tipi predefiniti inclusi.

Per impostazione predefinita, nel visualizzatore del codice sorgente vengono elencati i tipi di file seguenti:

  • File di testo: TXT, XML, MXML, HTM, HTML, JS, AS, CSS, INI, BAT, PROPERTIES, CONFIG

  • File di immagine: JPG, JPEG, PNG, GIF

    Se non viene specificato alcun valore vengono inclusi tutti i tipi predefiniti (ad eccezione di quelli specificati nella proprietà typesToExclude ).

    Con il codice JavaScript seguente, ad esempio, viene aperta la finestra del visualizzatore del codice sorgente che include file VCF e VCARD: 

    var viewer = air.SourceViewer.getDefault(); 
var configObj = {}; 
configObj.typesToAdd = ["text.vcf", "text.vcard"]; 
viewer.viewSource(configObj);

    Per ogni tipo di file che elencate, dovete specificare "text" (per i file di testo) o "image" per i file di immagine.

typesToExclude

Array di stringhe che specifica i tipi di file da escludere dal visualizzatore del codice sorgente.

Per impostazione predefinita, nel visualizzatore del codice sorgente vengono elencati i tipi di file seguenti:

  • File di testo: TXT, XML, MXML, HTM, HTML, JS, AS, CSS, INI, BAT, PROPERTIES, CONFIG

  • File di immagine: JPG, JPEG, PNG, GIF

    Con il codice JavaScript seguente, ad esempio, viene aperta la finestra del visualizzatore del codice sorgente senza elencare file GIF o XML: 

    var viewer = air.SourceViewer.getDefault(); 
var configObj = {}; 
configObj.typesToExclude = ["image.gif", "text.xml"]; 
viewer.viewSource(configObj);

    Per ogni tipo di file che elencate, dovete specificare "text" (per i file di testo) o "image" per i file di immagine.

Apertura del visualizzatore del codice sorgente

È consigliabile includere un elemento di interfaccia utente, ad esempio un collegamento, un pulsante o un comando di menu, che, quando selezionato dall'utente, consente di richiamare il codice del visualizzatore del codice sorgente. Con l'applicazione di esempio seguente, ad esempio, viene aperto il visualizzatore del codice sorgente quando l'utente fa clic su un collegamento: 

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

Interfaccia utente del visualizzatore del codice sorgente

Quando l'applicazione chiama il metodo viewSource() di un oggetto SourceViewer, viene aperta la finestra del visualizzatore del codice sorgente. La finestra include un elenco di file e directory di origine (a sinistra) e un'area di visualizzazione che mostra il codice sorgente del file selezionato (sulla destra):

Visualizzazione dell’elemento grafico a dimensioni intere

Le directory sono elencate tra parentesi quadre. L'utente può fare clic su una parentesi graffa per espandere o comprimere l'elenco di una directory.

Nel visualizzatore del codice sorgente è possibile visualizzare il codice sorgente di file di testo con estensioni riconosciute (ad esempio, HTML, JS, TXT, XML e altre) o di file di immagine con estensioni riconosciute per le immagini (JPG, JPEG, PNG e GIF). Se un utente seleziona un file che non presenta un'estensione riconosciuta, viene visualizzato un messaggio di errore: Cannot retrieve text content from this filetype (Impossibile recuperare contenuto di testo da questo tipo di file).

Tutti i file di origine esclusi tramite il metodo setup() non vengono elencati (vedete Caricamento, configurazione e apertura del visualizzatore del codice sorgente ).