

Olá indiada.. vocês já ouviram falar de imagens SVG?
Bem, para quem ouviu tá tranquilo, para quem não conheçe sugiro que estude sobre este novo formato de imagem vetorial 2D. Isso porque foi criada uma API para Java ME que trata destas imagens, permitindo a você criar interfaces mais amigáveis e com uma qualidade gráfica bem maior. Para conferir isto rode os exemplos SVGContactList e SVGDemo que vem junto com o Sun Java Wireless Toolkit 2.5 for CLDC. É impressionante. As imagens ao lado são do SVGDemo, porém, é mais indicado vâ-los no emulador, eles são animados.
Bem, eu pretendia criar um artigo explicando a Scalable 2D Vector Graphics API (JSR 226), porém, por falta de tempo e capacidade, hehe, não consegui. Vou mostrar apenas alguns detalhes que captei no uso desta API no pouco tempo que estou trabalhando com a API, sempre lembrando que novas informações são bem vindas aqui. Como meu conhecimento sobre imagens gráficas, edição de cenários e todas estas questões estéticas são apenas razoáveis, transcrevo a descrição do Wikipédia sobre o formato SVG:
SVG é a abreviatura de Scalable Vectorial Graphics que pode ser traduzido do inglês como gráficos vectoriais escaláveis. Trata-se de uma linguagem XML para descrever de forma vectorial desenhos e gráficos bidimensionais, quer de forma estática, quer dinâmica ou animada.
Lendo textos sobre SVG posso citar algumas características como:
* Este tipo de imagem é mais compacto que outros conhecidos.
* Elas são escaláveis, além de suportar ações de rotação, translação e flip sem perda de qualidade.
* Permitem que o usuário interaja com a imagem.
* Podemos procurar textos dentro do XML que forma o arquivo SVG.
* O SVG é um formato aberto
A apresentação “Building Portable and Scalable Mobile Applications Using JSR 226” de Suresh Chitturi e Michael Ingrassia do Nokia Rresearch Center traz um pequeno exemple de um arquivo SVG:

Como dito anteriormente, para o leitor ter uma percepção maior da capacidade das imagens SVG em aplicativos móveis e consequentemente, da utlidade da JSR 226, peço mais uma vez que olhem os exemplos que vem junto com a última versão do Sun Wireless Toolkit. Bem, para criar um programa que faça uso de todo este poderio ofensivo, hehe, eu fui apresentado a um ótimo artigo que mostra como fazer isso no NetBeans 5.5 com o Mobility Pack, seu título é “Adding and Editing Scalable Vector Graphic (SVG) Files in the Mobility Pack” e pode ser encontrado aqui. Aliás, o NetBeans me surpreendeu por ter suporte a leitura das imagens SVG, ou seja, eu posso simular sua animação de forma nativa na IDE, além de buscar pontos específicos da animação, mas para saber de tudo isso peço que visite o link do artigo citado anteriormente.
Bem, até aqui tá tudo bonitinho, mas depois de ler este artigo recebi uma animação SVG e teria que fazer a imagem executar certos movimentos gráficos através de ações do usuário. Na apresentação de Suresh e Michael (citada anteriormente) apresentava o seguinte exemplo de código para animação de imagens SVG:
SVGAnimationElement brickDrop;
brickDrop = (SVGAnimationElement)(doc.getElementById(“b01”));
brickDrop.beginElementAt(0);
Olhando o SVG que tinha em mãos reparei o seguinte trecho de código:
< animateTransform attributeName="transform" type="translate" id=”entra_mapas” begin=”menuItem_esc.activate” from=”-163,199″ to=”-1,-1″dur=”0.25s” fill=”freeze”/ >
Então adaptei o código para isto:
Document doc = get_svgImage3().getDocument();
SVGAnimationElement anim = (SVGAnimationElement)(doc.getElementById(”entra_mapas”));
anim.beginElementAt(0);
E não é que funcionou \o/. Porém me deparei com um problema, as animações acontecerias com o acionamento das teclas direcionais do dispositivo, como LEFT e RIGHT. Reparei que a classe SVGMenu, disponível na IDE NetBeans 5.5, herda da classe Canvas. Depois de quebrar a cabeça por alguns minutos descobri a nossa classe deve herdar de SVGElementListener, como segue:
public class VisualMidlet extends MIDlet implements CommandListener, SVGEventListener{
Para que a nossa MIDlet (ou a classe que esteja usando a JSR 226) registre este listener, use o trecho de código abaixo. A primeira linha é o template do método, a última linha é como eu redigi em minha aplicação, levando em conta que o método get_svgMenu1() retorna o SVGMenu que foi criado pelo NetBeans.
.setSVGEventListener(SVGEventListener);
get_svgMenu1().setSVGEventListener(this);
Depois disso é só usar o método keyPressed como se estivéssemos tratando de uma classe Canvas:
public void keyPressed(int i) {
switch (get_svgMenu1().getSvgCanvas().getGameAction(i))
{
case Canvas.UP:
…
case Canvas.LEFT:
…
…
Bem, era isso pessoal, para um maior entendimento da API sugiro que analisem os códigos criados pelo NetBeans, é útil e dá uma visão maior da JSR 226.
Página oficial do SVG. Clique aqui.
Att.
Ricardo S. Ogliari
Ping