| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> | |
| <!-- Copyright (c) 2009, 2010, Oracle and/or its affiliates. All rights reserved. --> | |
| <!-- Use is subject to license terms.--> | |
| <html> | |
| <head> | |
| <title>Componentes personalizados do Visual Mobile Designer: Usando itens de tabela em aplicativos Java ME - Tutorial do NetBeans IDE</title> | |
| <link rel="stylesheet" type="text/css" href="../../../netbeans.css"> | |
| <meta name="Karol Harezlak" content="NetBeans Visual Mobile Designer"> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > | |
| </head> | |
| <body> | |
| <a name="top"></a> | |
| <h1>Componentes personalizados do Visual Mobile Designer: Usando itens de tabela em aplicativos Java ME</h1> | |
| <p> O Visual Mobile Designer (VMD) permite criar aplicativos Java ME usando componentes de arrastar e soltar. Com ele, você pode determinar o fluxo do aplicativo, bem como a aparência e funcionalidade da IU usando os componentes fornecidos pelo IDE ou usando componentes criados por você. O VMD contém muitos componentes padrão que você pode usar para criar seu aplicativo: Listas, Alertas, Formulários, Imagens, etc. Também inclui componentes personalizados que simplificam a criação de recursos mais complexos, tais como telas de espera, telas de splash, itens de tabela, etc. </p> | |
| <p>O componente Item de tabela permite criar rapidamente tabelas formadas por uma ou mais colunas, cada uma com área de cabeçalho e área de dados que se repetem em cada registro. A tabela pode ser maior que a tela tanto vertical quanto horizontalmente. Os usuários podem usar um cursor para rolar em ambas as direções. A utilização do componente Item de tabela do Visual Mobile Designer (VMD) simplifica a criação e implementação de tabelas de dados no aplicativo Java ME. </p> | |
| <p>Se você é novo no desenvolvimento de aplicativos móveis no NetBeans, deveria começar pelo<A HREF="quickstart.html"> Guia de início rápido do NetBeans Java ME MIDP</A> antes de continuar.</p> | |
| <!--<p class="notes"><b>Observação:</b> Se você estiver usando o NetBeans IDE 6.8, consulte o tutorial <a href="../../68/javame/tableitem.html">Usando itens de tabela em aplicativos Java ME no NetBeans IDE 6.8</a>.</p>--> | |
| <h3>Conteúdo</h3> | |
| <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> | |
| <li><a href="#intro" title="Como funciona o componente TableItem">Como funciona o componente TableItem</a></li> | |
| <li><a href="#sample" title="Instalando e executando o aplicativo de amostra">Instalando e executando o aplicativo de amostra</a></li> | |
| <li><a href="#creating" title="Criando um aplicativo Java ME com o componente Item de tabela personalizado">Criando um aplicativo Java ME com o componente Item de tabela personalizado</a> | |
| <ul> | |
| <li> <a href="#create">Criando o projeto MyTableExample</a> </li> | |
| <li><a href="#add">Adicionando pacotes e um MIDlet visual ao projeto MyTableExample</a></li> | |
| <li><a href="#addcomponent">Adicione os componentes a MyTableMIDlet</a></li> | |
| <li><a href="#edit">Edite o projeto do SimpleTableModel</a></li> | |
| <li><a href="#addcommands">Adicionando comandos ao Formulário e componentes do TextBox</a></li> | |
| <li><a href="#connect">Conectando os componentes para criar um fluxo de aplicativo</a></li> | |
| <li><a href="#insert">Inserindo um Código-fonte</a></li> | |
| <li><a href="#run">Executando o projeto</a></li> | |
| </ul></li> | |
| <li><a href="#nextsteps" title="Consulte também">Consulte também</a></li> | |
| </ul> | |
| <p><b>Para concluir este tutorial, são necessários os seguintes recursos e softwares:</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> | |
| <h2><a name="intro"></a>Introdução: Como funciona o componente TableItem</h2> | |
| <p>Este exemplo mostra como usar os componentes Item de tabela e Modelo de tabela em um aplicativo móvel. Demonstra os recursos básicos dos componentes e também como usá-los para visualizar e manipular os dados em seu aplicativo Java ME dentro do componente Modelo de tabela simples. O componente TableItem personalizado discutido neste tutorial usa uma tabela da interface de Modelo de tabela simples, exibe os dados e permite inclusive que o usuário edite os dados.</p> | |
| <p>Além do componente Item de tabela personalizado, precisamos usar dois outros componentes MIDP: Caixa de texto e Formulário. Para saber mais sobre esse e outros componentes incluídos na paleta do VMD, consulte o <a href="http://wiki.netbeans.org/VisualMobileDesignerPalatteReference">Guia da paleta do Visual Mobile Designer</a>.</p> | |
| <h2><a name="sample"></a>Instalando e executando o aplicativo de amostra</h2> | |
| <p> Antes de começar, talvez você queira ver o resultado final do | |
| tutorial. Siga as etapas a seguir para instalar o aplicativo de amostra </code>TableItemExample<code>:</p> | |
| <ol> | |
| <li>Download do arquivo <a href="https://netbeans.org/projects/samples/downloads/download/Samples/Mobile/TableItemExample.zip">TableItemExample.zip</a>.</li> | |
| <li> Descompacte o arquivo. </li> | |
| <li> No IDE, selecione <tt>Arquivo</tt> > <tt>Abrir projeto</tt>e navegue até a pasta que contém os arquivos descompactados. </li> | |
| <li>Abra a janela Projetos. Ela deve ser parecida com o seguinte: | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/tableitem/ti-project-window.png" border=1 alt="Janela Projeto com o exemplo do Item de tabela" ></p> | |
| </li> | |
| <li>Na janela Projetos, clique com o botão direito do mouse no nó do projeto e escolha Executar projeto (ou pressione 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." O emulador exibe uma tabela, conforme mostrado: | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/tableitem/ti-emulator.png" border=1 alt="O emulador DefaultColorPhone exibindo a amostra do aplicativo de tabela" > </p> </li> | |
| <li>Edite a tabela: | |
| <ul> | |
| <li>Mova o cursor de uma célula a outra usando as setas direcionais do botão Selecionar.</li> | |
| <li>Clique no botão abaixo de "Editar célula" para editar o conteúdo de uma célula.</li> | |
| </ul></li> | |
| <li>Clique no botão abaixo de "Sair" para fechar o aplicativo. </li> | |
| </ol> | |
| <p class="align-center"><a href="#top">início</a></p> | |
| <h2><a name="creating"></a>Criando uma tabela com um componente Item de tabela personalizado </h2> | |
| <div class="indent"> | |
| <p>Agora que você viu o componente Item de tabela em ação, podemos mostrar como criar esse aplicativo. Para criar o aplicativo, faça o seguinte: </p> | |
| </div> | |
| <ol> | |
| <li> <a href="#create">Crie o projeto MyTableExample</a> </li> | |
| <li><a href="#add">Adicionar pacotes e um MIDlet visual ao projeto MyTableExample</a></li> | |
| <li><a href="#addcomponent">Adicionar os componentes a MyTableMIDlet</a></li> | |
| <li><a href="#edit">Edite o projeto SimpleTableModel</a></li> | |
| <li><a href="#addcommands">Adicione comandos aos componentes Formulário e Caixa de texto</a></li> | |
| <li><a href="#connect">Conecte os componentes para criar um fluxo de aplicativo</a></li> | |
| <li><a href="#insert">Inserindo um Código-fonte</a></li> | |
| <li><a href="#run">Executar o projeto</a></li> | |
| </ol> | |
| <div class="indent"> | |
| <h3 class="tutorial">Criando o projeto MyTableExample<a name="create"></a></h3> | |
| <ol> | |
| <li> Escolha <tt>Arquivo</tt> > <tt>Novo projeto (Ctrl-Shift-N)</tt>. Em Categorias, selecione Java ME. Em Projetos, selecione Aplicativo móvel e clique em Próximo. </li> | |
| <li> Indique <code>MyTableExample</code> no campo Nome do projeto. Altere a Localização do projeto para um diretório em seu sistema. A partir de agora, podemos chamar este diretório de <tt>$PROJECTHOME</tt>. </li> | |
| <li> Desmarque a caixa de verificação Criar Hello MIDlet. Clique em Próximo. </li> | |
| <li> Selecione o Java Platform Micro Edition SDK 3.0 como a plataforma do emulador. Clique em Terminar. </li> | |
| <!--li> Click Finish. The project folder contains all of your sources and project metadata, such | |
| as the project Ant script. The application itself is displayed in the Flow Design window of the Visual Mobile Designer. </li--> | |
| </ol> | |
| <h3 class="tutorial">Adicionando pacotes e um | |
| MIDlet visual ao projeto MyTableExample<a name="add"></a></h3> | |
| <ol> | |
| <li> Selecione o projeto <code>MyTableExample</code> na janela Projeto e, a seguir, selecione<tt>Arquivo</tt> > <tt>Novo arquivo (Ctrl-N)</tt> . Em Categorias, selecione Java. Em Tipos de arquivo, | |
| selecione Pacote Java. Clique em Próximo. </li> | |
| <li> Insira <code>tableitemexample</code> no campo Nome do pacote. Clique em Terminar. | |
| </li> | |
| <li> Escolha o pacote <code>tableitemexample</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>MyTableItemMidlet</code> nos campos Nome do MIDlet e Nome da classe MIDP. Clique em Terminar. </li> | |
| </ol> | |
| <h3 class="tutorial"><a name="addcomponent"></a>Adicione os componentes a MyTableItemMidlet</h3> | |
| <ol> | |
| <li> Alterne seu MIDlet visual para a visualização Fluxo. Arraste os componentes Tela seguintes da paleta e solte-os no Designer de fluxo: | |
| <ul> | |
| <li> | |
| <div class="indent"> Formulário</div> | |
| </li> | |
| <li> | |
| <div class="indent">Caixa de texto</div> | |
| </li> | |
| </ul></li> | |
| <li>Selecione <tt>textBox</tt> e altere o título do componente para <tt>Editar</tt> na janela Propriedades.</li> | |
| <li>Clique duas vezes no componente <tt>form</tt> na janela Fluxo para alterar para a visualização da Tela. </li> | |
| <li>Arraste componente <tt>Table Item</tt> na seção Itens do formulário da Paleta e solte-o no <tt>form</tt>. O componente <tt>Table Item</tt> tem a seguinte aparência quando é adicionado ao Screen Designer: | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/tableitem/ti-tableitemform.png" border=1 alt="Mostra o Designer de tela com o Item de tabela na tela do dispositivo" ></p> | |
| </li> | |
| <li>Clique em <tt>tableItem</tt> e, na janela Propriedades, digite <code>TableItem Example</code> no valor da propriedade Rótulo.</li> | |
| <li>No navegador, clique com o botão direito do mouse no componente <tt>tableItem</tt> e escolha Propriedades no menu pop-up.</li> | |
| <li>Clique na seta (<img src="../../../images_www/articles/71/mobility/tableitem/arrow.png" border=1 alt="Seta">) na propriedade Table Model e selecione <tt><New SimpleTableModel></tt> na lista suspensa.</li> | |
| <li>Clique em Fechar.<br>O componente <tt>simpleTableModel</tt> é adicionado aos Recursos. | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/tableitem/resources.png" border=1 alt="simpleTableModel adicionado" ></p></li> | |
| </ol> | |
| <h3 class="tutorial">Editando Modelo de tabela simples<a name="edit"></a></h3> | |
| <ol> | |
| <li> Na visualização Tela, dê dois clique no componente <tt><No table model specified></tt> para abrir a caixa de diálogo Valores. </li> | |
| <li>Na caixa de diálogo Valores, selecione a opção Usar Cabeçalho.</li> | |
| <li> Clique nos botões Adicionar Linha e Adicionar Coluna quatro vezes respectivamente para modificar o número de linhas e colunas para 4.</li> | |
| <li> Renomeie os cabeçalhos da tabela para <tt>coluna 1</tt>, <tt>coluna 2</tt>, <tt>coluna 3</tt> e <tt>coluna 4</tt>. | |
| <p class="align-center"> <img src="../../../images_www/articles/71/mobility/tableitem/ti-values-editor.png" border=1 alt="Modelo de tabela" > </p></li> | |
| <li>Clique em OK para terminar. | |
| <p class="align-center"> <img src="../../../images_www/articles/71/mobility/tableitem/ti-screeneditor_form1.png" border=1 alt="Modelo de tabela simples atribuído para o componente TableItem" > </p></li> | |
| </ol> | |
| <h3 class="tutorial">Adicionando comandos aos componentes Formulário e Caixa de texto<a name="addcommands"></a></h3> | |
| <ol> | |
| <li>Abrir a visualização de fluxo.</li> | |
| <li>Escolha o </tt>comando Sair<tt> na seção comandos da Paleta do componente. Arraste e solte no componente <tt>form</tt>. Repita esta ação para o <tt>Item Comando</tt>.</li> | |
| <li>Escolha <tt>itemCommand</tt> na visualização da tela. Na janela Propriedades, altere o valor da propriedade Rótulo para </tt>Editar célula<tt>. | |
| </li> | |
| <li>Na visualização de fluxo, escolha o <tt>comando OK</tt> na seção Comandos da Paleta do componente e arraste-o e solte no componente </tt>texBox<tt>. | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/tableitem/ti-flow.png" border=1 alt="Exibe a visualização de fluxo com os comandos adicionados" > </p></li> | |
| </ol> | |
| <h3 class="tutorial">Conectando componentes <a name="connect"></a></h3> | |
| <div> | |
| <p>Na visualização Fluxo, clique em <tt>Started</tt> no Dispositivo móvel e arraste-o para o componente <tt>form</tt>. Da mesma forma, conecte os componentes como mostrado no gráfico seguinte.</p> | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/tableitem/ti-flowdesigner.png" border=1 alt="Mostra a janela Fluxo com componentes conectados pelas linhas de comando" ></p> | |
| </div> | |
| <h3 class="tutorial">Inserindo um Código-fonte<a name="insert"></a></h3> | |
| <ol> | |
| <li>Na vista Fluxo, clique com o botão direito do mouse em <tt>itemCommand</tt> do componente <tt>form</tt> e escolha Ir para o código-fonte no menu pop-up.</li> | |
| <li>Insira o seguinte código antes do método <tt>switchDisplayable</tt> onde se lê <tt>// escreva aqui o código da preação</tt>: | |
| <pre class="examplecode"> | |
| if (textBox != null) { | |
| // Get position of the cursor in the table. | |
| int row = tableItem.getSelectedCellRow(); | |
| int column = tableItem.getSelectedCellColumn() ; | |
| // Get value from the table model | |
| Object value = simpleTableModel.getValue(column,row); | |
| // Set textBox string value | |
| if (value != null) | |
| textBox.setString(value.toString()); | |
| else | |
| textBox.setString(""); | |
| } </pre> | |
| </li> | |
| <li>Alterne para a vista Fluxo, clique com o botão direito do mouse em <tt>okCommand</tt> do componente </tt>textBox<tt> e escolha Ir para o código-fonte no menu suspenso.</li> | |
| <li>Insira o seguinte código antes do método <tt>switchDisplayable</tt> onde se lê <tt>// escreva aqui o código da preação</tt>: | |
| <pre class="examplecode"> | |
| int row = tableItem.getSelectedCellRow(); | |
| int column = tableItem.getSelectedCellColumn(); | |
| // Set new value to the table model | |
| simpleTableModel.setValue(column, row, textBox.getString()); | |
| // Repaint table model on the screen device | |
| simpleTableModel.fireTableModelChanged(); | |
| </pre></li> | |
| <li>Pressione Ctrl+S para salvar as edições.</li> | |
| </ol> | |
| <h3 class="tutorial">Executando o projeto<a name="run"></a></h3> | |
| <p>Pressione F6 para executar o projeto principal. Como alternativa, você pode selecionar <tt>Executar</tt> > <tt>Executar projeto principal</tt>.</p> | |
| </div> | |
| <p class="align-center"><a href="#top">início</a></p> | |
| <h2>Javadocs dos componentes tableItem e SimpleTableModel</h2> | |
| <P>O NetBeans IDE oferece Javadocs da API do componente <tt>tableItem</tt> ou <tt>TableItem</tt>, assim como outros componentes que você pode usar no VMD. Para ler os Javadocs do componente <tt>TableItem</tt> ou <tt>TableModel</tt>, complete as etapas abaixo:</P> | |
| <OL> | |
| <li>Coloque o cursor no componente <tt>TableItem</tt>ou </tt>TableModel<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/smscomposer/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>TableItem</tt> ou </tt>TableModel<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=VMD%20Custom%20Components:%20Using%20Table%20Items">Envie-nos seus comentários</a> </div><br style="clear:both;" > | |
| <h2><a name="nextsteps"></a>Veja 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="filebrowser.html">Componentes personalizados do Visual Mobile Designer: Criando um navegador de arquivos de dispositivos móveis</a></li> | |
| <li><a href="pimbrowser.html">Componentes personalizados do Visual Mobile Designer: Criando um aplicativo gerenciador de informações pessoais</a></li> | |
| <li><a href="loginscreen.html">Componentes personalizados do Visual Mobile Designer: Criando telas de logon móveis</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="splashscreen.html">Componentes padrão do Visual Mobile Designer: usando telas de splash em aplicativos Java ME</a></li> | |
| </ul> | |
| <p class="align-center"><a href="#top">início</a></p> | |
| </body> | |
| </html> |