| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | |
| <!-- | |
| Copyright (c) 2009, 2010, Oracle and/or its affiliates. All rights reserved. | |
| --> | |
| <html> | |
| <head> | |
| <title>Tutorial para criar uma IU SVG ativada por toque para dispositivos Java ME - NetBeans IDE</title> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > | |
| <link rel="stylesheet" type="text/css" href="../../../netbeans.css"> | |
| <meta name="Karol Harezlak" content=""> | |
| </head> | |
| <body> | |
| <a name="top"></a> | |
| <h1>Criando uma IU SVG ativada por toque para dispositivos Java ME</h1> | |
| <p>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 (<a href="http://jcp.org/en/jsr/summary?id=226">JSR226</a>), já que os dispositivos de tela por toque também oferecem suporte a ricos widgets IU SVG.</p> | |
| <!--<p class="notes"><b>Observação:</b> se você estiver usando o NetBeans IDE 6.8, consulte o tutorial <a href="../../68/javame/svgtouch.html">Criando uma IU SVG habilitada para toque para dispositivos 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="#reqs" title="Requisitos do Tutorial">Requisitos do Tutorial</a></li> | |
| <li><a href="#setup" title="Configurando o ambiente do projeto">Configurando o ambiente do projeto</a></li> | |
| <li><a href="#svgcomp" title="Criando a IU no SVG Composer">Criando a IU no SVG Composer</a> | |
| <ul> | |
| <li><a href="#backinfo" title="Informações básicas">Informações básicas</a></li> | |
| <li><a href="#svgintro" title="Introdução aos widgets SVG e suas funções">Introdução aos widgets SVG e suas funções</a></li> | |
| <li><a href="#svgui" title="Etapas para criar a IU SVG">Etapas para criar a IU SVG</a></li> | |
| <li><a href="#createmidlet" title="Criando um MIDlet no Visual Mobile Designer">Criando um MIDlet no Visual Mobile Designer</a></li> | |
| </ul></li> | |
| <li><a href="#vmdflow" title="Usando o Visual Mobile Designer para criar um fluxo do aplicativo">Usando o Visual Mobile Designer para criar um fluxo do aplicativo</a></li> | |
| <li><a href="#applogic" title="Adicionando a lógica do aplicativo na IU">Adicionando a lógica do aplicativo na IU</a> | |
| <ul> | |
| <li><a href="#background" title="Informações básicas">Informações básicas</a></li> | |
| <li><a href="#creatingsvg" title="Criando um modelo SVGList personalizado">Criando um modelo SVGList personalizado</a></li> | |
| <li><a href="#nextprevious" title="Lógica dos botões Avançar e Voltar">Lógica dos botões Avançar e Voltar</a></li> | |
| </ul></li> | |
| <li><a href="#uitest" title="Testando o aplicativo em um emulador de dispositivo de tela por toque">Testando o aplicativo em um emulador de dispositivo de tela por toque</a></li> | |
| <li><a href="#summary" title="Resumo">Resumo</a></li> | |
| <li><a href="#see-also">Consulte também</a></li> | |
| </ul> | |
| <h2><a name="reqs"></a>Requisitos</h2> | |
| <p><b>Para concluir este tutorial, você precisa dos 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 7 </td> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1"><a href="https://netbeans.org/projects/samples/downloads/download/Samples/Mobile/ContactBrowserExample.zip">Exemplo Contact Browser</a></td> | |
| <td class="tbltd1">Projeto NetBeans</td> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1"><a href="https://netbeans.org/projects/www/downloads/download/mobility%252Forg-netbeans-modules-mobility-svg-snippets.nbm">Fragmentos de IU SVG</a></td> | |
| <td class="tbltd1">Plug-in NetBeans</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <p class="notes">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.</p> | |
| <h2><a name="setup"></a>Configurando o ambiente do projeto</h2> | |
| <p> Além do software requerido listado acima, você deveria ter o seguinte instalado em seu computador:</p> | |
| <ul> | |
| <li>O arquivo <code>ContactBrowser.zip</code> deveria ser descompactado na sua pasta de projetos NetBeans.</li> | |
| <li>O plug-in dos fragmentos SVG deveria ser baixado e instalado no NetBeans: | |
| <ol> | |
| <li>No IDE, vá para Ferramentas > Plug-ins. Clique na aba Download e clique em Adicionar plug-in.</li> | |
| <li>Vá até a pasta local que contém o arquivo <tt>svg-snippets.nbm</tt>, selecione o arquivo e clique em Instalar.</li> | |
| </ol></li> | |
| <li>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. </li> | |
| <li>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.</li> | |
| <li>Na seção Fragmentos de componentes SVG ricos abra o menu suspenso Fragmentos e escolha <strong>Fragmentos SVG J1 HOL</strong>. Clique em OK. | |
| <p class="align-center"><a href="../../../images_www/articles/71/mobility/svgtouch/ex0_3.png" rel="lytebox" | |
| title="Caixa de diálogo de opções"> <img src="../../../images_www/articles/71/mobility/svgtouch/ex0_3-small.png" | |
| alt="Caixa de diálogo de opções" border=1></a></p> | |
| </li> | |
| </ul> | |
| <p class="align-center"><a href="#top">início</a></p> | |
| <h2><a name="svgcomp"></a>Criando a IU no SVG Composer</h2> | |
| <p> 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.</p> | |
| <a name="backinfo"></a> | |
| <h3>Informações básicas</h3> | |
| <p><strong>SVG:</strong> 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: </p> | |
| <ul> | |
| <li>São <strong>dimensionáveis</strong>, 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.</li> | |
| <li>Oferecem suporte a <strong>scripts e animações, </strong>portanto, são ideais para gráficos interativos conduzidos por dados.</li> | |
| <li>São<strong> compactas</strong>. 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. </li> | |
| <li>Também permitem que os usuários <strong>possam interagir</strong> com o conteúdo da imagem.</li> | |
| <li>São <strong>pesquisáveis</strong>, 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.</li> | |
| </ul> | |
| <p>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. | |
| </p> | |
| <a name="svgintro"></a> | |
| <h3>Introdução aos widgets SVG e suas funções</h3> | |
| <p>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. </p> | |
| <p>Visão geral dos fragmentos de IU SVG disponíveis na paleta do SVG Composer:</p> | |
| <ul> | |
| <li>Lista SVG - Permite ao desenvolvedor criar uma lista de elementos da IU necessários para a IU.</li> | |
| <li>Botão SVG - Nos fragmentos SVG, permite ao usuário selecionar o sexo.</li> | |
| <li>Caixa de combinação SVG - Componente da IU para menus de lista suspensa. </li> | |
| <li>Texto SVG - Um campo no qual é possível exibir textos como nomes de pessoas, IDs de produto etc. </li> | |
| <li>Botão SVG - Os botões são usados para funções de Avançar, Voltar, OK e outras funções da IU.</li> | |
| <li>Girador SVG - Permite o usuário navegar através de uma variável usando o botão Acima ou Abaixo.</li> | |
| <li>Deslizador SVG - Permite ao usuário ajustar um recurso de variável. Por exemplo, de claro para escuro ou 0-100%.</li> | |
| <li>Legenda SVG - Permite que o usuário legende um campo de texto ou outro componente da IU.</li> | |
| </ul> | |
| <p class="align-center"> <a href="../../../images_www/articles/71/mobility/svgtouch/ex1_2.png" rel="lytebox" | |
| title="Fragmentos de IU SVG disponíveis na paleta do SVG Composer"> <img src="../../../images_www/articles/71/mobility/svgtouch/ex1_2-small.png" | |
| alt="Fragmentos de IU SVG disponíveis na paleta do SVG Composer" border=1></a></p> | |
| <p>Isso foi somente uma introdução rápida aos componentes de IU SVG ricos. Para obter mais detalhes, consulte a página <a href="http://wiki.netbeans.org/MobilityDesignerRichComponents">wiki do Visual Mobile Designer do NetBeans</a>.</p> | |
| <a name="svgui"></a> | |
| <h3>Etapas para criar a IU SVG</h3> | |
| <p> Para iniciar rapidamente vamos começar por abrir o projeto ContactBrowser preparado que usaremos como base para criar o projeto. </p> | |
| <ol> | |
| <li>Abra o projeto Java ME ContactBrowser preparado no NetBeans IDE. | |
| <p>Visão geral do projeto ContactBrowser</p> | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/svgtouch/ex2_2.png"></p></li> | |
| <li>Abra a imagem <code>employeeList.svg</code> 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. | |
| <p>Abaixo está o formulário completo com os seguintes componentes adicionados:</p> | |
| <ul> | |
| <li>2 x botões</li> | |
| <li>1 x lista</li> | |
| </ul> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex2_3.png" rel="lytebox" | |
| title="Formulário com dois botões e uma lista"> <img src="../../../images_www/articles/71/mobility/svgtouch/ex2_3-small.png" | |
| alt="Formulário com dois botões e uma lista" border=1></a> | |
| </p></li> | |
| <li>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. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex2_4b.png" rel="lytebox" | |
| title="Formulário com dois botões e uma lista"> <img src="../../../images_www/articles/71/mobility/svgtouch/ex2_4b-small.png" | |
| alt="Formulário com dois botões e uma lista" border=1></a></p></li> | |
| <li>Nossa IU SVG precisa de um arquivo SVG adicional, <code>employeeForm.svg</code>, 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. | |
| <ul> | |
| <li>Componentes adicionados | |
| <ul> | |
| <li>3 x botões</li> | |
| <li>4 x legendas</li> | |
| <li>2 x campos de texto</li> | |
| <li>1 x botão</li> | |
| <li>1 x girador</li> | |
| </ul></li> | |
| </ul> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex2_4.png" rel="lytebox" | |
| title="Componentes SVG adicionados"> <img src="../../../images_www/articles/71/mobility/svgtouch/ex2_4-small.png" | |
| alt="Componentes SVG adicionados" border=1></a> | |
| </p></li> | |
| <li>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. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex2_4a.png" rel="lytebox" | |
| title="Texto no botão OK arrastado para a esquerda"> <img src="../../../images_www/articles/71/mobility/svgtouch/ex2_4a-small.png" | |
| alt="Texto no botão OK arrastado para a esquerda" border=1></a> | |
| </p></li> | |
| </ol> | |
| <a name="createmidlet"></a> | |
| <h3>Criando um MIDlet no Visual Mobile Designer</h3> | |
| <p>O framework de componentes IU SVG ricos é dividido em duas partes:</p> | |
| <ul> | |
| <li>Os fragmentos SVG são usados para construir a IU no SVG Composer ou em outro editor SVG.</li> | |
| <li>As bibliotecas Java ME que suportam a funcionalidade de IU</li> | |
| </ul> | |
| <p>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.</p> | |
| <ol> | |
| <li>Para criar um novo MIDlet visual, selecione <tt>Arquivo</tt> > <tt>Novo arquivo</tt> 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 <tt>org.netbeans.lab.ui.svg</tt>. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex2_5.png" rel="lytebox" | |
| title="Caixa de diálogo Novo Arquivo"> <img src="../../../images_www/articles/71/mobility/svgtouch/ex2_5-small.png" | |
| alt="Caixa de diálogo Novo Arquivo" border=1></a> | |
| </p> | |
| </li> | |
| <li>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 <code>employeeForm</code> e </code>employeeList<code>. | |
| <p class="align-center"><a href="../../../images_www/articles/71/mobility/svgtouch/ex2_6.png" rel="lytebox" | |
| title="Dois formulários SVG adicionados"> <img src="../../../images_www/articles/71/mobility/svgtouch/ex2_6-small.png" | |
| alt="Dois formulários SVG adicionados" border=1></a></p> | |
| </li> | |
| <li>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 <code>employeeList.svg</code> da janela Projeto para o componente </code>employeeList<code> e repetir esta ação para o </code>employeeForm.svg<code> ao arrastá-lo para o <code>employeeForm</code>. | |
| <p class="align-center"><a href="../../../images_www/articles/71/mobility/svgtouch/ex2_8.png" rel="lytebox" | |
| title="Componentes UI SVG conectados ao código-fonte"> <img src="../../../images_www/articles/71/mobility/svgtouch/ex2_8-small.png" | |
| alt="Componentes UI SVG conectados ao código-fonte" border=1></a></p> | |
| </li> | |
| <li>Agora temos que alterar a instância do <code>svgButtons</code> 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 <code>svgButtons</code>, 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 <code>svgButtons</code> no campo Novo nome da caixa de diálogo Renomear nome da instância. | |
| <p class="notes"><b>Dica</b>: 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.</p> | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex2_9.png" rel="lytebox" | |
| title="Nomes das instâncias do svgButtons alterados"> <img src="../../../images_www/articles/71/mobility/svgtouch/ex2_9-small.png" | |
| alt="Nomes das instâncias do svgButtons alterados" border=1></a> | |
| </p> | |
| </li> | |
| <li>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 <strong>ContactBrowser</strong>. Para isso, alterne para a visualização Tela e exiba <code>employeeForm</code>. 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. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex2_11.png" rel="lytebox" | |
| title="Propriedades do texto para os rótulos e botões alteradas"> <img src="../../../images_www/articles/71/mobility/svgtouch/ex2_11-small.png" | |
| alt="Propriedades do texto para os rótulos e botões alteradas" border=1></a> | |
| </p> </li> | |
| <li>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 <code>svgTextFieldFirstName</code>. Repita esta etapa para o campo Sobrenome e renomei-o como <code>svgTextFieldLastName</code>.</li> | |
| <li>Agora no menu suspenso da janela do projeto IDE, alterne de <strong>employeeForm</strong> para <strong>employeeList</strong> e renomeie os botões conforme ilustrado na captura de tela abaixo. Você verá as alterações no campo texto da janela Propriedades. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex2_11a.png" rel="lytebox" | |
| title="Propriedade do texto dos botões alterada"> <img src="../../../images_www/articles/71/mobility/svgtouch/ex2_11a-small.png" | |
| alt="Propriedade do texto dos botões alterada" border=1></a> | |
| </p> </li> | |
| </ol> | |
| <p class="align-center"><a href="#top">início</a></p> | |
| <h2><a name="vmdflow"></a>Usando o Visual Mobile Designer para criar o fluxo do aplicativo</h2> | |
| <p>Agora estamos prontos para criar o fluxo do aplicativo usando a visualização Fluxo do Visual Mobile Designer. </p> | |
| <ol> | |
| <li>Alterne da visualização Tela para Fluxo no IDE.</li> | |
| <li>Conecte os componentes conforme ilustrado abaixo. Comece por clicar em Iniciado no elemento <strong>Dispositivo móvel</strong> e arraste o mouse para o elemento <strong>employeeList</strong>. Repita este método para fazer as conexões dos outros componentes. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex2_12.png" rel="lytebox" | |
| title="Fluxo de aplicativo criado"> <img src="../../../images_www/articles/71/mobility/svgtouch/ex2_12-small.png" | |
| alt="Fluxo de aplicativo criado" border=1></a> | |
| </p> | |
| </li> | |
| </ol> | |
| <p>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, é <code>button_0</code>.</p> | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/svgtouch/ex2_14.png"></p> | |
| <h3>Executando o aplicativo</h3> | |
| <p>Antes de adicionar a lógica do aplicativo, devemos testar a IU Contact Browser no emulador.</p> | |
| <p>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.</p> | |
| <p class="align-center"><a href="#top">início</a></p> | |
| <h2><a name="applogic"></a>Adicionando a lógica do aplicativo à interface de usuário SVG</h2> | |
| <p>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.</p> | |
| <a name="background"></a> | |
| <h3>Informações básicas</h3> | |
| <ul> | |
| <li><strong>SVG ListModel</strong>: 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 <tt>0</tt> a <tt>ListDataModel.getSize() - 1</tt>. 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.</li> | |
| <li><strong>Componente do ponto de entrada</strong>: 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.</li> | |
| </ul> | |
| <a name="creatingsvg"></a> | |
| <h3>Criando um modelo SVGList personalizado</h3> | |
| <p> Nesta etapa criaremos nossa própria implementação do SVGListModel. Nossa implementação do SVGListModel é uma classe anônima dentro do método <code>getSvgList</code>.</p> | |
| <ol> | |
| <li> Use o Navegador (Ctrl+7 se já não estiver exibido) para encontrar o elemento <code>getSvgList</code> dentro do elemento <code>employeeList</code> ao clicar com o botão direito do mouse e escolher Ir para o código-fonte a partir do menu contextual.</li> | |
| <li>Dentro do método <code>getSVGList</code> adicione o seguinte código após <code>svgList = new SVGList(getEmployeeList(), "list_0");</code>:<br> | |
| <pre class="examplecode"> | |
| //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) { } | |
| });</pre></li> | |
| </ol> | |
| <p class="notes"><b>Nota:</b> Você pode usar o recurso de conclusão de código no IDE e digitar você mesmo o código.</p> | |
| <a name="nextprevious"></a> | |
| <h3>Lógica dos botões Avançar e Voltar</h3> | |
| <p>Nesta etapa adicionaremos a lógica aos SVGButtons que fazem parte do <code>employeeForm</code>. 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.</p> | |
| <ol> | |
| <li>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 </tt>nextMethod<tt> e <tt>previousMethod</tt> como ilustrado abaixo: | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex3_1.png" rel="lytebox" | |
| title="Fluxo de SVGButtons criado"> <img src="../../../images_www/articles/71/mobility/svgtouch/ex3_1-small.png" | |
| alt="Fluxo de SVGButtons criado" border=1></a> | |
| </p> | |
| </li> | |
| <li> 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:<br> | |
| <pre class="examplecode">private int index = 0;</pre></li> | |
| <li>Agora precisamos adicionar a lógica para atualizar a IU no <code>employeeForm</code>. O método usado aqui atualiza os elementos da IU SVG no componente <code>employeeForm</code>. No editor de código-fonte, no fim da classe, adicione o seguinte método: | |
| <p class="notes"><b>Observação:</b> você pode usar o recurso de conclusão de código no IDE para inserir o código.</p> | |
| <pre class="examplecode"> | |
| //**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())); | |
| } | |
| </pre> | |
| <p>Agora podemos começar a adicionar a lógica ao <tt>nextMethod</tt> e ao <tt>previousMethod</tt>.</p></li> | |
| <li>Alterne para a visualização Fluxo, clique com o botão direito do mouse no Ponto de entrada <code>nextMethod</code> e escolha a opção Ir para o código-fonte a partir do menu suspenso.</li> | |
| <li>No editor de código-fonte, adicione o código seguinte ao método<tt>nextMethod()</tt> antes de <tt>switchDisplayable(null, getEmployeeForm().getSvgCanvas());</tt>. 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.<br> | |
| <pre class="examplecode">// Move to the next Employee record | |
| if (index < EmployeeData.getData().size() - 1) { | |
| //Update index. | |
| index++; | |
| } | |
| //Update UI - employee form | |
| updateEmployeeFormUI(); | |
| //Go back to employeeForm | |
| </pre></li> | |
| <li>Alterne para a visualização Fluxo, clique com o botão direito do mouse no Ponto de entrada <code>previousMethod</code> e escolha a opção Ir para o código-fonte a partir do menu suspenso.</li> | |
| <li>No editor de código-fonte, adicione o código seguinte ao método <tt>previousMethod()</tt> antes de <tt>switchDisplayable(null, getEmployeeForm().getSvgCanvas());</tt> para habilitar a funcionalidade de navegação de dados ao trabalho.<br> | |
| <pre class="examplecode">// Move to the previous Employee record | |
| if (index > 0) { | |
| //Update index | |
| index--; | |
| } | |
| //Update UI | |
| updateEmployeeFormUI(); | |
| //Go back to employeeForm | |
| </pre> | |
| <p>A seguir, precisamos garantir que a IU será atualizada quando <code>employeeForm</code> e o índice global definido com base em uma seleção forem feitos na lista de funcionários.</p></li> | |
| <li>Alterne para a visualização Fluxo e clique com o botão direito do mouse no botão <tt>selecionar</tt> em <code>employeeList</code> e escolha a opção Ir para o código-fonte a partir do menu contextual.</li> | |
| <li>No editor de código-fonte, adicione o código seguinte ao método <code>getSelect()</code> depois de <tt>public void actionPerformed(SVGComponent svgComponent) {</tt>:<br> | |
| <pre class="examplecode"> //Updating global index | |
| index = getSvgList().getSelectionModel().getSelectedIndex(); | |
| //Updating UI after selection has been made | |
| updateEmployeeFormUI(); | |
| //Switching to the employeeForm</pre></li> | |
| </ol> | |
| <p class="align-center"><a href="#top">início</a></p> | |
| <h2><a name="uitest"></a>Testando o aplicativo em um emulador de dispositivo de tela por toque</h2> | |
| <p>Estamos prontos para testar nosso aplicativo no Java ME SDK 3.0 <strong>DefaultFxTouchPhone1</strong> que vem embutido no instalador do NetBeans IDE. Para poder iniciar o aplicativo , precisamos editar as Propriedades do projeto.</p> | |
| <ol> | |
| <li>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.</li> | |
| <li>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. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex4_4.png" rel="lytebox" | |
| title="Dispositivo e plataforma do emulador selecionados"> <img src="../../../images_www/articles/71/mobility/svgtouch/ex4_4-small.png" | |
| alt="Dispositivo e plataforma do emulador selecionados" border=1></a> | |
| </p> | |
| </li> | |
| <li>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.</li> | |
| <li>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. | |
| <p class="align-center"> | |
| <a href="../../../images_www/articles/71/mobility/svgtouch/ex4_5.png" rel="lytebox" | |
| title="Aplicativo executado no emulador"> <img src="../../../images_www/articles/71/mobility/svgtouch/ex4_5-small.png" | |
| alt="Aplicativo executado no emulador" border=1></a> | |
| </p> </li> | |
| </ol> | |
| <h2>Resumo<a name="summary"></a></h2> | |
| <p> 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.</p> | |
| <p class="align-center"><a href="#top">início</a></p> | |
| <div class="feedback-box"><a href="/about/contact_form.html?to=6&subject=Creating%20a%20Touch%20Enabled%20SVG%20UI%20for%20Java%20ME%20Devices">Envie-nos seus comentários</a></div> | |
| <br style="clear:both;" > | |
| <a name="see-also"></a> | |
| <h2>Consulte também</h2> | |
| <ul> | |
| <li><a href="http://wiki.netbeans.org/MobilityDesignerRichComponents">Referência de componentes de IU SVG ricos</a></li> | |
| <li><a href="http://blogs.sun.com/kharezlak/entry/playing_with_svg_components_in">Aplicativo IU SVG rico</a></li> | |
| <li><a href="http://wiki.netbeans.org/MobilitySVGComponents">Usando componentes de IU SVG ricos</a></li> | |
| <li><a href="http://wiki.netbeans.org/VisualMobileDesignerPalatteReference">Referência: Guia da paleta do Visual Mobile Designer</a></li> | |
| <li><a href="../../../kb/trails/mobility.html">Trilha do aprendizado dos aplicativos Java ME no NetBeans</a></li> | |
| </ul> | |
| <p class="align-center"><a href="#top">início</a></p> | |
| </body> | |
| </HTML> |