| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | |
| <!-- | |
| Copyright (c) 2009, 2010, Oracle and/or its affiliates. All rights reserved. | |
| --> | |
| <HTML> | |
| <HEAD> | |
| <TITLE>Componentes personalizados do Visual Mobile Designer: Criando um Navegador de arquivo de dispositivo móvel - Tutorial do NetBeans Java ME</TITLE> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > | |
| <link rel="stylesheet" type="text/css" href="../../../netbeans.css"> | |
| <meta name="author" content="Karol Harelzak"> | |
| </HEAD> | |
| <BODY> | |
| <a name="top"></a> | |
| <H1>Componentes personalizados do Visual Mobile Designer: Criando um navegador de arquivo de dispositivo móvel</H1> | |
| <p>O Visual Mobile Designer (VMD) é uma interface gráfica do NetBeans Mobility que permite criar aplicativos móveis usando componentes de arrastar e soltar. O VMD permite definir o fluxo do aplicativo e criar a GUI usando os componentes fornecidos pelo IDE ou componentes que você mesmo criar. O VMD contém muitos componentes de Interface de usuário (IU) padrão que você pode usar para criar aplicativos 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.</p> | |
| <p>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 <a href="http://jcp.org/en/jsr/detail?id=75">especificação JSR-75</a> | |
| 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.</p> | |
| <P>Este tutorial mostra como usar o componente Navegador de arquivo em um aplicativo móvel para dispositivos compatíveis com 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 exibir o conteúdo dos arquivos de texto escolhidos. Além do componente personalizado Navegador do arquivo, usaremos outros dois componentes MIDP: Tela de abertura e Caixa de texto. | |
| </P> | |
| <p><b>Conteúdo</b></p> | |
| <img src="../../../images_www/articles/69/netbeans-stamp-69-70-71.png" class="stamp" alt="O conteúdo desta página se aplica ao NetBeans IDE 6.9 ou posterior" title="O conteúdo desta página se aplica ao NetBeans IDE 6.9 ou posterior" > | |
| <ul class="class"> | |
| <li><a href="#sample-app">Instalando e executando o aplicativo de amostra</a></li> | |
| <li><a href="#create-app">Criando um aplicativo com o componente personalizado Navegador de arquivo</a><div> | |
| <ul> | |
| <LI><A HREF="#create">Criando o projeto FileBrowserExample</A> | |
| </LI> | |
| <LI><A HREF="#add">Adicionando pacotes e um MIDlet visual ao projeto FileBrowserExample</A> | |
| </LI> | |
| <LI><A HREF="#addcomponent">Adicionando componentes ao FileBrowserExample</A> | |
| </LI> | |
| <LI><A HREF="#addcommands">Adicionando comandos ao FileBrowserExample</A> | |
| </LI> | |
| <LI><A HREF="#connect">Conectando os componentes para criar um fluxo de aplicativo</A> | |
| </LI> | |
| <LI><A HREF="#insert">Inserindo uma pré-ação no código-fonte</A> | |
| </LI> | |
| <LI><A HREF="#run">Executando o projeto</A> | |
| </LI> | |
| </ul></div></li> | |
| <li><a href="#javadoc-filebrowser">Java doc para o componente Navegador de arquivo</a></li> | |
| <li><a href="#see-also">Consulte também</a></li> | |
| </ul> | |
| <p><b>Para acompanhar este tutorial, são necessários os recursos e softwares listados abaixo.</b></p> | |
| <table> | |
| <tbody> | |
| <tr> | |
| <th class="tblheader" scope="col">Software ou recurso</th> | |
| <th class="tblheader" scope="col">Versão necessária</th> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">NetBeans IDE com Java ME</a></td> | |
| <td class="tbltd1">Versão 6.9 ou posterior</td> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">Java Development Kit</a> (JDK)</td> | |
| <td class="tbltd1">Versão 6 ou versão 7</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <a name="sample-app"></a> | |
| <H2>Instalando e executando o aplicativo de amostra</H2> | |
| <P>Antes de começar, talvez você queira ver o resultado final do | |
| tutorial. | |
| </P> | |
| <P>Siga as etapas seguintes para instalar o aplicativo FileBrowserExample:</P> | |
| <OL> | |
| <LI>Baixe <A HREF="https://netbeans.org/projects/samples/downloads/download/Samples/Mobile/filebrowserexample.zip">filebrowserexample.zip. | |
| </A> | |
| </LI> | |
| <LI>Descompacte o arquivo. | |
| </LI> | |
| <LI>No IDE, escolha <tt> Arquivo</tt> > <tt>Abrir projeto</tt>e navegue até a pasta que contém os arquivos descompactados com o projeto <tt>FlieBrowserExample</tt>.</LI> | |
| <li>Clique em Abrir projeto.<br> | |
| A janela Projetos deve ter uma aparência semelhante a esta: | |
| <p class="align-center"><IMG SRC="../../../images_www/articles/71/mobility/filebrowser/projects.png" NAME="graphics1" ALT="Janela Projetos com o FileBrowserExample aberto" BORDER=1> | |
| </p></li> | |
| <LI>Na janela Projetos, clique com o botão direito do mouse no nó do projeto e escolha <tt>Executar projeto</tt> (ou pressione a tecla F6). Conforme o aplicativo é executado, uma janela do emulador se abre e exibe o aplicativo que está sendo executado no emulador do dispositivo padrão. | |
| </LI> | |
| <LI>Na janela Emulador, clique no botão abaixo de | |
| "Iniciar."<BR>O emulador exibe um componente Tela de abertura, | |
| em seguida, Navegador de arquivo, como mostrado: | |
| <p class="align-center"><IMG SRC="../../../images_www/articles/71/mobility/filebrowser/file-browser_wtk.png" NAME="graphics2" ALT="Emulador WTK 2.5 exibindo o aplicativo Navegador de arquivo de amostra" BORDER=1> | |
| </p></li> | |
| </OL> | |
| <UL> | |
| <LI>Mova o cursor para cima e para baixo para | |
| navegar pelos arquivos e pastas disponíveis. | |
| </LI> | |
| <LI>Clique no botão abaixo de | |
| "Selecionar" para abrir a pasta ou o arquivo. | |
| </LI> | |
| <LI>Clique no botão abaixo de "Sair" para fechar o aplicativo. | |
| </LI> | |
| </UL> | |
| <p class="align-center"><a href="#top">início</a></p> | |
| <a name="create-app"></a> | |
| <H2>Criando um aplicativo com o componente personalizado Navegador de arquivo | |
| </H2> | |
| <P>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 o aplicativo, faça o seguinte: | |
| </P> | |
| <OL> | |
| <LI><A HREF="#create">Crie o projeto | |
| FileBrowserExample</A> | |
| </LI> | |
| <LI><A HREF="#add">Adicione pacotes e um | |
| MIDlet visual ao projeto FileBrowserExample</A> | |
| </LI> | |
| <LI><A HREF="#addcomponent">Adicione | |
| componentes ao FileBrowserExample</A> | |
| </LI> | |
| <LI><A HREF="#addcommands">Adicione | |
| comandos aos componentes Caixa de texto e Navegador de arquivo</A> | |
| </LI> | |
| <LI><A HREF="#connect">Conecte os | |
| componentes para criar um fluxo de aplicativo</A> | |
| </LI> | |
| <LI><A HREF="#insert">Insira o método | |
| loadTextFile no código-fonte</A> | |
| </LI> | |
| <LI><A HREF="#run">Executar o projeto</A> | |
| </LI> | |
| </OL> | |
| <H3><A NAME="create"></A>Criando o projeto | |
| FileBrowserExample</H3> | |
| <OL> | |
| <LI>Escolha <tt>Arquivo</tt> > <tt>Novo projeto (Ctrl-Shift-N)</tt>. Em Categorias, selecione JavaME. Em Projetos, selecione Aplicativo móvel e clique em Próximo. | |
| </LI> | |
| <LI>Indique <CODE>FileBrowserExample</CODE> | |
| 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 <tt>$PROJECTHOME</tt>. | |
| </LI> | |
| <LI>Desmarque a caixa de verificação Criar Hello MIDlet. Clique em Próximo. | |
| </LI> | |
| <LI>Deixe o Sun Java Wireless Toolkit como a Plataforma do emulador selecionada. Clique em Próximo. | |
| </LI> | |
| <LI>Clique em Terminar. | |
| <p class="notes"><b>Observação:</b> a pasta do projeto contém todos os códigos-fonte e metadados do projeto, como o script Ant do projeto. A própria aplicação é exibida na janela Design de fluxo do Visual Mobile Designer. </p></LI> | |
| </OL> | |
| <H3><A NAME="add"></A>Adicionando pacotes e um | |
| MIDlet visual ao projeto FileBrowserExample</H3> | |
| <OL> | |
| <LI>Escolha o projeto <CODE>FileBrowserExample</CODE> na janela Projeto e, a seguir, escolha <tt>Arquivo</tt> > <tt>Novo arquivo (Ctrl-N)</tt> . Em Categorias, selecione Classes Java. Em Tipos de arquivo, | |
| selecione Pacote Java. Clique em Próximo. | |
| </LI> | |
| <LI>Indique <CODE>filebrowserexample</CODE> | |
| no campo Nome do pacote. Clique em Terminar. | |
| </LI> | |
| <LI>Escolha o pacote <CODE>filebrowserexample</CODE> na janela Projeto e, a seguir, escolha <tt>Arquivo</tt> > <tt>Novo arquivo (Ctrl-N)</tt>. Em Categorias, selecione MIDP. Em Tipos de arquivo, selecione | |
| MIDlet visual. Clique em Próximo. | |
| </LI> | |
| <LI>Indique <CODE>FileBrowserExample</CODE> nos campos Nome do MIDlet e Nome da classe MIDP. Clique em Terminar. | |
| </LI> | |
| </OL> | |
| <H3><A NAME="addcomponent"></A>Adicionando componentes ao | |
| FileBrowserExample</H3> | |
| <OL> | |
| <LI>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: | |
| <UL> | |
| <LI>Tela de splash</LI> | |
| <LI>Caixa de texto</LI> | |
| <LI>Navegador de arquivo</LI> | |
| </UL></LI> | |
| <LI>Clique em splashScreen e, na janela Propriedades, altere o valor da propriedade Texto de <tt>null</tt> (nulo) para o <tt>FileBrowserExample</tt>. | |
| </LI> | |
| </OL> | |
| <H3><A NAME="addcommands"></A>Adicionando comandos ao | |
| FileBrowserExample</H3> | |
| <OL> | |
| <LI>Abra a janela Designer de fluxo. | |
| </LI> | |
| <LI>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). | |
| </LI> | |
| <LI>Escolha o comando Voltar na seção Comandos da | |
| Paleta do componente e arraste-o e solte no componente Caixa de texto. | |
| </LI> | |
| </OL> | |
| <H3><A NAME="connect"></A>Conectando os componentes para criar um fluxo de aplicativo</H3> | |
| <div> | |
| <p>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.</p> | |
| <p class="align-center"><IMG SRC="../../../images_www/articles/71/mobility/filebrowser/file-flow.png" NAME="graphics3" ALT="Mostra o Designer de fluxo com componentes conectados por linhas de comando" BORDER=1> | |
| </p> | |
| </div> | |
| <H3><A NAME="insert"></A>Inserindo uma pré-ação no | |
| código-fonte</H3> | |
| <OL> | |
| <LI>Alterne para a janela Código-fonte. | |
| </LI> | |
| <LI> | |
| Insira o código seguinte no fim do código-fonte. Esse | |
| método é responsável por ler os arquivos selecionados: | |
| <br> | |
| <PRE> /** | |
| * 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(); | |
| } | |
| } | |
| </PRE></LI> | |
| <LI><P>Localize o método <tt>commandAction</tt> no código-fonte:<BR> | |
| Insira <CODE>readFile();</CODE> na seção de pré-ação do <CODE>FileBrowser.SELECT_FILE_COMMAND</CODE> (logo após: <CODE>if (command == FileBrowser.SELECT_FILE_COMMAND)</CODE>, onde diz <CODE>//insira a prá-ação aqui)</CODE>: </p> | |
| </LI> | |
| </OL> | |
| <H3><A NAME="run"></A>Executando o projeto</H3> | |
| <div> | |
| <p> | |
| Pressione <F6> para executar o projeto principal ou selecione <tt>Executar</tt> > <tt>Executar projeto principal</tt>. | |
| </p> | |
| </div> | |
| <p class="align-center"><a href="#top">início</a></p> | |
| <a name="javadoc-filebrowser"></a> | |
| <H2>Javadoc para o componente Navegador de arquivo</H2> | |
| <P>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, realize as etapas abaixo:</P> | |
| <OL> | |
| <li>Coloque o cursor no componente <tt>FileBrowser</tt> no código-fonte e pressione Ctr-Shift-Espaço (ou selecione <tt>Código-fonte</tt> > <tt>Exibir documentação</tt>).<br> | |
| O Javadoc deste elemento é exibido em uma janela pop-up. </li> | |
| <li>Clique em Exibir documentação no ícone de navegador da Web externo (<img src="../../../images_www/articles/71/mobility/filebrowser/show-doc-button.png" alt="Exibir documentação no navegador da Web externo">) na janela pop-up para obter informações detalhadas sobre o componente <tt>FileBrowser</tt> em seu navegador.</li> | |
| </OL> | |
| <p class="align-center"><a href="#top">início</a></p> | |
| <div class="feedback-box"><a href="/about/contact_form.html?to=6&subject=NetBeans%20Java%20ME%20Custom%20Component:%20File%20Browser">Envie-nos seus comentários</a></div><br style="clear:both;" > | |
| <a name="see-also"></a> | |
| <h2>Consulte também</h2> | |
| <UL> | |
| <li><a href="smscomposer.html">Componentes padrão do Visual Mobile Designer: criando um aplicativo SMS Composer</a></li> | |
| <li><a href="loginscreen.html">Componentes padrão do Visual Mobile Designer: criando telas de logon no dispositivo móvel</a></li> | |
| <li><a href="pimbrowser.html">Componentes padrão do Visual Mobile Designer: criando um aplicativo de gerenciador de informações pessoais</a></li> | |
| <li><a href="splashscreen.html">Componentes padrão do Visual Mobile Designer: usando telas de splash em aplicativos Java ME</a></li> | |
| <li><a href="waitscreen.html">Componentes personalizados do Visual Mobile Designer: Criando telas de espera para aplicativos móveis</a></li> | |
| <li><a href="tableitem.html">Componentes padrão do Visual Mobile Designer: usando itens de tabela em aplicativos Java ME</a></li> <li><a href="http://wiki.netbeans.org/VisualMobileDesignerPalatteReference">Reference: Visual Mobile Designer Palette Guide</a></li> | |
| </UL> | |
| <p class="align-center"><a href="#top">início</a></p> | |
| </BODY> | |
| </HTML> |