Criando uma IU SVG ativada por toque para dispositivos Java ME
Este tutorial mostra como desenvolver IUs ricas para dispositivos de tela por toque com base no Java ME usando widgets IU SVG. O rápido crescimento do número de dispositivos de tela por toque com base no Java ME, como o Samsung Omnia e Instinct, Nokia 5800 Xpress Music ou Blackberry Storm, torna esta leitura essencial para qualquer desenvolvedor sério de aplicativo móvel. O aplicativo criado neste tutorial funciona na maioria dos dispositivos que suportam a API SVG para o J2ME (JSR226), já que os dispositivos de tela por toque também oferecem suporte a ricos widgets de UI SVG.
Nota: se estiver utilizando o NetBeans IDE 6.8, consulte o tutorial Criando uma IU SVG ativada por toque para dispositivos Java ME no NetBeans IDE 6.8.
Conteúdo
Requisitos
Para concluir este tutorial, você precisa dos seguintes recursos e softwares:
Para assegurar que os recursos Java ME estejam habilitados, recomendamos executar uma instalação personalizada e desmarcar o componente Recursos sob demanda durante a instalação do IDE.
Configurando o ambiente do projeto
Além do software requerido listado acima, você deveria ter o seguinte instalado em seu computador:
- O arquivo
ContactBrowser.zip deveria ser descompactado na sua pasta de projetos NetBeans.
- O plug-in dos fragmentos SVG deveria ser baixado e instalado no NetBeans:
- No IDE, vá para Ferramentas > Plug-ins. Clique na aba Download e clique em Adicionar plug-in.
- Vá até a pasta local que contém o arquivo svg-snippets.nbm, selecione o arquivo e clique em Instalar.
- Clique em Instalar e o IDE o guiará através da instalação do plug-in. Após o plug-in ser instalado, é preciso reiniciar o IDE.
- Após reiniciar o IDE, vá para Ferramentas > Opções. Clique em Diversos na janela da caixa de diálogo Opções e, a seguir, clique na aba SVG.
- Na seção Fragmentos de componentes SVG ricos abra o menu suspenso Fragmentos e escolha Fragmentos SVG J1 HOL. Clique em OK.
início
Criando a IU no SVG Composer
Construiremos uma IU de aplicativo básico com base em SVG. Apesar do aplicativo ser bem simples, ele mostrará como criar um novo aplicativo JavaME, como importar imagens SVG do SVG Composer para um MIDlet visual, e como executar o projeto em um emulador de dispositivo MIDP.
Informações básicas
SVG: o JSR-226 especifica a API para a renderização de gráficos de vetor bidimensionais em XML. Ao invés de codificar o conteúdo de cada pixel, como os formatos GIF e JPG, os gráficos de vetor contêm somente as instruções de desenho para cada pixel. Isso oferece diversas vantagens às imagens de vetor:
- São dimensionáveis, portanto, a qualidade da imagem permanece a mesma em diferentes tamanhos e resoluções. Também é possível alongar, inverter ou reverter uma imagem sem perder a qualidade.
- Oferecem suporte a scripts e animações, portanto, são ideais para gráficos interativos conduzidos por dados.
- São compactas. As imagens com base em vetores podem ser até dez vezes menores do que uma imagem idêntica no formato GIF ou JPEG. Esta importante vantagem torna possível criar aplicativos graficamente ricos para dispositivos portáteis com recursos limitados.
- Também permitem que os usuários possam interagir com o conteúdo da imagem.
- São pesquisáveis, permitindo que os usuários pesquisem por texto dentro da imagem. Por exemplo, os usuários podem pesquisar um mapa para encontrar nomes de ruas específicos ou pesquisar uma lista de menus de restaurantes para encontrar seu prato favorito.
Um subconjunto SVG com recursos completos destinado a dispositivos móveis é denominado SVG-Tiny e o JSR-226 adota a versão 1.1 do perfil SVG-Tiny como o formato de arquivo oficial para gráficos de vetores J2ME.
Introdução aos widgets SVG e suas funções
A criação de interfaces de usuário fica mais fácil ao usar o SVG Composer e os Componentes de IU no formato SVG ricos no NetBeans.
Visão geral dos fragmentos de IU SVG disponíveis na paleta do SVG Composer:
- Lista SVG - Permite ao desenvolvedor criar uma lista de elementos da IU necessários para a IU.
- Botão SVG - Nos fragmentos SVG, permite ao usuário selecionar o sexo.
- Caixa de combinação SVG - Componente da IU para menus de lista suspensa.
- Texto SVG - Um campo no qual é possível exibir textos como nomes de pessoas, IDs de produto, etc.
- Botão SVG - Os botões são usados para funções de Avançar, Voltar, OK e outras funções da IU.
- Girador SVG - Permite o usuário navegar através de uma variável usando o botão Acima ou Abaixo.
- Deslizador SVG - Permite ao usuário ajustar um recurso de variável. Por exemplo, de claro para escuro ou 0-100%.
- Legenda SVG - Permite que o usuário legende um campo de texto ou outro componente da IU.
Isso foi somente uma introdução rápida aos componentes de IU SVG ricos. Para obter mais detalhes, consulte a página wiki do Visual Mobile Designer do NetBeans.
Etapas para criar a IU SVG
Para iniciar rapidamente vamos começar por abrir o projeto ContactBrowser preparado que usaremos como base para criar o projeto.
- Abra o projeto Java ME ContactBrowser preparado no NetBeans IDE.
Visão geral do projeto ContactBrowser
- Abra a imagem
employeeList.svg no SVG Composer e arraste e solte dois botões SVG e um Componente de formulário de lista SVG na tela Visualizar da paleta, como ilustrado abaixo. Mais adiante neste tutorial, renomearemos os botões.
Abaixo está o formulário completo com os seguintes componentes adicionados:
- Na janela Visualizar, clique no texto no botão OK no canto superior esquerdo e arraste-o para esquerda, conforme ilustrado na captura de tela abaixo. Isso permitirá que a palavra "Selecionar" seja corretamente exibida no botão da IU.
- Nossa IU SVG precisa de um arquivo SVG adicional,
employeeForm.svg, portanto, novamente abrimos o arquivo e adicionamos botões, campos de texto, legendas e botões da paleta na imagem no SVG Composer e renomeamos os mesmos para criar a IU. Quando terminada, deveria ser semelhante à imagem abaixo.
- Componentes adicionados
- 3 x botões
- 4 x legendas
- 2 x campos de texto
- 1 x botão
- 1 x girador
- Na janela Visualizar, clique no texto do botão OK no canto inferior esquerdo e arraste-o para esquerda, como ilustrado na captura de tela abaixo. Isso permitirá que a palavra "Voltar" seja corretamente exibida no botão da IU.
- Na visualização Propriedades, altere a propriedade Texto de cada botão OK no canto inferior esquerdo e arraste-o para esquerda, como ilustrado na captura de tela abaixo. Isso permitirá que a palavra "Voltar" seja corretamente exibida no botão da IU.
Criando um MIDlet no Visual Mobile Designer
O framework de componentes IU SVG ricos é dividido em duas partes:
- Os fragmentos SVG são usados para construir a IU no SVG Composer ou em outro editor SVG.
- As bibliotecas Java ME que suportam a funcionalidade de IU
Já examinamos o SVG Composer e fragmentos, portanto, nosso próximo passo é o de examinar as bibliotecas de tempo de execução no Visual Mobile Designer, que permitem mesclar as imagens SVG com a lógica do aplicativo no código-fonte Java ME.
- Para criar um novo Visual MIDlet selecione Arquivo > Novo arquivo e, a seguir, na caixa de diálogo Novo arquivo, em Categorias, escolha MIDP e, em Tipos de arquivos, escolha Visual MIDlet. O novo arquivo deveria ser parte do pacote org.netbeans.lab.ui.svg.
- Dentro do MIDlet recém-criado alterne para a visualização Fluxo. Encontre a seção Componentes SVG da paleta e então arraste e solte os componentes de Formulário SVG para a tela de desenho da visualização Fluxo, e use o menu contextual exibido ao clicar com o botão direito do mouse para renomeá-los como
employeeList e employeeForm.
- A próxima etapa é a de conectar as imagens SVG ao código-fonte. Para conectar os componentes da IU SVG ao código-fonte, basta arrastar e soltar o arquivo
employeeList.svg da janela Projeto para o componente employeeList e repetir esta ação para o employeeForm.svg arrastando-o para o employeeForm.
- Agora temos que alterar a instância do
svgButtons para que coincidam com as ações que eles executam. Observe que isto não altera o botão IU. Faremos isso mais tarde. Para alterar o nome da instância do svgButtons, clique com o botão direito do mouse no botão e selecione renomear a partir do menu contextual. Digite o nome da ação que deseja para a instância do svgButtons no campo Novo nome da caixa de diálogo Renomear nome da instância.
Nota: certifique-se de que o novo nome corresponda à função do botão IU ao alterar os nomes de instâncias de componentes da IU.
- Na próxima etapa alteraremos as legendas SVG padrão dos botões e campos de texto para que correspondam com as informações exibidas pelo aplicativo ContactBrowser. Para isso, alterne para a visualização Tela e exiba
employeeForm. A seguir, selecione o item Legenda na visualização Tela e edite as propriedades de texto de cada legenda e botão para que se pareçam com a captura de tela abaixo.
- Também precisamos alterar o nome da instância dos campos de texto SVG. Clique com o botão direito do mouse em Nome e escolha Renomear a partir do menu contextual e altere o nome para
svgTextFieldFirstName. Repita esta etapa para o campo Sobrenome e renomeie-o como svgTextFieldLastName.
- Agora no menu suspenso da janela do projeto IDE, alterne de employeeForm para employeeList e renomeie os botões conforme ilustrado na captura de tela abaixo. Você verá as alterações no campo texto da janela Propriedades.
início
Usando o Visual Mobile Designer para criar o fluxo do aplicativo
Agora estamos prontos para criar o fluxo do aplicativo usando a visualização Fluxo do Visual Mobile Designer.
- Alterne da visualização Tela para Fluxo no IDE.
- Conecte os componentes conforme ilustrado abaixo. Comece por clicar em Iniciado no elemento Dispositivo móvel e arraste o mouse para o elemento employeeList. Repita este método para fazer as conexões dos outros componentes.
Na visualização Código-fonte você poderá ver o mecanismo que vincula os fragmentos do Componente da IU SVG XML com as bibliotecas de tempo de execução do Java ME. No exemplo abaixo você pode ver como os fragmentos do Botão SVG são vinculados com objetos Java ME. O Componente SVG é reconhecido com base na ID do fragmento XML que, neste exemplo, é button_0.
Executando o aplicativo
Antes de adicionar a lógica do aplicativo, devemos testar a IU Contact Browser no emulador.
No menu, escolha Executar projeto principal (F6) e, após o emulador ser iniciado, você poderá ver e testar sua IU. Nós ainda não implementamos a lógica do aplicativo, mas você pode verificar se a IU é exibida como esperado com base no trabalho feito no Visual Mobile Designer.
início
Adicionando a lógica do aplicativo à interface de usuário SVG
Agora podemos usar o Visual Mobile Designer para criar a lógica do aplicativo para a IU que criamos na etapa anterior. Usaremos alguns componentes e métodos adicionais e finalizaremos ao executar o aplicativo no emulador Java ME SDK 3.0.
Informações básicas
- SVG ListModel: define os componentes do método como o que o SVGList usa para obter o valor de cada célula em uma lista e para calcular o número de células necessárias para o exibir. Logicamente, o modelo é um vetor. Os índices variam de 0 a ListDataModel.getSize() - 1. Qualquer alteração no conteúdo do comprimento dos dados precisa ser reportada para todos os SVGListDataListeners. Se já estiver familiarizado com o modelo JList do Swing, o SVGListModel deveria ser fácil de ser entendido.
- Componente do ponto de entrada: o componente do ponto de entrada nos permite representar um método em uma classe projetada. Este método contém o código especificado por uma ação atribuída a ele, o pino "Entrada chamada". Este método é muito útil quando for necessário executar o código ao alternar entre telas do aplicativo ou, em nosso caso, para mostrar a lógica do SVGButton na visualização Fluxo de um Visual Midlet.
Criando um modelo SVGList personalizado
Nesta etapa criaremos nossa própria implementação do SVGListModel. Nossa implementação do SVGListModel é uma classe anônima dentro do método getSvgList.
- Use o Navegador (Ctrl+7 se já não estiver exibido) para encontrar o elemento
getSvgList dentro do elemento employeeList ao clicar com o botão direito do mouse e escolher Ir para o código-fonte a partir do menu contextual.
- Adicione o seguinte código dentro do método
getSVGList após svgList = new SVGList(getEmployeeList(), "list_0");:
//Creating and adding new SVGListModel as anonymous class. Implementation of ListModel
svgList.setModel(new SVGList.ListModel() {
//Getting contact data as Vector from class EmployeeData
Vector data = EmployeeData.getData();
/**
* Method returns combination of strings: First Name + Last Name
* @return Employee name as String
*/
public Object getElementAt(int index) {
//Getting First Name String
String firstName = ((Employee) data.elementAt(index)).getFirstName();
//Getting Last Name String
String lastName = ((Employee) data.elementAt(index)).getLastName();
return firstName + " " + lastName;
}
/**
* Number of employees
* @return number of employees
*/
public int getSize() {
return data.size();
}
//not used
public void addDataListener(DataListener listener) { }
//not used
public void removeDataListener(DataListener listener) { }
});
Nota: é possível utilizar o recurso autocompletar de código no IDE e digitar o código.
Lógica dos botões Avançar e Voltar
Nesta etapa adicionaremos a lógica aos SVGButtons que fazem parte do employeeForm. Estes botões permitem que os usuários do aplicativo naveguem através dos dados do funcionário. Ao clicar em Avançar, o usuário pode ir para o próximo Contato do funcionário. Ao pressionar o botão Voltar, o usuário deverá ver o registro do funcionário anterior. Nesta etapa usaremos o elemento Ponto de entrada, anteriormente descrito.
- Alterne para a visualização Fluxo e adicione dois componentes Ponto de entrada da categoria Fluxo da paleta. Clique com o botão direito do mouse nos componentes e os renomeie como nextMethod e previousMethod, como ilustrado abaixo.
- Agora temos que adicionar um índice de propriedade de inteiro privado global ao Visual MIDlet. Vamos alternar para a visualização Código-fonte e adicionar o seguinte no bloco protegido Campos gerados:
private int index = 0;
- Agora precisamos adicionar a lógica para atualizar a IU no
employeeForm. O método usado aqui atualiza os elementos da IU SVG no componente employeeForm. No editor de código-fonte, no fim da classe, adicione o seguinte método:
Nota: é possível utilizar o recurso autocompletar de código do IDE para introduzir o código.
//**Method is responsible for populating employee UI form with information about employees.
private void updateEmployeeFormUI() {
//Getting currently selected employee
final Employee employee = (Employee) EmployeeData.getData().elementAt(index);
//Setting First Name
getSvgTextFieldFirstName().setText(employee.getFirstName());
//Setting Last Name
getSvgTextFieldLastName().setText(employee.getLastName());
//Setting Gender
if (employee.getGender()) {
getSvgRadioButton().setSelected(false);
getSvgRadioButton1().setSelected(true);
} else {
getSvgRadioButton().setSelected(true);
getSvgRadioButton1().setSelected(false);
}
//Setting age
getSvgSpinner().getModel().setValue(new Integer(employee.getAge()));
}
Agora podemos começar a adicionar a lógica a nextMethod e previousMethod.
- Alterne para a visualização Fluxo e clique com o botão direito do mouse no Ponto de entrada
nextMethod e escolha a opção Ir para o código-fonte no menu pop-up.
- No editor de código-fonte, adicione o código seguinte ao método nextMethod() antes de switchDisplayable(null, getEmployeeForm().getSvgCanvas());. Este código exibe o próximo registro na fila dos registros de dados de funcionários. Ele também chama a IU para atualizar as informações exibidas.
// Move to the next Employee record
if (index < EmployeeData.getData().size() - 1) {
//Update index.
index++;
}
//Update UI - employee form
updateEmployeeFormUI();
//Go back to employeeForm
- Alterne para a visualização Fluxo e clique com o botão direito do mouse no Ponto de entrada
previousMethod e escolha a opção Ir para o código-fonte no menu pop-up.
No editor de código-fonte, adicione o código seguinte ao método previousMethod() antes de switchDisplayable(null, getEmployeeForm().getSvgCanvas()); para permitir que a funcionalidade de navegação funcione.
// Move to the previous Employee record
if (index > 0) {
//Update index
index--;
}
//Update UI
updateEmployeeFormUI();
//Go back to employeeForm
A seguir, precisamos garantir que a IU será atualizada quando employeeForm e o índice global definido com base em uma seleção forem feitos na lista de funcionários.
- Alterne para a visualização Fluxo e clique com o botão direito do mouse no botão select do
employeeList e escolha a opção Ir para o código-fonte no menu pop-up.
- No editor de código-fonte, adicione o código seguinte ao método
getSelect() depois de public void actionPerformed(SVGComponent svgComponent) {.
//Updating global index
index = getSvgList().getSelectionModel().getSelectedIndex();
//Updating UI after selection has been made
updateEmployeeFormUI();
//Switching to the employeeForm
início
Testando o aplicativo em um emulador de dispositivo de tela por toque
Estamos prontos para testar nosso aplicativo no emulador de dispositivo DefaultFxTouchPhone1 do Java ME SDK 3.0 que vem com o instalador do NetBeans IDE. Para poder iniciar o aplicativo, precisamos editar as propriedades do projeto.
- Clique com o botão direito do mouse no nó do projeto e escolha Propriedades no menu contextual. Na caixa de diálogo Projeto, em Categoria, escolha Plataforma e, a seguir, escolha Java Platform Micro Edition SDK 3.0 no menu suspenso Plataforma do emulador.
- Para uma emulação de dispositivo de tela por toque, selecione DefaultFxTouchPhone1 no menu suspenso Dispositivo, como ilustrado abaixo, e clique em OK.
- Vá a Executar > Executar projeto (F6) e o aplicativo será iniciado no emulador. É possível verificar se as propriedades da tela de toque estão ativadas colocando o ponteiro do mouse sobre os componentes SVG. O cursor do mouse pode ser movido pela tela para navegar nos menus do aplicativo como um usuário faria com a ponta dos dedos.
- No emulador, podemos executar alguns testes básicos da IU, como o uso do botão Voltar ou Avançar, para verificar se os elementos da IU estão funcionando corretamente.
Resumo
Neste tutorial, você aprendeu como criar uma tela de toque com base em SVG ativada para IU para dispositivos Java ME utilizando o NetBeans IDE.
início
Consulte também
início
