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 IU SVG.

Conteúdo

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

Requisitos

Para concluir este tutorial, você precisa dos 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 7
Exemplo Contact Browser Projeto NetBeans
Fragmentos de IU SVG Plug-in NetBeans

Para assegurar-se de que os recursos Java ME estejam habilitados, recomendamos executar uma instalação personalizada e desmarcar 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:
    1. No IDE, vá para Ferramentas > Plug-ins. Clique na aba Download e clique em Adicionar plug-in.
    2. 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.

    Caixa de diálogo de opções

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.

Fragmentos de IU SVG disponíveis na paleta do SVG Composer

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.

  1. Abra o projeto Java ME ContactBrowser preparado no NetBeans IDE.

    Visão geral do projeto ContactBrowser

  2. 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. Renomearemos os botões no tutorial posteriormente.

    Abaixo está o formulário completo com os seguintes componentes adicionados:

    • 2 x botões
    • 1 x lista

    Formulário com dois botões e uma lista

  3. Na janela Visualizar, clique no botão OK do texto 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.

    Formulário com dois botões e uma lista

  4. 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

    Componentes SVG adicionados

  5. 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.

    Texto no botão OK arrastado para a esquerda

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.

  1. Para criar um novo MIDlet visual, selecione Arquivo > Novo arquivo e a seguir, na caixa de diálogo Novo arquivo, em Categorias, selecione MIDP e em Tipos de arquivos escolha Visual MIDlet. O novo arquivo deve ser parte do pacote org.netbeans.lab.ui.svg.

    Caixa de diálogo Novo Arquivo

  2. Dentro do MIDlet recém-criado alterne para a visualização Fluxo. Encontre a seção Componentes SVG da paleta e, a seguir, arraste e solte os componentes do 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 employeeForm e employeeList.

    Dois formulários SVG adicionados

  3. 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 ao arrastá-lo para o employeeForm.

    Componentes UI SVG conectados ao código-fonte

  4. 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.

    Dica: 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.

    Nomes das instâncias do svgButtons alterados

  5. 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.

    Propriedades do texto para os rótulos e botões alteradas

  6. 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 renomei-o como svgTextFieldLastName.
  7. 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.

    Propriedade do texto dos botões alterada

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.

  1. Alterne da visualização Tela para Fluxo no IDE.
  2. 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.

    Fluxo de aplicativo criado

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.

  1. 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.
  2. Dentro do método getSVGList adicione o seguinte código após svgList = new SVGList(getEmployeeList(), "list_0");:
    		    //Criando e adicionando novo SVListModel com classe anônima. 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: Você pode usar o recurso de conclusão de código no IDE e digitar você mesmo 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.

  1. 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 renomeie-os como nextMethod e previousMethod como ilustrado abaixo:

    Fluxo de SVGButtons criado

  2. 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;
  3. 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:

    Observação: você pode usar o recurso de conclusão de código no IDE para inserir o código.

    	        //**O método é responsável pelo preenchimento do formulário da UI de funcionários com informações dos funcionários.
                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 ao nextMethod e ao previousMethod.

  4. Alterne para a visualização Fluxo, clique com o botão direito do mouse no Ponto de entrada nextMethod e escolha a opção Ir para o código-fonte a partir do menu suspenso.
  5. No editor de código-fonte, adicione o código seguinte ao métodonextMethod() 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
    		
  6. Alterne para a visualização Fluxo, clique com o botão direito do mouse no Ponto de entrada previousMethod e escolha a opção Ir para o código-fonte a partir do menu suspenso.
  7. No editor de código-fonte, adicione o código seguinte ao método previousMethod() antes de switchDisplayable(null, getEmployeeForm().getSvgCanvas()); para habilitar a funcionalidade de navegação de dados ao trabalho.
    // 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.

  8. Alterne para a visualização Fluxo e clique com o botão direito do mouse no botão selecionar em employeeList e escolha a opção Ir para o código-fonte a partir do menu contextual.
  9. 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 Java ME SDK 3.0 DefaultFxTouchPhone1 que vem embutido no instalador do NetBeans IDE. Para poder iniciar o aplicativo , precisamos editar as Propriedades do projeto.

  1. 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.
  2. Para uma emulação de dispositivo de tela por toque, selecione DefaultFxTouchPhone1 no menu suspenso Dispositivo e CLDC-1.1 como Dispositivo de configuração como ilustrado abaixo e clique em OK.

    Dispositivo e plataforma do emulador selecionados

  3. Acesse Executar > Executar projeto e o aplicativo será iniciado no emulador. É possível verificar se as propriedades da tela sensível ao toque estão ativadas colocando o ponteiro do mouse sobre os componentes SVG. É possível mover cursor do mouse pela tela para navegar pelos menus do aplicativo como um usuário faria com o a ponta do dedo.
  4. 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.

    Aplicativo executado no emulador

Resumo

Neste tutorial, você aprenderá como criar uma IU habilitada para tela sensível ao toque com base em SVG para dispositivos JavaME usando o NetBeans IDE.

início


Consulte 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