Componentes personalizados do Visual Mobile Designer: Usando itens de tabela em aplicativos Java ME

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.

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.

Se você é novo no desenvolvimento de aplicativos móveis no NetBeans, deveria começar pelo Guia de início rápido do NetBeans Java ME MIDP antes de continuar.

Conteúdo

O conteúdo desta página se aplica ao NetBeans IDE 6.9 ou posterior

Para concluir este tutorial, são necessários os seguintes recursos e softwares:

Software ou recurso Versão necessária
NetBeans IDE com Java ME Versão 6.9 ou posterior
Java Development Kit (JDK) Versão 6 ou versão 7

Introdução: Como funciona o componente TableItem

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.

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 Guia da paleta do Visual Mobile Designer.

Instalando e executando o aplicativo de amostra

Antes de começar, talvez você queira ver o resultado final do tutorial. Siga as etapas a seguir para instalar o aplicativo de amostra TableItemExample:

  1. Download do arquivo TableItemExample.zip.
  2. Descompacte o arquivo.
  3. No IDE, selecione Arquivo > Abrir projetoe navegue até a pasta que contém os arquivos descompactados.
  4. Abra a janela Projetos. Ela deve ser parecida com o seguinte:

    Janela Projeto com o exemplo do Item de tabela

  5. 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.
  6. Na janela Emulador, clique no botão abaixo de "Iniciar." O emulador exibe uma tabela, conforme mostrado:

    O emulador DefaultColorPhone exibindo a amostra do aplicativo de tabela

  7. Edite a tabela:
    • Mova o cursor de uma célula a outra usando as setas direcionais do botão Selecionar.
    • Clique no botão abaixo de "Editar célula" para editar o conteúdo de uma célula.
  8. Clique no botão abaixo de "Sair" para fechar o aplicativo.

início

Criando uma tabela com um componente Item de tabela personalizado

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:

  1. Crie o projeto MyTableExample
  2. Adicionar pacotes e um MIDlet visual ao projeto MyTableExample
  3. Adicionar os componentes a MyTableMIDlet
  4. Edite o projeto SimpleTableModel
  5. Adicione comandos aos componentes Formulário e Caixa de texto
  6. Conecte os componentes para criar um fluxo de aplicativo
  7. Inserindo um Código-fonte
  8. Executar o projeto

Criando o projeto MyTableExample

  1. Escolha Arquivo > Novo projeto (Ctrl-Shift-N). Em Categorias, selecione Java ME. Em Projetos, selecione Aplicativo móvel e clique em Próximo.
  2. Indique MyTableExample 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 $PROJECTHOME.
  3. Desmarque a caixa de verificação Criar Hello MIDlet. Clique em Próximo.
  4. Selecione o Java Platform Micro Edition SDK 3.0 como a plataforma do emulador. Clique em Terminar.

Adicionando pacotes e um MIDlet visual ao projeto MyTableExample

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

Adicione os componentes a MyTableItemMidlet

  1. Alterne seu MIDlet visual para a visualização Fluxo. Arraste os componentes Tela seguintes da paleta e solte-os no Designer de fluxo:
    • Formulário
    • Caixa de texto
  2. Selecione textBox e altere o título do componente para Editar na janela Propriedades.
  3. Clique duas vezes no componente form na janela Fluxo para alterar para a visualização da Tela.
  4. Arraste componente Table Item na seção Itens do formulário da Paleta e solte-o no form. O componente Table Item tem a seguinte aparência quando é adicionado ao Screen Designer:

    Mostra o Designer de tela com o Item de tabela na tela do dispositivo

  5. Clique em tableItem e, na janela Propriedades, digite TableItem Example no valor da propriedade Rótulo.
  6. No navegador, clique com o botão direito do mouse no componente tableItem e escolha Propriedades no menu pop-up.
  7. Clique na seta (Seta) na propriedade Table Model e selecione <New SimpleTableModel> na lista suspensa.
  8. Clique em Fechar.
    O componente simpleTableModel é adicionado aos Recursos.

    simpleTableModel adicionado

Editando Modelo de tabela simples

  1. Na visualização Tela, dê dois clique no componente <No table model specified> para abrir a caixa de diálogo Valores.
  2. Na caixa de diálogo Valores, selecione a opção Usar Cabeçalho.
  3. Clique nos botões Adicionar Linha e Adicionar Coluna quatro vezes respectivamente para modificar o número de linhas e colunas para 4.
  4. Renomeie os cabeçalhos da tabela para coluna 1, coluna 2, coluna 3 e coluna 4.

    Modelo de tabela

  5. Clique em OK para terminar.

    Modelo de tabela simples atribuído para o componente TableItem

Adicionando comandos aos componentes Formulário e Caixa de texto

  1. Abrir a visualização de fluxo.
  2. Escolha o comando Sair na seção comandos da Paleta do componente. Arraste e solte no componente form. Repita esta ação para o Item Comando.
  3. Escolha itemCommand na visualização da tela. Na janela Propriedades, altere o valor da propriedade Rótulo para Editar célula.
  4. Na visualização de fluxo, escolha o comando OK na seção Comandos da Paleta do componente e arraste-o e solte no componente texBox.

    Exibe a visualização de fluxo com os comandos adicionados

Conectando componentes

Na visualização Fluxo, clique em Started no Dispositivo móvel e arraste-o para o componente form. Da mesma forma, conecte os componentes como mostrado no gráfico seguinte.

Mostra a janela Fluxo com componentes conectados pelas linhas de comando

Inserindo um Código-fonte

  1. Na vista Fluxo, clique com o botão direito do mouse em itemCommand do componente form e escolha Ir para o código-fonte no menu pop-up.
  2. Insira o seguinte código antes do método switchDisplayable onde se lê // escreva aqui o código da preação:
     	                                    
                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("");
            } 
  3. Alterne para a vista Fluxo, clique com o botão direito do mouse em okCommand do componente textBox e escolha Ir para o código-fonte no menu suspenso.
  4. Insira o seguinte código antes do método switchDisplayable onde se lê // escreva aqui o código da preação:
    	            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();  
    	  
  5. Pressione Ctrl+S para salvar as edições.

Executando o projeto

Pressione F6 para executar o projeto principal. Como alternativa, você pode selecionar Executar > Executar projeto principal.

início

Javadocs dos componentes tableItem e SimpleTableModel

O NetBeans IDE oferece Javadocs da API do componente tableItem ou TableItem, assim como outros componentes que você pode usar no VMD. Para ler os Javadocs do componente TableItem ou TableModel, complete as etapas abaixo:

  1. Coloque o cursor no componente TableItemou TableModel no código-fonte e pressione Ctr-Shift-Espaço (ou selecione Código-fonte > Exibir documentação).
    O Javadoc deste elemento é exibido em uma janela pop-up.
  2. Clique em Exibir documentação no ícone de navegador da Web externo (Exibir documentação no navegador da Web externo) na janela pop-up para obter informações detalhadas sobre o componente TableItem ou TableModel em seu navegador.

início


Veja também

início

get support for the NetBeans

Support


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2013, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo