Visualização do código-fonte

Da mesma forma que o usuário pode visualizar o código-fonte para uma página HTML em um navegador, os usuários podem visualizar o código-fonte de um aplicativo do AIR baseado em HTML. O SDK do Adobe® AIR® inclui um arquivo AIRSourceViewer.js de JavaScript que você pode usar em seu aplicativo para revelar facilmente o código-fonte para os usuários finais.

Carregamento, configuração e abertura do Visualizador de Código-Fonte

O código do Visualizador de Código-Fonte está incluído em um arquivo JavaScript, AIRSourceViewer.js, que, por sua vez, está incluído no diretório de estruturas do SDK do AIR. Para usar o Visualizador do Código-Fonte no seu aplicativo, copie o arquivo AIRSourceViewer.js para o diretório do projeto do seu aplicativo e carregue o arquivo através da tag de script no arquivo HTML principal no seu aplicativo: 

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

O arquivo AIRSourceViewer.js define uma classe, o SourceViewer, que você pode acessar do código do JavaScript chamando air.SourceViewer .

A classe SourceViewer define três métodos: getDefault() , setup() e viewSource() .

Método

Descrição

getDefault()

Um método estático. Retorna uma instância do SourceViewer, que você pode usar para chamar os outros métodos.

setup()

Aplica as configurações ao Visualizador do Código-Fonte. Para obter detalhes, consulte Configuração do Visualizador do Código-Fonte .

viewSource()

Abre uma nova janela na qual o usuário pode navegar e abrir os arquivos de origem do aplicativo de host.

Nota: O código que usa o Visualizador do Código-Fonte deve estar em uma caixa de proteção do aplicativo (em um arquivo no diretório do aplicativo).

Por exemplo, o código JavaScript a seguir instancia um objeto do Visualizador do Código-Fonte e abre a janela do Visualizador que lista todos os arquivos de origem: 

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

Configuração do Visualizador do Código-Fonte

O método config() aplica determinadas configurações ao Visualizador do Código-Fonte. Esse método adota um parâmetro: configObject . O objeto configObject tem propriedades que definem as configurações para o Visualizador do Código-Fonte. As propriedades são default , exclude , initialPosition , modal , typesToRemove e typesToAdd .

default

Um string que especifica o caminho relativo ao arquivo inicial a ser exibido no Visualizador do Código-Fonte.

Por exemplo, o código JavaScript a seguir abre a janela do Visualizador do Código-Fonte com o arquivo index.html como arquivo inicial mostrado: 

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

exclude

Uma sequência de strings que especifica os arquivos ou diretórios a serem excluídos da listagem do Visualizador do Código-Fonte. Os caminhos se referem ao diretório do aplicativo. Os caracteres curinga não recebem suporte.

Por exemplo, o código JavaScript a seguir abre a janela do Visualizador do Código-Fonte que lista todos os arquivos de origem, exceto para o arquivo AIRSourceViewer.js, e os arquivos nos subdiretórios Imagens e sons: 

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

initialPosition

Uma matriz que inclui dois números, especificando as coordenadas x e y iniciais da janela do Visualizador do Código-Fonte.

Por exemplo, o código de JavaScript a seguir abre a janela do Visualizador do Código-Fonte nas coordenadas da tela [40, 60] (X = 40, Y = 60): 

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

modal

Um valor booliano que especifica se o Visualizador do Código-Fonte deve ser uma janela modal (verdadeiro) ou não modal (falso). Por padrão, a janela do Visualizador do Código-Fonte é modal.

Por exemplo, o código de JavaScript a seguir abre a janela do Visualizador do Código-Fonte de tal forma que o usuário possa interagir com a janela do Visualizador do Código-Fonte e as janelas de qualquer aplicativo: 

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

typesToAdd

Uma matriz de strings que especifica os tipos de arquivo a serem incluídos na listagem do Visualizador do Código-Fonte, além dos tipos padrão inclusos.

Por padrão, o Visualizador do Código-Fonte lista os seguintes tipos de arquivos:

  • Arquivos de texto — TXT, XML, MXML, HTM, HTML, JS, AS, CSS, INI, BAT, PROPERTIES, CONFIG

  • Arquivos de imagem — JPG, JPEG, PNG, GIF

    Se nenhum valor for especificado, todos os tipos padrão são incluídos (exceto aqueles especificados na propriedade typesToExclude ).

    Por exemplo, o código de JavaScript a seguir abre a janela do Visualizador do Código-Fonte que inclui os arquivos VCF e VCARD: 

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

    Para cada tipo de arquivo que você listar, especifique "text" (para os arquivos do tipo texto) ou "image" (para arquivos do tipo imagem).

typesToExclude

Uma matriz de strings que especifica os tipos de arquivo a serem excluídos do Visualizador do Código-Fonte.

Por padrão, o Visualizador do Código-Fonte lista os seguintes tipos de arquivos:

  • Arquivos de texto — TXT, XML, MXML, HTM, HTML, JS, AS, CSS, INI, BAT, PROPERTIES, CONFIG

  • Arquivos de imagem — JPG, JPEG, PNG, GIF

    Por exemplo, o código de JavaScript a seguir abre a janela do Visualizador do Código-Fonte sem listar os arquivos GIF ou XML: 

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

    Para cada tipo de arquivo que você listar, especifique "text" (para os arquivos do tipo texto) ou "image" (para arquivos do tipo imagem).

Abertura do Visualizador do Código-Fonte

Você deve incluir um elemento da interface do usuário, como um link, botão ou comando do menu, que chama o código do Visualizador do Código-Fonte quando o usuário o selecionar. Por exemplo, o aplicativo simples a seguir abre o Visualizador do Código-Fonte quando o usuário clica em um link: 

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

Interface do usuário do Visualizador do Código-Fonte

Quando o aplicativo chama o método viewSource() de um objeto SourceViewer, o aplicativo do AIR abre uma janela do Visualizador do Código-fonte. A janela inclui uma lista de arquivos e diretórios de origem (à esquerda) e uma área de exibição que mostra o código-fonte para o arquivo selecionado (à direita):

Exibir gráfico inteiro

Os diretórios são listados entre parênteses. O usuário pode clicar em um parêntese para expandir ou encolher a listagem de um diretório.

O Visualizador do Código-Fonte pode exibir o código-fonte para os arquivos de texto com extensões reconhecidas (como, HTML, JS, TXT, XML e outros) ou para arquivos de imagem com extensões reconhecidas (JPG, JPEG, PNG e GIF). Se o usuário selecionar um arquivo que não tem uma extensão de arquivo reconhecida, será exibida uma mensagem de erro ("Não é possível recuperar o conteúdo de texto deste tipo de arquivo").

Os arquivos de origem que são excluídos através do método setup() não são listados (consulte Carregamento, configuração e abertura do Visualizador de Código-Fonte ).