Olá, o post de hoje mostra como trabalhar com tabelas no editor visual do NetBeans. Vamos demonstrar como criar e configurar uma tabela e depois como inserir dados nela.
No exemplo vamos criar um formulário para colher dados de um produto e depois inserir os dados digitados em uma tabela. Não trabalharemos com banco de dados, pois não é este o foco. Porém através deste exemplo você estará apto para povoar sua tabela a partir de dados persistidos no seu dispositivo móvel.
Primeiramente crie um novo projeto Java ME > Aplicativo Móvel. Chame-o de “WorkingWithTables”, ou como preferir. E desmarque a opção “Criar MIDlet Olá”.
Criado seu projeto, crie um MIDlet visual no pacote de códigos-fonte e chame-o de “TableMIDlet”. O MIDlet deve ser visual para poder trabalhar com os recursos gráficos do NetBeans. O item utilizado para criar a tabela é customizado pelo NetBeans, através do pacote org.netbeans.microedition.lcdui.TableItem, o que impede que seja utilizado em uma aplicação feita sem a utilização do MIDlet Visual.
Na área que mostra o fluxo do projeto, crie um novo formulário, clicando com o direito ou através da paleta (exibida à direita), na aba de exibições.
Neste Formulário você deve colocar 3 campos de texto: “Product:”, “Description:” e “Number Of Itens”. Também insira um comando do tipo ok, com o rótulo “Salvar” e um comando do tipo exit, com o rótulo “Sair”.
No Fluxo arraste uma seta do estado iniciado, contido no “dispositivo móvel”, até o form que acabamos de criar. E arraste uma seta do comando exit até o dispositivo móvel.
Crie um novo form para exibir a tabela. Na Paleta à direita, vá a aba Itens e arraste o componente Ítem de Tabela ao form. De um clique duplo sobre o componente inserido no form. Uma tela será aberta, nela você vai adicionar um modelo de tabela clicando no botão “Adicionar” e à direita você pode adicionar quantas linhas e colunas desejar. No nosso exemplo vamos inserir 3 colunas e 8 linhas. Marque a opção “Utilizar cabeçalho” e preencha com “Product”, “Description” e “Number Of Itens”, como mostra a figura abaixo:
Adicione um comando ok, com o rótulo “Novo” e um comando exit, com o rótulo “Sair”.
No fluxo, arraste uma seta partindo do okCommand, pertencente ao primeiro form, até o segundo form, aqui chamado de form1. No segundo form, arraste uma seta partindo do okCommand1 até o primeiro form. Arraste também uma seta do exitCommand1 até o dispositivo móvel. Veja na figura como fica o nosso fluxo.
Temos a parte visual toda pronta. Se você quiser já pode executar o projeto para ver como está. Uma dica é trocar o dispositivo padrão do emulador para melhor visualização.
Para trocá-lo vá nas propriedades do projeto, em plataforma e mude o campo dispositivo. O dispositivo utilizado no exemplo é o DefaultFXTouchPhone1.
Agora vamos a lógica. Quando o usuário selecionar o comando salvar (okCommand do primeiro form) devemos capturar os campos digitados, inseri-los na tabela criada e mostrá-la no segundo form. Portanto vamos inserir a lógica na parte do código referente a este comando. Você pode clicar com o direito no okCommand e selecionar “Ir para o código fonte”
O código é mostrado abaixo:
if (command == okCommand) {
/* Captura os dados digitados no campos de texto e armazena nas respectivas variáveis */
String product = getTextField().getString();
String description = getTextField1().getString();
String NumberOfItens = getTextField2().getString();
switchDisplayable(null, getForm1());
// Insere os dados de entrada na tabela
tableModel1.setValue(column,row,product);
tableModel1.setValue(++column,row,description);
tableModel1.setValue(++column,row,NumberOfItens);
row++;
column=0;
// Redesenha o modelo de tabela no dispositivo de tela
tableModel1.fireTableModelChanged();
}
tableModel1 se refere a tabela que criamos. A função setValue insere uma informação na coluna e linha desejada. Seus parametros são: coluna, linha e conteúdo que deseja inserir.
No início do MIDlet foi declarada as variáveis column e row, para representar a coluna e linha desejada e estas foram inicializadas com o valor zero. A cada inserção incrementamos o valor da coluna. Quando todos os dados foram inseridos incrementamos o valor da linha e zeramos novamente a coluna para a próxima inserção.
Vamos agora inserir a lógica do comando “novo”. Portanto vá ao local onde está o código fonte referente a ação do okCommand1 e insira o código abaixo:
if (command == okCommand1) {
getTextField().setString("");
getTextField1().setString("");
getTextField2().setString("");
switchDisplayable(null, getForm());
}
Este código serve apenas para limpar os campos, permitindo a entrada de novos dados.
A aplicação está pronta, veja nas figuras como a aplicação se comporta.
O projeto completo está disponível
aqui para download.
