FeaturesPluginsDocs & SupportCommunityPartners

Componentes personalizados do Visual Mobile Designer: Navegador de arquivo

Contribuição de Karol Harezlak

O conteúdo desta página se aplica ao NetBeans IDE 6.0

O Visual Mobile Designer (VMD) é uma interface gráfica no NetBeans Mobility pack que permite que você crie aplicações móveis arrastando e soltando componentes. O VMD permite que você defina o fluxo da aplicação e crie a sua GUI usando os componentes fornecidos pelo Mobility pack, ou componentes que você mesmo cria. O VMD contém muitos componentes Interface de usuário (IU) padrão que você pode usar para criar aplicações como Listas, Alertas, Formulários e Imagens. Ele também inclui componentes personalizados que simplificam a criação de recursos mais complexos, tais como Telas de espera, Telas de abertura, Itens de tabela, etc.

O navegador de arquivo é um componente personalizado que fornece uma interface do usuário que funciona com o sistema de arquivos do dispositivo. Ele oferece funcionalidade básica para navegar o conteúdo da memória de armazenamento dos dispositivos. Esse componente utiliza a API FileConnection que é parte da especificação JSR-75 para pacotes opcionais de PDA da Plataforma Java ME. JSR-75 não é uma parte da especificação MIDP 2.0 e é por isso que o componente personalizado pode ser usado somente com dispositivos ativados por JSR-75.

Visão geral da aplicação

Este exemplo mostra como usar o componente Navegador de arquivo em uma aplicação móvel para dispositivos ativados por JSR-75. Você aprenderá sobre os recursos básicos dos componentes e como navegar no conteúdo do armazenamento de memória do dispositivo e no conteúdo de exibição dos arquivos de texto escolhidos.

Além do componente personalizado Navegador do arquivo, usaremos outros componentes MIDP: Tela de abertura e Caixa de texto.

Requisitos

Antes de começar, você deve instalar o seguinte software no seu computador:

Instalando e executando a aplicação de amostra

Antes de começar, talvez você queira ver o resultado final do tutorial.

Siga as etapas seguintes para instalar a aplicação FileBrowserExample:

  1. Baixe filebrowserexample.zip.
  2. Descompacte o arquivo.
  3. No IDE, escolha Arquivo > Abrir projeto e vá para a pasta que contém o arquivo descompactado.
  4. Abra as janelas Projeto e Inspetor. Ela deve ser parecida com o seguinte:
    Navegador e janela Projeto com o exemplo do Navegador de arquivo aberto
  5. Na janela Projetos, clique com o botão direito do mouse no nó do projeto e escolha Executar projeto (ou pressione a tecla F6). Conforme a aplicação é executada, uma janela do emulador se abre e exibe a aplicação que está sendo executada no emulador do dispositivo padrão.
  6. Na janela Emulador, clique no botão abaixo de "Iniciar."
    O emulador exibe um componente Tela de abertura, em seguida, Navegador de arquivo, como mostrado:

    Emulador WTK 2.5 exibindo a aplicação Navegador de arquivo de amostra

  • Mova o cursor para cima e para baixo para navegar pelos arquivos e pastas disponíveis.
  • Clique no botão abaixo de "Selecionar" para abrir a pasta ou o arquivo.
  • Clique no botão abaixo de "Sair" para fechar a aplicação.

Criando uma aplicação com o componente personalizado Navegador de arquivo

Agora que você viu o componente Navegador de arquivo em ação, vamos voltar para o início e criar essa aplicação. Para criar a aplicação, faça o seguinte:

  1. Crie o projeto FileBrowserExample
  2. Adicione pacotes e um MIDlet visual ao projeto FileBrowserExample
  3. Adicione componentes ao FileBrowserExample
  4. Adicione comandos aos componentes Caixa de texto e Navegador de arquivo
  5. Conecte os componentes para criar um fluxo de aplicação
  6. Insira o método loadTextFile no código-fonte
  7. Adicionando arquivos ao armazenamento Wireless Toolkit
  8. Executar o projeto

Criando o projeto FileBrowserExample

  1. Escolha Arquivo > Novo projeto (Ctrl-Shift-N). Em Categorias, selecione Móvel. Em Projetos, selecione Aplicação MIDP e clique em Próximo.
  2. Indique FileBrowserExample no campo Nome do projeto. Altere a Localização do projeto para um diretório em seu sistema. A partir de agora, vamos chamar esse diretório de $PROJECTHOME.
  3. Desmarque a caixa de verificação Criar Hello MIDlet. Clique em Próximo.
  4. Deixe o Java ME Wireless Toolkit como a Plataforma de destino selecionada. Clique em Próximo.
  5. Clique em Terminar.
    A pasta do projeto contém todos os códigos-fonte e os metadados do projeto, como o script Ant do projeto. A própria aplicação é exibida na janela Design de fluxo do Visual Mobile Designer.

Adicionando pacotes e um MIDlet visual ao projeto FileBrowserExample

  1. Escolha o projeto FileBrowserExample na janela Projeto, em seguida, escolha Arquivo > Novo arquivo (Ctrl-N) . Em Categorias, selecione Classes Java. Em Tipos de arquivo, selecione Pacote Java. Clique em Próximo.
  2. Indique filebrowserexample no campo Nome do pacote. Clique em Terminar.
  3. Escolha o pacote filebrowserexample na janela Projeto, em seguida, escolha Arquivo > Novo arquivo (Ctrl-N) . Em Categorias, selecione MIDP. Em Tipos de arquivo, selecione MIDlet visual. Clique em Próximo.
  4. Indique FileBrowserExample nos campos Nome do MIDlet e Nome da classe MIDP. Clique em Terminar.

Adicionando componentes ao FileBrowserExample

  1. Alterne seu Visual MIDlet para a janela Designer de fluxo. Arraste os seguintes componentes da Paleta de componentes e solte-os no Designer de fluxo:
    • Tela de abertura
    • Caixa de texto
    • Navegador de arquivo
  2. Clique em slashScreen e, na janela Propriedades, altere o valor da propriedade Texto de "null" para "Exemplo do Navegador de arquivo"

Adicionando comandos ao FileBrowserExample

  1. Abra a janela Designer de fluxo.
  2. Escolha o comando Sair na seção Comandos da Paleta do componente. Arraste-o e solte na janela Designer de fluxo (componente Navegador de arquivo).
  3. Escolha o comando Voltar na seção Comandos da Paleta do componente e arraste-o e solte no componente Caixa de texto.

Conectando componentes

  1. Na janela Design de fluxo, clique em Ponto de início no Dispositivo móvel e arraste-o para o componente Tela de abertura. Da mesma forma, conecte os componentes como mostrado no gráfico seguinte.

    Mostra o Designer de fluxo com componentes conectados por linhas de comando

Inserindo uma pré-ação no código-fonte

  1. Alterne para a janela Código-fonte.
  2. Insira o código seguinte no fim do código-fonte. Esse método é responsável por ler os arquivos selecionados:

  3.     /**
        * Read file
        */
        private void readFile() {
            try {
                FileConnection textFile = fileBrowser.getSelectedFile();
                getTextBox().setString("");
                InputStream fis = textFile.openInputStream();
                byte[] b = new byte[1024];
                int length = fis.read(b, 0, 1024);
                fis.close();
                if (length > 0) {
                    textBox.setString(new String(b, 0, length));
                }
            } catch (IOException ex) {
                ex.printStackTrace();
            }
        }
        
  4. Localizar método commandAction no código-fonte:
    Insert readFile(); into pre-action section of the FileBrowser.SELECT_FILE_COMMAND (right after: if (command == FileBrowser.SELECT_FILE_COMMAND), where it says //insert pre-action code here):

Adicionando arquivos à memória de armazenamento do Wireless Toolkit

 

Para adicionar arquivos extras à memória de armazenamento do WTK, leia o Guia do usuário do Sun Java Wireless Toolkit para CLDC (seção: 4.3.2.1 Armazenamento de persistência) Usando o emulador Arquivos e pastas adicionados devem ficam visíveis usando nossa aplicação Navegador de arquivo.

Executando o projeto

  1. Pressione <F6> para executar o projeto principal ou selecione Executar > Executar projeto principal.

Para saber mais sobre o componente Navegador de arquivo

O NetBeans IDE oferece Javadocs de API do componente Navegador de arquivo, assim como outros componentes que você pode usar no VMD. Para ler os Javadocs do componente Navegador de arquivo:

  1. Escolha Referências de Javadoc da Ajuda org.netbeans.microediton.lcdui.pda
  2. Clique em org.netbeans.microedition.lcdui.pda para ver os links das informações do componente.




Tutoriais relacionados

Bookmark this page

del.icio.us furl simpy slashdot technorati digg
Companion
Projects:
MySQL Database Server   Open JDK: an Open SourceJDK   GlassFish Community: an Open Source Application Server    Mobile & Embedded Community    Open Solaris   java.net - The Source for Java Technology Collaboration   Virtual Box - full virtualizer  Open ESB - The Open Enterprise Service Bus Powered by