Visualización de código fuente

Del mismo modo que un usuario puede ver el código fuente de una página HTML en un navegador web, los usuarios pueden ver el código fuente de una aplicación de AIR basada en HTML. El SDK de Adobe® AIR® incluye un archivo AIRSourceViewer.js JavaScript que se puede utilizar en la aplicación para mostrar fácilmente el código fuente a los usuarios finales.

Carga, configuración y apertura del visor de código fuente

El código del visor de código fuente se incluye en un archivo JavaScript, AIRSourceViewer.js, que se incluye en el directorio frameworks del SDK de AIR. Para utilizar el visor de código fuente en su aplicación, copie AIRSourceViewer.js en el directorio project de la aplicación y cargue el archivo mediante una etiqueta de script en el archivo HTML principal en su aplicación: 

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

El archivo AIRSourceViewer.js define una clase, SourceViewer, a la que se puede acceder desde el código JavaScript llamando a air.SourceViewer .

La clase SourceViewer define tres métodos: getDefault() , setup() y viewSource() .

Método

Descripción

getDefault()

Método estático. Devuelve una instancia de SourceViewer, que se puede utilizar para llamar a los otros métodos.

setup()

Aplica las opciones de configuración al visor de código fuente. Para obtener más información, consulte Configuración del visor de código fuente

viewSource()

Abre una nueva ventana en la que el usuario puede examinar y abrir archivos de origen de la aplicación host.

Nota: el código que utiliza el visor de código fuente debe estar en el entorno limitado de seguridad de la aplicación (en un archivo del directorio de la aplicación).

Por ejemplo, el siguiente código JavaScript crea una instancia de un objeto Source Viewer y abre la ventana de Source Viewer donde se incluyen todos los archivos de origen: 

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

Configuración del visor de código fuente

El método config() aplica la configuración dada en el visor de código fuente. Este método adopta un parámetro: configObject . El objeto configObject dispone de propiedades que definen las opciones de configuración del visor de código fuente. Entre las propiedades se incluyen default , exclude , initialPosition , modal , typesToRemove y typesToAdd .

default

Cadena que especifica la ruta relativa al archivo inicial que se mostrará en el visor de código fuente.

Por ejemplo, el siguiente código JavaScript abre la ventana del visor de código fuente con el archivo index.html como archivo inicial mostrado: 

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

exclude

Conjunto de cadenas que especifican los archivos o directorios que se excluirán de la lista del visor de código fuente. Las rutas son relativas al directorio de la aplicación. Los caracteres comodines no se admiten.

Por ejemplo, el siguiente código JavaScript abre la ventana del visor de código fuente donde se incluyen todos los archivos de origen, excepto AIRSourceViewer.js y los archivos de los subdirectorios Images y Sounds: 

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

initialPosition

Conjunto que incluye dos números, que especifican las coordenadas iniciales x e y de la ventana del visor de código fuente.

Por ejemplo, el siguiente código JavaScript abre la ventana del visor de código fuente con las coordenadas de la pantalla [40, 60] (X = 40, Y = 60): 

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

modal

Valor booleano que especifica si el visor de código fuente debe ser una ventana modal (true) o no modal (false). De forma predeterminada, la ventana del visor de código fuente es modal.

Por ejemplo, el siguiente código JavaScript abre la ventana del visor de código fuente de modo que el usuario pueda interactuar tanto con la ventana del visor como con cualquier ventana de la aplicación: 

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

typesToAdd

Conjunto de cadenas que especifica los tipos de archivo que se incluirán en la lista del visor de código fuente, además de los tipos predeterminados incluidos.

De forma predeterminada, la lista Visor de origen incluye los siguientes tipos de archivo:

  • Archivos de texto: TXT, XML, MXML, HTM, HTML, JS, AS, CSS, INI, BAT, PROPERTIES, CONFIG.

  • Archivo de imagen: JPG, JPEG, PNG, GIF.

    Si no se especifica ningún valor, se incluyen todos los tipos predeterminados (excepto los especificados en la propiedad typesToExclude ).

    Por ejemplo, el siguiente código JavaScript abre la ventana del visor de código fuente con los archivos VCF y VCARD: 

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

    Para cada tipo de archivo que se incluya, se debe especificar "text" (para los tipos de archivo de texto) o "image" (para los tipos de archivo de imagen).

typesToExclude

Conjunto de cadenas que especifican los tipos de archivo que se excluirán del visor de código fuente.

De forma predeterminada, la lista Visor de origen incluye los siguientes tipos de archivo:

  • Archivos de texto: TXT, XML, MXML, HTM, HTML, JS, AS, CSS, INI, BAT, PROPERTIES, CONFIG.

  • Archivo de imagen: JPG, JPEG, PNG, GIF.

    Por ejemplo, el siguiente código JavaScript abre la ventana del visor de código fuente sin incluir los archivos GIF y XML: 

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

    Para cada tipo de archivo que se incluya, se debe especificar "text" (para los tipos de archivo de texto) o "image" (para los tipos de archivo de imagen).

Apertura del visor de código fuente

Se debe incluir un elemento de interfaz de usuario como, por ejemplo, un vínculo, botón o comando de menú, que llame al código del visor de código fuente cuando el usuario lo seleccione. Por ejemplo, la siguiente aplicación sencilla abre el visor de código fuente cuando el usuario hace clic en un vínculo: 

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

Interfaz de usuario del visor de código fuente

Si la aplicación llama al método viewSource() de un objeto SourceViewer, la aplicación de AIR abre una ventana del visor de código fuente. La ventana incluye una lista de directorios y archivos de origen (en la parte izquierda) y un área de visualización que muestra el código fuente del archivo seleccionado (en la parte derecha):

Ver gráfico a tamaño completo

Los directorios se incluyen entre corchetes. El usuario puede hacer clic en una llave para expandir o contraer la lista de un directorio.

El visor de código fuente puede mostrar el código de los archivos de texto con extensiones reconocidas (por ejemplo, HTML, HTML, JS, TXT, XML, etc.) o de archivos de imagen con extensiones de imagen reconocidas (JPG, JPEG, PNG y GIF). Si el usuario selecciona un archivo que no dispone de una extensión reconocida, aparece el mensaje de error “Cannot retrieve text content from this filetype” (No se puede recuperar el contenido de texto de este tipo de archivo).

Todos los archivos de origen excluidos mediante el método setup() no se incluyen en la lista (consulte Carga, configuración y apertura del visor de código fuente ).